/* =========================================================
   CO-OP & CODE — BOOK TRIAL
========================================================= */

:root {

    --booking-page-bg:
        #1d1e27;

    --booking-panel:
        rgba(2, 8, 19, 0.985);

    --booking-input:
        rgba(7, 14, 26, 0.98);

    --booking-white:
        #ffffff;

    --booking-text:
        #f4f7ff;

    --booking-muted:
        #9aa5b9;

    --booking-dim:
        #647087;

    --booking-cyan:
        #18dcff;

    --booking-cyan-soft:
        rgba(24, 220, 255, 0.28);

    --booking-pink:
        #ff2d96;

    --booking-pink-light:
        #ff58ae;

    --booking-pink-soft:
        rgba(255, 45, 150, 0.28);

}

.status-modal {
    display: none;
}

.status-modal.visible {
    display: flex;
}


/* =========================================================
   PAGE
========================================================= */

.booking-page {

    min-height:
        calc(100vh - 70px);

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    /* Header clearance */
    padding:
        3em 1rem 2rem;

    background:
        var(--booking-page-bg);

    transition: opacity 0.15s ease;

}

.booking-page-loading {
    visibility: hidden;
    opacity: 0;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.booking-container {

    width:
        min(1000px, 94vw);

    position:
        relative;

    padding:
        1.45rem 2.6rem 1.75rem;

    background:

        linear-gradient(145deg,
            rgba(3, 10, 22, 0.995),
            rgba(1, 6, 15, 0.985));

    border:
        1px solid rgba(24, 220, 255, 0.55);

    box-shadow:

        0 0 19px rgba(24, 220, 255, 0.08),

        inset 0 0 30px rgba(24, 220, 255, 0.018);

}


.booking-container::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        18%;

    width:
        64%;

    height:
        1px;

    background:

        linear-gradient(to right,
            transparent,
            var(--booking-cyan),
            transparent);

    box-shadow:

        0 0 9px rgba(24, 220, 255, 0.6);

}


/* =========================================================
   PAGE HEADING
========================================================= */

.booking-heading {

    text-align:
        center;

    margin-bottom:
        0.7rem;

}


.booking-heading h1{

    margin-bottom:
            0.9rem;
    

    color:
        var(--booking-white);

    font-size:
        clamp(1.35rem,
            3vw,
            1.85rem);

    font-weight:
        900;

    letter-spacing:
        0.18em;

    text-shadow:

        0 0 3px rgba(255, 255, 255, 0.95),

        /* 0 0 8px rgba(255, 45, 150, 0.92), */

        /* 0 0 17px rgba(255, 45, 150, 0.55); */

}


.booking-heading p {

    margin:
        0.35rem 0 0;

    color:
        var(--booking-muted);

    font-size:
        0.75rem;

    letter-spacing:
        0.05em;

}


.neon-heading {

    color:
        var(--booking-white);

    font-size:
        clamp(1.35rem,
            3vw,
            1.85rem);

    font-weight:
        900;

    letter-spacing:
        0.18em;

    text-shadow:

        0 0 3px rgba(255, 255, 255, 0.95),

        0 0 8px rgba(255, 45, 150, 0.92),

        0 0 17px rgba(255, 45, 150, 0.55);

}


/* =========================================================
   PROGRESS
========================================================= */

.booking-progress {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    margin:
        0.95rem auto 1.45rem;

}


.progress-step {

    min-width:
        65px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.35rem;

    color:
        var(--booking-dim);

}


.step-number {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255, 255, 255, 0.65);

    background:
        rgba(3, 9, 18, 0.92);

    border:
        1px solid rgba(24, 220, 255, 0.38);

    font-size:
        0.72rem;

    transition:
        0.2s ease;

}


.step-label {

    font-size:
        0.55rem;

    letter-spacing:
        0.15em;

}


.progress-line {

    width:
        105px;

    height:
        1px;

    margin:
        0 0.7rem 1.18rem;

    background:

        linear-gradient(to right,
            rgba(24, 220, 255, 0.12),
            rgba(24, 220, 255, 0.8),
            rgba(24, 220, 255, 0.12));

    box-shadow:

        0 0 5px rgba(24, 220, 255, 0.33);

}


.progress-step.active {

    color:
        var(--booking-pink);

}


.progress-step.active .step-number {

    color:
        var(--booking-white);

    border-color:
        var(--booking-pink);

    background:
        rgba(255, 45, 150, 0.055);

    box-shadow:

        0 0 11px rgba(255, 45, 150, 0.74),

        inset 0 0 8px rgba(255, 45, 150, 0.13);

}


.progress-step.completed {

    color:
        var(--booking-cyan);

}


.progress-step.completed .step-number {

    color:
        var(--booking-cyan);

    border-color:
        var(--booking-cyan);

    box-shadow:

        0 0 8px rgba(24, 220, 255, 0.3);

}


/* =========================================================
   STEPS
========================================================= */

.booking-step {

    display:
        none;

    animation:
        bookingStepIn 0.28s ease;

}


.booking-step.active {

    display:
        block;

}


@keyframes bookingStepIn {

    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   TYPOGRAPHY HIERARCHY
========================================================= */

.step-heading {

    margin-bottom:
        1rem;

}


.eyebrow {

    margin:
        0 0 0.4rem !important;

    color:
        var(--booking-pink) !important;

    font-size:
        0.56rem !important;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.step-heading h2,
.time-heading h3 {

    margin:
        0 0 0.35rem;

    color:
        var(--booking-white);

    font-size:
        1.06rem;

    font-weight:
        900;

    line-height:
        1.25;

    letter-spacing:
        0.045em;

}


.step-heading p,
.availability-status {

    color:
        var(--booking-muted);

    font-size:
        0.73rem;

    line-height:
        1.5;
    

}


/* =========================================================
   FORM
========================================================= */

.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.78rem 1rem;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.35rem;

}


.form-group.full-width {

    grid-column:
        1 / -1;

}


.form-group label {

    margin:
        0;

    color:
        rgba(235, 240, 249, 0.78);

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.optional {

    color:
        #707a8d;

    font-size:
        0.56rem;

    font-weight:
        500;

    text-transform:
        none;

}


/* =========================================================
   INPUTS
========================================================= */

.booking-container input:not([type="hidden"]),

.booking-container select,

.booking-container textarea {

    box-sizing:
        border-box;

    width:
        100%;

    margin:
        0;

    color:
        var(--booking-text);

    background:
        var(--booking-input);

    border:
        1px solid rgba(24, 220, 255, 0.34);

    border-radius:
        0;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        0.78rem;

    transition:
        0.2s ease;

}


.booking-container input:not([type="hidden"]),

.booking-container select {

    height:
        42px;

    padding:
        0 0.8rem;

}


.booking-container textarea {

    height:
        74px;

    min-height:
        74px;

    padding:
        0.7rem 0.8rem;

    resize:
        vertical;

}


.booking-container input:not([type="hidden"]):focus,

.booking-container select:focus,

.booking-container textarea:focus {

    border-color:
        var(--booking-cyan);

    background:
        rgba(3, 12, 24, 0.995);

    box-shadow:

        0 0 9px rgba(24, 220, 255, 0.42),

        inset 0 0 10px rgba(24, 220, 255, 0.04);

}


.booking-container input::placeholder,

.booking-container textarea::placeholder {

    color:
        rgba(184, 194, 211, 0.4);

}


.booking-container input[type="date"] {

    color-scheme:
        dark;

}


/* =========================================================
   ACTIONS
========================================================= */

.step-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        0.75rem;

    margin-top:
        1.2rem;

}


.step-actions.split {

    justify-content:
        space-between;

}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button {

    min-height:
        42px;

    padding:
        0 1.45rem;

    color:
        white;

    background:

        linear-gradient(135deg,
            #ff258e,
            #ff3ba2);

    border:
        1px solid var(--booking-pink-light);

    border-radius:
        0;

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    box-shadow:

        0 0 10px rgba(255, 45, 150, 0.55),

        0 0 22px rgba(255, 45, 150, 0.18);

    cursor:
        pointer;

}


.primary-button:disabled {

    opacity:
        0.34;

    cursor:
        not-allowed;

    box-shadow:
        none;

}


.secondary-button {

    min-height:
        42px;

    padding:
        0 1.2rem;

    color:
        var(--booking-cyan);

    background:
        transparent;

    border:
        1px solid rgba(24, 220, 255, 0.5);

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    cursor:
        pointer;

}


/* =========================================================
   SESSION GRID
========================================================= */

.session-options {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-auto-rows:
        165px;

    gap:
        1rem;

}


.booking-container .session-card {

    all:
        unset;

    box-sizing:
        border-box;

    position:
        relative;

    height:
        165px;

    display:
        grid;

    grid-template-columns:
        70px minmax(0, 1fr);

    align-items:
        center;

    gap:
        1.25rem;

    padding:
        1.25rem;

    cursor:
        pointer;

    color:
        white;

    background:

        linear-gradient(135deg,
            rgba(7, 15, 28, 0.985),
            rgba(4, 10, 21, 0.97));

    transition:
        0.2s ease;

}


/* Coding + Gaming full width, same height */

.booking-container .combined-card {

    grid-column:
        1 / -1;

    height:
        165px;

    grid-template-columns:
        200px minmax(0, 1fr);

}


/* =========================================================
   CODING + GAMING COLORS
========================================================= */

/* Coding + Gaming top cards = cyan */

.booking-container .coding-card,

.booking-container .gaming-card {

    border:
        1px solid rgba(24, 220, 255, 0.32);

}


.coding-card .session-icon,

.gaming-card .session-icon {

    color:
        var(--booking-cyan);

    border-color:
        rgba(24, 220, 255, 0.5);

}


.booking-container .coding-card:hover,

.booking-container .coding-card.selected,

.booking-container .gaming-card:hover,

.booking-container .gaming-card.selected {

    border-color:
        var(--booking-cyan);

    background:

        linear-gradient(135deg,
            rgba(5, 23, 36, 0.99),
            rgba(3, 11, 23, 0.98));

    box-shadow:

        0 0 16px rgba(24, 220, 255, 0.3),

        inset 0 0 18px rgba(24, 220, 255, 0.035);

}


/* Combined card = pink */

.booking-container .combined-card {

    border:
        1px solid rgba(255, 45, 150, 0.5);

    background:

        linear-gradient(135deg,
            rgba(17, 7, 22, 0.99),
            rgba(7, 10, 20, 0.98));

}


.booking-container .combined-card:hover,

.booking-container .combined-card.selected {

    border-color:
        var(--booking-pink);

    box-shadow:

        0 0 17px rgba(255, 45, 150, 0.3),

        inset 0 0 18px rgba(255, 45, 150, 0.04);

}


/* =========================================================
   SESSION ICONS
========================================================= */

.session-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(2, 8, 17, 0.84);

    border:
        1px solid rgba(24, 220, 255, 0.4);

    font-size:
        1.15rem;

}


.session-icon-group {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        0.55rem;

}


.session-icon-group .icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(2, 8, 17, 0.84);

    border:
        1px solid rgba(255, 45, 150, 0.42);

    color:
        var(--booking-pink);

    font-size:
        1rem;

}


/* Combined card icons all pink */

.combined-card .fa-code,

.combined-card .fa-handshake,

.combined-card .fa-gamepad {

    color:
        var(--booking-pink);

}


/* =========================================================
   SESSION TEXT
========================================================= */

.session-number {

    display:
        block;

    margin-bottom:
        0.15rem;

    color:
        #59657b;

    font-size:
        0.5rem;

    letter-spacing:
        0.16em;

}


.session-content h3 {

    margin:
        0 0 0.3rem;

    color:
        white;

    font-size:
        0.9rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;

}


.session-content p {

    margin:
        0;

    color:
        var(--booking-muted);

    font-size:
        0.68rem;

    line-height:
        1.5;

}


.session-badge {

    position:
        absolute;

    top:
        0.55rem;

    right:
        0.75rem;

    color:
        var(--booking-pink);

    font-size:
        0.46rem;

    font-weight:
        800;

    letter-spacing:
        0.16em;

}


/* =========================================================
   TIME
========================================================= */

.time-selection {

    display:
        none;

    margin-top:
        1.3rem;

    padding-top:
        1rem;

    border-top:
        1px solid rgba(24, 220, 255, 0.14);

}


.time-selection.visible {

    display:
        block;

}


.time-heading {

    margin-bottom:
        0.8rem;

}


/* =========================================================
   DATE CARDS
========================================================= */

.date-selector {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        0.55rem;

    margin-bottom:
        0.85rem;

}


.booking-container .date-card {

    all:
        unset;

    box-sizing:
        border-box;

    height:
        86px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap: 0.25rem;

    cursor:
        pointer;

    color:
        #7e899e;

    background:
        rgba(3, 9, 18, 0.9);

    border:
        1px solid rgba(24, 220, 255, 0.22);

}


.date-card span,

.date-card small {
    display: block;

    margin: 0;

    font-size:
        0.48rem;

    font-weight:
        700;
        
    line-height: 1;

    letter-spacing:
        0.1em;

}


.date-card strong {
    display: block;

    margin:
        0.15rem 0;

    color:
        white;

    font-size:
        1.05rem;
    
    line-height: 1;

}


.booking-container .date-card:hover,

.booking-container .date-card.selected {

    color:
        var(--booking-cyan);

    border-color:
        var(--booking-cyan);

    box-shadow:

        0 0 9px rgba(24, 220, 255, 0.26);

}


.booking-container .other-date-card strong {

    color:
        var(--booking-pink);

}


.booking-container .other-date-card:hover,

.booking-container .other-date-card.selected {

    color:
        var(--booking-pink);

    border-color:
        var(--booking-pink);

    box-shadow:

        0 0 10px rgba(255, 45, 150, 0.25);

}


/* =========================================================
   OTHER DATE
========================================================= */

.other-date-wrapper {

    max-width:
        280px;

    margin:
        0.2rem 0 0.85rem;

}


.other-date-wrapper[hidden] {

    display:
        none;

}


.other-date-wrapper label {

    display:
        block;

    margin-bottom:
        0.35rem;

    color:
        var(--booking-cyan);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


/* =========================================================
   TIME SLOTS
========================================================= */

.availability-status {

    min-height:
        1.1rem;

    margin-bottom:
        0.6rem;

}


.time-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        0.48rem;

}


.booking-container .time-slot {

    all:
        unset;

    box-sizing:
        border-box;

    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    color:
        #c8d0de;

    background:
        rgba(3, 9, 18, 0.9);

    border:
        1px solid rgba(24, 220, 255, 0.2);

    font-size:
        0.66rem;

}


.booking-container .time-slot:hover,

.booking-container .time-slot.selected {

    color:
        var(--booking-cyan);

    border-color:
        var(--booking-cyan);

    background:
        rgba(24, 220, 255, 0.05);

    box-shadow:

        0 0 8px rgba(24, 220, 255, 0.22);

}


/* =========================================================
   CONFIRMATION
========================================================= */

.confirmation-card {

    padding:
        1.25rem 1.45rem;

    background:

        linear-gradient(145deg,
            rgba(5, 12, 24, 0.97),
            rgba(3, 8, 17, 0.95));

    border:
        1px solid rgba(24, 220, 255, 0.36);

}


.confirmation-section {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

}


.confirmation-label {

    color:
        var(--booking-cyan);

    font-size:
        0.52rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

}


.confirmation-section strong {

    color:
        white;

    font-size:
        0.75rem;

    font-weight:
        800;

    text-align:
        right;

}


.confirmation-divider {

    height:
        1px;

    margin:
        0.78rem 0;

    background:

        linear-gradient(to right,
            transparent,
            rgba(24, 220, 255, 0.17),
            transparent);

}


/* =========================================================
   CONFIRMATION NOTE
========================================================= */

.confirmation-note {

    display:
        flex;

    align-items:
        center;

    gap:
        0.7rem;

    margin-top:
        0.8rem;

    padding:
        0.72rem 0.9rem;

    background:
        rgba(255, 45, 150, 0.025);

    border:
        1px solid rgba(255, 45, 150, 0.21);

}


.note-icon {

    color:
        var(--booking-pink);

}


.confirmation-note p {

    margin:
        0;

    color:
        var(--booking-muted);

    font-size:
        0.64rem;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 800px) {

    .booking-container {

        padding:
            1.2rem 1rem 1.4rem;

    }


    .date-selector {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .progress-line {

        width:
            55px;

    }

}


@media screen and (max-width: 650px) {

    .booking-page {

        padding:
            85px 0.55rem 1.5rem;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-group.full-width {

        grid-column:
            auto;

    }


    .session-options {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

    }


    .booking-container .session-card,

    .booking-container .combined-card {

        grid-column:
            auto;

        height:
            auto;

        min-height:
            150px;

    }


    .booking-container .combined-card {

        grid-template-columns:
            150px minmax(0, 1fr);

    }


    .date-selector {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .time-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media screen and (max-width: 430px) {

    .neon-heading {

        font-size:
            1.05rem;

        letter-spacing:
            0.13em;

    }


    .step-label {

        display:
            none;

    }


    .date-selector {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .booking-container .combined-card {

        grid-template-columns:
            1fr;

    }


    .confirmation-section {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .confirmation-section strong {

        text-align:
            left;

    }

}

/* =========================================
   BOOKING TIMEZONE
========================================= */

.booking-timezone {
    margin:
        14px 0 0 !important;

    color:
        #718297 !important;

    font-size:
        0.68rem !important;

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.availability-status.slot-warning {
    position: relative;

    padding: 1rem 1.1rem;

    color: #ff8fc4;

    background:
        rgba(255, 45, 145, 0.08);

    border:
        1px solid rgba(255, 45, 145, 0.7);

    box-shadow:
        0 0 18px rgba(255, 45, 145, 0.12);

    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
}


/* Attention animation */

.availability-status.slot-warning-attention {
    animation:
        slotWarningAttention 12s ease-in-out 12;
}


@keyframes slotWarningAttention {

    0%,
    100% {
        transform: translateX(0);

        border-color:
            rgba(255, 45, 145, 0.7);

        box-shadow:
            0 0 8px rgba(255, 45, 145, 0.15);
    }

    25% {
        transform: translateX(-4px);

        border-color:
            #ff2d91;

        box-shadow:
            0 0 24px rgba(255, 45, 145, 0.55);
    }

    50% {
        transform: translateX(4px);

        border-color:
            #ff2d91;

        box-shadow:
            0 0 30px rgba(255, 45, 145, 0.65);
    }

    75% {
        transform: translateX(-2px);

        border-color:
            #ff2d91;

        box-shadow:
            0 0 20px rgba(255, 45, 145, 0.45);
    }
}

/* DOB picker wrapper */
#dateOfBirthPicker {
    display: block;
    width: 100%;
}

/* The component's actual dropdown container */
#dateOfBirthPicker [data-jalali-datepicker-dropdown] {
    display: grid !important;
    grid-template-columns: 0.8fr 1.5fr 1fr;
    gap: 0.75rem;
    width: 100%;
}

/* Each dropdown */
#dateOfBirthPicker select {
    width: 100% !important;
    min-width: 0;
    font-size: 0.78rem;

    padding: 0 1rem;

    background: #050d18;
    color: #707a8d;

    border: 1px solid rgba(34, 231, 255, 0.45);
    border-radius: 0;

}