/* FacePass component library (fp.*). Depends on tokens.css.
   Hand-written, framework-free: the Tailwind build is NOT regenerated by dotnet build, so any new
   utility class would silently have no styling. Everything new on the public site + booking funnel
   should use these classes instead. Mobile-first; 97% of traffic is a phone. */

/* ---------- Buttons ---------- */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--fp-r-12);
    font-family: var(--fp-font);
    font-size: var(--fp-t-14);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .18s var(--fp-ease), box-shadow .18s var(--fp-ease), background-color .18s var(--fp-ease), color .18s var(--fp-ease), border-color .18s var(--fp-ease);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.fp-btn:focus-visible { outline: 3px solid var(--fp-brand-100); outline-offset: 2px; }
.fp-btn:disabled, .fp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.fp-btn--primary {
    background: var(--fp-brand);
    color: #fff;
    box-shadow: var(--fp-shadow-brand);
}
.fp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(79, 70, 229, .6); color: #fff; }
.fp-btn--primary:active { transform: translateY(0); }

.fp-btn--secondary {
    background: var(--fp-white);
    color: var(--fp-ink-900);
    border-color: var(--fp-line);
    box-shadow: var(--fp-shadow-sm);
}
.fp-btn--secondary:hover { border-color: var(--fp-ink-400); color: var(--fp-ink-900); }

.fp-btn--ghost {
    background: transparent;
    color: var(--fp-brand);
    padding-left: 10px;
    padding-right: 10px;
}
.fp-btn--ghost:hover { background: var(--fp-brand-50); color: var(--fp-brand-700); }

.fp-btn--dark { background: var(--fp-ink-900); color: #fff; }
.fp-btn--dark:hover { background: #000; color: #fff; transform: translateY(-1px); }

.fp-btn--lg { min-height: 54px; padding: 0 28px; font-size: var(--fp-t-16); border-radius: var(--fp-r-16); }
.fp-btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--fp-t-13); border-radius: var(--fp-r-8); }
.fp-btn--block { display: flex; width: 100%; }
@media (max-width: 640px) {
    .fp-btn--block-mobile { display: flex; width: 100%; }
}

/* ---------- Cards ---------- */
.fp-card {
    background: var(--fp-white);
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-r-16);
    box-shadow: var(--fp-shadow-sm);
    padding: 20px;
}
@media (min-width: 768px) {
    .fp-card { padding: 28px; border-radius: var(--fp-r-24); }
}
.fp-card--elevated { box-shadow: var(--fp-shadow-md); }
.fp-card--tint { background: var(--fp-brand-50); border-color: var(--fp-brand-100); }
.fp-card--soft { background: var(--fp-surface); box-shadow: none; }
.fp-card--flush { padding: 0; overflow: hidden; }

.fp-card__title {
    margin: 0 0 16px;
    font-size: var(--fp-t-12);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp-ink-500);
}

/* ---------- Form fields ---------- */
.fp-field { display: block; margin-bottom: 14px; }
.fp-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fp-t-13);
    font-weight: 700;
    color: var(--fp-ink-700);
}
.fp-field__label .req { color: var(--fp-danger); }
.fp-input, .fp-select, .fp-textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font-family: var(--fp-font);
    font-size: var(--fp-t-16); /* 16px: stops iOS zooming the viewport on focus */
    color: var(--fp-ink-900);
    background: var(--fp-white);
    border: 1px solid #cbd5e1;
    border-radius: var(--fp-r-12);
    box-shadow: none;
    outline: none;
    transition: border-color .15s var(--fp-ease), box-shadow .15s var(--fp-ease);
    -webkit-appearance: none;
    appearance: none;
}
.fp-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.fp-input:focus, .fp-select:focus, .fp-textarea:focus {
    border-color: var(--fp-brand);
    box-shadow: 0 0 0 4px var(--fp-brand-50);
}
.fp-input.is-invalid, .fp-select.is-invalid { border-color: var(--fp-danger); }
.fp-field__hint { margin: 6px 0 0; font-size: var(--fp-t-12); color: var(--fp-ink-400); }
.fp-field__error { margin: 8px 0 0; font-size: var(--fp-t-12); font-weight: 600; color: var(--fp-danger); }

/* ---------- Pills / badges ---------- */
.fp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    background: var(--fp-surface);
    color: var(--fp-ink-500);
    border: 1px solid var(--fp-line);
    white-space: nowrap;
}
.fp-pill--brand { background: var(--fp-brand-50); color: var(--fp-brand-700); border-color: var(--fp-brand-100); }
.fp-pill--solid { background: var(--fp-brand); color: #fff; border-color: transparent; }
.fp-pill--success { background: var(--fp-success-bg); color: var(--fp-success); border-color: #bbf7d0; }
.fp-pill--warning { background: var(--fp-warning-bg); color: var(--fp-warning); border-color: #fde68a; }
.fp-pill--danger { background: var(--fp-danger-bg); color: var(--fp-danger); border-color: #fecaca; }

/* ---------- Notes / callouts ---------- */
.fp-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--fp-r-12);
    font-size: var(--fp-t-13);
    line-height: 1.5;
    color: var(--fp-ink-700);
    background: var(--fp-surface);
    border: 1px solid var(--fp-line);
}
.fp-note > i { flex-shrink: 0; margin-top: 2px; color: var(--fp-brand); }
.fp-note--brand { background: var(--fp-brand-50); border-color: var(--fp-brand-100); color: var(--fp-brand-700); }
.fp-note--warning { background: var(--fp-warning-bg); border-color: #fcd34d; color: var(--fp-warning); }
.fp-note--warning > i { color: var(--fp-warning); }
.fp-note--danger { background: var(--fp-danger-bg); border-color: #fecaca; color: #991b1b; }
.fp-note--danger > i { color: var(--fp-danger); }
.fp-note--success { background: var(--fp-success-bg); border-color: #bbf7d0; color: #166534; }
.fp-note--success > i { color: var(--fp-success); }

/* ---------- Empty state ---------- */
.fp-empty {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--fp-line);
    border-radius: var(--fp-r-16);
    background: var(--fp-surface);
}
.fp-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--fp-brand-50);
    color: var(--fp-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.fp-empty__title { margin: 0 0 6px; font-size: var(--fp-t-16); font-weight: 800; color: var(--fp-ink-900); }
.fp-empty__text { margin: 0 0 16px; font-size: var(--fp-t-14); color: var(--fp-ink-500); }

/* ---------- Page header ---------- */
.fp-page-header { margin-bottom: 24px; }
.fp-page-header__eyebrow {
    margin: 0 0 6px;
    font-size: var(--fp-t-12);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fp-brand);
}
.fp-page-header__title {
    margin: 0;
    font-size: var(--fp-t-24);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--fp-ink-900);
}
@media (min-width: 768px) { .fp-page-header__title { font-size: var(--fp-t-32); } }
.fp-page-header__sub { margin: 6px 0 0; font-size: var(--fp-t-14); color: var(--fp-ink-500); }

/* ---------- Bottom sheet ---------- */
.fp-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.fp-sheet.is-open { display: flex; }
.fp-sheet__panel {
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--fp-white);
    border-radius: var(--fp-r-24) var(--fp-r-24) 0 0;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px -20px rgba(15, 23, 42, .4);
    animation: fp-sheet-up .28s var(--fp-ease);
}
@media (min-width: 640px) {
    .fp-sheet { align-items: center; }
    .fp-sheet__panel { border-radius: var(--fp-r-24); padding: 20px 24px 24px; }
}
.fp-sheet__grip {
    width: 40px; height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--fp-line);
}
@media (min-width: 640px) { .fp-sheet__grip { display: none; } }
.fp-sheet__title { margin: 0 0 4px; font-size: var(--fp-t-20); font-weight: 800; color: var(--fp-ink-900); letter-spacing: -.01em; }
.fp-sheet__text { margin: 0 0 16px; font-size: var(--fp-t-14); color: var(--fp-ink-500); }
@keyframes fp-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Accordion (native <details>, content always in DOM for SEO) ---------- */
.fp-acc {
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-r-12);
    background: var(--fp-white);
    overflow: hidden;
}
.fp-acc + .fp-acc { margin-top: 8px; }
.fp-acc > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-size: var(--fp-t-14);
    font-weight: 700;
    color: var(--fp-ink-900);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fp-acc > summary::-webkit-details-marker { display: none; }
.fp-acc > summary .fp-acc__chev { color: var(--fp-ink-400); font-size: 12px; transition: transform .2s var(--fp-ease); flex-shrink: 0; }
.fp-acc[open] > summary .fp-acc__chev { transform: rotate(180deg); }
.fp-acc[open] > summary { border-bottom: 1px solid var(--fp-line-soft); }
.fp-acc__body { padding: 12px 16px 16px; font-size: var(--fp-t-14); line-height: 1.6; color: var(--fp-ink-500); }
.fp-acc__body p { margin: 0; }
.fp-acc__body ul { margin: 0; padding: 0; list-style: none; }
.fp-acc__body li { display: flex; gap: 10px; align-items: flex-start; }
.fp-acc__body li + li { margin-top: 8px; }
.fp-acc__body li > i { margin-top: 4px; flex-shrink: 0; }

/* ---------- Section heading ---------- */
.fp-h2 { margin: 0; font-size: var(--fp-t-20); font-weight: 800; letter-spacing: -.01em; color: var(--fp-ink-900); }
@media (min-width: 768px) { .fp-h2 { font-size: var(--fp-t-24); } }

/* ---------- Divider / stack helpers ---------- */
.fp-stack > * + * { margin-top: 12px; }
.fp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-muted { color: var(--fp-ink-500); }
.fp-small { font-size: var(--fp-t-12); }
.fp-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Compact footer ---------- */
.fp-footer {
    background: var(--fp-white);
    border-top: 1px solid var(--fp-line-soft);
    padding: 40px 16px 28px;
    font-family: var(--fp-font);
}
@media (min-width: 1024px) { .fp-footer { padding: 56px 24px 32px; } }
.fp-footer__inner { max-width: 80rem; margin: 0 auto; }
.fp-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 768px) {
    .fp-footer__top { grid-template-columns: 1.3fr 2fr; gap: 40px; align-items: start; }
}
.fp-footer__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.fp-footer__brand img { height: 32px; width: auto; }
.fp-footer__brand span { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--fp-ink-900); }
.fp-footer__tagline { margin: 10px 0 0; font-size: var(--fp-t-14); font-weight: 600; color: var(--fp-ink-500); }
.fp-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fp-footer__badge {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 12px;
    border-radius: 10px;
    background: var(--fp-ink-900); color: #fff;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: transform .15s var(--fp-ease), background-color .15s var(--fp-ease);
}
.fp-footer__badge:hover { background: #000; color: #fff; transform: translateY(-1px); }
.fp-footer__badge i { font-size: 16px; }
.fp-footer__badge small { display: block; font-size: 9px; font-weight: 600; opacity: .75; line-height: 1; margin-bottom: 2px; }
.fp-footer__social { display: flex; gap: 8px; margin-top: 14px; }
.fp-footer__social a {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--fp-line);
    color: var(--fp-ink-500);
    text-decoration: none;
    transition: color .15s var(--fp-ease), border-color .15s var(--fp-ease);
}
.fp-footer__social a:hover { color: var(--fp-brand); border-color: var(--fp-brand-100); }

.fp-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
@media (min-width: 640px) { .fp-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-footer__col h5 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-ink-400);
}
.fp-footer__col ul { list-style: none; margin: 0; padding: 0; }
.fp-footer__col li + li { margin-top: 7px; }
.fp-footer__col a {
    font-size: var(--fp-t-13);
    font-weight: 600;
    color: var(--fp-ink-700);
    text-decoration: none;
    transition: color .15s var(--fp-ease);
}
.fp-footer__col a:hover { color: var(--fp-brand); }

/* On phones, collapse each column behind a tap — every URL stays in the DOM and reachable. */
.fp-footer__col details > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0;
    -webkit-tap-highlight-color: transparent;
}
.fp-footer__col details > summary::-webkit-details-marker { display: none; }
.fp-footer__col details > summary h5 { margin: 0; }
.fp-footer__col details > summary i { font-size: 10px; color: var(--fp-ink-400); transition: transform .2s var(--fp-ease); }
.fp-footer__col details[open] > summary i { transform: rotate(180deg); }
.fp-footer__col details ul { padding-bottom: 8px; }
@media (max-width: 639px) {
    .fp-footer__cols { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--fp-line-soft); }
    .fp-footer__col details { border-bottom: 1px solid var(--fp-line-soft); }
}
@media (min-width: 640px) {
    /* Desktop: always open, summary is just the heading. */
    .fp-footer__col details > summary { pointer-events: none; padding: 0; }
    .fp-footer__col details > summary i { display: none; }
    .fp-footer__col details > summary h5 { margin-bottom: 10px; }
}

.fp-footer__explore {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--fp-line-soft);
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: var(--fp-t-12);
}
.fp-footer__explore a { color: var(--fp-ink-400); text-decoration: none; font-weight: 600; }
.fp-footer__explore a:hover { color: var(--fp-brand); }

.fp-footer__bottom {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fp-line-soft);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    font-size: var(--fp-t-12);
    color: var(--fp-ink-400);
    font-weight: 600;
}
.fp-footer__bottom a { color: var(--fp-ink-500); text-decoration: none; }
.fp-footer__bottom a:hover { color: var(--fp-brand); }
.fp-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---------- Ticket card (confirmation) ---------- */
.fp-ticket {
    position: relative;
    background: var(--fp-white);
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-r-16);
    padding: 16px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: var(--fp-shadow-sm);
}
.fp-ticket + .fp-ticket { margin-top: 10px; }
.fp-ticket__name { margin: 0; font-size: var(--fp-t-14); font-weight: 800; color: var(--fp-ink-900); }
.fp-ticket__code {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fp-t-13);
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--fp-ink-900);
    background: var(--fp-surface);
    border: 1px dashed #cbd5e1;
    border-radius: var(--fp-r-8);
}

/* ---------- Hero ticket (success screen) ---------- */
.fp-hero-ticket {
    background: linear-gradient(135deg, var(--fp-brand-700) 0%, var(--fp-brand) 55%, #6366f1 100%);
    color: #fff;
    border-radius: var(--fp-r-24);
    padding: 24px 22px;
    box-shadow: var(--fp-shadow-brand);
    position: relative;
    overflow: hidden;
}
.fp-hero-ticket::before, .fp-hero-ticket::after {
    content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; top: 50%; margin-top: -14px;
}
.fp-hero-ticket::before { left: -14px; }
.fp-hero-ticket::after { right: -14px; }
.fp-hero-ticket__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.fp-hero-ticket__title { margin: 0; font-size: var(--fp-t-24); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.fp-hero-ticket__meta { margin: 8px 0 0; font-size: var(--fp-t-13); font-weight: 600; opacity: .9; }
.fp-hero-ticket__meta i { margin-right: 6px; }
.fp-hero-ticket__divider { border: 0; border-top: 1px dashed rgba(255,255,255,.35); margin: 16px 0; }
.fp-hero-ticket__gate { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-hero-ticket__gate-label { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.fp-hero-ticket__gate-value { margin: 2px 0 0; font-size: var(--fp-t-32); font-weight: 900; line-height: 1; }
.fp-face-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    font-size: var(--fp-t-12); font-weight: 800; letter-spacing: .02em;
    white-space: nowrap;
}
.fp-face-badge i { font-size: 15px; }