/* guest-redeem-module.css — kiosk-style scan/type + burn a guest reward code.
   Token-driven (var(--rr-*)) per repo convention, same as hiring-module.css.
   Built for speed, glare, and wet hands at a drive-thru window: giant tap
   targets, big type, full-panel color per verdict — not small badges. */

.gr-section { padding: 4px 2px 40px; }

.gr-wrap { max-width: 560px; margin: 10px auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.gr-wrap--center { align-items: center; text-align: center; min-height: 40vh; justify-content: center; }

/* ── idle: scan button + manual code ─────────────────────────────── */
.gr-scan-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, rgba(242,57,247,0.22), rgba(88,249,244,0.14));
  border: 2px solid var(--rr-pink); border-radius: 20px; padding: 44px 20px;
  color: var(--rr-text); font-family: inherit; font-weight: 800; font-size: 22px;
  cursor: pointer; box-shadow: 0 0 40px rgba(242,57,247,0.22);
  transition: transform .12s var(--rr-ease, ease), box-shadow .12s var(--rr-ease, ease);
}
.gr-scan-btn:active { transform: scale(0.98); }
.gr-scan-icon { font-size: 44px; line-height: 1; }

.gr-cam-error { text-align: center; color: var(--rr-warn); font-size: 13.5px; font-weight: 600; }

.gr-divider { display: flex; align-items: center; gap: 12px; color: var(--rr-text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
.gr-divider::before, .gr-divider::after { content: ''; flex: 1; height: 1px; background: var(--rr-border); }

.gr-manual { display: flex; gap: 10px; }
.gr-manual-input {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.3); border: 2px solid var(--rr-border); border-radius: 14px;
  padding: 18px 14px; color: var(--rr-text); font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 30px; letter-spacing: 6px; text-align: center; text-transform: uppercase;
}
.gr-manual-input:focus { outline: none; border-color: var(--rr-cyan); }
.gr-redeem-btn {
  flex-shrink: 0; background: linear-gradient(90deg, var(--rr-pink), var(--rr-magenta)); border: none;
  border-radius: 14px; padding: 0 26px; color: var(--rr-text); font-family: inherit; font-weight: 800;
  font-size: 17px; cursor: pointer; box-shadow: 0 0 18px rgba(242,57,247,0.35);
}
.gr-redeem-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ── camera scan stage ────────────────────────────────────────────── */
.gr-cam-stage {
  position: relative; background: #000; border-radius: 18px; overflow: hidden;
  aspect-ratio: 1; max-height: 60vh; border: 1px solid var(--rr-border);
}
.gr-cam-stage video { width: 100%; height: 100%; object-fit: cover; }
.gr-cam-reticle {
  position: absolute; inset: 12%; border: 3px solid var(--rr-cyan); border-radius: 20px;
  box-shadow: 0 0 24px rgba(88,249,244,0.5); pointer-events: none;
}
.gr-cam-hint { text-align: center; color: var(--rr-text-muted); font-size: 13.5px; }

.gr-btn { border: none; border-radius: 12px; padding: 14px 18px; font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--rr-text); background: rgba(255,255,255,0.08); border: 1px solid var(--rr-border); }
.gr-btn--ghost { background: transparent; }

/* ── submitting ────────────────────────────────────────────────────── */
.gr-spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.14); border-top-color: var(--rr-cyan);
  animation: gr-spin 0.85s linear infinite;
}
@keyframes gr-spin { to { transform: rotate(360deg); } }
.gr-submitting-label { font-size: 16px; color: var(--rr-text-muted); font-weight: 600; }

/* ── verdict — legible at arm's length: big type, full-panel color per
   state, not a small badge. Deliberately NOT position:fixed — the entry
   animation on #view-container > * makes that element a CSS containing
   block (documented gotcha in hiring-module.js's hiringPortalModal()
   comment), so a fixed overlay here would render pinned to the section
   instead of the viewport. A large, saturated in-flow panel sidesteps it
   without needing a portal-to-body step. */
.gr-verdict {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 14px; min-height: 56vh; border-radius: 24px; padding: 48px 24px; margin-top: 6px;
  cursor: pointer; user-select: none;
}
.gr-verdict-icon { font-size: 76px; line-height: 1; }
.gr-verdict-title { font-size: 46px; font-weight: 900; letter-spacing: 1px; }
.gr-verdict-detail { font-size: 21px; line-height: 1.4; max-width: 560px; color: var(--rr-text); }

.gr-verdict--ok {
  background: radial-gradient(circle at 50% 15%, rgba(70,227,155,0.4), rgba(70,227,155,0.12));
  border: 3px solid var(--rr-ok); box-shadow: 0 0 70px rgba(70,227,155,0.4);
}
.gr-verdict--ok .gr-verdict-title { color: var(--rr-ok); }

.gr-verdict--danger {
  background: radial-gradient(circle at 50% 15%, rgba(255,107,138,0.45), rgba(255,107,138,0.14));
  border: 3px solid var(--rr-danger); box-shadow: 0 0 70px rgba(255,107,138,0.4);
}
.gr-verdict--danger .gr-verdict-title { color: var(--rr-danger); }

.gr-verdict--muted {
  background: rgba(255,255,255,0.04); border: 2px solid var(--rr-border); color: var(--rr-text-muted);
}
.gr-verdict--muted .gr-verdict-title { color: var(--rr-text); }

.gr-chip {
  display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,241,64,0.14); border: 1px solid rgba(255,241,64,0.4); color: var(--rr-yellow);
  font-size: 14px; font-weight: 700;
}

/* ── Creator Army (2026-10-12): creator-link rewards + Gold Cards ─────────
   Same glance rules as above. Color carries the decision on its own:
   green = redeemed, gold = Gold Card comp, red = no comp, neutral = rescan /
   system. The Aloha instruction is the biggest text after the title. */
.gr-scan-sub { font-size: 13px; font-weight: 600; color: var(--rr-text-muted); letter-spacing: .2px; }

.gr-chip--creator {
  background: rgba(242,57,247,0.18); border-color: rgba(242,57,247,0.6); color: var(--rr-text);
  font-size: 17px; font-weight: 800; padding: 9px 18px; box-shadow: 0 0 18px rgba(242,57,247,0.3);
}

.gr-instruction {
  width: 100%; max-width: 560px; box-sizing: border-box; margin-top: 2px; padding: 18px 18px 16px;
  border-radius: 18px; background: rgba(10,1,24,0.78); border: 3px solid var(--rr-yellow);
  box-shadow: 0 0 34px rgba(255,241,64,0.32);
}
.gr-instruction-main { font-size: 31px; font-weight: 900; line-height: 1.16; color: var(--rr-text); }
.gr-instruction-main mark {
  background: var(--rr-yellow); color: var(--rr-bg); border-radius: 6px; padding: 0 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gr-instruction-note { margin-top: 8px; font-size: 18px; font-weight: 800; color: var(--rr-yellow); letter-spacing: .2px; }

.gr-verdict-note {
  max-width: 520px; padding: 10px 16px; border-radius: 14px; background: rgba(10,1,24,0.5);
  border: 1px solid rgba(255,255,255,0.16); color: var(--rr-text); font-size: 16px; font-weight: 600; line-height: 1.4;
}
.gr-verdict-detail strong { font-weight: 900; }
.gr-verdict-hint { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--rr-text-muted); }

/* Gold Card confirmation — the face photo is the hero (crew matches it to the car). */
.gr-verdict--gold {
  background: radial-gradient(circle at 50% 14%, rgba(255,241,64,0.36), rgba(255,194,75,0.13) 58%, rgba(255,194,75,0.07));
  border: 3px solid var(--rr-yellow); box-shadow: 0 0 80px rgba(255,241,64,0.36);
  padding: 26px 20px 24px; gap: 12px;
}
.gr-verdict--gold .gr-verdict-title { color: var(--rr-yellow); font-size: 40px; letter-spacing: 3px; text-shadow: 0 0 22px rgba(255,241,64,0.5); }
.gr-gold-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--rr-yellow); opacity: .85; }
.gr-gold-photo {
  position: relative; width: min(62vw, 260px); aspect-ratio: 1; border-radius: 30px; overflow: hidden;
  border: 4px solid var(--rr-yellow); background: linear-gradient(135deg, var(--rr-violet-2), var(--rr-violet));
  box-shadow: 0 0 0 7px rgba(255,241,64,0.16), 0 0 46px rgba(255,241,64,0.45);
}
.gr-gold-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-gold-initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 84px; font-weight: 900; color: var(--rr-yellow); letter-spacing: 2px;
}
.gr-verdict--gold .gr-verdict-detail { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gr-gold-name { font-size: 32px; font-weight: 900; line-height: 1.1; color: var(--rr-text); }
.gr-gold-handle { font-size: 19px; font-weight: 700; color: var(--rr-cyan); }
.gr-gold-nophoto {
  display: none; padding: 8px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 700;
  color: var(--rr-warn); background: rgba(255,194,75,0.12); border: 1px solid rgba(255,194,75,0.45);
}
.gr-gold-photo.is-missing ~ .gr-gold-nophoto { display: block; }
/* No usable photo: initials can't be face-matched, so the tile shrinks and
   gives its height back to the "Comp ONE" instruction (two classes, so it
   beats every .gr-gold-photo size rule below). */
.gr-gold-photo.is-missing { width: min(40vw, 160px); border-radius: 24px; }
.gr-gold-photo.is-missing .gr-gold-initials { font-size: 56px; }
.gr-gold-rule { max-width: 520px; font-size: 15px; line-height: 1.45; color: var(--rr-text); opacity: .88; }

@media (max-width: 480px) {
  .gr-scan-btn { padding: 34px 16px; font-size: 19px; }
  .gr-manual { flex-direction: column; }
  .gr-manual-input { font-size: 26px; letter-spacing: 4px; }
  .gr-verdict-title { font-size: 34px; }
  .gr-verdict-icon { font-size: 56px; }
  .gr-verdict-detail { font-size: 17px; }
  .gr-instruction { padding: 14px 14px 13px; }
  .gr-instruction-main { font-size: 25px; }
  .gr-instruction-note { font-size: 16px; }
  .gr-verdict--gold { padding: 20px 14px 18px; gap: 10px; }
  .gr-verdict--gold .gr-verdict-title { font-size: 32px; letter-spacing: 2px; }
  .gr-gold-photo { width: min(58vw, 220px); border-radius: 26px; }
  .gr-gold-initials { font-size: 68px; }
  .gr-gold-name { font-size: 27px; }
  .gr-gold-handle { font-size: 17px; }
  .gr-verdict-note { font-size: 15px; }
}

/* Short screens (iPhone SE/8, any iPhone in Safari with its toolbars showing,
   iPad landscape): the Gold Card photo, name and the "Comp ONE" instruction
   must all fit above the fold — nobody scrolls at a busy window. Comes after
   the width block so it wins when both match. 800px, not 760: a 1024×768
   iPad-landscape window otherwise left the instruction just below the fold. */
@media (max-height: 800px) {
  .gr-verdict--gold { padding: 14px 12px 14px; gap: 7px; }
  .gr-verdict--gold .gr-verdict-title { font-size: 26px; letter-spacing: 2px; }
  .gr-gold-eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .gr-gold-photo { width: min(50vw, 200px, 27vh); border-radius: 22px; }
  .gr-gold-initials { font-size: 60px; }
  .gr-gold-photo.is-missing { width: min(32vw, 120px, 17vh); border-radius: 20px; }
  .gr-gold-photo.is-missing .gr-gold-initials { font-size: 44px; }
  .gr-gold-name { font-size: 24px; }
  .gr-gold-handle { font-size: 16px; }
  .gr-verdict--gold .gr-instruction { padding: 11px 12px 10px; }
  .gr-verdict--gold .gr-instruction-main { font-size: 22px; }
}