/* Pass di zona for visitors and the gate (web/zonepass.js). Mobile first (390 px). */
/* the zone pass speaks in «ok» (valid, inside) and «warn» (wait, check): the status colours of the tokens */
:root { --zp-tone: var(--color-ok); --zp-tone-soft: var(--color-ok-soft); --zp-tone-ink: var(--color-ok); --zp-warn: var(--color-warn); --zp-warn-soft: var(--color-warn-soft); }
.zp-i { width: 20px; height: 20px; flex: none; }
.zp-page { display: grid; gap: 16px; }
.zp-h2 { font-size: 16px; margin: 8px 0 -6px; }
.zp-h3 { font-size: 15px; margin: 0; }
.zp-list { display: grid; gap: 8px; }
.zp-empty { margin: 0; }
.zp-notice { margin: 0; padding: 12px 14px; border-radius: var(--r-md, 14px); background: var(--surface-2); }
.zp-notice.is-warn { background: var(--zp-warn-soft); }
.zp-notice.is-danger { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.zp-offline { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--zp-warn-soft); font-size: 14px; }
.zp-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.zp-pill.is-ok { background: var(--zp-tone-soft); color: var(--zp-tone-ink); }
.zp-pill.is-warn { background: var(--zp-warn-soft); color: var(--zp-warn); }
.zp-pill.is-danger { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); }

/* cards */
.zp-card, .zp-zone, .zp-place-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md, 14px); background: var(--surface); border: var(--card-border); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; }
.zp-card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zp-tone-soft); color: var(--zp-tone-ink); flex: none; }
.zp-card-copy, .zp-zone-copy { flex: 1; min-width: 0; }
.zp-card-copy strong, .zp-zone-copy strong { display: block; }
.zp-card-copy small, .zp-zone-copy small { display: block; color: var(--muted); }
.zp-card.is-waitlist { border-color: var(--zp-warn); }
.zp-zone { flex-wrap: wrap; }
.zp-zone-flow { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: var(--zp-tone-ink); font-weight: 650; }
.zp-place-card { border-color: var(--zp-tone); background: var(--zp-tone-soft); margin: 8px 0; }
.zp-place-card .zp-i { width: 26px; height: 26px; color: var(--zp-tone-ink); }
.zp-place-card small { display: block; color: var(--ink-2); }
.zp-info ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.zp-gate-link { justify-self: start; gap: 8px; }

/* zone page and booking */
.zp-status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zp-rules { padding: 12px 14px; border-radius: var(--r-md, 14px); background: var(--surface-2); }
.zp-rules p { margin: 6px 0 0; white-space: pre-line; }
.zp-rules.is-exempt { background: var(--zp-tone-soft); }
.zp-book { display: grid; gap: 14px; }
.zp-days { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.zp-party { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zp-party > span { display: inline-flex; gap: 6px; align-items: center; font-weight: 650; margin-right: auto; }
.zp-party output { min-width: 28px; text-align: center; font-size: 20px; font-weight: 800; }
.zp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.zp-slot { display: grid; gap: 2px; padding: 10px 6px; border-radius: var(--r-sm, 10px); border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.zp-slot strong { font-size: 16px; }
.zp-slot small { font-size: 12px; color: var(--muted); }
.zp-slot.is-open small { color: var(--zp-tone-ink); font-weight: 650; }
.zp-slot.is-full, .zp-slot.is-few { background: var(--zp-warn-soft); }
.zp-slot:disabled { opacity: .45; cursor: default; }
.zp-slot[aria-checked="true"] { outline: 3px solid var(--zp-tone); outline-offset: 1px; }
.zp-suggest { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md, 14px); background: var(--zp-tone-soft); }
.zp-suggest p { margin: 0; }
.zp-suggest-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* pass */
.zp-qr { display: grid; justify-items: center; gap: 6px; padding: 18px; border-radius: var(--r-lg, 18px); background: var(--color-block-blue-text); color: var(--color-block-yellow-text); border: var(--border-width) solid var(--color-outline); }   /* a QR stays dark on white in both themes */
.zp-qr svg { width: min(260px, 70vw); height: auto; }
.zp-qr .muted { color: color-mix(in srgb, var(--color-block-yellow-text) 78%, var(--color-block-blue-text)); }
.zp-code { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.zp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.zp-facts div { padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2); }
.zp-facts dt { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.zp-facts dd { margin: 4px 0 0; font-weight: 750; }
.zp-messages { display: grid; gap: 6px; }
.zp-messages p { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--zp-warn-soft); }
.zp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-modify { display: grid; gap: 12px; }
.zp-field { display: grid; gap: 4px; font-weight: 650; }

/* gate */
.zp-gate-form { display: grid; gap: 12px; }
.zp-gate-row { display: flex; gap: 8px; }
.zp-gate-row input { flex: 1; min-width: 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.zp-gate-result { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md, 14px); border: 2px solid var(--line); }
.zp-gate-result p { margin: 0; }
.zp-gate-result.is-ok { border-color: var(--zp-tone); background: var(--zp-tone-soft); }
.zp-gate-result.is-warn { border-color: var(--zp-warn); background: var(--zp-warn-soft); }
.zp-gate-result.is-danger { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
.zp-initials { font-size: 20px; font-weight: 800; }
.zp-gate-zone { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2); }
.zp-gate-zone small { color: var(--muted); }
.zp-scan-video { width: 100%; max-height: 60vh; border-radius: var(--r-md, 14px); background: var(--color-block-ink); }