/*!
 * Navratri Pass System — public (customer) pages
 * Builds on app.css tokens. See docs/UI.md → "Public components".
 *
 *  1. Shell: header, hero band, toran, main, footer
 *  2. Registration form: card, attendee rows, price summary
 *  3. Success / status / payment pages
 *  4. Pass verification result (VALID / INVALID / USED)
 *  5. Pass card preview
 *  6. Print
 */

/* -------------------------------------------------------------- 1. Shell */
.public-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.public-body > main { flex: 1 0 auto; }

.site-top {
    position: relative; color: #fff; isolation: isolate;
    background: var(--np-gradient-festive);
}
.site-top::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('../images/pattern.svg') center top / 160px 160px repeat;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35));
}
.site-top::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px; z-index: 2; pointer-events: none;
    background: url('../images/toran.svg') left top / 40px 14px repeat-x;
}

.site-header { position: relative; z-index: 3; padding: .85rem 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; min-width: 0; }
.brand:hover, .brand:focus { color: #fff; }
.brand-mark { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-family: var(--np-font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tagline { font-size: .78rem; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-nav { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.btn-glass {
    --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .12); --bs-btn-border-color: rgba(255, 255, 255, .28);
    --bs-btn-hover-color: var(--np-maroon); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--np-maroon); --bs-btn-active-bg: var(--np-cream); --bs-btn-active-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
@media (max-width: 575.98px) {
    .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
    .brand-name { font-size: 1rem; }
    .brand-tagline { display: none; }
    .header-nav .btn-label-long { display: none; }
}

/* Hero band */
.hero-band { position: relative; z-index: 1; padding: 2.25rem 0 4.5rem; }
.hero-content { max-width: 46rem; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; margin-bottom: 1rem;
    border-radius: var(--np-radius-pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #F3D98B;
}
.hero-eyebrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #5BE49B; box-shadow: 0 0 0 3px rgba(91, 228, 155, .25); }
.hero-eyebrow.is-closed .dot { background: #FF8A80; box-shadow: 0 0 0 3px rgba(255, 138, 128, .25); }
.hero-title { color: #fff; font-weight: 700; font-size: clamp(1.9rem, 4.5vw + .5rem, 3.25rem); line-height: 1.12; margin-bottom: .6rem; text-wrap: balance; }
.hero-title .accent { color: var(--np-marigold-light); }
.hero-tagline { color: rgba(255, 255, 255, .86); font-size: clamp(1rem, .6vw + .9rem, 1.2rem); margin-bottom: 1.25rem; max-width: 38rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.hero-meta li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: var(--np-radius-pill);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; font-weight: 500; color: #fff;
}
.hero-meta li .bi { color: var(--np-marigold-light); }
.site-top.is-compact .hero-band { padding: 1.25rem 0 3rem; }
.site-top.is-compact .hero-title { font-size: clamp(1.45rem, 2.5vw + .6rem, 2.1rem); margin-bottom: .25rem; }
.site-top.is-compact .hero-tagline { margin-bottom: 0; font-size: 1rem; }
.hero-back { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .85); font-size: .875rem; text-decoration: none; margin-bottom: .75rem; }
.hero-back:hover { color: #fff; text-decoration: underline; }
@media (max-width: 575.98px) {
    .hero-band { padding: 1.5rem 0 3.75rem; }
    .hero-meta li { font-size: .8rem; padding: .35rem .65rem; }
}

/* Main */
.public-main { position: relative; z-index: 2; padding: 2rem 0 3.5rem; }
.site-top + .public-main { padding-top: 2.25rem; }
.site-top.is-hero-hidden + .public-main { padding-top: 2.5rem; }
/* Pull the first card up over the hero band: add .overlap-hero to it. */
.overlap-hero { position: relative; z-index: 3; margin-top: -4.25rem; }
@media (max-width: 575.98px) { .overlap-hero { margin-top: -3.25rem; } }

/* Footer */
.site-footer { background: var(--np-maroon-darker); color: rgba(255, 255, 255, .78); font-size: .9rem; margin-top: auto; }
.site-footer .footer-notice { background: var(--np-marigold-subtle); color: var(--np-marigold-emphasis); border-bottom: 1px solid var(--np-marigold-border); }
.site-footer .footer-notice .container { display: flex; align-items: center; gap: .6rem; padding-top: .75rem; padding-bottom: .75rem; font-weight: 500; }
.site-footer .footer-notice .bi { font-size: 1.15rem; color: #9A7420; }
.site-footer .footer-main { padding: 2.25rem 0 1.5rem; }
.site-footer h2 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--np-marigold-light); margin-bottom: .85rem; font-family: var(--np-font-body); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--np-marigold-light); text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.footer-brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer-brand strong { font-family: var(--np-font-heading); color: #fff; font-size: 1.05rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-list li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-list .bi { color: var(--np-marigold-light); margin-top: .15rem; flex: 0 0 auto; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1rem 0 1.25rem; font-size: .8rem; color: rgba(255, 255, 255, .6); }
.footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

/* ------------------------------------------- 2. Registration form & summary */
.registration-card { border: 0; box-shadow: var(--np-shadow-lg); border-radius: var(--np-radius-lg); }
.registration-card > .card-body { padding: 1.5rem; }
@media (min-width: 768px) { .registration-card > .card-body { padding: 2rem 2.25rem; } }
.registration-card .card-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.registration-card .card-heading h2 { margin: 0; font-size: 1.35rem; }

.attendee-list { display: grid; gap: .75rem; }
.attendee-row {
    display: grid; grid-template-columns: auto 1fr 1fr; gap: .75rem; align-items: start;
    padding: .9rem; border: 1px solid var(--np-border); border-radius: var(--np-radius); background: var(--np-surface-muted);
    transition: border-color var(--np-transition), box-shadow var(--np-transition);
}
.attendee-row:focus-within { border-color: var(--np-primary-border); box-shadow: 0 0 0 3px rgba(30, 63, 123, .07); }
.attendee-number {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; margin-top: .25rem;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--np-primary); color: #fff; font-weight: 700; font-size: .875rem;
}
.attendee-row .form-label { font-size: .8rem; margin-bottom: .25rem; }
.attendee-row.is-primary .attendee-number { background: var(--np-marigold); color: #1A1204; }
.attendee-row-enter { animation: np-row-in .25s var(--np-ease); }
@keyframes np-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
    .attendee-row { grid-template-columns: auto 1fr; }
    .attendee-row > .attendee-number { grid-row: span 2; }
}

.price-summary { border: 0; border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow); overflow: hidden; }
.price-summary .card-header { background: var(--np-gradient-festive); color: #fff; border: 0; padding: 1rem 1.25rem; }
.price-summary .card-header .card-title { color: #fff; }
.price-summary .summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; color: var(--np-gray-700); }
.price-summary .summary-row strong { color: var(--np-gray-900); font-variant-numeric: tabular-nums; }
.price-summary .summary-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    margin-top: .5rem; padding-top: .85rem; border-top: 2px dashed var(--np-border-strong);
}
.price-summary .summary-total .label { font-weight: 600; color: var(--np-heading); }
.price-summary .summary-total .amount { font-family: var(--np-font-heading); font-weight: 700; font-size: 1.85rem; color: var(--np-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-summary .summary-note { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .75rem; display: flex; gap: .4rem; }
@media (min-width: 992px) { .price-summary.is-sticky { position: sticky; top: 1.5rem; } }
/* Mobile bottom bar with total + submit (optional) */
.mobile-summary-bar {
    position: sticky; bottom: 0; z-index: 10; margin: 1.5rem -1rem -3.5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--np-border); box-shadow: 0 -6px 20px rgba(20, 28, 46, .08);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mobile-summary-bar .amount { font-family: var(--np-font-heading); font-weight: 700; font-size: 1.35rem; color: var(--np-primary); }
@media (min-width: 992px) { .mobile-summary-bar { display: none; } }

/* ------------------------------------------- 3. Success / status / payment */
.success-hero { text-align: center; padding: 2rem 1rem 1.25rem; }
.success-icon {
    width: 5rem; height: 5rem; margin: 0 auto 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
    background: var(--np-success); color: #fff; box-shadow: 0 0 0 10px var(--np-success-subtle);
    animation: np-pop .45s var(--np-ease) both;
}
.success-icon.is-pending { background: var(--np-marigold); color: #1A1204; box-shadow: 0 0 0 10px var(--np-marigold-subtle); }
.success-icon.is-failed { background: var(--np-danger); box-shadow: 0 0 0 10px var(--np-danger-subtle); }
@keyframes np-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
.reference-box {
    display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem 1.5rem;
    border-radius: var(--np-radius); border: 2px dashed var(--np-primary-border); background: var(--np-primary-subtle);
}
.reference-box .label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--np-primary-emphasis); }
.reference-box .value { font-family: var(--np-font-mono); font-weight: 700; font-size: clamp(1.25rem, 3vw + .5rem, 1.75rem); color: var(--np-primary-emphasis); letter-spacing: .03em; }
.next-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; counter-reset: next; }
.next-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.next-steps li::before {
    counter-increment: next; content: counter(next);
    width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--np-teal-subtle); color: var(--np-teal); font-weight: 700; font-size: .8rem;
}
.status-card .status-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.closed-state { text-align: center; padding: 3rem 1.5rem; }
.closed-state .icon-circle { --icon-circle-size: 4.5rem; margin-bottom: 1rem; }
.pay-amount { font-family: var(--np-font-heading); font-weight: 700; font-size: clamp(2rem, 5vw, 2.75rem); color: var(--np-heading); font-variant-numeric: tabular-nums; }
.secure-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--bs-secondary-color); }
.secure-note .bi { color: var(--np-success); }

/* ------------------------------------- 4. Pass verification result states */
.verify-result {
    --verify-color: var(--np-gray-600); --verify-bg: var(--np-gray-100);
    text-align: center; border-radius: var(--np-radius-lg); overflow: hidden; background: var(--np-surface);
    box-shadow: var(--np-shadow-lg); border: 0;
}
.verify-result .verify-head { background: var(--verify-color); color: #fff; padding: 2rem 1.25rem 1.75rem; }
.verify-result .verify-icon {
    width: 5.5rem; height: 5.5rem; margin: 0 auto .85rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 3rem;
    background: rgba(255, 255, 255, .18); border: 3px solid rgba(255, 255, 255, .5);
    animation: np-pop .45s var(--np-ease) both;
}
.verify-result .verify-title { font-family: var(--np-font-heading); font-weight: 700; font-size: clamp(1.75rem, 6vw, 2.5rem); letter-spacing: .04em; text-transform: uppercase; margin: 0; color: #fff; line-height: 1.1; }
.verify-result .verify-subtitle { margin: .4rem 0 0; color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.verify-result .verify-body { padding: 1.5rem 1.25rem; text-align: left; }
.verify-result.is-valid { --verify-color: var(--np-success); }
.verify-result.is-invalid { --verify-color: var(--np-danger); }
.verify-result.is-used { --verify-color: #A87F23; }
.verify-result.is-used .verify-head { background: linear-gradient(135deg, #B98A2C, #D4A63F); color: #2B1A00; }
.verify-result.is-used .verify-title, .verify-result.is-used .verify-subtitle { color: #2B1A00; }
.verify-result.is-used .verify-icon { background: rgba(255, 255, 255, .35); border-color: rgba(43, 26, 0, .25); }
.verify-result.is-cancelled { --verify-color: var(--np-gray-700); }

/* ------------------------------------------------------- 5. Pass card preview */
.pass-card {
    --pass-notch: 14px;
    position: relative; display: grid; grid-template-columns: 9.5rem 1fr; min-height: 11rem;
    border-radius: var(--np-radius-lg); overflow: hidden; background: var(--np-surface); box-shadow: var(--np-shadow);
    border: 1px solid var(--np-border);
}
.pass-card .pass-stub {
    position: relative; color: #fff; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
    background: var(--np-gradient-festive);
}
.pass-card .pass-stub::before { content: ''; position: absolute; inset: 0; background: url('../images/pattern.svg') center / 120px 120px; opacity: .8; pointer-events: none; }
.pass-card .pass-stub > * { position: relative; }
.pass-card .pass-stub img { width: 44px; height: 44px; border-radius: 10px; }
.pass-card .pass-stub .pass-title { font-family: var(--np-font-heading); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--np-marigold-light); }
.pass-card .pass-stub .pass-event { font-family: var(--np-font-heading); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.pass-card .pass-main { position: relative; padding: 1rem 1.25rem 1rem 1.5rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-left: 2px dashed var(--np-border-strong); }
.pass-card .pass-main::before, .pass-card .pass-main::after {
    content: ''; position: absolute; left: calc(var(--pass-notch) / -2 - 1px); width: var(--pass-notch); height: var(--pass-notch);
    border-radius: 50%; background: var(--np-body-bg); border: 1px solid var(--np-border);
}
.pass-card .pass-main::before { top: calc(var(--pass-notch) / -2); }
.pass-card .pass-main::after { bottom: calc(var(--pass-notch) / -2); }
.pass-card .pass-holder { font-family: var(--np-font-heading); font-weight: 600; font-size: 1.15rem; color: var(--np-heading); margin-bottom: .15rem; }
.pass-card .pass-number { font-family: var(--np-font-mono); font-weight: 700; color: var(--np-primary); letter-spacing: .03em; }
.pass-card .pass-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.pass-card .pass-qr { width: 6.5rem; height: 6.5rem; flex: 0 0 auto; border-radius: var(--np-radius-sm); border: 1px solid var(--np-border); background: #fff; padding: .35rem; }
.pass-card .pass-qr img { width: 100%; height: 100%; display: block; }
.pass-card .pass-stamp {
    position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%) rotate(-12deg); z-index: 2;
    padding: .35rem 1rem; border: 3px solid currentColor; border-radius: var(--np-radius-sm);
    font-family: var(--np-font-heading); font-weight: 700; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap; background: rgba(255, 255, 255, .85); pointer-events: none;
}
.pass-card.is-cancelled .pass-stamp { color: var(--np-danger); }
.pass-card.is-checked-in .pass-stamp { color: var(--np-teal); }
.pass-card.is-cancelled .pass-main > :not(.pass-stamp) { opacity: .45; }
@media (max-width: 575.98px) {
    .pass-card { grid-template-columns: 1fr; }
    .pass-card .pass-stub { flex-direction: row; align-items: center; }
    .pass-card .pass-main { border-left: 0; border-top: 2px dashed var(--np-border-strong); }
    .pass-card .pass-main::before, .pass-card .pass-main::after { display: none; }
    .pass-card .pass-qr { width: 5.5rem; height: 5.5rem; }
    .pass-card .pass-stamp { font-size: 1rem; letter-spacing: .08em; padding: .25rem .7rem; }
}
.pass-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }

/* ------------------------------------------------------------------ 6. Print */
/* Brand line printed at the top of every public page (the festive header is hidden in print). */
.print-header { align-items: center; gap: .75rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 2px solid #999; }
.print-header img { width: 40px; height: 40px; }
.print-header strong { display: block; font-family: var(--np-font-heading); font-size: 14pt; color: #000; }
.print-header span { font-size: 10pt; color: #333; }
@media print {
    .print-header.print-only { display: flex !important; }
    .site-top, .site-footer .footer-main, .site-footer .footer-bottom { display: none !important; }
    .site-footer { background: none !important; color: #000 !important; }
    .site-footer .footer-notice { background: none !important; border: 1px solid #999 !important; }
    .public-main { padding: 0 !important; }
    .overlap-hero { margin-top: 0 !important; }
    .pass-card, .verify-result { box-shadow: none !important; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pass-card .pass-main::before, .pass-card .pass-main::after { background: #fff; }
}

/* ====================================================================
 * 7. Event artwork theme (navy damask · gold lettering · kurta red)
 *    Page background, hero with poster, gold call-to-action buttons.
 * ================================================================== */

/* Page background: the supplied damask artwork, fixed behind everything (phones get the portrait version). */
.public-body { background-color: #0A1730; position: relative; }
.public-body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background: #0A1730 url('../images/bg-desktop.jpg') center / cover no-repeat;
}
.public-body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(11, 26, 51, 0) 0%, rgba(5, 12, 28, .55) 100%);
}
@media (max-width: 767.98px) {
    .public-body::before { background-image: url('../images/bg-mobile.jpg'); }
}

/* Header + hero band sit directly on the artwork (no solid gradient / pattern). */
.site-top { background: linear-gradient(180deg, rgba(5, 12, 28, .62) 0%, rgba(5, 12, 28, .2) 100%); border-bottom: 1px solid rgba(212, 166, 63, .35); }
.site-top::before { display: none; }
.site-top::after { bottom: -1px; height: 3px; background: var(--np-gradient-accent-line); }
.site-header { border-bottom: 1px solid rgba(212, 166, 63, .18); }
.brand-name { color: var(--np-gold-light); }
.brand-mark { box-shadow: 0 0 0 2px rgba(212, 166, 63, .55), 0 4px 14px rgba(0, 0, 0, .35); }
.btn-glass { --bs-btn-border-color: rgba(212, 166, 63, .55); --bs-btn-hover-color: var(--np-navy-900); --bs-btn-hover-bg: var(--np-gold-light); --bs-btn-hover-border-color: var(--np-gold-light); --bs-btn-active-bg: var(--np-gold); }

/* Hero: gold gradient headline (like the poster lettering) + text/poster grid */
.hero-title {
    background: var(--np-gradient-gold-text); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--np-gold-light);
}
.hero-tagline { color: rgba(233, 237, 245, .92); }
.hero-meta li { background: rgba(5, 12, 28, .45); border-color: rgba(212, 166, 63, .4); color: #F4F6FB; }
.hero-meta li .bi { color: var(--np-gold); }
.hero-meta li.hero-price { background: var(--np-gradient-gold); border-color: var(--np-gold-deep); color: var(--np-navy-900); font-weight: 600; }
.hero-meta li.hero-price .bi { color: var(--np-navy-900); }
.hero-eyebrow { background: rgba(5, 12, 28, .5); border-color: rgba(212, 166, 63, .45); color: var(--np-gold-light); }

.hero-grid { display: grid; gap: 1.5rem; align-items: center; }
.hero-poster {
    margin: 0; width: 100%; border-radius: var(--np-radius-lg); overflow: hidden; background: var(--np-navy-900);
    border: 1px solid rgba(212, 166, 63, .6);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 0 6px rgba(212, 166, 63, .1);
}
.hero-poster img { display: block; width: 100%; height: auto; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 992px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 3rem; }
    .hero-band { padding-bottom: 5.5rem; }
}
@media (max-width: 991.98px) {
    .hero-poster { order: -1; max-width: 560px; margin-inline: auto; }
    .hero-band { padding-top: 1.25rem; }
}
@media (max-width: 575.98px) {
    .hero-cta .btn { flex: 1 1 100%; }
}

/* Gold primary call-to-action on every public page; navy stays the colour of links and secondary controls. */
.public-body .btn-primary {
    --bs-btn-color: #0B1A33; --bs-btn-bg: #D4A63F; --bs-btn-border-color: #B98A2C;
    --bs-btn-hover-color: #0B1A33; --bs-btn-hover-bg: #E3BA5A; --bs-btn-hover-border-color: #B98A2C;
    --bs-btn-active-color: #0B1A33; --bs-btn-active-bg: #C4962F; --bs-btn-active-border-color: #A87F23;
    --bs-btn-disabled-color: #0B1A33; --bs-btn-disabled-bg: #D4A63F; --bs-btn-disabled-border-color: #B98A2C;
    --bs-btn-focus-shadow-rgb: 212, 166, 63;
    background-image: var(--np-gradient-gold); font-weight: 600;
    box-shadow: 0 2px 10px rgba(185, 138, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.public-body .btn-primary:hover, .public-body .btn-primary:focus-visible { background-image: linear-gradient(135deg, #FBE9B0 0%, #EBC668 40%, #D9AE4E 100%); }
.public-body .btn-primary:disabled, .public-body .btn-primary.disabled { background-image: none; }

/* Cards float on the artwork: white surface, gold top rule. Text that is NOT inside a card is light. */
.public-main { color: #E9EDF5; }
.public-main .card, .public-main .modal-content, .public-main .alert, .public-main .pass-card, .public-main .verify-result, .public-main .status-panel { color: var(--np-ink); }
.public-main .card { border-top: 3px solid var(--np-gold); }
.public-main .price-summary { border-top: 0; }
.public-main > .container > .text-muted, .public-main > .container > p.text-muted, .public-main .on-dark-muted { color: rgba(233, 237, 245, .75) !important; }
.public-main > .container a:not(.btn):not(.card a) { color: var(--np-gold-light); }
.public-main :is(.card, .pass-card, .verify-result, .status-panel) a:not(.btn) { color: var(--np-primary); }
.price-summary .card-header { background: var(--np-gradient-festive); border-bottom: 2px solid var(--np-gold); }

/* Footer in the same navy, gold headings */
.site-footer { background: rgba(5, 12, 28, .92); border-top: 1px solid rgba(212, 166, 63, .4); }

/* Outline buttons sitting directly on the dark artwork are gold/light; inside white cards, modals and alerts they stay navy. */
.public-body .btn-outline-primary {
    --bs-btn-color: var(--np-gold-light); --bs-btn-border-color: rgba(212, 166, 63, .7);
    --bs-btn-hover-color: #0B1A33; --bs-btn-hover-bg: var(--np-gold-light); --bs-btn-hover-border-color: var(--np-gold-light);
    --bs-btn-active-color: #0B1A33; --bs-btn-active-bg: var(--np-gold); --bs-btn-active-border-color: var(--np-gold);
    --bs-btn-focus-shadow-rgb: 212, 166, 63;
}
.public-body .btn-outline-secondary {
    --bs-btn-color: #E9EDF5; --bs-btn-border-color: rgba(233, 237, 245, .45);
    --bs-btn-hover-color: #0B1A33; --bs-btn-hover-bg: #E9EDF5; --bs-btn-hover-border-color: #E9EDF5;
    --bs-btn-active-color: #0B1A33; --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 233, 237, 245;
}
.public-body :is(.card, .modal, .alert, .toast, .dropdown-menu, .pass-card, .verify-result, .status-panel, .consent-check) .btn-outline-primary {
    --bs-btn-color: var(--np-primary); --bs-btn-border-color: var(--np-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--np-primary); --bs-btn-hover-border-color: var(--np-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--np-primary-active); --bs-btn-active-border-color: var(--np-primary-active);
    --bs-btn-focus-shadow-rgb: var(--np-primary-rgb);
}
.public-body :is(.card, .modal, .alert, .toast, .dropdown-menu, .pass-card, .verify-result, .status-panel, .consent-check) .btn-outline-secondary {
    --bs-btn-color: var(--np-gray-700); --bs-btn-border-color: var(--np-gray-400);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--np-gray-700); --bs-btn-hover-border-color: var(--np-gray-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--np-gray-800); --bs-btn-active-border-color: var(--np-gray-800);
    --bs-btn-focus-shadow-rgb: var(--np-secondary-rgb);
}

/* ====================================================================
 * 8. Registration page: the form comes first.
 *    Slim hero bar; the poster sits beside the form on desktop and
 *    small at the top on phones. Tighter spacing inside the form.
 * ================================================================== */
.page-register .hero-band { padding: 1rem 0 2.5rem; }
.page-register .hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; }
.page-register .hero-content { max-width: none; }
.page-register .hero-eyebrow { margin-bottom: .5rem; padding: .2rem .65rem; font-size: .7rem; }
.page-register .hero-title { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); margin: 0 0 .1rem; }
.page-register .hero-tagline { margin: 0; font-size: .98rem; }
.page-register .hero-meta { justify-content: flex-end; }
.page-register .hero-meta li { padding: .35rem .7rem; font-size: .82rem; }
.page-register .hero-poster { max-width: 480px; margin: 0 auto 1rem; }
.page-register .overlap-hero, .page-register .overlap-hero-lg { margin-top: -1.25rem; }
.page-register .public-main { padding-top: 1.25rem; }

.side-poster {
    margin: 0 0 1rem; border-radius: var(--np-radius-lg); overflow: hidden; background: var(--np-navy-900);
    border: 1px solid rgba(212, 166, 63, .6); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.side-poster img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) { .page-register .summary-stack { top: 1rem; } }
@media (max-width: 991.98px) { .page-register .hero-meta { justify-content: flex-start; } }
@media (max-width: 575.98px) {
    .page-register .hero-band { padding: .75rem 0 1.75rem; }
    .page-register .hero-tagline { display: none; }
    .page-register .hero-poster { margin-bottom: .75rem; }
    .page-register .overlap-hero { margin-top: -1rem; }
}

/* Form: less empty space */
.page-register .registration-card > .card-body { padding: 1.25rem; }
@media (min-width: 768px) { .page-register .registration-card > .card-body { padding: 1.5rem 1.75rem; } }
.page-register .page-intro { margin-bottom: .75rem; }
.page-register .page-intro h2 { font-size: 1.2rem; margin-bottom: .1rem; }
.page-register .page-intro p { font-size: .9rem; }
.page-register .registration-progress .steps { margin-bottom: 1.1rem; }
.page-register .form-section + .form-section { margin-top: 1.1rem; padding-top: 1.1rem; }
.page-register .form-section-title { margin-bottom: .75rem; font-size: 1rem; }
.page-register .attendees-block { margin-top: .85rem; }
.page-register .attendee-list { gap: .6rem; }
.page-register .attendee-row { padding: .7rem .8rem; }
.page-register .consent-check { margin-top: .85rem; }
.page-register .submit-row { margin-top: 1rem; }
.page-register .review-box { margin-bottom: .85rem; }

/* Phones: keep the first field of the form on the first screen. */
@media (max-width: 575.98px) {
    .page-register .hero-eyebrow { display: none; }
    .page-register .hero-row { gap: .5rem; }
    .page-register .hero-meta {
        flex-wrap: nowrap; overflow-x: auto; gap: .4rem; margin-inline: -.75rem; padding: 0 .75rem .15rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .page-register .hero-meta::-webkit-scrollbar { display: none; }
    .page-register .hero-meta li { flex: 0 0 auto; white-space: nowrap; }
    .page-register .hero-band { padding-top: .6rem; padding-bottom: 1.6rem; }
}