/*
|--------------------------------------------------------------------------
| Файл: /assets/css/pages/booking.css
|--------------------------------------------------------------------------
| Тайлбар:
| Gobi Cinema суудал сонгох хуудасны дизайн.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.page-booking {
    background:
            var(--color-bg);
}


/*
|--------------------------------------------------------------------------
| Booking page
|--------------------------------------------------------------------------
*/

.booking-page {
    min-height:
            calc(
                    100vh - var(--header-height)
            );

    padding-bottom:
            70px;
}


/*
|--------------------------------------------------------------------------
| Booking header
|--------------------------------------------------------------------------
*/

.booking-page-header {
    border-bottom:
            1px solid var(--color-border);

    background:
            linear-gradient(
                    180deg,
                    #111319 0%,
                    #0b0d11 100%
            );
}

.booking-page-header__inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
            30px;

    min-height:
            142px;

    padding:
            22px 0;
}


/*
|--------------------------------------------------------------------------
| Movie info
|--------------------------------------------------------------------------
*/

.booking-movie {
    display: flex;

    align-items: center;

    min-width: 0;

    gap:
            20px;
}

.booking-movie__poster {
    flex:
            0 0 66px;

    width:
            66px;

    aspect-ratio:
            2 / 3;

    overflow:
            hidden;

    border:
            1px solid var(--color-border-strong);

    border-radius:
            8px;

    background:
            var(--color-bg-card);

    box-shadow:
            var(--shadow-sm);
}

.booking-movie__poster img {
    width:
            100%;

    height:
            100%;

    object-fit:
            cover;
}

.booking-movie__content {
    min-width:
            0;
}

.booking-movie__content
.section-kicker {
    margin-bottom:
            4px;
}

.booking-movie__title {
    margin:
            0;

    overflow:
            hidden;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            clamp(
                    26px,
                    3vw,
                    38px
            );

    font-weight:
            700;

    letter-spacing:
            -0.03em;

    line-height:
            1.15;

    text-overflow:
            ellipsis;
}

.booking-movie__meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            6px 12px;

    margin-top:
            9px;

    color:
            var(--color-text-muted);

    font-size:
            14px;
}

.booking-movie__meta span,
.booking-movie__meta strong {
    position:
            relative;
}

.booking-movie__meta strong {
    color:
            #ffffff;

    font-size:
            16px;

    font-weight:
            700;
}

.booking-movie__meta
> * + *::before {
    display: inline-block;

    width:
            3px;

    height:
            3px;

    margin:
            0 10px 3px 0;

    border-radius:
            50%;

    background:
            var(--color-text-faint);

    content:
            '';
}


/*
|--------------------------------------------------------------------------
| Back link
|--------------------------------------------------------------------------
*/

.booking-back {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink:
            0;

    min-height:
            42px;

    padding:
            0 15px;

    gap:
            8px;

    border:
            1px solid var(--color-border);

    border-radius:
            9px;

    background:
            rgba(255, 255, 255, 0.035);

    color:
            var(--color-text-soft);

    font-size:
            14px;

    font-weight:
            600;

    transition:
            color var(--transition-fast),
            background var(--transition-fast),
            border-color var(--transition-fast);
}

.booking-back:hover {
    border-color:
            var(--color-border-strong);

    background:
            rgba(255, 255, 255, 0.065);

    color:
            #ffffff;
}


/*
|--------------------------------------------------------------------------
| Main layout
|--------------------------------------------------------------------------
*/

.booking-layout {
    display: grid;

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

    align-items: start;

    gap:
            34px;

    padding-top:
            38px;
}


/*
|--------------------------------------------------------------------------
| Hall
|--------------------------------------------------------------------------
*/

.booking-hall {
    min-width:
            0;

    padding:
            28px;

    border:
            1px solid var(--color-border);

    border-radius:
            var(--radius-lg);

    background:
            linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.025),
                    rgba(255, 255, 255, 0.012)
            );

    box-shadow:
            var(--shadow-sm);
}

.booking-hall__top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap:
            24px;

    margin-bottom:
            24px;
}

.booking-hall__title {
    margin:
            0;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            28px;

    font-weight:
            700;

    letter-spacing:
            -0.025em;
}

.booking-hall__description {
    margin:
            7px 0 0;

    color:
            var(--color-text-muted);

    font-size:
            14px;
}

.booking-hall__availability {
    display: flex;

    align-items: baseline;

    flex-shrink:
            0;

    gap:
            6px;

    padding:
            9px 12px;

    border:
            1px solid rgba(34, 197, 94, 0.19);

    border-radius:
            9px;

    background:
            rgba(34, 197, 94, 0.07);
}

.booking-hall__availability strong {
    color:
            #86efac;

    font-size:
            18px;

    font-weight:
            700;
}

.booking-hall__availability span {
    color:
            #7f9587;

    font-size:
            12px;

    font-weight:
            500;
}


/*
|--------------------------------------------------------------------------
| Legend
|--------------------------------------------------------------------------
*/

.booking-seat-legend {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            12px 22px;

    margin-bottom:
            28px;

    padding:
            13px 15px;

    border:
            1px solid var(--color-border);

    border-radius:
            10px;

    background:
            rgba(0, 0, 0, 0.14);
}

.booking-seat-legend__item {
    display: flex;

    align-items: center;

    gap:
            7px;

    color:
            var(--color-text-muted);

    font-size:
            12px;

    font-weight:
            500;
}

.booking-seat-legend__seat {
    width:
            18px;

    height:
            16px;

    border:
            1px solid var(--color-border-strong);

    border-radius:
            5px 5px 3px 3px;
}

.booking-seat-legend__seat--available {
    background:
            #252a33;
}

.booking-seat-legend__seat--selected {
    border-color:
            var(--color-accent-hover);

    background:
            var(--color-accent);
}

.booking-seat-legend__seat--vip {
    border-color:
            rgba(245, 158, 11, 0.65);

    background:
            rgba(245, 158, 11, 0.2);
}

.booking-seat-legend__seat--unavailable {
    border-color:
            rgba(255, 255, 255, 0.045);

    background:
            #111319;

    opacity:
            0.5;
}


/*
|--------------------------------------------------------------------------
| Seat map wrapper
|--------------------------------------------------------------------------
*/

.booking-seat-map-wrapper {
    position: relative;

    width:
            100%;

    overflow-x:
            auto;

    overflow-y:
            hidden;

    padding:
            4px 0 24px;

    scrollbar-width:
            thin;

    scrollbar-color:
            #353a44
            transparent;
}

.booking-seat-map-wrapper::-webkit-scrollbar {
    height:
            7px;
}

.booking-seat-map-wrapper::-webkit-scrollbar-track {
    background:
            transparent;
}

.booking-seat-map-wrapper::-webkit-scrollbar-thumb {
    border-radius:
            999px;

    background:
            #353a44;
}


/*
|--------------------------------------------------------------------------
| Screen
|--------------------------------------------------------------------------
*/

.booking-screen {
    width:
            min(
                    72%,
                    670px
            );

    min-width:
            500px;

    margin:
            5px auto 58px;

    text-align:
            center;
}

.booking-screen__surface {
    position: relative;

    height:
            12px;

    border-radius:
            50% 50% 5px 5px;

    background:
            linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.06),
                    rgba(255, 255, 255, 0.72),
                    rgba(255, 255, 255, 0.06)
            );

    box-shadow:
            0 11px 28px rgba(255, 255, 255, 0.1);
}

.booking-screen__surface::after {
    position: absolute;

    top:
            8px;

    right:
            5%;

    left:
            5%;

    height:
            34px;

    background:
            linear-gradient(
                    to bottom,
                    rgba(255, 255, 255, 0.08),
                    transparent
            );

    clip-path:
            polygon(
                    4% 0,
                    96% 0,
                    100% 100%,
                    0 100%
            );

    content:
            '';
}

.booking-screen__label {
    margin-top:
            16px;

    color:
            var(--color-text-faint);

    font-size:
            11px;

    font-weight:
            700;

    letter-spacing:
            0.28em;
}


/*
|--------------------------------------------------------------------------
| Seat map
|--------------------------------------------------------------------------
*/

.booking-seat-map {
    width:
            max-content;

    min-width:
            100%;

    margin-inline:
            auto;

    padding-inline:
            8px;
}

.booking-seat-row {
    display: grid;

    grid-template-columns:
        28px
        auto
        28px;

    align-items: center;

    justify-content: center;

    gap:
            12px;

    min-height:
            48px;
}

.booking-seat-row + .booking-seat-row {
    margin-top:
            5px;
}

.booking-seat-row__label {
    display: flex;

    align-items: center;
    justify-content: center;

    color:
            var(--color-text-faint);

    font-size:
            12px;

    font-weight:
            700;

    text-align:
            center;
}

.booking-seat-row__seats {
    display: flex;

    align-items: center;
    justify-content: center;

    gap:
            7px;
}


/*
|--------------------------------------------------------------------------
| Seat
|--------------------------------------------------------------------------
*/

.booking-seat {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
            0 0 44px;

    width:
            44px;

    height:
            38px;

    padding:
            0;

    border:
            1px solid rgba(255, 255, 255, 0.12);

    border-radius:
            9px 9px 6px 6px;

    outline:
            none;

    background:
            #242931;

    color:
            #cbd0d8;

    cursor:
            pointer;

    font-family:
            var(--font-ui);

    font-size:
            11px;

    font-weight:
            600;

    box-shadow:
            inset 0 -4px 0 rgba(0, 0, 0, 0.18);

    transition:
            transform var(--transition-fast),
            border-color var(--transition-fast),
            background var(--transition-fast),
            color var(--transition-fast),
            box-shadow var(--transition-fast);
}


/*
|--------------------------------------------------------------------------
| Суудлын түшлэгийн эффект
|--------------------------------------------------------------------------
*/

.booking-seat::before {
    position: absolute;

    right:
            5px;

    bottom:
            4px;

    left:
            5px;

    height:
            4px;

    border-radius:
            0 0 5px 5px;

    background:
            rgba(0, 0, 0, 0.24);

    content:
            '';

    pointer-events:
            none;
}

.booking-seat__code {
    position: relative;

    z-index:
            1;
}


/*
|--------------------------------------------------------------------------
| Available
|--------------------------------------------------------------------------
*/

.booking-seat--available:hover {
    z-index:
            2;

    transform:
            translateY(-3px);

    border-color:
            rgba(255, 255, 255, 0.34);

    background:
            #343b46;

    color:
            #ffffff;

    box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.3),
            inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}

.booking-seat--available:focus-visible {
    border-color:
            #ffffff;

    box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.12);
}


/*
|--------------------------------------------------------------------------
| Selected
|--------------------------------------------------------------------------
|
| booking.js:
| .is-selected
|--------------------------------------------------------------------------
*/

.booking-seat.is-selected {
    border-color:
            #ef4444;

    background:
            var(--color-accent);

    color:
            #ffffff;

    box-shadow:
            0 7px 18px rgba(220, 38, 38, 0.3),
            inset 0 -4px 0 rgba(110, 8, 8, 0.25);

    transform:
            translateY(-2px);
}

.booking-seat.is-selected::before {
    background:
            rgba(80, 0, 0, 0.22);
}


/*
|--------------------------------------------------------------------------
| VIP
|--------------------------------------------------------------------------
*/

.booking-seat--vip.booking-seat--available {
    border-color:
            rgba(245, 158, 11, 0.48);

    background:
            linear-gradient(
                    180deg,
                    rgba(245, 158, 11, 0.23),
                    rgba(180, 115, 10, 0.16)
            );

    color:
            #fcd98b;
}

.booking-seat--vip.booking-seat--available:hover {
    border-color:
            rgba(245, 158, 11, 0.84);

    background:
            linear-gradient(
                    180deg,
                    rgba(245, 158, 11, 0.38),
                    rgba(180, 115, 10, 0.25)
            );

    color:
            #fff3cd;
}

.booking-seat--vip.is-selected {
    border-color:
            #f59e0b;

    background:
            linear-gradient(
                    180deg,
                    #dc2626,
                    #b91c1c
            );

    color:
            #ffffff;

    box-shadow:
            0 7px 18px rgba(220, 38, 38, 0.3),
            0 0 0 1px rgba(245, 158, 11, 0.34);
}


/*
|--------------------------------------------------------------------------
| Sold / locked / unavailable
|--------------------------------------------------------------------------
*/

.booking-seat--sold,
.booking-seat--locked,
.booking-seat--unavailable {
    border-color:
            rgba(255, 255, 255, 0.035);

    background:
            #111319;

    color:
            #444952;

    cursor:
            not-allowed;

    box-shadow:
            none;

    opacity:
            0.56;
}

.booking-seat--sold::after {
    position: absolute;

    width:
            18px;

    height:
            1px;

    background:
            #5a5e65;

    content:
            '';

    transform:
            rotate(-38deg);
}

.booking-seat--locked {
    background:
            #17191f;

    color:
            #51555e;
}

.booking-seat--unavailable {
    visibility:
            hidden;

    pointer-events:
            none;
}


/*
|--------------------------------------------------------------------------
| Aisle
|--------------------------------------------------------------------------
*/

.booking-seat--aisle-after {
    margin-right:
            28px;
}


/*
|--------------------------------------------------------------------------
| Live status
|--------------------------------------------------------------------------
*/

.booking-live-status {
    display: flex;

    align-items: center;

    gap:
            8px;

    margin-top:
            22px;

    color:
            var(--color-text-faint);

    font-size:
            12px;
}

.booking-live-status__dot {
    width:
            7px;

    height:
            7px;

    border-radius:
            50%;

    background:
            #22c55e;

    box-shadow:
            0 0 0 4px rgba(34, 197, 94, 0.09);
}


/*
|--------------------------------------------------------------------------
| Summary column
|--------------------------------------------------------------------------
*/

.booking-summary {
    position: sticky;

    top:
            calc(
                    var(--header-height) + 22px
            );
}

.booking-summary__card {
    overflow:
            hidden;

    border:
            1px solid var(--color-border);

    border-radius:
            var(--radius-lg);

    background:
            var(--color-bg-card);

    box-shadow:
            var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| Summary header
|--------------------------------------------------------------------------
*/

.booking-summary__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap:
            16px;

    padding:
            22px 22px 19px;

    border-bottom:
            1px solid var(--color-border);
}

.booking-summary__eyebrow {
    margin-bottom:
            4px;

    color:
            var(--color-accent-hover);

    font-size:
            10px;

    font-weight:
            700;

    letter-spacing:
            0.17em;
}

.booking-summary__header h2 {
    margin:
            0;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            21px;

    font-weight:
            700;

    line-height:
            1.25;
}

.booking-summary__count {
    display: flex;

    align-items: center;
    justify-content: center;

    flex:
            0 0 38px;

    width:
            38px;

    height:
            38px;

    border:
            1px solid var(--color-border);

    border-radius:
            50%;

    background:
            rgba(255, 255, 255, 0.04);

    color:
            #ffffff;

    font-size:
            15px;

    font-weight:
            700;
}


/*
|--------------------------------------------------------------------------
| Summary showtime
|--------------------------------------------------------------------------
*/

.booking-summary__showtime {
    padding:
            17px 22px;

    border-bottom:
            1px solid var(--color-border);

    background:
            rgba(0, 0, 0, 0.13);
}

.booking-summary__movie {
    overflow:
            hidden;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            16px;

    font-weight:
            700;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;
}

.booking-summary__showtime-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            5px 9px;

    margin-top:
            5px;

    color:
            var(--color-text-faint);

    font-size:
            12px;
}

.booking-summary__showtime-meta strong {
    color:
            var(--color-text-soft);

    font-size:
            13px;

    font-weight:
            700;
}


/*
|--------------------------------------------------------------------------
| Empty selection
|--------------------------------------------------------------------------
*/

.booking-summary__empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height:
            180px;

    padding:
            27px 22px;

    text-align:
            center;
}

.booking-summary__empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width:
            48px;

    height:
            48px;

    margin-bottom:
            12px;

    border:
            1px solid var(--color-border);

    border-radius:
            13px;

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

    color:
            var(--color-text-faint);
}

.booking-summary__empty-icon svg {
    width:
            24px;

    height:
            24px;
}

.booking-summary__empty strong {
    color:
            var(--color-text-soft);

    font-size:
            14px;

    font-weight:
            600;
}

.booking-summary__empty span {
    max-width:
            230px;

    margin-top:
            5px;

    color:
            var(--color-text-faint);

    font-size:
            12px;

    line-height:
            1.5;
}


/*
|--------------------------------------------------------------------------
| Selected list
|--------------------------------------------------------------------------
*/

.booking-selected-list {
    padding:
            10px 22px 14px;

    border-bottom:
            1px solid var(--color-border);
}

.booking-selected-list[hidden] {
    display:
            none;
}


/*
|--------------------------------------------------------------------------
| JavaScript үүсгэх selected item
|--------------------------------------------------------------------------
*/

.booking-selected-item {
    display: grid;

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

    align-items: center;

    gap:
            10px;

    min-height:
            50px;

    padding:
            7px 0;

    border-bottom:
            1px solid rgba(255, 255, 255, 0.055);
}

.booking-selected-item:last-child {
    border-bottom:
            0;
}

.booking-selected-item__seat {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height:
            34px;

    border:
            1px solid rgba(220, 38, 38, 0.28);

    border-radius:
            7px;

    background:
            rgba(220, 38, 38, 0.1);

    color:
            #fecaca;

    font-size:
            12px;

    font-weight:
            700;
}

.booking-selected-item__type {
    min-width:
            0;
}


/*
|--------------------------------------------------------------------------
| Ticket type buttons
|--------------------------------------------------------------------------
*/

.booking-ticket-types {
    display: flex;

    align-items: center;

    gap:
            5px;
}

.booking-ticket-type {
    min-height:
            30px;

    padding:
            0 8px;

    border:
            1px solid var(--color-border);

    border-radius:
            6px;

    background:
            rgba(255, 255, 255, 0.035);

    color:
            var(--color-text-muted);

    cursor:
            pointer;

    font-size:
            11px;

    font-weight:
            600;

    transition:
            color var(--transition-fast),
            background var(--transition-fast),
            border-color var(--transition-fast);
}

.booking-ticket-type:hover {
    border-color:
            var(--color-border-strong);

    color:
            #ffffff;
}

.booking-ticket-type.is-active {
    border-color:
            rgba(220, 38, 38, 0.46);

    background:
            rgba(220, 38, 38, 0.15);

    color:
            #ffffff;
}

.booking-selected-item__remove {
    display: flex;

    align-items: center;
    justify-content: center;

    width:
            28px;

    height:
            28px;

    padding:
            0;

    border-radius:
            7px;

    background:
            transparent;

    color:
            var(--color-text-faint);

    cursor:
            pointer;

    font-size:
            17px;

    transition:
            color var(--transition-fast),
            background var(--transition-fast);
}

.booking-selected-item__remove:hover {
    background:
            rgba(220, 38, 38, 0.1);

    color:
            #f87171;
}


/*
|--------------------------------------------------------------------------
| Base price
|--------------------------------------------------------------------------
*/

.booking-summary__price-note {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
            15px;

    padding:
            13px 22px;

    border-bottom:
            1px solid var(--color-border);

    color:
            var(--color-text-faint);

    font-size:
            12px;
}

.booking-summary__price-note strong {
    color:
            var(--color-text-soft);

    font-size:
            13px;

    font-weight:
            600;
}


/*
|--------------------------------------------------------------------------
| Total
|--------------------------------------------------------------------------
*/

.booking-summary__total {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
            15px;

    padding:
            17px 22px;

    border-bottom:
            1px solid var(--color-border);
}

.booking-summary__total[hidden] {
    display:
            none;
}

.booking-summary__total span {
    color:
            var(--color-text-muted);

    font-size:
            14px;

    font-weight:
            600;
}

.booking-summary__total strong {
    color:
            #ffffff;

    font-size:
            23px;

    font-weight:
            700;

    letter-spacing:
            -0.02em;
}


/*
|--------------------------------------------------------------------------
| Error
|--------------------------------------------------------------------------
*/

.booking-summary__error {
    margin:
            15px 22px 0;

    padding:
            10px 12px;

    border:
            1px solid rgba(220, 38, 38, 0.25);

    border-radius:
            8px;

    background:
            rgba(220, 38, 38, 0.08);

    color:
            #fecaca;

    font-size:
            12px;

    line-height:
            1.45;
}

.booking-summary__error[hidden] {
    display:
            none;
}


/*
|--------------------------------------------------------------------------
| Timer
|--------------------------------------------------------------------------
*/

.booking-summary__timer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
            15px;

    margin:
            15px 22px 0;

    padding:
            10px 12px;

    border:
            1px solid rgba(245, 158, 11, 0.18);

    border-radius:
            8px;

    background:
            rgba(245, 158, 11, 0.055);
}

.booking-summary__timer[hidden] {
    display:
            none;
}

.booking-summary__timer span {
    color:
            #ad9974;

    font-size:
            11px;
}

.booking-summary__timer strong {
    color:
            #fcd98b;

    font-size:
            14px;

    font-weight:
            700;

    font-variant-numeric:
            tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Continue
|--------------------------------------------------------------------------
*/

.booking-continue {
    width:
            calc(100% - 44px);

    margin:
            20px 22px 0;

    min-height:
            52px;

    box-shadow:
            0 12px 28px rgba(220, 38, 38, 0.18);
}

.booking-summary__notice {
    margin:
            11px 22px 20px;

    color:
            var(--color-text-faint);

    font-size:
            11px;

    line-height:
            1.45;

    text-align:
            center;
}


/*
|--------------------------------------------------------------------------
| Hall summary
|--------------------------------------------------------------------------
*/

.booking-hall-summary {
    display: grid;

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

    gap:
            8px;

    margin-top:
            12px;
}

.booking-hall-summary__item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
            10px;

    min-height:
            42px;

    padding:
            0 12px;

    border:
            1px solid var(--color-border);

    border-radius:
            9px;

    background:
            rgba(255, 255, 255, 0.018);
}

.booking-hall-summary__item span {
    color:
            var(--color-text-faint);

    font-size:
            11px;
}

.booking-hall-summary__item strong {
    color:
            var(--color-text-soft);

    font-size:
            13px;

    font-weight:
            700;
}


/*
|--------------------------------------------------------------------------
| Error action
|--------------------------------------------------------------------------
*/

.booking-error-actions {
    display: flex;

    justify-content: center;

    margin-top:
            24px;
}


/*
|--------------------------------------------------------------------------
| 1366px орчим
|--------------------------------------------------------------------------
*/

@media (
max-width: 1250px
) {
    .booking-layout {
        grid-template-columns:
            minmax(0, 1fr)
            320px;

        gap:
                24px;
    }

    .booking-hall {
        padding:
                24px 20px;
    }

    .booking-seat {
        flex-basis:
                40px;

        width:
                40px;

        height:
                36px;
    }

    .booking-seat-row__seats {
        gap:
                6px;
    }

    .booking-seat--aisle-after {
        margin-right:
                22px;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
max-width: 991px
) {
    .booking-page-header__inner {
        min-height:
                122px;
    }

    .booking-layout {
        grid-template-columns:
            1fr;

        gap:
                22px;
    }

    .booking-summary {
        position:
                static;
    }

    .booking-summary__card {
        max-width:
                none;
    }

    .booking-hall-summary {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 767px
) {
    .booking-page {
        padding-bottom:
                42px;
    }

    .booking-page-header__inner {
        align-items:
                flex-start;

        min-height:
                auto;

        padding:
                18px 0;
    }

    .booking-movie {
        gap:
                13px;
    }

    .booking-movie__poster {
        flex-basis:
                48px;

        width:
                48px;
    }

    .booking-movie__title {
        font-size:
                24px;
    }

    .booking-movie__meta {
        gap:
                4px 8px;

        margin-top:
                6px;

        font-size:
                12px;
    }

    .booking-movie__meta strong {
        font-size:
                13px;
    }

    .booking-back {
        min-height:
                36px;

        padding:
                0 10px;

        font-size:
                12px;
    }

    .booking-layout {
        padding-top:
                20px;
    }

    .booking-hall {
        padding:
                19px 12px;

        border-radius:
                14px;
    }

    .booking-hall__top {
        gap:
                16px;

        margin-bottom:
                18px;
    }

    .booking-hall__title {
        font-size:
                23px;
    }

    .booking-hall__description {
        font-size:
                12px;
    }

    .booking-hall__availability {
        padding:
                7px 9px;
    }

    .booking-hall__availability strong {
        font-size:
                15px;
    }

    .booking-seat-legend {
        gap:
                9px 14px;

        margin-bottom:
                22px;

        padding:
                10px;
    }

    .booking-screen {
        min-width:
                450px;

        margin-bottom:
                44px;
    }

    .booking-seat-map {
        padding-inline:
                4px;
    }

    .booking-seat-row {
        grid-template-columns:
            22px
            auto
            22px;

        gap:
                7px;

        min-height:
                43px;
    }

    .booking-seat-row__seats {
        gap:
                5px;
    }

    .booking-seat {
        flex-basis:
                36px;

        width:
                36px;

        height:
                32px;

        border-radius:
                7px 7px 5px 5px;

        font-size:
                9px;
    }

    .booking-seat--aisle-after {
        margin-right:
                18px;
    }

    .booking-seat-row__label {
        font-size:
                10px;
    }

    .booking-hall-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 520px
) {
    .booking-page-header__inner {
        gap:
                10px;
    }

    .booking-movie__poster {
        display:
                none;
    }

    .booking-back {
        padding-inline:
                8px;
    }

    .booking-back span {
        display:
                none;
    }

    .booking-seat-map-wrapper {
        margin-inline:
                -4px;

        width:
                calc(100% + 8px);
    }

    .booking-screen {
        min-width:
                420px;
    }

    .booking-seat {
        flex-basis:
                34px;

        width:
                34px;

        height:
                31px;
    }

    .booking-seat--aisle-after {
        margin-right:
                16px;
    }

    .booking-summary__header {
        padding:
                18px;
    }

    .booking-summary__showtime {
        padding-inline:
                18px;
    }

    .booking-selected-list {
        padding-inline:
                18px;
    }

    .booking-summary__price-note,
    .booking-summary__total {
        padding-inline:
                18px;
    }

    .booking-summary__error,
    .booking-summary__timer {
        margin-inline:
                18px;
    }

    .booking-continue {
        width:
                calc(100% - 36px);

        margin-inline:
                18px;
    }

    .booking-summary__notice {
        margin-inline:
                18px;
    }
}


/*
|--------------------------------------------------------------------------
| Very small mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 390px
) {
    .booking-hall__top {
        flex-direction:
                column;
    }

    .booking-hall__availability {
        width:
                fit-content;
    }

    .booking-seat-legend {
        display:
                grid;

        grid-template-columns:
            1fr 1fr;
    }

    .booking-selected-item {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;
    }
}


/*
|--------------------------------------------------------------------------
| Hover capable device
|--------------------------------------------------------------------------
*/

@media (
hover: hover
) and (
pointer: fine
) {
    .booking-seat--available:hover
    .booking-seat__code {
        transform:
                translateY(-1px);
    }
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (
prefers-reduced-motion: reduce
) {
    .booking-seat,
    .booking-seat__code {
        transform:
                none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Захиалгын хугацаа дуусах гэж байгаа төлөв
|--------------------------------------------------------------------------
*/

.booking-summary__timer.is-expiring {
    border-color:
            rgba(220, 38, 38, 0.32);

    background:
            rgba(220, 38, 38, 0.09);
}

.booking-summary__timer.is-expiring span {
    color:
            #d6a0a0;
}

.booking-summary__timer.is-expiring strong {
    color:
            #fca5a5;
}

.booking-summary__empty[hidden],
.booking-selected-list[hidden],
.booking-summary__total[hidden],
.booking-summary__timer[hidden],
.booking-summary__error[hidden] {
    display: none !important;
}