@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('/styles/templates/strip-shared.css?v=20261023b');
/* Purchase pages under Strip (seat map, GA tickets, package seats, NLiven + SCS checkout,
   confirmation, pickup, expired). COLOUR SKIN ONLY — docs/Checkout-UX-Spec.md keeps one layout
   everywhere, so nothing here moves, resizes or hides anything. Swaps the near-black surfaces for
   Strip's midnight indigo, sets Inter, and leaves every functional colour alone (seat price colours,
   Value Seats magenta, cyan Checkout, sold-out red, success green). Loaded only when Strip is the
   active template (HomepageTemplate::purchaseSkinKey()). */
body.tpl-buy-strip {
    --sb-bg: #0b0d1f;
    --sb-surface: #141733;
    --sb-surface-2: #1c2045;
    --sb-input: #1a1e40;
    --sb-line: #2a2f5e;
    --sb-stage: #070818;
    background:
        radial-gradient(ellipse 70% 30% at 0% 0%, rgba(255, 46, 154, .09), transparent 70%),
        radial-gradient(ellipse 70% 30% at 100% 0%, rgba(25, 227, 255, .07), transparent 70%),
        var(--sb-bg) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif;
}
html:has(> body.tpl-buy-strip) { background: #0b0d1f; }
body.tpl-buy-strip :is(button, input, select, textarea) { font-family: inherit; }

/* Slim header: the page's own header bar, on indigo with the template's hairline. */
body.tpl-buy-strip :is(.seating-header, .site-header) {
    background: rgba(11, 13, 31, .96); border-bottom: 1px solid var(--sb-line); box-shadow: none;
}

/* Cards and panels. */
body.tpl-buy-strip :is(.card, .sidebar, .consumer-actions, .seat-cart-card, .checkout-card, .ga-intro-note,
    .ga-modal-card, .scs-ga-modal__card, .hold-expired-card, .ga-page:not(.ga-page--seatmap) .ga-actions) {
    background: var(--sb-surface); border-color: var(--sb-line);
}
body.tpl-buy-strip :is(.ga-section-card, .ga-summary) {
    background: linear-gradient(165deg, var(--sb-surface-2) 0%, var(--sb-surface) 100%); border-color: var(--sb-line);
}
body.tpl-buy-strip .ga-section-card.ga-section-sold-out { background: var(--sb-surface); }

/* Map stage: a touch of indigo in the black so the dark seats still read. */
body.tpl-buy-strip :is(.map-panel, .map-viewport, .map-panel svg) { background: var(--sb-stage); }

/* Inputs, steppers, small buttons. */
body.tpl-buy-strip :is(.field input, #stripe-card-element, .stripe-payment-element-wrap, .promo-row input, .promo-controls input,
    .ga-promo-input, .controls input, .controls select, .consumer-controls select, .consumer-controls input) {
    background: var(--sb-input); border-color: var(--sb-line);
}
body.tpl-buy-strip :is(.zoom-controls .zoom-btn, .ga-quantity-btn, .ga-stepper-button, .scs-ga-modal__step, .btn:not(.primary),
    .pay-alt .pay-btn, .promo-controls button, .ga-promo-apply) {
    background: var(--sb-surface-2); border-color: var(--sb-line);
}
body.tpl-buy-strip :is(.ga-modal-quantity-display) { background: var(--sb-bg); }

/* SCS confirmation + tour pickup (colour only, 2026-10-23): the card, ticket rows, calendar buttons and the
   pickup-point dropdown were still the near-black defaults under Strip. */
body.tpl-buy-strip .confirm-card { background: var(--sb-surface); border-color: var(--sb-line); }
body.tpl-buy-strip :is(.ticket-row, .cal-btn) { background: var(--sb-surface-2); border-color: var(--sb-line); }
body.tpl-buy-strip .field select { background: var(--sb-input); border-color: var(--sb-line); }