/**
 * SSS VenuePass - the phone purchase bar on the seat map.
 *
 * Built by assets/js/seat-buybar.js, which says why it exists (buyers on
 * phones could not reach checkout on the first live event night, 2026-09-25)
 * and why it is position:fixed on body rather than sticky: the theme's
 * overflow-x hidden !important on html, body and the content wrappers, and the
 * seating page's own overflow:hidden, each turn sticky into nothing.
 *
 * An external file on purpose. Everything the shortcode prints goes through
 * the content filters, which strip arrow characters and have mangled inline
 * code before; this file never passes through them.
 */

.sssvp-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the page and the map's own overlays, below the checkout and
       success modals (999999) and the seat timer's expiry overlay (100001),
       which cover it when they open. */
    z-index: 9000;
    display: none;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px;
    /* Clear of the home indicator and a notch on a phone held sideways. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    background: #1a1a2e;
    border-top: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
}

/* Two plain buttons appended straight to body, so nothing of the seating
   page's styling reaches them; everything they look like is set here. */
.sssvp-buybar-summary,
.sssvp-buybar-go {
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
}

/* The count and total. A button because tapping it goes to Your Seats. */
.sssvp-buybar-summary {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 4px 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.sssvp-buybar-summary:hover,
.sssvp-buybar-summary:focus {
    background: none;
    color: #ffffff;
}

/* Looks like the sidebar's .sssvp-btn-primary, so it reads as the same
   button. It carries the real button's label, which on a pass step can be a
   progress line ("Securing your seat, event 3 of 22"), so it may wrap. */
.sssvp-buybar-go {
    flex: 0 1 auto;
    max-width: 62%;
    min-height: 44px;
    padding: 11px 18px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #ffffff;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}
.sssvp-buybar-go:hover,
.sssvp-buybar-go:focus {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #ffffff;
}
.sssvp-buybar-go:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*
 * Phones only: the template's 768px breakpoint, where the sidebar drops
 * under the map, and a phone on its side (wider than 768 but no taller than
 * 500, the same test the map uses to size itself). A desktop keeps the
 * sidebar beside the map with the button in plain view and never sees this.
 */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
    body.sssvp-buybar-on .sssvp-buybar {
        display: flex;
    }

    /* Room at the foot of the page, so the end of the sidebar and the site
       footer can scroll clear of the bar rather than sit under it. On body,
       not the seating wrapper, so the footer is covered too. */
    body.sssvp-buybar-on {
        padding-bottom: 76px;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    /* Out of the way while the on-screen keyboard is up (seat-buybar.js). */
    body.sssvp-buybar-on.sssvp-buybar-typing .sssvp-buybar {
        display: none;
    }
}