/**
 * TNEW style overrides.
 * Use !important to win over main.css when needed.
 */

.c-cross-sell.upsellDonations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hide default gala upsell CTA (dropdown + button) until tnew_mods.js replaces it */
.c-cross-sell.upsellDonations .c-cross-sell__cta {
    display: none !important;
}

/* Show CTA when fetch fails and we show the fallback link */
.c-cross-sell.upsellDonations .c-cross-sell__cta--fallback {
    display: block !important;
}

/*
 * SYOS Issue B: TNEW's upgraded seat icons bake a price-level letter
 * (A/B/C/G) into each circle as a sibling <path>, not as <text>.
 * Hide those letter paths so seats render as plain colored dots.
 * JS in tnew_mods.js also removes the paths, because <use> clones
 * can ignore CSS on the <symbol> in some browsers.
 */
symbol[id^="tn-syos-seat-map-icon-circle-"]:not([id*="star"]):not([id*="wheelchair"]) > path,
.tn-syos-legend svg[aria-label*="Character"] > path {
    display: none !important;
}

/* Extra-info seats: full star, colored like the price-level dot (matches live) */
symbol[id*="-star"]:not([id*="donut"]) path,
.tn-syos-legend svg[aria-label="Star"] path {
    fill: currentColor;
}

/* Wheelchair seats: colored disc + white pictogram (matches live) */
symbol[id*="-wheelchair"]:not([id*="donut"]) circle,
.tn-syos-legend svg[aria-label="Wheelchair"] circle {
    fill: currentColor;
}
symbol[id*="-wheelchair"] [fill="#FFF"],
.tn-syos-legend svg[aria-label="Wheelchair"] [fill="#FFF"] {
    fill: #FFF !important;
}

/* Live unavailable gray is #CCC; new TNEW uses #757575 */
.tn-syos-seat-map use[href="#tn-syos-seat-map-icon-square"],
.tn-syos-seat-map use[*|href="#tn-syos-seat-map-icon-square"],
#tn-syos-seat-map-icon-square circle,
.tn-syos-legend svg.tn-syos-seat-map__seat--unavailable,
.tn-syos-legend svg.tn-syos-seat-map__seat--unavailable * {
    fill: #CCC !important;
    color: #CCC !important;
}

/*
 * TNEW draws a focus ring in a separate <g>. That overlay sits on
 * top of the <use> and steals the tap, so mouseover/focus shows a
 * ring but click never reaches the seat (no ticket-type modal).
 * Hide it and ignore pointer events. Selected seats still switch
 * to the donut icon.
 */
#tn-syos-seat-focus-outline {
    display: none !important;
    pointer-events: none !important;
}
.tn-syos-seat-map use:focus,
.tn-syos-seat-map use:focus-visible {
    outline: none !important;
}

/*
 * Hover popover vs click modal:
 * TNEW shows .tn-syos-seat-info-popover on mouseover (preview, no
 * ticket-type buttons) and .tn-syos-price-type-selector on click
 * (the modal with Choose a ticket type). Touch devices synthesize
 * mouseover before click, so a tap sticks on the hover preview.
 * Hide that preview when there is no hover (phones/tablets) so the
 * tap can open the modal. pointer-events: none keeps a visible
 * desktop preview from swallowing the subsequent click.
 */
.tn-syos-seat-info-popover {
    pointer-events: none !important;
}

@media (max-width: 767px), (hover: none) {
    .tn-syos-seat-info-popover {
        display: none !important;
    }

    /*
     * main.css sets body.tn-syos--viewing-seats .tn-syos { z-index: 10000 }
     * so the fullscreen map stacks above Bootstrap's modal (1050).
     * Upgraded TNEW puts ticket types in .tn-syos-price-types-selector-modal,
     * not the old .tn-syos-price-type-selector — raise both the modal and
     * its backdrop above the map.
     */
    .tn-syos-price-types-selector-modal,
    .tn-syos-price-type-selector,
    .tn-syos-cart.tn-syos-mobile-popover {
        z-index: 10050 !important;
    }

    body.tn-syos--viewing-seats .modal-backdrop {
        z-index: 10040 !important;
    }
}

/*
 * Mobile SYOS: drop the desktop Baker-Baum overlay.
 * main.css positions ~520 seats with pixel matrices and a % floorplan
 * calibrated for the desktop map. TNEW mobile is a fullscreen pan/zoom
 * of the native SVG (fixed viewport, transform-origin 0 0 on
 * .tn-syos-seat-map). Those coordinate systems do not match, so seats
 * miss the drawing. Below 768px — TNEW's own mobile breakpoint —
 * restore native map geometry.
 */
@media (max-width: 767px) {
    .tn-syos-seat-map__seat {
        transform: none !important;
    }

    .state--venue-baker-baum .tn-syos-seat-map::before {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    body.tn-syos--viewing-seats .tn-syos-seat-map__non-seats {
        visibility: visible !important;
    }

    body.tn-syos--viewing-seats .tn-syos-seat-container,
    body.tn-syos--viewing-seats .tn-syos-seat-container-viewport__content-wrapper,
    body.tn-syos--viewing-seats .tn-syos-seat-container-viewport {
        height: unset !important;
        min-height: unset !important;
    }

    body.tn-syos--viewing-seats .tn-syos-seat-map__svg {
        overflow: unset !important;
    }
}

/*
 * TNEW sizes map/cart icon buttons as flex squares with padding: 0.
 * Substrakt main.css loads Bootstrap .btn after tnew-syos.css, so
 * padding: 8px 15px and display: inline-block win and shove the
 * SVG / label off-center.
 */
.btn.tn-syos-zoom-control__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.tn-syos-zoom-control__btn .tn-icon {
    display: block;
    flex: 0 0 auto;
}

.btn.tn-syos-mobile-cart-controls__btn-view-cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.tn-syos-mobile-cart-controls__btn-view-cart-icon {
    display: block;
}

.btn.tn-syos__btn-add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 35px !important;
}

/*
 * Seat popup price-type button: Bootstrap .btn is display: inline-block,
 * so the description and price stack as blocks (price right-aligned).
 * Keep them on one centered row with a 10px gap, same type size.
 */
.btn.tn-syos-seat-info__price-type--button {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
}

.btn.tn-syos-seat-info__price-type--button .tn-syos-seat-info__price-type-description,
.btn.tn-syos-seat-info__price-type--button .tn-syos-seat-info__price-type-price {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    margin: 0;
    text-align: center;
    font-size: 1.1em;
}

/* Seat popup header: stacked Section/Row/Seat on the left, VFS photo on the right */
.tn-syos-seat-info__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tn-syos-seat-info__table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    margin: 0;
}

.tn-syos-seat-info__column {
    display: block !important;
}

.tn-syos-seat-info__header .vfs__image-container {
    flex: 0 0 270px;
    max-width: 270px;
    padding: 0;
}

.tn-syos-seat-info__header .vfs__link {
    max-width: 270px;
    margin-top: 0;
}

@media (max-width: 767px) {
    .tn-syos-seat-info__header {
        flex-direction: column;
    }

    .tn-syos-seat-info__header .vfs__image-container {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }
}

/*
 * TNEW upgrade added Bootstrap .btn.btn-default to Forgot password.
 * That paints a navy button over the existing #id text-link styles
 * (orange underline, franklin gothic). Strip the button chrome.
 */
#tn-account-login-forgot-login-link.btn,
#tn-account-login-forgot-login-link.btn:hover,
#tn-account-login-forgot-login-link.btn:focus,
#tn-account-login-forgot-login-link.btn:active {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}