/* =========================================================================
   Customer Tour Club page (/demo and /t/:slug)

   Ticket-card composition modelled on the live mamastourclub.com customer
   flow, rebuilt on the MyFoodTruckIQ palette (CLAUDE.md §7). Every rule is
   scoped to .tc-page so nothing here leaks into the marketing site or the
   operator app in styles.css. --tc-brand / --tc-accent / --tc-bg are set
   inline per truck from the branding returned by
   GET /api/public/trucks/:slug, so this stylesheet is multi-tenant.
   ========================================================================= */

.tc-page {
  --tc-brand:#c9412b; --tc-accent:#e3ad3d; --tc-bg:#fff8ec; --tc-card:#fffcf7;
  --tc-edge:#f0e4cf; --tc-ink:#2f1a12; --tc-muted:#765a49; --tc-green:#0f5b4d;
  --tc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height:100vh; background:var(--tc-bg); color:var(--tc-ink);
  display:flex; justify-content:center; align-items:flex-start;
  padding:24px 16px 48px;
}
.tc-page .hidden { display:none !important; }
.tc-center { text-align:center; }
.tc-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- demo-only way back ---------- */
/* Rendered only on /demo. Sized to the ticket so it reads as part of the same column,
   and kept to a link plus a tag rather than the marketing nav — the page exists to
   show what a customer sees, so the chrome around it stays out of the way. */
.tc-stack { width:100%; max-width:440px; }
.tc-demo-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.tc-demo-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 2px;
  color:var(--tc-ink); text-decoration:none; font-weight:800; font-size:14px; }
.tc-demo-back:hover { text-decoration:underline; }
.tc-demo-back span { font-size:17px; line-height:1; }
.tc-demo-tag { display:inline-flex; align-items:center; font-size:10.5px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tc-muted);
  background:rgb(47 26 18 / .07); border-radius:999px; padding:7px 11px; }

/* ---------- ticket card ---------- */
.tc-ticket {
  width:100%; max-width:440px; background:var(--tc-card);
  border-radius:20px; box-shadow:0 12px 32px rgb(47 26 18 / .12); overflow:hidden;
}
.tc-ticket-header {
  background:linear-gradient(135deg, var(--tc-accent), var(--tc-brand));
  padding:22px 24px; text-align:center; color:#fff;
}
.tc-ticket-header h1 {
  font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:27px;
  line-height:1.15; margin:0; color:#fff; text-shadow:0 1px 2px rgb(47 26 18 / .3);
}
.tc-ticket-header p {
  margin:6px 0 0; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:rgb(255 255 255 / .93);
}
.tc-logo { max-height:56px; max-width:70%; margin:0 auto 10px; display:block; }

.tc-location-banner {
  background:linear-gradient(135deg, var(--tc-green), #0a3f35); color:#fff8ec;
  padding:11px 24px; text-align:center; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px;
}
.tc-location-banner span { opacity:.85; }

/* position:relative keeps the confetti overlay clipped to the ticket rather than
   raining down the whole viewport */
.tc-ticket-body { padding:24px; animation:tcFade .3s ease; position:relative; }
.tc-ticket-footer {
  border-top:1px dashed var(--tc-edge); padding:14px 24px;
  display:flex; gap:8px; justify-content:center; font-size:12px; color:var(--tc-muted);
}
.tc-ticket-footer a { color:var(--tc-muted); text-decoration:none; font-weight:700; }
.tc-ticket-footer a:hover { text-decoration:underline; }
@keyframes tcFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* perforation divider — the punched-ticket motif from CLAUDE.md §7 */
.tc-perf { position:relative; height:2px; margin:22px -24px; border-top:2px dashed var(--tc-edge); }
.tc-perf::before, .tc-perf::after {
  content:""; position:absolute; top:-9px; width:18px; height:18px;
  background:var(--tc-bg); border-radius:50%;
}
.tc-perf::before { left:-9px; }
.tc-perf::after  { right:-9px; }

/* ---------- type ---------- */
.tc-screen-title { font-family:'Fraunces', Georgia, serif; font-size:22px; font-weight:800; line-height:1.2; margin:0 0 12px; text-align:center; }
.tc-screen-sub   { font-size:14px; color:var(--tc-muted); text-align:center; margin:0 0 18px; line-height:1.5; }
.tc-eyebrow      { text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; color:var(--tc-muted); margin:0 0 6px; }
.tc-label        { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--tc-muted); font-weight:900; display:block; margin-bottom:5px; }
.tc-optional     { font-weight:400; color:var(--tc-muted); }
.tc-fineprint    { font-size:12px; color:var(--tc-muted); margin:12px 0 0; line-height:1.5; }
.tc-fineprint a  { color:var(--tc-muted); font-weight:700; }

/* ---------- loading / error ---------- */
.tc-loading { text-align:center; padding:34px 0; }
.tc-loader {
  width:36px; height:36px; border:4px solid var(--tc-edge); border-top-color:var(--tc-accent);
  border-radius:50%; margin:0 auto 14px; animation:tcSpin .9s linear infinite;
}
@keyframes tcSpin { to { transform:rotate(360deg); } }
.tc-error  { background:#fbeae5; color:#b42318; border-radius:10px; padding:12px 14px; font-size:14px; font-weight:600; margin-bottom:14px; }
.tc-banner { background:#fbeae5; color:#b42318; border-radius:10px; padding:11px 13px; font-size:13px; font-weight:700; text-align:center; margin-bottom:14px; }

/* ---------- buttons ---------- */
.tc-page .tc-btn {
  display:block; width:100%; border:0; border-radius:12px; min-height:52px;
  padding:15px 18px; font-family:'Fraunces', Georgia, serif; font-weight:800;
  font-size:17px; cursor:pointer; margin-top:12px; background:none; color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tc-page .tc-btn:active { transform:scale(.98); }
.tc-page .tc-btn-primary { background:var(--tc-brand); color:#fff8ec; box-shadow:0 4px 0 rgb(47 26 18 / .35); }
.tc-page .tc-btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 0 rgb(47 26 18 / .35); }
.tc-page .tc-btn-primary:disabled { background:var(--tc-edge); color:var(--tc-muted); box-shadow:none; cursor:not-allowed; transform:none; }
.tc-page .tc-btn-gold { background:linear-gradient(135deg, var(--tc-accent), #c9922c); color:var(--tc-ink); box-shadow:0 4px 0 rgb(47 26 18 / .28); }
.tc-page .tc-btn-secondary { background:transparent; color:var(--tc-muted); border:2px solid var(--tc-edge); font-size:15px; min-height:48px; }
.tc-page .tc-btn-secondary:hover { background:var(--tc-bg); }
.tc-page .tc-btn-link {
  background:none; border:0; box-shadow:none; color:var(--tc-muted);
  font-family:inherit; font-size:13px; font-weight:700; text-decoration:underline;
  min-height:44px; padding:8px;
}

/* ---------- form ---------- */
.tc-field { margin-bottom:14px; display:grid; gap:6px; }
.tc-page .tc-field label { display:block; font-size:13px; font-weight:800; color:var(--tc-muted); }
.tc-page .tc-field input {
  width:100%; min-height:50px; padding:12px 14px; border:2px solid var(--tc-edge);
  border-radius:10px; font-size:16px; font-family:inherit; color:var(--tc-ink); background:var(--tc-bg);
}
.tc-page .tc-field input:focus { outline:none; border-color:var(--tc-accent); }
.tc-page .tc-check { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; min-height:44px; cursor:pointer; }
.tc-page .tc-check input { width:20px; height:20px; min-height:20px; accent-color:var(--tc-brand); flex:0 0 auto; }

/* ---------- stats bar: passport dots + share chip ---------- */
.tc-stats { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.tc-dots { display:flex; gap:5px; flex-wrap:wrap; }
.tc-dots-center { justify-content:center; margin:0 0 16px; }
.tc-dot {
  width:12px; height:12px; border-radius:50%; border:2px solid var(--tc-edge);
  background:transparent; display:inline-block; transition:all .3s ease;
}
.tc-dot.filled { background:var(--tc-green); border-color:var(--tc-green); }
.tc-dot.pop { animation:tcStamp .5s ease; }
@keyframes tcStamp { 0% { transform:scale(.3) rotate(-20deg); } 60% { transform:scale(1.3) rotate(8deg); } 100% { transform:scale(1) rotate(0); } }
.tc-page .tc-chip {
  background:var(--tc-accent); border:0; border-radius:999px; padding:10px 15px;
  min-height:44px; font-size:12px; font-weight:800; color:var(--tc-ink);
  cursor:pointer; white-space:nowrap; font-family:inherit;
}

/* ---------- recent wins ticker ---------- */
.tc-ticker { background:var(--tc-bg); border:1px solid var(--tc-edge); border-radius:10px; padding:11px 12px; margin-bottom:18px; overflow:hidden; }
.tc-ticker-label { font-size:10px; text-transform:uppercase; letter-spacing:.11em; font-weight:900; color:var(--tc-muted); margin-bottom:7px; }
.tc-ticker-items { display:flex; flex-direction:column; gap:6px; }
.tc-ticker-item { font-size:13px; color:var(--tc-ink); font-weight:500; display:flex; align-items:center; gap:6px; line-height:1.35; animation:tcFade .4s ease; }
.tc-ticker-item.high { color:var(--tc-brand); font-weight:800; }
.tc-ticker-time { font-size:11px; color:var(--tc-muted); margin-left:auto; white-space:nowrap; }

/* ---------- location picker grid ---------- */
.tc-loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
.tc-page .tc-loc-btn {
  border:2px solid var(--tc-edge); background:var(--tc-bg); border-radius:10px;
  padding:12px 8px; min-height:52px; font-family:inherit; font-weight:700;
  font-size:13px; line-height:1.3; color:var(--tc-ink); cursor:pointer;
  transition:all .15s ease; text-align:center;
}
.tc-page .tc-loc-btn:hover { border-color:var(--tc-accent); }
.tc-page .tc-loc-btn.selected { background:var(--tc-green); border-color:var(--tc-green); color:#fff8ec; }

/* ---------- wheel ---------- */
.tc-wheel-wrap { position:relative; width:min(280px, 78vw); margin:4px auto 22px; }
.tc-wheel-pointer {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:22px solid var(--tc-ink); z-index:3; filter:drop-shadow(0 2px 2px rgb(0 0 0 / .2));
}
.tc-wheel-ring {
  position:absolute; inset:-10px; border-radius:50%;
  background:repeating-conic-gradient(var(--tc-accent) 0deg 18deg, #f3daa4 18deg 36deg);
  box-shadow:inset 0 0 0 6px var(--tc-card), 0 6px 18px rgb(47 26 18 / .18); z-index:0;
}
#tc-wheel { position:relative; z-index:1; display:block; width:100%; height:auto; border-radius:50%; transform:rotate(0deg); }
.tc-wheel-hub {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:26%; height:26%; background:var(--tc-card); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  overflow:hidden; box-shadow:0 2px 6px rgb(47 26 18 / .2); z-index:2;
}
.tc-wheel-hub img { max-width:80%; max-height:80%; }

/* ---------- prize + active reward ---------- */
.tc-prize-banner, .tc-prize-card { text-align:center; position:relative; padding:8px 0 4px; }
.tc-prize-name { font-family:'Fraunces', Georgia, serif; font-size:31px; font-weight:900; line-height:1.1; margin:0 0 10px; color:var(--tc-brand); }
.tc-prize-name.high { color:#b8842c; }
.tc-code-label { font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--tc-muted); margin:14px 0 4px; }
.tc-code {
  font-family:var(--tc-mono); font-size:26px; font-weight:700; background:var(--tc-bg);
  border:2px dashed var(--tc-edge); border-radius:10px; padding:12px;
  letter-spacing:.18em; margin-bottom:6px;
}
.tc-countdown-label { font-size:12px; color:var(--tc-muted); text-transform:uppercase; letter-spacing:.1em; font-weight:800; margin:16px 0 4px; }
.tc-countdown { font-family:var(--tc-mono); font-size:40px; font-weight:700; color:var(--tc-ink); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.tc-countdown.urgent { color:var(--tc-brand); }
.tc-countdown.expired { color:var(--tc-muted); }
.tc-redeem-status { font-size:13px; font-weight:700; margin:10px 0 0; min-height:18px; }
.tc-redeem-status.success { color:#18864b; }
.tc-redeem-status.fail { color:#b42318; }

/* ---------- redeemed + passport ---------- */
.tc-done { text-align:center; padding:8px 0 4px; }
.tc-done-mark { font-size:44px; line-height:1; margin-bottom:8px; }
.tc-stamp-banner, .tc-complete-banner { margin-top:18px; border-radius:12px; padding:16px; text-align:center; }
.tc-stamp-banner { background:#dcede8; color:var(--tc-green); }
.tc-stamp-banner p { margin:0 0 8px; }
.tc-stamp-title { font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:17px; }
.tc-complete-banner { background:linear-gradient(135deg, var(--tc-accent), #c9922c); color:var(--tc-ink); }
.tc-complete-title { font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:18px; margin:0 0 4px; }
.tc-stamp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.tc-stamp {
  border:2px dashed var(--tc-edge); border-radius:12px; padding:14px 10px;
  text-align:center; font-size:13px; font-weight:700; line-height:1.3;
  color:var(--tc-muted); display:grid; gap:6px; align-content:center; min-height:88px;
}
.tc-stamp.earned { border-color:var(--tc-green); border-style:solid; color:var(--tc-green); background:#f2f8f6; }
.tc-stamp em { font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.09em; opacity:.8; }
.tc-share-img { width:100%; border-radius:12px; display:block; margin-bottom:8px; box-shadow:0 4px 14px rgb(47 26 18 / .18); }

/* ---------- referral modal (portaled to body, so tokens are repeated) ---------- */
.tc-modal-overlay { position:fixed; inset:0; background:rgb(47 26 18 / .5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:60; }
.tc-modal {
  background:#fffcf7; border-radius:16px; padding:26px; max-width:360px; width:100%;
  text-align:center; color:#2f1a12;
  --tc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tc-bg:#fff8ec; --tc-edge:#f0e4cf; --tc-muted:#765a49;
}
.tc-modal h3 { font-family:'Fraunces', Georgia, serif; font-size:21px; margin:0 0 8px; }
.tc-modal p { font-size:14px; color:#765a49; margin:0 0 16px; }
.tc-modal .tc-btn {
  display:block; width:100%; border:0; border-radius:12px; min-height:50px; padding:14px 18px;
  font-family:'Fraunces', Georgia, serif; font-weight:800; font-size:16px; cursor:pointer; margin-top:10px;
}
.tc-modal .tc-btn-primary { background:#c9412b; color:#fff8ec; }
.tc-modal .tc-btn-secondary { background:transparent; color:#765a49; border:2px solid #f0e4cf; font-size:14px; }

/* ---------- confetti ---------- */
.tc-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:10; }
.tc-confetti span { position:absolute; top:-12px; width:8px; height:14px; opacity:.9; animation:tcConfetti linear forwards; }
@keyframes tcConfetti { to { transform:translateY(430px) rotate(540deg); opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  .tc-ticket-body, .tc-dot.pop, .tc-ticker-item, .tc-loader { animation:none; }
  #tc-wheel { transition:none !important; }
  .tc-confetti { display:none; }
}
@media (max-width: 400px) {
  .tc-loc-grid, .tc-stamp-grid { grid-template-columns:1fr; }
  .tc-ticket-header h1 { font-size:23px; }
}