/*
 * Arrival Pass website module (W3-03). Read on a phone at a door, often in the dark: one column, a big code, big
 * buttons. Colors come from the theme bridge (SCMUIKit.theme-bridge.css, declared on .scm-mod). Every rule is anchored
 * on .scm-mod-ArrivalPass: this file is in the website stylesheet union, so it loads on every public page.
 */

.scm-mod-ArrivalPass .ap-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem;
    color: var(--scm-surface-contrast);
}

.scm-mod-ArrivalPass .ap-header { text-align: center; }

.scm-mod-ArrivalPass .ap-venue {
    margin: 0;
    font-size: 0.95rem;
    color: var(--scm-text-muted);
}

.scm-mod-ArrivalPass .ap-holder {
    margin: 0.25rem 0 0;
    font-weight: 600;
}

.scm-mod-ArrivalPass .ap-state-line {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.scm-mod-ArrivalPass .ap-state-ready { color: var(--scm-success); }
.scm-mod-ArrivalPass .ap-state-problem { color: var(--scm-error); }
.scm-mod-ArrivalPass .ap-state-pending { color: var(--scm-warning); }
.scm-mod-ArrivalPass .ap-state-neutral { color: var(--scm-surface-contrast); }

.scm-mod-ArrivalPass .ap-countdown,
.scm-mod-ArrivalPass .ap-when,
.scm-mod-ArrivalPass .ap-muted {
    margin: 0;
    color: var(--scm-text-muted);
}

.scm-mod-ArrivalPass .ap-callout {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--scm-info-soft);
    border: 1px solid var(--scm-border);
}

.scm-mod-ArrivalPass .ap-door,
.scm-mod-ArrivalPass .ap-directions,
.scm-mod-ArrivalPass .ap-help,
.scm-mod-ArrivalPass .ap-late,
.scm-mod-ArrivalPass .ap-receipt {
    padding: 1rem;
    border-radius: 12px;
    background: var(--scm-surface-elevated);
    border: 1px solid var(--scm-border);
}

.scm-mod-ArrivalPass .ap-door-name,
.scm-mod-ArrivalPass .ap-directions h3,
.scm-mod-ArrivalPass .ap-late h3,
.scm-mod-ArrivalPass .ap-help h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.scm-mod-ArrivalPass .ap-code {
    margin: 0.25rem 0 0.75rem;
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: 0.3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.scm-mod-ArrivalPass .ap-photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 0.5rem;
    border-radius: 8px;
}

.scm-mod-ArrivalPass .ap-bay { margin: 0; }

.scm-mod-ArrivalPass .ap-bay figcaption {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--scm-text-muted);
}

.scm-mod-ArrivalPass .ap-help-actions {
    display: flex;
    gap: 0.5rem;
}

.scm-mod-ArrivalPass .ap-late .btn,
.scm-mod-ArrivalPass .ap-help-actions .btn {
    flex: 1;
    min-height: 3rem;
    font-size: 1.1rem;
}

.scm-mod-ArrivalPass .ap-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem;
}

.scm-mod-ArrivalPass .ap-details dt { color: var(--scm-text-muted); font-weight: 500; }
.scm-mod-ArrivalPass .ap-details dd { margin: 0; }

/* W4-04: "I can't get in". One thumb, in the dark: a full-width button, then the venue's reply. */
.scm-mod-ArrivalPass .ap-help-button {
    min-height: 3.5rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.scm-mod-ArrivalPass .ap-help-status {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--scm-info-soft);
    border: 1px solid var(--scm-border);
}

.scm-mod-ArrivalPass .ap-help-status p { margin: 0 0 0.25rem; }

.scm-mod-ArrivalPass .ap-help-reply {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0 0 0.75rem;
    border-left: 3px solid var(--scm-success);
}

.scm-mod-ArrivalPass .ap-help-reply p { margin: 0; font-size: 1.05rem; }

.scm-mod-ArrivalPass .ap-help-reasons {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.scm-mod-ArrivalPass .ap-help-reasons p { margin: 0; }
.scm-mod-ArrivalPass .ap-help-reasons .btn { min-height: 3rem; font-size: 1.05rem; }

/*
 * W6-01: the phone as the kiosk. A dark surface whatever the site theme (data-surface="dark" on .pl-lane), one
 * primary action per screen, targets at least 3rem tall, usable at 375px with a 16px gutter.
 */
.scm-mod-ArrivalPass .pl-start-banner {
    max-width: 32rem;
    padding: 1rem 1rem 0;
}

.scm-mod-ArrivalPass .pl-start-banner .btn { min-height: 3.5rem; font-size: 1.2rem; font-weight: 700; }

.scm-mod-ArrivalPass .pl-lane {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 1rem;
    background: #0e1116;
    color: #f2f4f7;
}

.scm-mod-ArrivalPass .pl-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background: #171b22;
    border: 1px solid #2a303b;
}

.scm-mod-ArrivalPass .pl-header { text-align: center; }
.scm-mod-ArrivalPass .pl-venue { margin: 0; font-size: 0.95rem; }

.scm-mod-ArrivalPass .pl-headline {
    margin: 0.25rem 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.scm-mod-ArrivalPass .pl-detail,
.scm-mod-ArrivalPass .pl-when { margin: 0; }

.scm-mod-ArrivalPass .pl-muted { margin: 0; color: #aeb6c2; }

.scm-mod-ArrivalPass .pl-label { margin: 0.25rem 0 0; font-weight: 600; }

.scm-mod-ArrivalPass .pl-input {
    min-height: 3.25rem;
    font-size: 1.25rem;
    background: #0e1116;
    color: #f2f4f7;
    border-color: #3a4250;
}

.scm-mod-ArrivalPass .pl-primary { min-height: 3.5rem; font-size: 1.25rem; font-weight: 700; }
.scm-mod-ArrivalPass .pl-start { min-height: 4.5rem; font-size: 1.6rem; }
.scm-mod-ArrivalPass .pl-secondary { min-height: 3rem; }

.scm-mod-ArrivalPass .pl-lane .btn:focus-visible,
.scm-mod-ArrivalPass .pl-lane a:focus-visible {
    outline: 3px solid #7cc4ff;
    outline-offset: 2px;
}

.scm-mod-ArrivalPass .pl-center { text-align: center; padding: 1.5rem 0; }

.scm-mod-ArrivalPass .pl-offline,
.scm-mod-ArrivalPass .pl-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #1d2633;
    border: 1px solid #2a303b;
}

.scm-mod-ArrivalPass .pl-refusal {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #2a1c1c;
    border: 1px solid #6b3434;
}

.scm-mod-ArrivalPass .pl-refusal p { margin: 0 0 0.25rem; }
.scm-mod-ArrivalPass .pl-refusal-what { font-weight: 600; }

.scm-mod-ArrivalPass .pl-band { text-align: center; }

.scm-mod-ArrivalPass .pl-band-left {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.scm-mod-ArrivalPass .pl-band[data-ending="true"] .pl-band-left { color: #ffb547; }

.scm-mod-ArrivalPass .pl-steps h3,
.scm-mod-ArrivalPass .pl-extend h3,
.scm-mod-ArrivalPass .pl-help h3 { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 600; }

.scm-mod-ArrivalPass .pl-steps ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }

.scm-mod-ArrivalPass .pl-extend { display: flex; flex-direction: column; gap: 0.75rem; }

.scm-mod-ArrivalPass .pl-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.scm-mod-ArrivalPass .pl-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "minutes price" "end end";
    align-items: center;
    min-height: 3.5rem;
    text-align: left;
}

.scm-mod-ArrivalPass .pl-option-minutes { grid-area: minutes; font-weight: 700; }
.scm-mod-ArrivalPass .pl-option-price { grid-area: price; justify-self: end; font-weight: 700; }
.scm-mod-ArrivalPass .pl-option-end { grid-area: end; font-size: 0.9rem; opacity: 0.8; }

.scm-mod-ArrivalPass .pl-card-field {
    padding: 0.9rem;
    border-radius: 8px;
    background: #ffffff;
    min-height: 3rem;
}

.scm-mod-ArrivalPass .pl-reasons { display: grid; gap: 0.5rem; }
.scm-mod-ArrivalPass .pl-reasons .btn { min-height: 3rem; }

.scm-mod-ArrivalPass .pl-help-status { padding: 0.75rem 1rem; border-radius: 8px; background: #1d2633; }
.scm-mod-ArrivalPass .pl-help-status p { margin: 0 0 0.25rem; }
.scm-mod-ArrivalPass .pl-help-reply { border-left: 3px solid #3fb950; padding-left: 0.75rem; }

.scm-mod-ArrivalPass .pl-contact { display: flex; gap: 0.5rem; }
.scm-mod-ArrivalPass .pl-contact .btn { flex: 1; min-height: 3rem; }

/*
 * W6-02: buy at the door. The door QR's walk-up screen. Dark by default (the street at night), with a light option the
 * guest can switch to in daylight; both meet 4.5:1 for body text. One primary action per screen, targets at least
 * 3rem tall, usable at 375px with a 16px gutter.
 */
.scm-mod-ArrivalPass .wu-walkup {
    --wu-bg: #0e1116;
    --wu-card: #171b22;
    --wu-border: #2a303b;
    --wu-ink: #f2f4f7;
    --wu-muted: #aeb6c2;
    --wu-accent: #7cc4ff;
    --wu-offer: #1d2633;
    --wu-offer-first: #12324d;
    --wu-refusal-bg: #2a1c1c;
    --wu-refusal-border: #6b3434;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 1rem;
    background: var(--wu-bg);
    color: var(--wu-ink);
}

.scm-mod-ArrivalPass .wu-walkup[data-surface="light"] {
    --wu-bg: #f6f7f9;
    --wu-card: #ffffff;
    --wu-border: #d5dae1;
    --wu-ink: #111418;
    --wu-muted: #4b5563;
    --wu-accent: #0b5cad;
    --wu-offer: #eef2f7;
    --wu-offer-first: #dbeafe;
    --wu-refusal-bg: #fdecec;
    --wu-refusal-border: #d99a9a;
}

.scm-mod-ArrivalPass .wu-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.scm-mod-ArrivalPass .wu-venue { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.scm-mod-ArrivalPass .wu-surface-toggle {
    min-height: 2.75rem;
    color: var(--wu-ink);
    border: 1px solid var(--wu-border);
    background: transparent;
    white-space: nowrap;
}

.scm-mod-ArrivalPass .wu-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--wu-card);
    border: 1px solid var(--wu-border);
}

.scm-mod-ArrivalPass .wu-headline { margin: 0.25rem 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.scm-mod-ArrivalPass .wu-headline:focus { outline: none; }
.scm-mod-ArrivalPass .wu-detail { margin: 0; font-size: 1.1rem; }
.scm-mod-ArrivalPass .wu-muted { margin: 0; color: var(--wu-muted); }
.scm-mod-ArrivalPass .wu-small { font-size: 0.9rem; }
.scm-mod-ArrivalPass .wu-label { margin: 0.25rem 0 0; font-weight: 600; font-size: 1rem; }

.scm-mod-ArrivalPass .wu-offer-list { display: grid; gap: 0.5rem; }

.scm-mod-ArrivalPass .wu-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--wu-border);
    background: var(--wu-offer);
    color: var(--wu-ink);
    text-align: left;
}

.scm-mod-ArrivalPass .wu-offer--first { background: var(--wu-offer-first); border-color: var(--wu-accent); }
.scm-mod-ArrivalPass .wu-offer:disabled { opacity: 1; color: var(--wu-muted); }
.scm-mod-ArrivalPass .wu-offer-wait { font-size: 1.15rem; font-weight: 700; }
.scm-mod-ArrivalPass .wu-offer-price { font-size: 1rem; color: var(--wu-muted); }

.scm-mod-ArrivalPass .wu-code-line {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--wu-offer);
    border: 1px solid var(--wu-border);
}

.scm-mod-ArrivalPass .wu-requirements { margin: 0; padding-left: 1.25rem; color: var(--wu-muted); }
.scm-mod-ArrivalPass .wu-requirements li { margin-bottom: 0.25rem; }

.scm-mod-ArrivalPass .wu-party { border: 0; margin: 0; padding: 0; }
.scm-mod-ArrivalPass .wu-party-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }

.scm-mod-ArrivalPass .wu-party-option {
    min-width: 3.25rem;
    min-height: 3.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wu-ink);
    background: var(--wu-offer);
    border: 1px solid var(--wu-border);
}

.scm-mod-ArrivalPass .wu-party-option[data-selected="true"] { background: var(--wu-accent); border-color: var(--wu-accent); color: var(--wu-bg); }

.scm-mod-ArrivalPass .wu-input {
    min-height: 3.25rem;
    font-size: 1.15rem;
    background: var(--wu-bg);
    color: var(--wu-ink);
    border-color: var(--wu-border);
}

.scm-mod-ArrivalPass .wu-primary { min-height: 3.5rem; font-size: 1.2rem; font-weight: 700; }
.scm-mod-ArrivalPass .wu-secondary { min-height: 3rem; color: var(--wu-ink); border-color: var(--wu-border); }
.scm-mod-ArrivalPass .wu-back { align-self: flex-start; padding-left: 0; min-height: 2.75rem; color: var(--wu-accent); }

.scm-mod-ArrivalPass .wu-walkup .btn:focus-visible,
.scm-mod-ArrivalPass .wu-walkup a:focus-visible,
.scm-mod-ArrivalPass .wu-walkup input:focus-visible {
    outline: 3px solid var(--wu-accent);
    outline-offset: 2px;
}

.scm-mod-ArrivalPass .wu-center { text-align: center; padding: 1.5rem 0; }

.scm-mod-ArrivalPass .wu-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--wu-offer);
    border: 1px solid var(--wu-border);
}

.scm-mod-ArrivalPass .wu-refusal {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--wu-refusal-bg);
    border: 1px solid var(--wu-refusal-border);
}

.scm-mod-ArrivalPass .wu-refusal p { margin: 0 0 0.25rem; }
.scm-mod-ArrivalPass .wu-refusal-what { font-weight: 600; }

.scm-mod-ArrivalPass .wu-footer { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.25rem; }
.scm-mod-ArrivalPass .wu-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .scm-mod-ArrivalPass .wu-walkup .spinner-border { animation-duration: 2s; }
}