/*--------------------------------------------------------------
# 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 !important;
    position: fixed;
    width: 100%;
    height: 100%;
}


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

.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;
    z-index: 1000010 !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.2rem;
    line-height: 1;
}

/* ==========================================================================
   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 !important;
    }
}


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

@media (max-width: 768px) {

    .tc-zoom-wrap {
        position: fixed !important;
        bottom: 190px !important;
        right: 12px !important;
        left: auto !important;
        top: auto !important;
        z-index: 1000005 !important;

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

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

        /* Override any plugin transforms */
        transform: none !important;
        margin: 0 !important;
    }

    /* Hide the horizontal slider on mobile */
    .tc-zoom-wrap .tc-zoom-slider {
        display: none !important;
    }

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

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

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

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

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

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

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

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


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

@media (max-width: 768px) {

    .tc_seating_map.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background: var(--ts-black, #121212) !important;
    }

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

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

    /* ── 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;
    }

    .ts-mobile-legend-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border: 1px solid rgba(201, 169, 110, 0.4);
        border-radius: 8px;
        background: rgba(201, 169, 110, 0.12);
        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: 38px;
    }

    .ts-mobile-legend-btn:active {
        background: rgba(201, 169, 110, 0.25);
        border-color: rgba(201, 169, 110, 0.6);
    }

    .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 !important;
    }

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

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

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

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

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


/* ==========================================================================
   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 !important;
    }

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

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


/* ==========================================================================
   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 !important;
}

/* 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 !important;
}


/* ==========================================================================
   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 !important;
        padding: 6px 10px !important;
        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 !important;
    }

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


/* ==========================================================================
   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 !important;
}


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

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

.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 !important;
    }

    .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 !important;
    }

    /* ── 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 {
        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) {
        position: relative;
        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 */
.tc_seat_reserved,
.tc_blocked_seat,
.tc_set_seat[aria-disabled="true"] {
    border: 2px dashed rgba(255, 255, 255, 0.35) !important;
    opacity: 0.55;
}

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

/* Hover / focus-visible — highlight ring for all available seats */
.tc_set_seat:not(.tc_seat_reserved):not(.tc_blocked_seat):not([aria-disabled="true"]):hover,
.tc_set_seat:not(.tc_seat_reserved):not(.tc_blocked_seat):not([aria-disabled="true"]):focus-visible {
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.4);
    outline: none;
}

/* Focus-visible ring for keyboard nav (Phase 3 prep) */
.tc_set_seat:focus-visible {
    outline: 2px solid var(--ts-gold, #c9a96e);
    outline-offset: 2px;
    z-index: 2;
}


/* ==========================================================================
   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 !important;
        -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 !important;
    }
}


/* ==========================================================================
   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;
}