/**
 * Seat-map styles — ONE sheet (S4a S1.3f).
 *
 * Byte-for-byte concatenation, in the exact cascade order the three legacy
 * sheets loaded: seating-mobile-ux.css (head) → seating-core-patches.css
 * (head, dep) → seating-concurrency-fixes.css (was a late footer link; the
 * only seat-map CSS printed after it was the theme's seat-sheet.css override
 * pass, which now depends on this handle). Content untouched — the
 * de- sweep is S4b step 8.
 *
 * Handle: te-seating-css, deps ['ticketsystem-tango-plugin-overrides'].
 *
 * @package TangoEnVivo\Modules\Seating
 */
/*--------------------------------------------------------------
# Seating Chart — Mobile UX Overrides
#
# Addresses critical mobile usability issues:
#  1. Touch targets enlarged to ≥ 44×44px (WCAG 2.5.5)
#  2. Zoom controls relocated to thumb-zone (bottom-right)
#  3. Close button enlarged and repositioned
#  4. Body scroll lock when overlay is open
#  5. WhatsApp widget clearance during seating overlay
#  6. Legend toggle button in bottom info row
#  7. Drag-gate: suppress seat clicks during pan gesture
#  8. (Phase 2) Seat ::after hit area expansion
#  9. (Phase 2) High-contrast borders for WCAG 1.4.11
# 10. (Phase 2) Mobile auto-zoom CSS transform support
#
# @package TicketSystemTango
--------------------------------------------------------------*/


/* ==========================================================================
   1. BODY SCROLL LOCK
   ========================================================================== */

body.single-tc_seat_charts {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   2. CLOSE BUTTON (×) — Enlarged Touch Target
   ========================================================================== */

/* keep: vendor/internal — fights the vendor sheet's later-printing absolute
   geometry AND the restored tac color/skin priorities; the fixed position is
   load-bearing (the scaled pan layer otherwise swallows the close tap). */
.tc-full-screen {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    cursor: pointer;
    /* Pin to the viewport corner ABOVE the scaled .tc-pan-wrapper. On mobile the
       auto-zoomed pan layer overlays the absolutely-positioned close button and
       intercepts taps (document.elementFromPoint at the X returns .tc-pan-wrapper),
       so the close X could not be tapped at all — users were stuck in the overlay.
       Fixed positioning + a top-level stacking context makes it reliably tappable. */
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.tc-full-screen:hover,
.tc-full-screen:focus-visible {
    background: rgba(0, 0, 0, 0.85) !important;
    transform: scale(1.1);
    outline: 2px solid var(--ts-gold, #c9a96e);
    outline-offset: 2px;
}

.tc-full-screen .fa-times {
    font-size: 1.4rem;
    line-height: 1;
}

/* Fallback glyph: the bundled Font Awesome build does not map .fa-times, so the
   icon renders empty and the close control is invisible (a blank dark circle on a
   dark overlay). Force a Unicode multiplication-X so the close affordance is always
   visible regardless of the icon font loading or version. */
.tc-full-screen .fa-times::before {
    content: "\2715";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
}

/* ==========================================================================
   2b. DRAG GATE — Pointer-Events Kill Switch
   When the JS detects panning, all seat elements become unclickable
   at the CSS level so jQuery UI Selectable can't register them.
   ========================================================================== */

@media (max-width: 768px) {
    .tc-is-panning .tc_set_seat,
    .tc-is-panning .tc-object-selectable,
    .tc-is-panning .tc-table-chair {
        pointer-events: none;
    }
}


/* ==========================================================================
   3. ZOOM CONTROLS — Relocated to Bottom-Right (Thumb Zone)
   ========================================================================== */

@media (max-width: 768px) {

    /* S4b: the vendor sheet prints later and ties (0,1,0) — every prefixed
       variant in this section reaches (0,2,0)+, no priority. */
    .tc-zoom-wrap,
    .tc_seating_map .tc-zoom-wrap {
        position: fixed;
        bottom: 190px;
        right: 12px;
        left: auto;
        top: auto;
        z-index: 1000005;

        /* Vertical pill */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 28px;
        padding: 4px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        /* Reset any inline width/height from the plugin */
        width: 52px;
        height: auto;
        min-height: 0;

        /* Override any plugin transforms */
        transform: none;
        margin: 0;
        /* S4b: the shadow the accepted pill carried came from the deleted tac
           top-left-pill block (its one surviving longhand) — kept here. */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    /* Hide the horizontal slider on mobile.
       keep: inline — jQuery UI initializes the slider with inline styles */
    .tc-zoom-wrap .tc-zoom-slider,
    .tc_seating_map .tc-zoom-wrap .tc-zoom-slider {
        display: none !important;
    }

    /* +/- button containers */
    .tc-zoom-wrap .tc-plus-wrap,
    .tc-zoom-wrap .tc-minus-wrap,
    .tc_seating_map .tc-zoom-wrap .tc-plus-wrap,
    .tc_seating_map .tc-zoom-wrap .tc-minus-wrap {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        position: relative;
        display: block;
        cursor: pointer;
        border-radius: 50%;
        background: transparent;
        transition: background-color 0.15s ease;
        flex-shrink: 0;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0;

        /* Reset any inline styles */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        float: none;
    }

    .tc-zoom-wrap .tc-plus-wrap:active,
    .tc-zoom-wrap .tc-minus-wrap:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Plus icon: horizontal bar */
    .tc-zoom-wrap .tc-plus-horizontal,
    .tc_seating_map .tc-zoom-wrap .tc-plus-horizontal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 2px;
        margin: 0; /* S4b: the vendor offsets the bar with a negative margin */
        background-color: #ffffff;
        border-radius: 1px;
    }

    /* Plus icon: vertical bar */
    .tc-zoom-wrap .tc-plus-vertical,
    .tc_seating_map .tc-zoom-wrap .tc-plus-vertical {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 18px;
        margin: 0;
        background-color: #ffffff;
        border-radius: 1px;
    }

    /* Minus icon: single horizontal bar */
    .tc-zoom-wrap .tc-minus,
    .tc_seating_map .tc-zoom-wrap .tc-minus {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 2px;
        margin: 0;
        background-color: #ffffff;
        border-radius: 1px;
    }

    /* Divider line between + and – */
    .tc-zoom-wrap .tc-plus-wrap + .tc-minus-wrap::before,
    .tc-zoom-wrap .tc-minus-wrap + .tc-plus-wrap::before,
    .tc_seating_map .tc-zoom-wrap .tc-plus-wrap + .tc-minus-wrap::before,
    .tc_seating_map .tc-zoom-wrap .tc-minus-wrap + .tc-plus-wrap::before {
        display: none;
    }

    /* Proper ordering: + on top, – on bottom */
    .tc-zoom-wrap .tc-plus-wrap,
    .tc_seating_map .tc-zoom-wrap .tc-plus-wrap {
        order: -1;
    }
}


/* ==========================================================================
   4. SEAT MAP OVERLAY — Full Viewport + Touch-Friendly
   ========================================================================== */

@media (max-width: 768px) {

    /* Sized by the inset properties only: 100vh/100vw ignore the iOS URL bar
       and overflow the visible screen by its height. */
    .tc_seating_map.active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        /* keep: internal — must out-rank the restored tac base map background,
           which carries priority against the vendor sheet */
        background: var(--ts-black, #121212) !important;
    }

    /* Bottom controls bar — stacked layout */
    .tc-bottom-controls,
    .tc_seating_map .tc-bottom-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000000010;
        background: rgba(18, 18, 18, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .tc-bottom-controls-inside {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    /* ── Info row (seat count + legend toggle) ── */
    .ts-mobile-info-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ts-seat-count-badge {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .ts-seat-count-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        border-radius: 11px;
        background: var(--ts-gold, #c9a96e);
        color: #121212;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0 6px;
    }

    /* Selected seat labels ("F2 A5 + F2 A6") next to the count — one line,
       ellipsised, the LEYENDA button keeps its room. */
    .ts-seat-count-badge {
        min-width: 0;
        flex: 1 1 auto;
    }

    .ts-seat-count-labels {
        display: inline-block;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        color: #f5f2ea;
        font-size: 0.8rem;
    }

    /* MOE-1-228/089: the theme's global gold button rule (an 8-deep :not()
       chain,) outranked this and painted LEYENDA solid gold next to
       the primary CTA — outlined ghost. :not(#id) lifts the specificity above
       any class chain without touching the markup. */
    .ts-mobile-legend-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border: 1px solid rgba(201, 169, 110, 0.45);
        border-radius: 8px;
        background: transparent;
        color: var(--ts-gold, #c9a96e);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
        min-height: 44px;
        box-shadow: none;
        transform: none;
    }

    .ts-mobile-legend-btn:active,
    .ts-mobile-legend-btn:hover {
        background: rgba(201, 169, 110, 0.14);
        border-color: rgba(201, 169, 110, 0.7);
        color: var(--ts-gold, #c9a96e);
    }

    .ts-mobile-legend-btn svg {
        flex-shrink: 0;
    }

    /* ── Hide native seat counter from checkout bar (we show it in info row) ── */
    .tc-checkout-bar .ts-seat-counter {
        display: none;
    }

    /* ── Stage orientation cue (seating-mobile-zoom.js, MOE-1-026) ── */
    .ts-stage-cue {
        position: fixed;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000000006;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(17, 17, 17, 0.9);
        color: #f5f2ea;
        font-size: 0.75rem; /* 12px floor */
        font-weight: 700;
        letter-spacing: 0.1em;
        pointer-events: none;
        white-space: nowrap;
        transition: opacity 0.2s ease;
    }

    .ts-stage-cue--hidden {
        opacity: 0;
    }

    /* ── Checkout bar ── */
    .tc-checkout-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        gap: 10px;
    }

    .tc-seatchart-subtotal {
        font-size: 0.9rem;
        white-space: nowrap;
        text-align: left;
        flex: 1;
        min-width: 0;
    }

    .tc-checkout-button {
        min-height: 44px;
        min-width: 110px;
        padding: 10px 16px;
        font-size: 0.8rem;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Seating tooltips — hide on mobile ── */
    .tc-seating-tooltips {
        display: none;
    }

    .tc-seatchart-cart-info {
        padding: 0;
    }
}


/* ==========================================================================
   5. SEAT POPUP MODALS — Touch-Friendly Buttons
   ========================================================================== */

@media (max-width: 768px) {

    .tc-modal-wrap .tc-modal,
    .tc-modal-wrap .tc-modal-woobridge,
    .tc-modal-wrap .tc-added-to-cart {
        min-width: 280px;
        max-width: 90vw;
        padding: 20px;
    }

    .tc-modal-wrap .tc_modal_close_dialog {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-modal-wrap .tc_cart_button,
    .tc-modal-wrap .tc_remove_from_cart_button {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}


/* ==========================================================================
   6. WHATSAPP WIDGET — Hidden During Overlay
      Also hidden on product pages when the seating map is active.
   ========================================================================== */

body.single-tc_seat_charts #ht-ctc-chat,
body.single-tc_seat_charts .joinchat,
body.single-tc_seat_charts .wa-chat-widget,
body.single-tc_seat_charts [id*="whatsapp"],
body.single-tc_seat_charts [class*="whatsapp"],
body.single-tc_seat_charts .floating-wpp,
body.single-tc_seat_charts #nta-wa-chat-button {
    display: none;
}

/* Hide on product pages when the seating overlay is open */
body.single-product.ts-seating-active #ht-ctc-chat,
body.single-product.ts-seating-active .joinchat,
body.single-product.ts-seating-active .wa-chat-widget,
body.single-product.ts-seating-active [id*="whatsapp"],
body.single-product.ts-seating-active [class*="whatsapp"],
body.single-product.ts-seating-active .floating-wpp,
body.single-product.ts-seating-active #nta-wa-chat-button {
    display: none;
}


/* ==========================================================================
   7. LEGEND DRAWER — Bottom-anchored (mobile)
   The plugin CSS (.tc-seating-legend-wrap) handles the core positioning as a
   fixed bottom strip. These rules refine the legend content for readability.
   ========================================================================== */

@media (max-width: 768px) {

    .tc-seating-legend ul li {
        font-size: 0.8rem;
        padding: 6px 10px;
        min-height: 36px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tc-seating-legend ul li span {
        min-width: 14px;
        min-height: 14px;
        flex-shrink: 0;
    }

    /* Hide the native toggle arrow — we use the LEYENDA button instead */
    .tc-legend-arrow {
        display: none;
    }

    /* Active state for the LEYENDA toggle button */
    .ts-mobile-legend-btn.ts-legend-active {
        background: rgba(201, 169, 110, 0.2);
        border-color: rgba(201, 169, 110, 0.7);
    }
}


/* ==========================================================================
   7b. SEAT FOCUS / SELECTION / DIALOG CLOSE (MoE r1, all viewports)
   ========================================================================== */

/* MOE-1-157/161: keyboard focus on a ~10px seat was a hairline browser ring —
   white ring + gold halo, visible on every tier colour. */
.tc-wrapper .tc_set_seat:focus-visible,
.tc-wrapper .tc-object-selectable:focus-visible,
.tc-wrapper [tabindex="0"].tc_set_seat:focus,
.tc-wrapper .ui-selectee:focus-visible,
.tc_seating_map .tc_set_seat:focus,
.tc_seating_map .tc_set_seat.ui-selected,
.tc_seating_map .tc_set_seat:focus-visible,
.tc_seating_map .tc-object-selectable:focus-visible {
    outline: calc(3px * var(--ts-map-inverse-scale, 1)) solid #fff !important;
    outline-offset: calc(2px * var(--ts-map-inverse-scale, 1));
    box-shadow: 0 0 0 calc(5px * var(--ts-map-inverse-scale, 1)) #c6a664;
    z-index: 5;
    position: relative;
}

/* MOE-1-217: the seat dialog's close glyph was ~13px with no hit area. */
.tc_modal_close_dialog,
.tc-modal-wrap .tc_modal_close_dialog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ts-gold, #c9a96e);
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

.tc_modal_close_dialog:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* MOE-1-162: the legend sidebar's collapse toggle rendered as a stock white
   square on the dark canvas. */
.tc-legend-arrow,
.tc-seating-legend-wrap .tc-legend-arrow {
    background: #1c1c1c;
    color: #f5f2ea;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-legend-arrow:hover,
.tc-legend-arrow:focus-visible {
    border-color: var(--ts-gold, #c9a96e);
    color: var(--ts-gold, #c9a96e);
}

/* MOE-1-226: the seat just added to the cart was a lone blue square among
   hundreds — a white ring makes "yours" findable at any zoom. */
.tc-wrapper .tc_seat_in_cart,
.tc-wrapper .tc_set_seat.tc_seat_in_cart,
.tc_seating_map .tc_seat_in_cart,
.tc_seating_map .tc_set_seat.tc_seat_in_cart {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.55);
    position: relative;
    z-index: 4;
}

/* MOE-2-047: the seat dialog is a jQuery UI dialog on phones — its title-bar
   close is the unpadded 13px glyph */
.tc_seating_map .ui-dialog .ui-dialog-titlebar-close,
.ui-dialog.tc-seat-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    right: 4px;
    top: 50%;
    margin-top: -22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Keyboard status line in the bottom bar (tickera-core-patches.js) */
.ts-seat-focus-info {
    font-size: 0.8rem;
    color: var(--ts-gold, #c9a96e);
    margin-top: 2px;
    min-height: 1.2em;
}

.ts-seat-focus-info:empty {
    display: none;
}


/* ==========================================================================
   8. DRAG GATE — Suppress seat clicks during pan gesture
   ========================================================================== */

.tc-wrapper.tc-is-panning .tc_set_seat,
.tc-wrapper.tc-is-panning .tc-object-selectable,
.tc-wrapper.tc-is-panning .ui-selectee {
    pointer-events: none;
}


/* ==========================================================================
   9. ADD-TO-CART BUTTON LOADING STATE
   ========================================================================== */

.ts-btn-loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

.ts-spinner-inline {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ts-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes ts-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   10. SEAT TOUCH TARGET EXPANSION (Phase 2 — WCAG 2.5.5)

   The visual seat squares are 24×24px on mobile. This expands the clickable
   hit area to 44×44px using an invisible ::after pseudo-element centered
   over each seat. The visual square itself remains 24×24px.

   Layout model: seats are display:inline-block + position:relative within
   .tc-seat-row, so ::after with position:absolute is safe and does not
   disrupt the flow grid.
   ========================================================================== */

@media (max-width: 768px) {

    .tc_set_seat {
        position: relative;
        /* Ensure the pseudo-element doesn't get clipped */
        overflow: visible;
    }

    .tc_set_seat::after {
        content: '';
        position: absolute;
        /* Center a 44px hitbox over the 24px square */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        /* Invisible but clickable */
        background: transparent;
        border-radius: 4px;
        /* Sit above the seat background for click capture */
        z-index: 1;
    }

    /* Reduce the ::after size on very dense grids to avoid overlap.
       On sub-375px viewports, seats may be even smaller. */
    @media (max-width: 374px) {
        .tc_set_seat::after {
            min-width: 38px;
            min-height: 38px;
            width: 38px;
            height: 38px;
        }
    }

    /* During pan/drag, the hit area should also be disabled */
    .tc-is-panning .tc_set_seat::after {
        pointer-events: none;
    }

    /* ── ESCENARIO / Decorative elements stacking fix ──
       Adding position:relative to .tc_set_seat (above) activates the
       plugin's inline z-index:999 on seats, causing them to render above
       the ESCENARIO stage block. We neutralize the seat z-index and give
       non-seat grid elements (labels, images, stage block) a higher value
       so they always render above the seat layer. */

    .tc_set_seat {
        /* keep: inline — neutralizes the plugin's inline z-index: 999 */
        z-index: auto !important;
    }

    .tc-element-group-wrap,
    .tc-label,
    .tc-image,
    .tc-element-wrap,
    [class*="tc-object"]:not(.tc-object-selectable),
    .tc-group-wrap > div:not(.tc-seat-row):not(.ui-selectable),
    .tc_seating_map .tc-element-group-wrap,
    .tc_seating_map .tc-label,
    .tc_seating_map .tc-image,
    .tc_seating_map .tc-element-wrap,
    .tc_seating_map [class*="tc-object"]:not(.tc-object-selectable),
    .tc_seating_map .tc-group-wrap > div:not(.tc-seat-row):not(.ui-selectable) {
        position: relative;
        /* keep: inline — the vendor JS writes z-index: 1 as a style attribute */
        z-index: 1001 !important;
    }
}


/* ==========================================================================
   11. HIGH-CONTRAST SEAT STATE BORDERS (Phase 2 — WCAG 1.4.11)

   The QA audit found that seat tier colors have contrast ratios as low as
   1.23:1 against each other. These borders add a non-color visual cue for
   each seat state, ensuring ≥ 3:1 contrast against the dark background.
   ========================================================================== */

/* Available seats — tier-specific borders (matches section colors) */
.tc_set_seat {
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Reserved / blocked — distinct dashed border + dimmed.
   S4b: the vendor sheet prints later and its span rule sits at (0,2,1) —
   the .tc_seating_map-prefixed variants reach (0,3,0), no priority. */
.tc_seat_reserved,
.tc_blocked_seat,
.tc_set_seat[aria-disabled="true"],
.tc_seating_map .tc_set_seat.tc_seat_reserved,
.tc_seating_map .tc_set_seat.tc_blocked_seat,
.tc_seating_map .tc_set_seat[aria-disabled="true"] {
    border: 2px dashed rgba(255, 255, 255, 0.35);
    opacity: 0.55;
}

/* In-cart seats — solid bright border + subtle glow */
.tc_seat_in_cart {
    border: 2px solid #4187c9;
    box-shadow: 0 0 6px rgba(65, 135, 201, 0.5);
}

/* Hover is separate from the stronger keyboard focus indicator. */
.tc_set_seat:not(.tc_seat_reserved):not(.tc_blocked_seat):not([aria-disabled="true"]):hover:not(:focus) {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.4);
    outline: none;
}




/* ==========================================================================
   12. MOBILE AUTO-ZOOM CSS TRANSFORM SUPPORT (Phase 2)

   The JS adds .ts-mobile-autozoom to the .tc-group-wrap and applies a
   CSS transform to scale the first section into view. These rules ensure
   the container handles the transform correctly.
   ========================================================================== */

@media (max-width: 768px) {

    /* The wrapper needs overflow visible for the scaled content */
    .tc_seating_map.active .tc-wrapper {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Smooth transition for programmatic zoom.
       Targets .tc-pan-wrapper (the common parent of ALL group wraps)
       instead of .tc-group-wrap (which is the ESCENARIO element). */
    .tc-pan-wrapper.ts-mobile-autozoom,
    .tc-wrapper.ts-mobile-autozoom {
        transform-origin: top left;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Body class added when seating map is open (for WhatsApp hiding) */
    body.ts-seating-active {
        overflow: hidden;
    }
}


/* ==========================================================================
   13. FIRST-TIME ONBOARDING HINT (Mobile)

   Brief instructional overlay shown on the first chart open.
   Auto-dismisses after 4s or on first touch interaction.
   ========================================================================== */

@media (max-width: 768px) {

    .ts-onboarding-hint {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.92);
        z-index: 1000015;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
        border-radius: 14px;
        background: rgba(18, 18, 18, 0.94);
        border: 1px solid rgba(201, 169, 110, 0.35);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.06);
        color: #ffffff;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.4;
        max-width: 88vw;
        pointer-events: none;
        opacity: 0;
        transition:
            opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ts-onboarding-hint--visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .ts-onboarding-hint--exiting {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }

    .ts-onboarding-hint__icon {
        font-size: 1.4rem;
        flex-shrink: 0;
        line-height: 1;
    }

    .ts-onboarding-hint__text {
        flex: 1;
        min-width: 0;
    }
}


/* ==========================================================================
   14. EDGE GLOW — Subtle gradient to hint the map continues off-screen

   Applied to the .tc-wrapper when content overflows. The gradients
   fade from transparent to a subtle gold tint at each edge.
   ========================================================================== */

@media (max-width: 768px) {

    .tc_seating_map.active .tc-wrapper::before,
    .tc_seating_map.active .tc-wrapper::after {
        content: '';
        position: fixed;
        z-index: 1000002;
        pointer-events: none;
        opacity: 0.7;
    }

    /* Right edge glow */
    .tc_seating_map.active .tc-wrapper::before {
        top: 0;
        right: 0;
        width: 24px;
        height: 100%;
        background: linear-gradient(to left,
            rgba(18, 18, 18, 0.7) 0%,
            transparent 100%
        );
    }

    /* Bottom edge glow (above the controls bar) */
    .tc_seating_map.active .tc-wrapper::after {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background: linear-gradient(to top,
            rgba(18, 18, 18, 0.7) 0%,
            transparent 100%
        );
    }
}


/* ==========================================================================
   15. REMOTE SEAT STATE CHANGE — Pulse animation

   When a seat transitions from available to sold/reserved due to another
   user's action, this pulse briefly highlights it so the user notices.
   Applied via JS when Firebase or AJAX polling detects a change.
   ========================================================================== */

@keyframes ts-seat-taken-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
    }
    50% {
        box-shadow: 0 0 12px 4px rgba(244, 67, 54, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

.ts-seat-just-taken {
    animation: ts-seat-taken-pulse 0.8s ease-out 1;
}
/*--------------------------------------------------------------
# Seating Chart — Core Patches UI (Phase 1)
#
# Visual styles for Phase 1 e-commerce guard elements:
#  1. Toast notifications (reserved seat, validation errors)
#  2. Empty-cart inline error message
#  3. WooCommerce-style success notice in seat modal
#
# @package TicketSystemTango
--------------------------------------------------------------*/


/* ==========================================================================
   1. TOAST NOTIFICATION SYSTEM
   ========================================================================== */

#ts-seating-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000020;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: 90vw;
}

.ts-seating-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
    color: #fff;
    pointer-events: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-seating-toast--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ts-seating-toast--exiting {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
}

/* ── Toast type variants ── */

.ts-seating-toast--error {
    background: rgba(180, 40, 40, 0.92);
    border: 1px solid rgba(255, 100, 100, 0.3);
}

.ts-seating-toast--success {
    background: rgba(40, 130, 70, 0.92);
    border: 1px solid rgba(100, 220, 140, 0.3);
}

.ts-seating-toast--info {
    background: rgba(30, 30, 35, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ts-seating-toast__icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

.ts-seating-toast__msg {
    flex: 1;
    min-width: 0;
}


/* ==========================================================================
   2. EMPTY-CART INLINE ERROR
   ========================================================================== */

.ts-empty-cart-error {
    display: block;
    padding: 8px 14px;
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #ff8a8a;
    background: rgba(180, 40, 40, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 8px;
    line-height: 1.4;
    animation: ts-error-entrance 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ts-empty-cart-error--hiding {
    animation: ts-error-exit 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ts-error-entrance {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ts-error-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* On mobile, error goes full-width in the checkout bar */
@media (max-width: 768px) {
    .ts-empty-cart-error {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin-top: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}


/* ==========================================================================
   3. WOOCOMMERCE SUCCESS NOTICE (inside seat modal)
   ========================================================================== */

.ts-wc-success-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 12px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
    color: #d4edda;
    background: rgba(40, 130, 70, 0.18);
    border: 1px solid rgba(100, 220, 140, 0.3);
    border-left: 4px solid #4caf7d;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-wc-success-notice--visible {
    opacity: 1;
    transform: translateY(0);
}

.ts-wc-success-notice--exiting {
    opacity: 0;
    transform: translateY(-6px);
}

.ts-wc-success-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(76, 175, 125, 0.3);
    color: #4caf7d;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}


/* ==========================================================================
   4. RESERVED SEAT — Visual indicator on hover attempt
   ========================================================================== */

.tc_seat_reserved:hover,
.tc_blocked_seat:hover,
.tc_set_seat[aria-disabled="true"]:hover,
.tc_seating_map .tc_set_seat.tc_seat_reserved:hover,
.tc_seating_map .tc_set_seat.tc_blocked_seat:hover,
.tc_seating_map .tc_set_seat[aria-disabled="true"]:hover {
    cursor: not-allowed;
}

/* Subtle shake animation when user clicks a reserved seat */
@keyframes ts-seat-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

.tc_seat_reserved:active,
.tc_blocked_seat:active {
    animation: ts-seat-shake 0.4s ease-in-out;
}
/**
 * Seating Chart Concurrency Fixes — Styles
 *
 * Fix 4: Distinct visual treatment for seats in another user's cart.
 * Ensures the "in others cart" state is unmistakably different from
 * the "available" state, even if the admin hasn't configured a
 * contrasting color.
 *
 * @since 1.0.0
 */

/* ── Seats currently held by another buyer ── */
.tc_seat_in_others_cart {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* keep clickable so the blocked-seat toast fires */
    position: relative;
}

/* Diagonal stripe overlay to visually distinguish from available seats */
.tc_seat_in_others_cart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    border-radius: inherit;
    pointer-events: none;
}


/* (S4a S1.3b) The unavailable-seat tooltip died — the blocked-seat feedback
   is a .ts-seat-toast from seatmap/feedback.js now. */

/* Persistent desktop seat labels; the existing phone summary owns mobile. */
.ts-selected-seat-summary { display: none; }

@media (min-width: 769px) {
    .tc-seating-tooltips { min-width: 0; }
    .tc-seating-tooltips .ts-selected-seat-summary:not([hidden]) {
        display: block;
        max-height: 4.8em;
        overflow: auto;
        overflow-wrap: anywhere;
        margin: 4px 0 0;
        color: var(--ts-text, #f2f0e9);
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* Keep the native desktop zoom control visible before hover or focus. */
@media (min-width: 769px) {
    .tc-wrapper .tc-zoom-wrap > .tc-zoom-slider.ui-slider {
        width: 130px;
        height: 4px;
    }

    .tc-wrapper .tc-zoom-wrap .tc-zoom-slider .ui-slider-handle {
        width: 24px;
        height: 24px;
        top: 50%;
        margin: -12px 0 0 -12px;
        background: var(--ts-gold, #c6a664);
    }

    .tc-zoom-wrap .ui-slider-handle:focus-visible {
        outline: 2px solid var(--ts-gold, #d4b273);
        outline-offset: 3px;
    }
}

/* Keep the moving chart clear of the measured native control bar. */
.tc_seating_map.active .tc-wrapper {
    top: var(--ts-camera-top, 0px);
    height: var(--ts-camera-height, 100vh) !important;
    overflow: hidden;
}
.tc_seating_map .ts-map-row-label {
    position: absolute;
    left: calc(-32px * var(--ts-map-inverse-scale, 1));
    top: 50%;
    transform: translateY(-50%);
    width: calc(28px * var(--ts-map-inverse-scale, 1));
    color: #f5f2ea;
    font: 400 calc(12px * var(--ts-map-inverse-scale, 1))/1 sans-serif;
    text-align: right;
    white-space: nowrap;
    pointer-events: none;
}
.tc_seating_map .ts-map-row-label[hidden] { display: none; }
@media (min-width: 769px) {
    .tc_seating_map .tc-element-group .tc-heading h3 {
        font-size: max(16px, calc(12px * var(--ts-map-inverse-scale, 1)));
    }
}

/* Native dialog shell spans the map. Dock its content beside the selected seat. */
@media (min-width: 769px) {
    .ui-dialog.ts-desktop-seat-dialog { inset: 0 !important; }
    .ui-dialog.ts-desktop-seat-dialog #tc-regular-modal {
        position: absolute !important;
        left: var(--ts-dialog-left, 16px);
        top: var(--ts-dialog-top, 120px);
        right: auto;
        bottom: auto;
        margin: 0;
        max-height: calc(100dvh - var(--ts-dialog-top, 120px) - 100px);
        overflow: auto;
    }
    /* mobile.js dockDesktopSeatDialog() narrows the card to fit free canvas beside the chart. */
    .ui-dialog.ts-desktop-seat-dialog #tc-regular-modal .tc-modal {
        width: var(--ts-dialog-width, 490px);
        max-width: calc(100vw - 32px);
    }
    .ui-dialog.ts-desktop-seat-dialog.ts-dialog-compact #tc-regular-modal .tc-modal {
        padding: 24px 20px 20px;
    }
    .ui-dialog.ts-desktop-seat-dialog.ts-dialog-compact #tc-regular-modal .tc-modal h5:first-of-type {
        padding-right: 48px; /* clear the 44px close button */
    }
}

/* Desktop bottom bar: the hint sat flush against the zoom control and the currency pill (round-9 check of MOE-6-385/394/401). */
@media (min-width: 769px) {
    .tc_seating_map .tc-bottom-controls-inside .tc-seating-tooltips {
        padding-inline: 16px;
        box-sizing: border-box;
        min-width: 0;
    }
}

/* Legend swatch for unavailable seats: draw it like the seats themselves (55% opacity + dashed
   border) so the grey seats that fill most of the map have a visible match (MOE-6-081/084). */
.tc_seating_map .tc-seating-legend li.tc_reserved_seat_color_status > span {
    opacity: 0.55;
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0.35);
}

/* Same for seats held by another buyer (50% + stripes, .tc_seat_in_others_cart): the
   full-strength swatch read brighter than the dark-red seats (round-11 check of MOE-6-076). */
.tc_seating_map .tc-seating-legend li.tc_in_others_cart_seat_color_status > span {
    opacity: 0.5;
    background-image: repeating-linear-gradient(-45deg, transparent 0 2px, rgba(0, 0, 0, 0.15) 2px 4px);
}