/* apps/guest/styles.css — guest-specific styles on top of /shared/theme.css.
   Dark, drunk-proof: giant type, 48px+ targets, one primary action per screen. */

.pass-qr {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: #fff;                 /* QR needs a light quiet zone to scan */
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
}
.pass-qr canvas, .pass-qr svg { width: min(260px, 68vw); height: auto; }

#pass-code { text-align: center; margin-bottom: var(--space-2); position: relative; z-index: 1; }
#pass-number { line-height: 1; }

#pass-call-btn[disabled] { opacity: 1; background: var(--bg-raised); color: var(--text-muted); border-color: var(--line-strong); pointer-events: none; }
/* Drunk-proof: this is the single most-tapped action on the pass — bigger
   than the standard --tap-lg (60px) primary-button size everywhere else. */
#pass-call-btn { min-height: 72px; font-size: var(--text-xl); padding: 0 var(--space-4); }

/* ---- Wallet-pass card: full-bleed, branded, alive ------------------------- */
#pass-card {
  position: relative;
  overflow: hidden;
  margin-inline: calc(var(--space-4) * -1);
  border-radius: 0;
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-elevated) 60%);
  border-color: var(--accent);
}
@media (min-width: 480px) {
  #pass-card { margin-inline: 0; border-radius: var(--radius-xl); }
}
/* Holographic sweep — a live pass shimmers; a screenshot of it won't. */
#pass-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,0.05) 42%, rgba(255,255,255,0.14) 48%,
    rgba(255,255,255,0.05) 54%, transparent 66%);
  transform: translateX(-60%);
  animation: gos-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gos-shimmer {
  0%, 40%   { transform: translateX(-60%); }
  70%, 100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) {
  #pass-card::before { animation: none; display: none; }
}

.pass-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: var(--weight-black); font-size: var(--text-lg);
  position: relative; z-index: 1;
}

/* Ticking clock + pulse dot — proof the pass on screen is live, not a screenshot */
.gos-live-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
  margin-top: var(--space-2); position: relative; z-index: 1;
}
.gos-live-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: gos-pulse 1.6s ease-in-out infinite;
}
@keyframes gos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .gos-live-badge .dot { animation: none; } }

/* ---- Check-in form -------------------------------------------------------- */
#checkin-form .field { display: flex; flex-direction: column; gap: var(--space-2); }
#checkin-form .field-label { display: flex; align-items: baseline; justify-content: space-between; }
#checkin-form .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#checkin-form .chip-row .gos-chip { flex: 0 0 auto; }
#checkin-form .chip-row .gos-chip .chip-icon { font-size: 1.15em; }
#checkin-form .chip-row .gos-chip .chip-price { color: var(--text-faint); font-weight: var(--weight-regular); }
#checkin-form .chip-row .gos-chip[aria-pressed="true"] .chip-price { color: var(--accent-text); }

/* Group-size stepper */
.stepper { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.stepper button {
  width: var(--tap); height: var(--tap); min-height: 0; padding: 0; border-radius: var(--radius-pill);
  font-size: var(--text-xl); line-height: 1;
}
.stepper-value { min-width: 2.5ch; text-align: center; font-size: var(--text-3xl); font-weight: var(--weight-black); }

/* Toggle upsell row */
.upsell-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.upsell-copy { display: flex; flex-direction: column; }
.upsell-price { color: var(--accent-text); font-weight: var(--weight-bold); }

.gos-switch {
  appearance: none; width: 52px; height: 32px; border-radius: var(--radius-pill);
  background: var(--bg-raised); border: 1px solid var(--line-strong); position: relative; cursor: pointer;
  flex: none; transition: background var(--motion), border-color var(--motion);
}
.gos-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--text-muted); transition: transform var(--motion), background var(--motion);
}
.gos-switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.gos-switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--accent); }

#checkin-total { align-items: baseline; }
#checkin-total .total-label { color: var(--text-muted); }
#checkin-total .total-value { font-size: var(--text-2xl); font-weight: var(--weight-black); }
#checkin-total .total-hint { display: block; font-size: var(--text-xs); color: var(--text-faint); font-weight: var(--weight-regular); }

/* ---- Group tabs ------------------------------------------------------------ */
.pass-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.pass-tab {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-muted);
  font-weight: var(--weight-bold); display: inline-flex; align-items: center; gap: var(--space-2);
}
.pass-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.pass-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.pass-tab .dot--checked_in { background: var(--info); }
.pass-tab .dot--call_requested { background: var(--warn); }
.pass-tab .dot--ready_for_pickup { background: var(--accent); }
.pass-tab .dot--picked_up { background: var(--ok); }
.pass-tab .dot--lost { background: var(--danger); }

#pass-group .group-note { font-size: var(--text-sm); }
.group-celebration { text-align: center; font-weight: var(--weight-bold); }

/* ---- Multi-pass switcher — other saved passes (different night/club) ------ */
.pass-switcher { display: flex; flex-direction: column; gap: var(--space-2); }
.pass-switcher-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.pass-switcher-chip {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-muted);
  font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pass-switcher-chip:active { transform: scale(0.98); }
.pass-switcher-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.pass-switcher-chip .dot--checked_in { background: var(--info); }
.pass-switcher-chip .dot--call_requested { background: var(--warn); }
.pass-switcher-chip .dot--ready_for_pickup { background: var(--accent); }
.pass-switcher-chip .dot--picked_up { background: var(--ok); }
.pass-switcher-chip .dot--lost { background: var(--danger); }
.pass-switcher-club { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass-switcher-num { color: var(--text-faint); font-size: var(--text-sm); white-space: nowrap; }

/* ---- Per-item group list (still checked-in vs picked up, per-item call) --- */
.group-items { display: flex; flex-direction: column; gap: var(--space-2); }
.group-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--line);
}
.group-item-icon { font-size: 1.25em; }
.group-item-num { font-weight: var(--weight-bold); min-width: 3ch; }
.group-item .gos-badge { margin-left: auto; }
.group-item-call { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.group-item-wait { font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; }

/* ---- Lost-pass recovery ---------------------------------------------------- */
#pass-recover-form { gap: var(--space-2); }
#pass-recover-code { text-align: center; letter-spacing: 0.2em; }

/* ---- Receipt --------------------------------------------------------------- */
#pass-receipt .receipt-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
#pass-receipt .receipt-row:last-child { border-bottom: 0; font-weight: var(--weight-bold); }

/* ---- Full-screen overlays (ready takeover / payment processing) ------------ */
.gos-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
}
.gos-overlay--accent { background: radial-gradient(circle at 50% 30%, var(--accent-soft), var(--bg) 70%); }
.gos-overlay-inner { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.gos-overlay-inner h1 { font-size: var(--text-2xl); }
.gos-overlay-icon { font-size: 4rem; line-height: 1; }
.gos-overlay-inner .gos-hook-number { font-size: var(--text-4xl); color: var(--accent-text); }
.gos-overlay-inner .gos-btn { margin-top: var(--space-3); }

.gos-spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid var(--line-strong); border-top-color: var(--accent);
  animation: gos-spin 0.8s linear infinite;
}
@keyframes gos-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gos-spinner { animation-duration: 4s; } }

/* ---- Notify / vibrate contextual prompt ------------------------------------ */
#pass-call-status.is-ready { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.call-pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); margin-right: var(--space-2); vertical-align: middle;
  animation: gos-pulse 1.6s ease-in-out infinite;
}

/* ---- Brightness hint (under the QR) ---------------------------------------- */
.pass-brightness-hint { text-align: center; font-size: var(--text-xs); position: relative; z-index: 1; }

/* ---- Save-pass button / primary CTA ---------------------------------------- */
.save-pass-btn { margin-top: calc(var(--space-2) * -1); }

/* ---- Platform-ordered pass actions -----------------------------------------
   Default (Android/other): "Save/Add to Home Screen" is primary and first;
   Google Wallet sits below it, demoted. body.gos-ios (set in app.js) flips
   the order so "Add to Apple Wallet" leads and the save button becomes a
   smaller secondary action underneath — see app.js updatePrimaryCta(). */
#pass-actions { display: flex; flex-direction: column; gap: var(--space-2); }
#save-pass-group { display: flex; flex-direction: column; gap: var(--space-2); order: 1; }
#wallet-buttons { order: 2; }
body.gos-ios #save-pass-group { order: 2; }
body.gos-ios #wallet-buttons { order: 1; }

/* Android/other: the save/install button IS the primary CTA. */
body.gos-android .save-pass-btn,
body.gos-other .save-pass-btn {
  min-height: var(--tap-lg);
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--text-invert);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
/* iOS: Apple Wallet already reads as primary (full-width black pill) —
   demote the save button to a quiet secondary action underneath it. */
body.gos-ios .save-pass-btn {
  background: transparent;
  border-color: var(--line);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

#install-instructions { text-align: left; }
#install-instructions ol { margin: var(--space-2) 0 0; padding-left: 1.25em; }
#install-instructions li { margin-bottom: var(--space-1); }

/* ---- Insurance chip -------------------------------------------------------- */
.gos-badge--insured { background: var(--ok-soft); color: var(--ok); }

/* ---- Native wallet buttons (Add to Apple/Google Wallet) -------------------- */
.wallet-buttons { display: flex; flex-direction: column; gap: var(--space-2); }
.wallet-btn {
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: 8px;
  background: #000;
  border: 1px solid #000;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--motion), transform var(--motion);
}
.wallet-btn:hover { opacity: 0.85; }
.wallet-btn:active { transform: scale(0.98); }
.wallet-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wallet-btn svg { flex: none; display: block; }
.wallet-btn span { line-height: 1; }
.wallet-btn[disabled] { opacity: 0.6; pointer-events: none; }

/* Google Wallet is deliberately the demoted/secondary option — the operator
   has an Apple Pass Type ID cert but no Google Wallet issuer account yet, so
   this button is a smaller, quieter outline rather than a solid black pill. */
.wallet-btn--secondary {
  min-height: 42px;
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.wallet-btn--secondary:hover { opacity: 1; background: var(--bg-raised); }

/* Platform-correct priority within the wallet row itself: iOS keeps Apple
   first (DOM order); on Android, Google Wallet leads and gets full (primary)
   prominence instead of the demoted/secondary treatment above. Apple never
   shows on real Android (detectWalletPlatforms), this only matters for the
   rare case both render (e.g. a future platform-detection change). */
body.gos-android #wallet-buttons { display: flex; flex-direction: column; }
body.gos-android .wallet-btn--google {
  order: 1; min-height: 48px; font-size: 0.95rem;
  background: #000; border-color: #000; color: #fff;
}
body.gos-android .wallet-btn--google:hover { opacity: 0.85; background: #000; }
body.gos-android .wallet-btn--apple { order: 2; }

.wallet-hint { text-align: center; font-size: var(--text-xs); padding: var(--space-1) 0; }

/* ---- Transient toast -------------------------------------------------------- */
.gos-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3) var(--space-4);
  background: var(--bg-overlay);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: center;
  z-index: 60;
}

/* ---- Bilingual (German-first) messages -------------------------------------- */
/* The `bi()` helper in app.js joins the German and English lines with a literal
   '\n'; without pre-line the newline collapses to a space and the two languages
   run together on one line. Applies to every element bi() writes into. */
#offline-banner,
.gos-notice,
.gos-toast { white-space: pre-line; }