/*
 * UI v3, Step 4: guest-facing pages (public event page, song requests, RSVP form, invitation pages, attendee view).
 * RFC docs/rfcs/2026-10-24_ui_foundation.md. Loaded only when UI_V3_ENABLED is on, after ui-v3-host.css.
 *
 * The invitation DESIGNS (Luxe IV, Royal Luxe V, tribute flyers) are the host's choice and keep their own look.
 * This file only touches the platform's chrome around them, plus a 12px floor on their small print.
 */

/* ============ 1. Public event page (/e/{slug}) ============ */
/* The blurred cover backdrop faded to transparent at the screen edge, letting the white page show through as grey smears. */
.ui-v3 .pub-cover-backdrop { inset: -96px; }
html:has(.pub-card) { background: #0b0716; }
.ui-v3 .pub-title { text-align: left; }
.ui-v3:has(.pub-card) :is(.pub-title, .pub-label, .pub-desc, .pub-pill, .pub-body, .pub-host-btn, .pub-card button, .pub-card a, .pub-card p, .pub-card span, .pub-card strong, .pub-card h1, .pub-card h2, .pub-card h3) { font-family: var(--ds-font) !important; }
.ui-v3 .pub-pill-meta .label { font-size: .75rem; letter-spacing: .08em; }
.ui-v3 .pub-host-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ds-tap); }
.ui-v3 .pub-desc { color: #cbd5e1; }
.ui-v3 .pub-host-btn { color: #d4bbff; }

/* The layout's pastel page gradient (.app-main-container) painted over this page's midnight background; the dark cover
   backdrop then turned it into grey fog. Remove the pastel layer and the page is the deep purple it was designed to be. */
.ui-v3:has(.pub-card) .app-main-container, .ui-v3:has(.sr-card) .app-main-container { background: none !important; }

/* ============ 2. Song requests ============ */
/* main.css gives every <section> min-height: 100vh - 100px, which turned the "claim your spot" card into a screen-high empty box. */
.ui-v3 .sr-card { min-height: 0; }
.ui-v3:has(.sr-card) :is(h1, h2, h3, p, a, button, input, label, span, strong, small) { font-family: var(--ds-font) !important; }

/* ============ 3. Dialogs: close buttons are real targets ============ */
@media (pointer: coarse), (max-width: 1199.98px) {
  .ui-v3 .modal .btn-close { width: var(--ds-tap); height: var(--ds-tap); padding: 0; background-size: 14px; }
  .ui-v3 .modal :is(.btn, .form-control, .form-select, select, input:not([type="checkbox"]):not([type="radio"])) { min-height: var(--ds-tap); }
}

/* ============ 4. Invitation designs: keep the design, lift the small print to 12px ============ */
.ui-v3 .luxe-iv-wrapper :is(.itinerary-label, .luxe-invitation-intro, .family-sign-label, .ornate-hairline-separator .diamond, .layout-badge) { font-size: .75rem; }
.ui-v3 .luxe-iv-wrapper :is(.itinerary-val, .fellowship-message, .family-invitation-note) { font-size: .8125rem; }
.ui-v3 .luxe-iv-wrapper .itinerary-val small { font-size: .75rem; }

/* The guest-gate dialog (RSVP on an invitation link) */
@media (pointer: coarse), (max-width: 1199.98px) {
  .ui-v3 .pp-gate-close { width: var(--ds-tap); height: var(--ds-tap); }
  .ui-v3 .pp-gate-link { display: inline-flex; align-items: center; min-height: var(--ds-tap); }
}
.ui-v3 .luxe-iv-wrapper .itinerary-val small { font-size: .75rem !important; }
.ui-v3 :is(.pp-gate-eyebrow, #ppGateDialog span, #ppGateDialog small) { font-size: .75rem; }
.ui-v3 :is(#ppGateDialog, #ppGuestGate) :is([style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:10px"], [style*="font-size: 10px"]) { font-size: .75rem !important; }

/* ============ 5. Royal Luxe V invitation designs: audited in all 40 layouts and every palette (RFC Step 5) ============ */
/* Small print was 11px in every design; 12px, nothing else about the type changes. */
.ui-v3 .rlv-card :is(.rlv-d dt, .deco-small, .bru-mono, .holo-kicker, .kin-hint, .kin-tag, .lux-kicker),
.ui-v3 .rlv-share-label { font-size: .75rem !important; }
/* Brutalist: white text on the palette accent was 3.5:1 (pink, red) and 1.5:1 (yellow). Lighten the accent and use ink text. */
@supports (color: color-mix(in srgb, red, blue)) {
  .ui-v3 .bru-monoacc .bru-pop,
  .ui-v3 .bru-divided .bru-top,
  .ui-v3 .rlv-stage[data-rlv-direction="brutalist"] .rlv-btn-rsvp { background: color-mix(in srgb, var(--rlv-a) 68%, #ffffff); color: #0b0b0b; text-shadow: none; }
}
.ui-v3 .bru-type small { color: var(--bru-ink, #0b0b0b); opacity: 1; }
/* Luxury 3D, depth cards: gold kicker and labels on the dark glass were 3.4-3.6:1 */
.ui-v3 .lux-depth :is(.lux-kicker, .rlv-d dt) { color: #f3e1a2; }
/* Couture Stationery: the same 12px floor for the labels, tags and dates; the decorative wax-seal stamp keeps its size */
.ui-v3 :is(.st-toolbar-label, .st-cover-tag, .st-placeholder-date, .st-ledger-label, .st-seal-text, .st-cover-footer, .st-cover-meta-pill, .st-cover-meta-pill span) { font-size: .75rem !important; }
.ui-v3 .st-cover-footer :is(div, span), .ui-v3 .deco-spelled div { font-size: .75rem !important; }

/* ============ 6. Ticket pages: buy, confirmation, cancelled ============ */
/* Same layering fix as the public event page: the layout's pastel gradient painted over these midnight pages. */
.ui-v3:has(.checkout-card, .order-box, .cancel-card) .app-main-container { background: none !important; }
.ui-v3:has(.checkout-card, .order-box, .cancel-card) :is(h1, h2, h3, p, a, span, div, label, input, select, button, small, strong) { font-family: var(--ds-font) !important; }
.ui-v3 :is(.btn-view-pass, .btn-retry, .btn-event) { min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }
.ui-v3 .checkout-card a[href^="/e/"] { min-height: var(--ds-tap); display: inline-flex; align-items: center; }
.ui-v3:has(.order-box, .cancel-card) h1 { color: #c4a1ff !important; }
.ui-v3 .checkout-card .event-badge { color: #d4bbff; }
.ui-v3 .checkout-card .ticket-price-box > div:first-child > div:nth-child(2) { color: #b8b8c2 !important; } /* "Includes instant QR pass" was 40% white */