.dark #header-wrap,
.block-slider-2.slider-element {
    background-color: #310344;
}

/* The theme's own script measures the real header height on load and
   corrects .header-wrap-clone's height to match it, which is what
   causes the ~8px "jump" right after the page finishes loading (clone
   starts at the theme's generic 101px default, then gets resized down
   to this header's actual 93px). Matching the CSS default to the real
   height up front makes that JS correction a no-op, so there's
   nothing left to visibly shift. */
@media (min-width: 992px) {
    .header-wrap-clone {
        height: 93px;
    }
}

.block-slider-2 .swiper-pagination {
    --color: #FFF;
    --gap: 10px;
    --line-width: 50px;
    display: flex;
    width: auto;
    justify-content: center;
    counter-reset: item;
    bottom: 24px !important;
    transform: translateX(-50%);
    align-items: center;
}

    .block-slider-2 .swiper-pagination,
    .block-slider-2 .swiper-pagination::before,
    .block-slider-2 .swiper-pagination::after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

        .block-slider-2 .swiper-pagination::before {
            content: "";
            width: var(--line-width, 50px);
            height: 1px;
            background-color: var(--color, #FFF);
        }

        .block-slider-2 .swiper-pagination span::before {
            content: "0" counter(item);
            counter-increment: item;
            font-weight: 700;
            color: var(--color, #FFF);
        }

        .block-slider-2 .swiper-pagination::after {
            content: attr(swiper-slides-total);
            left: calc(50% + var(--gap, 10px) + var(--line-width, 50px));
            font-weight: 700;
            color: var(--color, #FFF);
            opacity: 0.6;
        }

        .block-slider-2 .swiper-pagination span {
            position: absolute;
            left: calc(50% - var(--gap, 10px) - var(--line-width, 50px));
            width: auto;
            height: auto;
            margin: 0;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

            .block-slider-2 .swiper-pagination span:not(.swiper-pagination-bullet-active) {
                opacity: 0;
                -webkit-transform: translateY(-100%);
                -ms-transform: translateY(-100%);
                transform: translateY(-100%);
            }

            .block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
                -webkit-transform: translateY(100%);
                -ms-transform: translateY(100%);
                transform: translateY(100%);
            }

            .block-slider-2 .swiper-pagination span,
            .block-slider-2 .swiper-pagination span:hover,
            .block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active {
                background-color: transparent !important;
                border: 0;
            }

.header-misc-icon a {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    display: flex;
    width: auto;
    transition: transform .3s ease-out;
}

    .header-misc-icon a:hover {
        color: #f0a003;
        transform: translate(0, -5px);
    }

.hvr_move_top {
    transition: transform .3s ease-out;
}

    .hvr_move_top:hover {
        transform: translate(0, -5px);
    }


.header-misc-icon span {
    font-size: 0.8rem;
    display: flex;
    margin: 0 8px;
}

.swiper_wrapper {
    border-radius: 18px;
}

.mt-30px {
    margin-top: 30px;
}

.footer_tel {
    margin-top: 6px;
}

    .footer_tel a {
        color: #5a5555;
    }

        .footer_tel a:hover {
            color: #310344;
        }

.pb-10px {
    padding-bottom: 10px;
}

.day {
}

    .day .div_date {
        text-align: center;
        min-width: 100px;
        position: relative;
        border: solid 1px #ddd;
        border-radius: 8px;
    }

        .day .div_date p {
            margin: 0;
            font-size: 24px;
            line-height: 26px !important;
            font-weight: bold;
            color: #444;
        }

        .day .div_date small {
            display: flex;
            color: #7a7a7a;
            text-align: center;
            justify-content: center;
        }

        .day .div_date span {
            color: #444;
            font-size: 18px;
            line-height: 18px;
        }

        


    .day input.checkbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        cursor: pointer;
        z-index: 1;
    }

    .day .div_date div {
        position: relative;
        pointer-events: none;
        cursor: not-allowed;
        padding: 8px;
        background: #fff;
        z-index: 100;
        border: solid 1px #ddd;
        border-radius: 8px;
    }
    /*    .day .div_date:hover {
        border: solid 1px #310344;
        background-color: transparent !important;
        border: 0;
    }

.day .div_date:hover p, .day .div_date:hover span, .day .div_date:hover small {
        color: #310344;
}*/
    /*.time a {
    border: solid 1px #ddd;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    min-width: 100px;
    color: #444;
}

    .time a:hover {
        color: #310344;
        border: solid 1px #310344;
    }*/

.active2 {
    color: #310344 !important;
    border: solid 1px #310344 !important;
}

    .active2 p, .active2 span, .active2 small {
        color: #310344 !important;
    }

.fs-xs {
    font-size: 0.8rem;
}

.rounded-bottom-0 {
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.inner_title {
    border-radius: 10px 10px 0 0;
}

h4 {
    font-weight: 400;
}

.whatsapp {
    position: fixed;
    z-index: 10000;
    left: 20px;
    bottom: 20px;
    background: #009588;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 3px;
    text-align: center;
    -webkit-box-shadow: 10px 10px 50px -8px rgba(143,143,143,1);
    -moz-box-shadow: 10px 10px 50px -8px rgba(143,143,143,1);
    box-shadow: 10px 10px 50px -8px rgba(143,143,143,1);
}

    .whatsapp i {
        color: #fff;
        font-size: 29px;
    }




@media (min-width: 320px) {
    .swiper_wrapper {
        height: 114px;
        min-height: 114px !important;
    }

    .slider-element .video-wrap, .section .video-wrap, .swiper-slide .yt-bg-player, .section .yt-bg-player, .swiper-slide-bg {
        top: 0;
    }
}

@media (min-width: 1400px) {
    .slider-element .video-wrap, .section .video-wrap, .swiper-slide .yt-bg-player, .section .yt-bg-player, .swiper-slide-bg {
        top: 0px;
    }
}

@media (min-width: 768px) {
    .swiper_wrapper {
        height: 334px !important;
        min-height: 334px !important;
    }
}

@media (min-width: 1024px) {
    .swiper_wrapper {
      /* height: 605px !important;
        min-height: 570px !important;*/
    }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}
.w-100px {
    width: 100px;
}
/* ============================================
   QuantumCon 2026 — Dark Theme
   ============================================ */
body.stretched {
    background-color: #1a0a2b;
}

#wrapper.clearfix {
    background-color: #1a0a2b;
}

#slider.block-slider-2 {
    background: linear-gradient(180deg, #310344 0%, #310344 70%, #1a0a2b 70%, #1a0a2b 100%) !important;
}

#content {
    background: linear-gradient(180deg, #1a0a2b 0%, #2c1046 55%, #1a0a2b 100%);
    padding-top: 20px;
    padding-bottom: 50px;
}

    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
    #content p, #content span, #content label, #content div, #content b, #content small {
        color: #f3ecf9;
    }

    #content .text-primary {
        color: #ffc107 !important;
    }

    #content .bg-light {
        background-color: #3a1a56 !important;
        border: 1px solid rgba(255, 193, 7, 0.3);
        border-radius: 16px !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    }

    #content hr {
        opacity: 0.8;
        background-color: rgba(255, 193, 7, 0.3);
    }

    /* ---- Everything inside .day (the ticket day/quantity/price row) ---- */

    /* Row itself: no box of its own, just spacing between chips. */
    #content .day {
        background: transparent;
        gap: 10px;
    }

    /* Outer chip wrapper (holds the invisible checkbox overlay). */
    #content .day .div_date {
        border: solid 1px rgba(255, 193, 7, 0.35);
        background: transparent;
    }

    /* Inner chip: light-dark purple card (not white), with light text —
       including bare "KD"/"Nov" text nodes that would otherwise inherit
       whatever color they land on. */
    #content .day .div_date div {
        background: #1f0c33;
        color: #f6eeff;
        border: solid 1px rgba(255, 193, 7, 0.35);
    }

        #content .day .div_date p,
        #content .day .div_date small {
            color: #f6eeff;
        }

        #content .day .div_date span:not(.text-danger) {
            color: #f6eeff;
        }

        #content .day .div_date .text-danger {
            color: #ffd54f !important;
        }

    /* Selected chip: switch the dark theme's on-white active color
       (#310344) for gold, so a selected chip still reads against its
       now-dark background instead of going dark-on-dark. */
    #content .day .div_date.active2,
    #content .day .div_date.active2 p,
    #content .day .div_date.active2 span,
    #content .day .div_date.active2 small {
        color: #ffc107 !important;
        border-color: #ffc107 !important;
    }

    /* Selection checkbox overlay: tint its check to the gold accent. */
    #content .day input.checkbox {
        accent-color: #ffc107;
    }

    #content .qtytxt {
        color: #f6eeff;
    }

    /* Quantity stepper wrapper (-, qty, +): same light-dark chip as the
       date card above it, so the row reads as one connected piece. */
    #content .day .quantity {
        background: transparent;
    }

    #content .quantity .qty,
    #content .quantity .plus,
    #content .quantity .minus {
        color: #f6eeff !important;
        background-color: #1f0c33;
        border-color: rgba(255, 193, 7, 0.35);
    }

    /* The theme hardcodes .quantity { direction: ltr }, so minus is
       always the physically-leftmost segment and plus always the
       physically-rightmost one, in both languages — round the pill's
       true outer edges to match, the same way in English and Arabic. */
    #content .quantity .minus {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    #content .quantity .plus {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

        #content .quantity .plus:hover,
        #content .quantity .minus:hover {
            background-color: #ffc107;
            color: #2c1046 !important;
        }

    /* Price line under each quantity stepper ("10 KD"). */
    #content .day > div > .text-center.mb-2 {
        color: #f3ecf9;
    }

        #content .day > div > .text-center.mb-2 .text-primary {
            color: #ffc107 !important;
        }

    /* Subtotal row (spans the full width of .day). */
    #content .day .col-12.fw-bold {
        color: #f3ecf9;
    }

        #content .day .col-12.fw-bold .text-primary {
            color: #ffc107 !important;
        }

    #content .small {
        color: #d9c6ea !important;
    }

footer#footer {
    background-color: #12071f !important;
    color: #e8dcf2;
}

    footer#footer a {
        color: #e8dcf2;
    }

    footer#footer .footer_tel a {
        color: #e8dcf2 !important;
    }

        footer#footer .footer_tel a:hover {
            color: #ffc107 !important;
        }

.button,
input[type="submit"].button {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #1a0a2b !important;
    font-weight: 700;
}

    .button:hover,
    input[type="submit"].button:hover {
        background-color: #ffda6a !important;
        border-color: #ffda6a !important;
        color: #1a0a2b !important;
    }

/*css loading animation*/

.loader {
    margin: auto;
    border: 20px solid #EAF0F6;
    border-radius: 50%;
    border-top: 20px solid #800080;
    width: 200px;
    height: 200px;
    animation: spinner 4s linear infinite;
    
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*css loading animation*/
/* Checkout: keep browser autofill from turning the fields white */
#content .form-control:-webkit-autofill,
#content .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    box-shadow: 0 0 0 1000px #3a1a56 inset;
}

/* ===== Checkout: terms row + payment methods (Personal Info page) ===== */

/* Radios: gold accent, bigger tap target */
#content input[type="radio"] {
    accent-color: #ffc107;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* Terms row: checkbox at the start (right in RTL), next to the text */
#content .form-check:has(> #chkAgree) {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-left: 0;
}

#content .form-check > .form-check-label {
    margin-bottom: 0;
}

#content .form-check > #chkAgree {
    order: -1;
    float: none;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 !important;
    background-color: #3a1a56;
    border: 1px solid #824bb3;
    cursor: pointer;
}

    #content .form-check > #chkAgree:checked {
        background-color: #ffc107;
        border-color: #ffc107;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a0a2b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

/* Payment methods: every option becomes a card */
#content .col-md-10:has(> input[type="radio"]) {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem calc(var(--bs-gutter-x) * .5 + .9rem);
    margin-top: 0 !important;
    margin-bottom: .75rem;
}

    #content .col-md-10:has(> input[type="radio"])::before {
        content: "";
        position: absolute;
        inset: 0 calc(var(--bs-gutter-x) * .5);
        z-index: -1;
        background: #3a1a56;
        border: 1px solid #824bb3;
        border-radius: 10px;
        transition: border-color .2s, background-color .2s, box-shadow .2s;
    }

    #content .col-md-10:has(> input[type="radio"]):hover::before {
        border-color: #ffc107;
    }

#content .col-md-10:has(> input[type="radio"]:checked)::before {
    background: #240b39;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .25);
}

#content .col-md-10:has(> input[type="radio"]) > br {
    display: none;
}

/* Logos: consistent size and corner radius */
#content .col-md-10 > .label-text {
    display: flex;
    align-items: center;
    gap: .5rem;
}

#content .label-text img {
    padding: 0 !important;
    border-radius: 8px !important;
    width: auto !important;
}