@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Purchase pages on queenselena.com under the Queen Selena design (seat map, GA tickets, package seats,
   NLiven + SCS checkout, confirmation, pickup, expired). COLOUR SKIN ONLY: docs/Checkout-UX-Spec.md 7.3
   keeps one layout everywhere, so nothing here moves, resizes or hides anything. Swaps the near-black
   surfaces for Selena's plum and adds a gold hairline on the header and cards. The font stays the site theme's Inter:
   any other face moved the map and resized Checkout at 390px (measured 10/17). Every functional colour is left alone (seat price colours, gold selected seats, Value Seats
   magenta, Checkout button, sold-out red, success green). Loaded by HomepageTemplate::purchaseShowSkinKey()
   (preview only until approved). Same structure as strip-purchase.css. */
body.tpl-buy-selena {
    --sb-bg: #0d0614;
    --sb-surface: #1a0c25;
    --sb-surface-2: #241232;
    --sb-input: #1f0f2c;
    --sb-line: rgba(237, 196, 106, .28);
    --sb-stage: #0a0410;
    background:
        radial-gradient(ellipse 70% 30% at 0% 0%, rgba(162, 89, 255, .12), transparent 70%),
        radial-gradient(ellipse 70% 30% at 100% 0%, rgba(255, 63, 180, .08), transparent 70%),
        var(--sb-bg) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    /* queenselena.com's own site theme (Modern) font, so every line height and size stays exactly as on the live
       checkout (measured equal at 390px and 1440px, 10/17). */
    font-family: 'Inter', -apple-system, sans-serif;
}
html:has(> body.tpl-buy-selena) { background: #0d0614; }

/* Header bar: plum with the template's gold hairline. */
body.tpl-buy-selena :is(.seating-header, .site-header) {
    background: rgba(13, 6, 20, .96); border-bottom: 1px solid var(--sb-line); box-shadow: none;
}

/* Cards and panels. */
body.tpl-buy-selena :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-selena :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-selena .ga-section-card.ga-section-sold-out { background: var(--sb-surface); }

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

/* Inputs, steppers, small buttons. */
body.tpl-buy-selena :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-selena :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-selena :is(.ga-modal-quantity-display) { background: var(--sb-bg); }