/**
 * Phone seating workspace. The Seating module places the native legend in
 * the same flow container as selection and checkout. One surface and natural
 * heights replace the three overlapping strips and fixed-offset seams.
 * Vendor and historical TicketPanel rules require scoped priority overrides.
 */
.ts-map-help,
.ts-zoom-out-btn {
    display: none;
}

@media (max-width: 768px) {
    .ts-map-phone .tc-wrapper {
        overflow: hidden !important;
        touch-action: auto;
    }

    .ts-map-phone .tc-pan-wrapper {
        touch-action: none;
    }

    .ts-map-phone .tc-wrapper::before {
        content: '';
        position: fixed;
        inset: 0 0 auto;
        height: 124px;
        z-index: 1000000009;
        background: linear-gradient(#1a1a1a 0 82%, rgb(26 26 26 / 0%));
        pointer-events: none;
    }

    .ts-map-phone .tc-bottom-controls {
        position: fixed;
        inset: auto 0 0 !important;
        width: 100%;
        height: auto;
        background: #232323 !important;
        border: 1px solid #414141 !important;
        border-bottom: 0 !important;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 28px rgb(0 0 0 / 24%);
        backdrop-filter: none;
        padding: 12px 0 0;
        box-sizing: border-box;
    }

    .ts-map-phone .tc-bottom-controls-inside,
    .ts-map-phone .tc-seating-legend,
    .ts-map-phone .tc-seatchart-cart-info {
        background: transparent !important;
        width: 100% !important;
        margin: 0;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        display: block !important;
        min-width: 0;
    }

    .ts-map-phone .tc-seating-legend-wrap {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        max-height: none !important;
        height: auto;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        transition: none;
    }

    .ts-map-phone .tc-seating-legend-wrap::before,
    .ts-map-phone .tc-seating-legend-wrap::after,
    .ts-map-phone .tc-legend-arrow {
        display: none !important;
    }

    .ts-map-phone .tc-seating-legend ul {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 0 16px 8px !important;
        overflow: visible !important;
    }

    /* Expanded: price chips span the row; the three status swatches share one row
       as in the collapsed strip. One per row pushed 'En carrito de otro' below the
       sheet's scroll fold (round-11 sweep, seated/legend on phones). */
    .ts-map-phone .tc-legend-expanded .tc-seating-legend ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: min(32dvh, 240px);
        overflow: hidden auto !important;
        touch-action: pan-y;
    }

    .ts-map-phone .tc-seating-legend ul li:not(.tc-hidden) {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        max-width: none;
        padding: 6px !important;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        border: 1px solid #494949 !important;
        border-radius: 10px;
        background: transparent !important;
        color: #f5f2ea !important;
        font: 500 13px/1.4 var(--font-body, sans-serif) !important;
        box-sizing: border-box;
    }

    .ts-map-phone .tc-legend-expanded .tc-ticket-listing {
        grid-column: 1 / -1;
        flex: 1 0 100%;
        white-space: normal;
    }

    .ts-map-phone .tc-seating-legend ul li > span {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px;
        min-height: 12px;
        border-radius: 3px !important;
        flex-shrink: 0;
    }

    .ts-map-phone .tc-seating-legend ul li:not(.tc-ticket-listing) {
        border-color: transparent !important;
        color: #d4d0c7 !important;
        font-size: 11px !important;
        min-height: 30px;
        padding: 2px !important;
    }

    .ts-map-phone .ts-mobile-info-row {
        display: flex;
        min-height: 44px;
        padding: 0 16px;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        border: 0;
        background: transparent;
    }

    .ts-map-phone .ts-seat-count-badge {
        min-width: 0;
        color: #e5e0d5;
        gap: 7px;
    }

    .ts-map-phone .ts-seat-count-labels {
        font-size: 12px;
        color: inherit;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ts-map-phone .ts-seat-count-num {
        background: transparent;
        color: #d4b273;
        border: 1px solid #d4b273;
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .ts-map-phone .ts-mobile-legend-btn {
        min-height: 44px;
        flex: 0 0 auto;
        padding: 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        color: #e5e0d5 !important;
        font: 500 12px/1.3 var(--font-body, sans-serif);
        letter-spacing: 0;
        text-transform: none;
        gap: 6px;
    }

    .ts-map-phone .ts-mobile-legend-btn svg {
        display: none;
    }

    .ts-map-phone .ts-mobile-legend-btn::after {
        display: inline-block;
        content: '+';
        font-size: 20px;
        width: 16px;
    }

    .ts-map-phone .ts-mobile-legend-btn[aria-expanded='true']::after {
        content: '−';
    }

    .ts-map-phone .tc-checkout-bar {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px 16px;
        padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: transparent;
    }

    .ts-map-phone .tc-checkout-bar .ts-currency-toggle {
        background: transparent;
        border: 1px solid #69665e;
    }

    .ts-map-phone .tc-checkout-bar .ts-currency-toggle__btn {
        min-height: 44px !important;
        min-width: 44px;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .ts-map-phone .tc-checkout-bar .tc-seatchart-subtotal {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        color: #d4d0c7 !important;
        font-size: 12px !important;
        line-height: 1.3;
    }

    .ts-map-phone .tc-checkout-bar .tc-seatchart-subtotal strong {
        color: #f5f2ea !important;
        font-size: 20px !important;
        line-height: 1.4;
        white-space: nowrap;
    }

    .ts-map-phone .tc-checkout-bar .tc-checkout-button {
        grid-column: 1 / -1;
        width: 100% !important;
        min-height: 48px;
        margin: 0;
        padding: 0 16px !important;
        background: #d4b273 !important;
        color: #1a1a1a !important;
        border: 1px solid transparent;
        border-radius: 10px !important;
        font: 600 14px/1.3 var(--font-body, sans-serif) !important;
        letter-spacing: 0;
        box-sizing: border-box;
    }

    .ts-map-phone .tc-checkout-bar .tc-checkout-button.ts-btn-disabled {
        background: #38362f !important;
        color: #aaa18d !important;
        border-color: #545047;
    }

    .ts-map-phone .tc-zoom-wrap {
        position: fixed !important;
        top: 16px !important;
        right: 76px !important;
        bottom: auto !important;
        left: auto !important;
        display: flex;
        flex-direction: row;
        width: auto !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: #232323 !important;
        border: 1px solid #69665e !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: hidden;
    }

    /* The legacy expanding drawer hid zoom via body:has(). Controls now
       stay above the sheet and remain visible to keyboard users too. */
    .ts-map-phone .tc-bottom-controls .tc-bottom-controls-inside .tc-zoom-wrap {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .ts-map-phone .tc-zoom-wrap .tc-plus-wrap,
    .ts-map-phone .tc-zoom-wrap .tc-minus-wrap {
        width: 44px;
        height: 44px;
        border-radius: 0;
    }

    .ts-map-phone .tc-full-screen {
        top: 16px !important;
        right: 16px !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 10px;
        transform: none;
        background: #232323 !important;
        border-color: #69665e !important;
    }

    .ts-map-phone .ts-zoom-out-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        z-index: 1000000015;
        top: 16px;
        left: 16px;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid #69665e;
        border-radius: 10px;
        background: #232323;
        color: #f5f2ea;
        font: 500 13px/1.3 var(--font-body, sans-serif);
        text-transform: none;
        letter-spacing: 0;
    }

    .ts-map-phone .ts-stage-cue {
        top: 88px;
        font-size: 11px;
    }

    .ts-map-phone .ts-map-help {
        display: block;
        position: fixed;
        z-index: 1000000014;
        top: 66px;
        left: 16px;
        right: 16px;
        margin: 0;
        color: #d4d0c7;
        text-align: center;
        font: 400 11px/1.4 var(--font-body, sans-serif);
        pointer-events: none;
    }

    /* Overlapping invisible hitboxes picked a neighbour on dense charts.
       Seats retain their real targets; zoom enlarges geometry before choosing. */
    .ts-map-phone .tc_set_seat::after {
        display: none;
    }

    .ui-dialog.ui-widget.ts-phone-seat-dialog {
        position: fixed !important;
        inset: 0 !important;
        transform: none;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        padding: 24px 16px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none;
        box-sizing: border-box;
    }

    .ts-phone-seat-dialog .tc-modal-wrap.ui-dialog-content {
        position: relative;
        inset: auto;
        margin: auto;
        max-height: calc(100dvh - 48px);
        max-width: 440px;
        width: 100%;
        overflow-y: auto;
    }

    .ts-phone-seat-dialog .tc-modal-wrap .tc-modal,
    .ts-phone-seat-dialog .tc-modal-wrap .tc-modal-woobridge {
        min-width: 0;
        max-width: 100%;
        padding: 24px 20px 20px;
        box-sizing: border-box;
    }

    .ts-phone-seat-dialog .tc-modal h5,
    .ts-phone-seat-dialog .tc-modal-woobridge h5 {
        padding-right: 36px;
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 1.5;
    }

    .ts-phone-seat-dialog .tc-modal h5:first-of-type > span {
        display: block;
    }

    .ts-phone-seat-dialog .tc_regular_modal_seat_label::before {
        content: 'Asiento ';
    }

    .ts-phone-seat-dialog .tc-modal-wrap .tc_modal_close_dialog {
        top: 12px;
        right: 12px;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .ts-phone-seat-dialog .tc-modal-wrap .tc_cart_button,
    .ts-phone-seat-dialog .tc-modal-wrap .tc_remove_from_cart_button {
        min-height: 48px;
        margin: 16px 0 0;
        border-radius: 10px;
        font-size: 14px;
    }

    .ts-map-phone button:focus-visible,
    .ts-map-phone .tc-seating-legend ul:focus-visible {
        outline: 2px solid #f5f2ea;
        outline-offset: 3px;
    }
}