/* ============================================================
   Stempl onboarding
   Every brand-variable below is overwritten at runtime by
   js/brand.js from the brand's JSON config. The values here are
   the fallback that renders before (or instead of) that fetch.
   ============================================================ */

:root{
  --brand:#1F2A44;
  --brand-ink:#FFFFFF;      /* computed for contrast against --brand */
  --brand-dark:#16203A;
  --brand-tint:#EEF0F4;
  --brand-glow:rgba(31,42,68,.28);
  --brand-veil:rgba(255,255,255,.16);
  --ink:#171C26;
  --ink-soft:#5D6675;
  --paper:#FAF8F4;
  --card:#FFFFFF;
  --stamp:#E0A33E;
  --line:#E6E2DA;
  --error:#B3362B;
  --radius:18px;
}
/* No colour known yet (first visit, no ?c= in the link, nothing cached).
   Neutral slate rather than the fallback teal: an obviously-neutral chrome
   settling into the brand colour reads as loading, whereas one *brand*
   colour snapping to a different one reads as a glitch. */
.brand-pending{
  --brand:#6B7280;
  --brand-ink:#FFFFFF;
  --brand-dark:#575E69;
  --brand-tint:#F1F2F4;
  --brand-glow:rgba(107,114,128,.28);
}
/* Ease the one transition that is left, so it settles instead of snapping. */
.band,.btn{transition:background-color .28s ease,color .28s ease}
@media (prefers-reduced-motion:reduce){
  .band,.btn{transition:none}
}

/* Header identity, painted from the cached brand before any script runs.
   These only apply while the elements are still empty — as soon as app.js
   writes the real name or logo they stop matching, so there is never both.
   The non-breaking space keeps the header from collapsing on a first-ever
   visit when nothing is known yet. */
.cafe-name:empty::before{content:var(--cafe-name,"\00a0")}
.cafe-tag:empty::before {content:var(--cafe-tag,"\00a0")}
.cafe-logo:empty{
  background-image:var(--cafe-logo,none);
  background-size:cover;
  background-position:center;
}
.cafe-logo:empty::before{content:var(--cafe-initial,"")}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ---------- header band ---------- */
.band{
  background:var(--brand);
  color:var(--brand-ink);
  padding:calc(20px + env(safe-area-inset-top)) 24px 64px;
  position:relative;
}
.band::after{ /* scalloped punch-card edge */
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:14px;
  background:radial-gradient(circle 9px at 9px 0, var(--brand) 98%, transparent 100%);
  background-size:28px 14px;
  background-repeat:repeat-x;
}
.cafe-row{display:flex;align-items:center;gap:12px}
.cafe-text{min-width:0}
.cafe-logo{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:var(--brand-veil);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;
  overflow:hidden;
}
.cafe-logo img{width:100%;height:100%;object-fit:cover}
.cafe-name{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cafe-tag{font-size:12.5px;opacity:.82;margin-top:2px}

/* ---------- main card ---------- */
main{
  flex:1;
  padding:0 16px calc(24px + env(safe-area-inset-bottom));
  max-width:430px;width:100%;margin:0 auto;
}
.sheet{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  margin-top:-34px;
  position:relative;
  box-shadow:0 10px 30px rgba(20,40,35,.08);
}

.step{display:none}
.step.active{display:block;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

h1{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:26px;line-height:1.2;letter-spacing:-.01em;
}
.sub{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-top:10px}
.sub b{color:var(--ink)}

/* ---------- stamp card ---------- */
.stamps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin:22px 0 6px;padding:18px 16px;
  background:var(--paper);border:1px dashed var(--line);border-radius:14px;
}
.dot{
  aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.dot img{width:100%;height:100%;object-fit:contain;display:block}

/* drawn fallbacks — used when the brand supplies no artwork,
   or when an image URL fails to load */
.dot--drawn.dot--empty{border:2px dashed #C9C6BB}
.dot--drawn.dot--filled{
  background:var(--brand);color:var(--brand-ink);
  border:2px solid var(--brand);
}
.dot--drawn.dot--filled svg{width:52%;height:52%;stroke:var(--brand-ink);fill:none}
.dot--drawn.dot--reward{border:2px solid var(--brand);color:var(--brand)}
.dot--drawn.dot--reward svg{width:55%;height:55%;stroke:var(--brand);fill:none}
.dot--drawn.dot--redeemed{
  background:var(--stamp);border:2px solid var(--stamp);
}
.dot--drawn.dot--redeemed svg{width:55%;height:55%;stroke:#fff;fill:none}

/* the prize slot is the one thing on the card that should catch the eye */
.dot--reward,.dot--redeemed{box-shadow:0 0 0 3px var(--brand-glow)}

.dot--in{animation:pop .34s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{
  from{opacity:0;transform:scale(.55)}
  to{opacity:1;transform:scale(1)}
}
.stamps-caption{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-bottom:4px}

/* ---------- form ---------- */
label{display:block;font-size:13px;font-weight:700;margin:18px 0 6px;letter-spacing:.01em}
label span,legend span{font-weight:500;color:var(--ink-soft)}
input[type="text"],input[type="email"]{
  width:100%;padding:14px 15px;font-size:16px;
  font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  outline:none;transition:border-color .15s;
}
input:focus{border-color:var(--brand)}
input.invalid{border-color:var(--error)}
.hint{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.field-error{font-size:13px;color:var(--error);margin-top:8px;display:none}
.field-error.show{display:block}

.field-group{border:none;margin-top:18px}
.field-group[hidden]{display:none}
.field-group legend{
  font-size:13px;font-weight:700;letter-spacing:.01em;
  margin-bottom:8px;padding:0;
}

/* ---------- gender · segmented control ---------- */
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented--stack{flex-direction:column}
.seg{
  flex:1 1 auto;margin:0;position:relative;
  min-width:88px;cursor:pointer;
}
/* Visually hidden, still focusable and still announced. The label wraps
   the whole pill, so a tap anywhere on it activates this input. */
.seg input{
  position:absolute;width:1px;height:1px;
  padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.seg span{
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:13px 12px;min-height:48px;
  font-size:14.5px;font-weight:600;line-height:1.25;
  color:var(--ink-soft);
  background:#fff;
  border:1.5px solid var(--line);border-radius:999px;
  transition:background .15s,border-color .15s,color .15s;
}
.seg input:checked + span{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
}
.seg input:focus-visible + span{outline:3px solid var(--stamp);outline-offset:2px}
.seg input:active + span{transform:scale(.98)}
.segmented.invalid .seg span{border-color:var(--error)}

/* ---------- date of birth · one field, three selects ---------- */
.date-row{
  display:grid;
  grid-template-columns:1.05fr 1.35fr .85fr;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .15s;
}
.date-row:focus-within{border-color:var(--brand)}
.date-row.invalid{border-color:var(--error)}
.date-cell{position:relative;min-width:0}
.date-cell + .date-cell{border-left:1.5px solid var(--line)}
.date-label{
  display:block;margin:9px 12px 0;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);
}
.date-cell select{
  -webkit-appearance:none;appearance:none;
  width:100%;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);
  padding:2px 26px 11px 11px;
  cursor:pointer;
}
.date-cell select:invalid,.date-cell select option[value=""]{color:var(--ink-soft)}
.date-cell::after{ /* chevron */
  content:"";position:absolute;right:10px;bottom:17px;
  width:8px;height:8px;pointer-events:none;
  border-right:1.8px solid var(--ink-soft);
  border-bottom:1.8px solid var(--ink-soft);
  transform:rotate(45deg);
}
.date-cell:focus-within::after{border-color:var(--brand)}

/* ---------- buttons ---------- */
.btn{
  width:100%;margin-top:22px;padding:16px;
  font-family:inherit;font-size:16px;font-weight:700;
  color:var(--brand-ink);background:var(--brand);
  border:none;border-radius:999px;cursor:pointer;
  transition:transform .08s ease,background .15s;
}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default}
.btn-wallet{
  background:#1F1F1F;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-wallet:hover{background:#000}
.back{
  display:inline-block;margin-top:16px;
  background:none;border:none;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}

/* ---------- loading ---------- */
.loading{text-align:center;padding:28px 0 12px}
.cup{width:54px;height:54px;margin:0 auto 18px;position:relative}
.cup .ring{
  width:100%;height:100%;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--brand);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- error ---------- */
.error-box{
  margin-top:18px;padding:14px 16px;border-radius:12px;
  background:#FBEDEB;border:1px solid #EAC7C2;
  font-size:14px;line-height:1.5;color:#7A2A22;
  word-break:break-word;
}

footer{
  text-align:center;font-size:12px;color:var(--ink-soft);
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
}

/* ---------- narrow phones ---------- */
@media (max-width:340px){
  .sheet{padding:22px 16px}
  .stamps{gap:8px;padding:14px 12px}
  .seg span{font-size:13.5px;padding:12px 8px}
  .date-cell select{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .step.active,.dot--in{animation:none}
  .cup .ring{animation-duration:2.5s}
  .btn:active,.seg input:active + span{transform:none}
}