/* ====================================
   SEAT PICKER LAYOUT
   Scoped to .seat-picker-container
   Consolidated from cinema.css (previously split across
   lines 81-419, 572-665, 783-828, 937-973, 1108-1146)
   ==================================== */

.seat-picker-container {
    padding-bottom: 0 !important;
    max-width: 900px;
    margin: 0 auto;
}

    /* ORIENTATION PROMPT */

    .seat-picker-container .orientation-prompt {
        display: none;
        color: currentColor;
        padding: 20px;
        text-align: center;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid currentColor;
    }

    /* QUICK ACTIONS BAR */

    .seat-picker-container .seat-quick-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .seat-picker-container .quick-action-btn {
        flex: 1;
        padding: 12px;
        border: none;
        background: #C0FFE0;
        color: #000;
        font-size: 1em;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: "trtgroza-regular", sans-serif;
        text-transform: lowercase;
        -webkit-border-radius: 3.40282e38px;
        -moz-border-radius: 3.40282e38px;
        border-radius: 3.40282e38px;
    }

    /* SCREEN */

    .seat-picker-container .screen {
        text-align: center;
        margin: 30px 0 40px 0;
        font-weight: bold;
    }

        .seat-picker-container .screen::after {
            content: "SCREEN";
            display: block;
            border-top: 2px solid currentColor;
            padding-top: 10px;
            margin-top: 20px;
            letter-spacing: 4px;
        }

    /* SEATING AREA WRAPPER - Prevent overflow from covering fixed elements */

    .seat-picker-container .seat-rows-inner {
        display: block;
        width: max-content;
        /* Buffer so a scaled-up selected/hovered seat (transform: scale(...))
           in the front row or outer columns isn't clipped by the scrolling
           parent's overflow boundary. */
        padding: 10px;
    }

    .seat-picker-container .seat-rows {
        max-height: calc(100vh - 320px) !important;
        height: auto !important;
        overflow: auto !important;
    }

        .seat-picker-container .seat-rows:active {
            cursor: grabbing;
        }

        .seat-picker-container .seat-rows::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }

        .seat-picker-container .seat-rows::-webkit-scrollbar-track {
            background: transparent;
        }

        .seat-picker-container .seat-rows::-webkit-scrollbar-thumb {
            background: currentColor;
            border-radius: 4px;
            opacity: 0.5;
        }

    /* ROW CONTAINER */

    .seat-picker-container .seat-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        gap: 10px;
    }

    .seat-picker-container .row-label {
        font-weight: bold;
        min-width: 30px;
        text-align: right;
        font-size: 16px;
        flex-shrink: 0;
    }

    /* SEATS IN ROW - NEVER WRAP */

    .seat-picker-container .seats-in-row {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
        min-width: min-content;
    }

    /* SEAT BUTTONS - plain CSS outline shape (no external SVG dependency) */

    .seat-picker-container .seat-btn,
    .seat-picker-container .seat-aisle,
    .seat-picker-container .seat-spacer {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-shrink: 0;
    }

    .seat-picker-container .seat-btn {
        border: 2px solid currentColor;
        border-radius: 50% 50% 6px 6px / 65% 65% 6px 6px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: transparent;
        color: currentColor;
        /* Base stacking order - raised explicitly on .selected (see below)
           so a selected seat's checkmark badge always paints above
           neighboring seats regardless of DOM order (fixes couch pairs
           where the next seat was covering the badge). */
        z-index: 1;
    }

        /* Seat number: visible on any interactable seat (available/selected),
           hidden once the seat is disabled (unavailable/reserved) */
        .seat-picker-container .seat-btn .seat-label {
            display: inline;
            color: inherit;
        }

        .seat-picker-container .seat-btn:disabled .seat-label {
            display: none;
        }

        .seat-picker-container .seat-btn:hover:not(:disabled) {
            transform: scale(1.1);
        }

        /* Available: teal/cyan outline, matches legend swatch */
        .seat-picker-container .seat-btn.available {
            color: #2FD9E8;
        }

            .seat-picker-container .seat-btn.available:hover:not(:disabled) {
                transform: scale(1.06);
            }

        /* Selected: solid amber/gold fill with a checkmark badge, matches legend swatch */
        .seat-picker-container .seat-btn.selected {
            transform: scale(1.06);
            background: #E8B33E !important;
            border-color: #E8B33E !important;
            color: #3D221E !important;
            /* Ensure the checkmark badge (which overhangs into the
               neighboring seat's box) paints above adjacent seats */
            z-index: 5;
        }

            .seat-picker-container .seat-btn.selected:hover:not(:disabled) {
                transform: scale(1.1);
            }

            /* Seat number stays visible when selected - the checkmark is a
               small overlay badge in the corner rather than a replacement */
            .seat-picker-container .seat-btn.selected .seat-label {
                display: inline;
            }

            .seat-picker-container .seat-btn.selected::after {
                content: "\2713";
                position: absolute;
                top: -6px;
                right: -6px;
                width: 16px;
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                font-weight: bold;
                color: #3D221E;
                background: #E7FF9C;
                border-radius: 50%;
                border: 1px solid #3D221E;
                pointer-events: none;
            }

        /* Unavailable / reserved: dashed grey outline, muted fill, matches legend swatch */
        .seat-picker-container .seat-btn:disabled {
            cursor: not-allowed;
            opacity: 1;
            color: #9AA0A6;
            background: #4A4E57;
            border-style: dashed;
            border-color: #9AA0A6;
        }

            /* Small silhouette icon for unavailable regular seats (wheelchair
               seats keep their own glyph below) */
            .seat-picker-container .seat-btn:disabled:not(.wheelchair)::before {
                content: "\1F464";
                position: absolute;
                font-size: 13px;
                opacity: 0.85;
                pointer-events: none;
            }

        .seat-picker-container .seat-btn:focus-visible {
            outline: 3px solid currentColor;
            outline-offset: 2px;
        }

        /* Wheelchair: standard accessible-icon asset, same outline shape/size as other seats */
        .seat-picker-container .seat-btn.wheelchair::before {
            content: "";
            position: absolute;
            top: 3px;
            width: 18px;
            height: 18px;
            background-color: currentColor;
            -webkit-mask: url("/Cinema/icons/wheelchair.svg") center / contain no-repeat;
            mask: url("/Cinema/icons/wheelchair.svg") center / contain no-repeat;
            pointer-events: none;
        }

        /* Keep the seat number visible beneath the icon */
        .seat-picker-container .seat-btn.wheelchair .seat-label {
            display: inline;
            position: absolute;
            bottom: 4px;
            font-size: 9px;
        }

        /* Couch (joined pair): identical size/shape to a regular seat so they
           match visually — only the shared inner border is removed so the
           pair reads as one joined unit, exactly like B4/B5 in the reference. */
        .seat-picker-container .seat-btn.couch-left {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
        }

        .seat-picker-container .seat-btn.couch-right {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -8px; /* cancel row gap so the pair touches */
        }

        .seat-picker-container .seat-btn.couch-left,
        .seat-picker-container .seat-btn.couch-right {
            width: 44px;
            min-width: 44px;
        }

            /* mods: the selected checkmark badge normally overhangs to the
           top-right (see .seat-btn.selected::after above). For couch-left,
           that overhang lands directly on top of the couch-right seat, which
           paints above it (same z-index, later in DOM) and hides the badge
           when both couch seats are selected together. Move couch-left's
           badge to the top-left corner instead, clear of its paired seat. */
            .seat-picker-container .seat-btn.couch-left.selected::after {
                left: -6px;
                right: auto;
            }

            /* mods: couch seats are joined - scaling one up on hover (e.g.
               whichever one the mouse rests on after being clicked) breaks
               the matched sizing that makes the pair read as one unit.
               Keep both couch seats locked to the same selected scale
               regardless of hover state. */
            .seat-picker-container .seat-btn.couch-left.selected:hover:not(:disabled),
            .seat-picker-container .seat-btn.couch-right.selected:hover:not(:disabled) {
                transform: scale(1.06);
            }


    /* AISLE / SPACER - fully blank grid gaps, no decoration */

    .seat-picker-container .seat-aisle,
    .seat-picker-container .seat-spacer {
        background: transparent;
        border: none;
        cursor: default;
        pointer-events: none;
    }

    /* SEAT LEGEND - NOT STICKY */

    .seat-picker-container .legend {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin: 20px 0;
        flex-wrap: wrap;
        padding: 15px;
        border-radius: 4px;
        position: static;
    }

    .seat-picker-container .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

        .seat-picker-container .legend-item:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }

    .seat-picker-container .legend-box {
        width: 25px;
        height: 25px;
        border: 1px solid currentColor;
        border-radius: 2px;
        flex-shrink: 0;
        position: relative;
    }


        /* Wheelchair legend swatch - reuses the real accessible-icon asset
           so the key visually matches the seat it represents */
        .seat-picker-container .legend-box.legend-box-wheelchair::before {
            content: "";
            position: absolute;
            inset: 4px;
            background-color: currentColor;
            -webkit-mask: url("/Cinema/icons/wheelchair.svg") center / contain no-repeat;
            mask: url("/Cinema/icons/wheelchair.svg") center / contain no-repeat;
        }

    /* LEGEND HOVER HIGHLIGHT - dims non-matching seats, highlighting the
       category being hovered (e.g. hovering "Wheelchair" dims every
       non-wheelchair seat so the accessible seats stand out). */
    .seat-picker-container.legend-filtering .seat-btn {
        opacity: 0.2;
        transition: opacity 0.15s ease;
    }

        .seat-picker-container.legend-filtering .seat-btn.legend-match {
            opacity: 1;
        }


    /* Ensure the summary participates in normal document flow */
    /* mods: cream rounded card to match .tickets-container .validation-summary */

    .seat-picker-container .selection-summary {
        position: static !important;
        margin: 16px 0 !important;
        text-align: center;
        padding: 20px;
        border-radius: 16px;
        border: none;
        background: #F5F1E6;
        color: #3D221E;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        .seat-picker-container .selection-summary strong {
            font-size: 18px;
            display: block;
            margin-bottom: 8px;
            color: #3D221E;
        }

        .seat-picker-container .selection-summary p {
            margin: 8px 0;
            font-size: 16px;
            color: #3D221E;
        }

    /* CONTINUE BUTTON */

    .seat-picker-container .continue-btn {
        margin-top: 10px;
        position: relative;
    }

        .seat-picker-container .continue-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

    /* ZOOM CONTROLS - HIDDEN */

    .seat-picker-container .seat-zoom-controls {
        display: none !important;
    }

    .seat-picker-container .zoom-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid currentColor;
        background: inherit;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        pointer-events: auto;
    }

        .seat-picker-container .zoom-btn:active {
            transform: scale(0.95);
        }

    /* ZOOM MODE */

    .seat-picker-container.seat-zoom-mode .seat-rows {
        transform-origin: top left;
        transition: transform 0.3s ease;
        overflow: auto !important;
    }

/* HAPTIC FEEDBACK */

@media (hover: none) {
    .seat-picker-container .seat-btn:active:not(:disabled) {
        transform: scale(0.9);
    }
}

/* LOADING STATE */

.seat-picker-container.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ====================================
   SEAT PICKER - MOBILE RESPONSIVENESS
   ==================================== */

@media (max-width: 860px) {

    #performanceInfo {
        display: none;
    }

    .seat-picker-container .seat-btn.couch-left,
    .seat-picker-container .seat-btn.couch-right {
        width: 45px;
        min-width: 45px;
    }

    .seat-picker-container .seat-btn.couch-right {
        margin-left: -6px;
    }



    .seat-picker-container {
        padding: 15px;
        /* mods: reserved space for the bottom bar - increased to fit two
           stacked full-width buttons (Proceed + Back to showings) plus
           gap/padding, so content never sits underneath the fixed bar. */
        padding-bottom: 230px;
    }

        .seat-picker-container .screen {
            margin-bottom: 30px;
        }

        .seat-picker-container h1 {
            font-size: 1.5em;
        }

        .seat-picker-container .seat-rows {
            max-height: 400px;
            height: 400px;
            overflow: auto;
            scrollbar-width: auto;
        }

        /* mods: hide the seat selection summary card on mobile - its info
           now surfaces via the sticky proceed button label instead */
        .seat-picker-container .selection-summary {
            display: none !important;
        }

        .seat-picker-container .seat-btn,
        .seat-picker-container .seat-aisle,
        .seat-picker-container .seat-spacer {
            width: 42px;
            height: 42px;
            min-width: 42px;
        }

        .seat-picker-container .seat-btn {
            font-size: 10px;
        }

        .seat-picker-container .seats-in-row {
            gap: 6px;
        }

        .seat-picker-container .seat-row {
            gap: 8px;
        }

        .seat-picker-container .row-label {
            min-width: 28px;
            font-size: 14px;
        }

        .seat-picker-container .screen::after {
            letter-spacing: 2px;
            padding-top: 8px;
            margin-top: 15px;
        }

        .seat-picker-container .seat-rows::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }

        /* mods: smaller seat key/legend on mobile */
        .seat-picker-container .legend {
            gap: 10px;
            padding: 8px;
        }

        .seat-picker-container .legend-item {
            gap: 6px;
            font-size: 12px;
            padding: 2px 4px;
        }

        .seat-picker-container .legend-box {
            width: 16px;
            height: 16px;
        }

        /* mods: brown bar fixed to the bottom of the screen; the buttons
           (.continue-btn.dobtn / .back-btn.dobtn) keep their normal
           pill/rounded styling from the global button style - only the
           wrapping bar is stretched full-width and pinned, with the two
           buttons stacked full-width inside it (Proceed above Back). */
        .seat-picker-container .seat-proceed-bar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #3D221E;
            /* mods: extra bottom padding so the last button (Back to
               showings) clears the safe area / device edge instead of
               hanging off the bottom of the screen */
            padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
        }

            .seat-picker-container .seat-proceed-bar .continue-btn,
            .seat-picker-container .seat-proceed-bar .back-btn {
                margin: 0;
                width: 100%;
            }
}