/* One For All loyalty — the same surface as the menu page, because it is the same shop.

   The menu page renders the brand's own materials and puts NOTHING in a container: headings are the
   printed card's capitals over a hairline, the awning is a 3px rule rather than a drawn canopy, and
   the objects stand on a sheet of glass. That is the client's own law as much as ours - their
   artwork has no pills, plates or cards in it. This file is that system applied to the card, so a
   customer who taps at the window lands somewhere that is obviously the same place as the menu.

   Three things here are NOT the menu's and are deliberate:
   - The stamp card is an object, not a container: their red stock, drawn by card.js exactly as the
     Wallet pictures are, so the page and the Wallet show one and the same card.
   - Live state (a reward waiting, a code armed, a gift) takes the navy + blue glow of the menu's
     Directions button. It is the loudest thing the brand owns, and these are the moments the
     customer must not miss.
   - The redemption screen keeps a full navy ground and keeps MOVING. That is a security feature,
     not decoration: staff are taught that a still screenshot is not a redemption. */

:root{
  --yellow:#FFCC49;--cream:#FFF6EE;--navy:#152C86;--awn-red:#F70E00;--awn-bone:#F4E8E2;
  --night:#0C0708;--night2:#150C0D;--lit:#FF5A4E;--blue:#3E6BFF;--warm:#FFE9DC;--dim:#C79A8C;
  /* their awning, reduced to a rule. Used as a border-image everywhere a division is needed. */
  --awning:repeating-linear-gradient(90deg,var(--awn-red) 0 8px,var(--awn-bone) 8px 16px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--warm)}
body{min-height:100dvh;font:500 16px/1.55 "Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  padding:calc(12px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
main{max-width:480px;margin:0 auto;display:flex;flex-direction:column}
h1,h2,h3,p{margin:0}
/* the printed card sets a section name as heavy capitals, not as a box on a coloured ground */
h1{font:900 clamp(1.3rem,5.6vw,1.6rem)/1 "Archivo","Arial Black",system-ui,sans-serif;
  font-stretch:112%;letter-spacing:-.03em;text-transform:uppercase;color:var(--cream)}
h2{display:flex;align-items:center;gap:14px;margin:34px 0 14px;color:var(--cream);
  font:900 clamp(1.15rem,4.8vw,1.4rem)/1 "Archivo","Arial Black",system-ui,sans-serif;
  font-stretch:112%;letter-spacing:-.03em;text-transform:uppercase}
h2::after{content:"";flex:1;height:1px;min-width:24px;
  background:linear-gradient(90deg,rgba(255,246,238,.32),rgba(255,246,238,0))}
[dir=rtl] h2::after{background:linear-gradient(270deg,rgba(255,246,238,.32),rgba(255,246,238,0))}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
[hidden]{display:none!important}

/* ---- header: the mark, the card's name, and two quiet words ------------------------------- */
.top{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:3px solid transparent;border-image:var(--awning) 3}
.top img{width:34px;height:auto;flex:none;
  filter:drop-shadow(0 0 22px rgba(255,150,110,.36)) drop-shadow(0 8px 16px rgba(0,0,0,.7))}
.top h1{flex:1}
/* one quiet word each, not a pair of outlined pills. The founder's note on the menu was that the
   language choice should not be a thing you look at. */
.top a,.top button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 6px;
  background:none;border:0;box-shadow:none;font:700 .95rem/1 "Baloo Bhaijaan 2",system-ui,sans-serif;
  color:var(--dim);text-decoration:none;cursor:pointer}
.top a:hover,.top button:hover{color:var(--warm)}

/* ---- the announcement line: their yellow under their awning, not a sticker ----------------- */
/* No rule of its own: the header already carries one 30px above, and two stacked read as a mistake
   rather than as their awning.

   The slot is reserved for the life of the page, at the two lines the longest message needs. The
   card is fetched after first paint, so a banner that appeared later pushed a 3000px page down and
   was the whole of this page's layout shift - Lighthouse put it at 0.48 against a 0.1 budget. Empty,
   it paints nothing at all (night2 only arrives with content, and on night it is invisible anyway),
   so the cost of holding the space is nil and nothing ever moves under a thumb. */
.banner{margin:14px -16px 0;padding:14px 16px;min-height:78px;font-weight:800;color:var(--yellow)}
.banner:not(:empty){background:var(--night2)}
.banner.bad{color:var(--lit)}

/* ---- live state: the loudest thing the brand owns ----------------------------------------- */
/* Not a card with a dotted rule. This is the Directions button's material - navy with a blue ring -
   because these are the two or three moments the customer must not scroll past. */
.panel{margin-top:16px;padding:18px 16px;border-radius:13px;background:var(--navy);color:#EAF0FF;
  box-shadow:0 0 0 1px rgba(120,155,255,.55),0 0 26px rgba(62,107,255,.3)}
.panel h2{margin:0 0 10px;color:#fff}
.panel h2::after{background:linear-gradient(90deg,rgba(234,240,255,.34),rgba(234,240,255,0))}
[dir=rtl] .panel h2::after{background:linear-gradient(270deg,rgba(234,240,255,.34),rgba(234,240,255,0))}
.panel>*+*{margin-top:12px}
/* the card and the folded-away sections are plain page, not panels */
.plain{margin-top:6px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 140px}
.muted{color:var(--dim);font-size:.93rem}
/* A link in quiet text is pressed like button.quiet: the text's own colour, underlined, 44px tall.
   Unstyled, "What do you keep?" was the browser's #0000EE on the night (2.13:1) and 18px tall. */
.muted a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline}
.panel .muted{color:#BCC8F2}
.badge{display:inline-block;padding:3px 12px;border-radius:11px;font-weight:800;font-size:.86rem;
  background:rgba(255,204,73,.16);color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,204,73,.5)}

/* ---- buttons: the menu's two, exactly -------------------------------------------------- */
button,input{font:inherit;color:inherit}
/* On the page's own ground a button is quiet. White belongs INSIDE the navy panel, where it is the
   thing to press - on the night ground it made "delete this customer's number" the loudest element
   the owner sees. */
button{cursor:pointer;border:0;min-height:48px;padding:0 16px;border-radius:13px;font-weight:800;
  font-size:1.02rem;background:rgba(255,246,238,.08);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(255,150,132,.32)}
.panel button{background:#fff;color:var(--navy);box-shadow:none}
button.navy{background:var(--navy);color:#EAF0FF;
  box-shadow:0 0 0 1px rgba(120,155,255,.55),0 0 20px rgba(62,107,255,.38)}
button.ghost{background:rgba(255,246,238,.08);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(255,150,132,.32)}
.panel button.ghost{background:rgba(255,255,255,.1);color:#EAF0FF;
  box-shadow:inset 0 0 0 1px rgba(200,215,255,.45)}
button.quiet{background:none;color:var(--dim);text-decoration:underline;min-height:44px;
  padding:8px 12px;font-weight:500;box-shadow:none}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default;transform:none}

/* ---- the card: their stamp card, one badge pressed per paid order ------------------------ */
/* card.js draws it - the same drawing the Wallet pictures are made from. Their red stock, matte: no
   gloss and no glass, a card you could hold. A slot for each stamp, their badge blind-pressed into
   it, cream ink where an order was stamped; the big badge in the middle takes its ink when the card
   is full. The box has its size before the card is fetched, so nothing moves when it arrives. */
.card{position:relative;margin:4px auto 0;width:100%;max-width:380px;aspect-ratio:340/300;border-radius:18px;
  overflow:hidden;background:#DA0811;
  box-shadow:0 0 0 1px rgba(90,0,6,.6),0 22px 40px -14px rgba(0,0,0,.85),0 0 70px -10px rgba(255,90,60,.28)}
.card svg{display:block;width:100%;height:100%}
/* A press: the stamp comes down from above, meets the card at 45% of the way (index.html's CONTACT)
   with a touch of squash, and lifts off leaving the ink. The middle badge is heavier and slower. */
.card .ink{transform-box:fill-box;transform-origin:center}
.card .new .ink{animation:press .45s var(--d,0s) both}
.card .hub.new .ink{animation-duration:.6s}
@keyframes press{
  0%{opacity:0;transform:scale(1.6);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  45%{opacity:.9;transform:scale(.94);animation-timing-function:ease-out}
  70%{opacity:1;transform:scale(1.02)}
  100%{opacity:1;transform:none}}
@keyframes ink-fade{from{opacity:0}}
/* a full card is taken away and the next one dealt (finishCard) */
.card.leave{animation:leave .5s cubic-bezier(.5,0,.75,.3) both}
@keyframes leave{to{opacity:0;transform:translateY(-12%) rotate(-5deg) scale(.94)}}
.card.enter{animation:enter .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes enter{from{opacity:0;transform:translateY(14%) scale(.97)}}
/* early, people are moved by what they have; late, by what is left - so this line carries the count */
.progress{margin-top:18px;text-align:center;color:var(--cream);
  font:900 clamp(1.05rem,4.4vw,1.25rem)/1.25 "Archivo","Arial Black",system-ui,sans-serif;
  font-stretch:112%;letter-spacing:-.02em;min-height:1.25em}
[lang=ar] .progress{font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;font-weight:800;letter-spacing:0}
/* These two lines name the reward, which only the card knows, so they render one line long and
   then wrap to two the moment it arrives - measured at 23px and 25px, and between them they were
   the last of this page's layout shift. Two lines is what the real text needs in both languages. */
.sub{margin-top:6px;text-align:center;font-size:.93rem;color:var(--dim);min-height:2lh}
#how-3{min-height:2lh}

.wallets{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.wallet-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;
  min-height:48px;border-radius:13px;background:#000;color:#fff;font-weight:800;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,246,238,.22)}
/* Google's button is their file, unchanged (public/wallet/, from their add-to-wallet kit): as wide as the Apple
   button, its height follows the file, 48-53 px, never under their 48. */
.wallet-google{display:block;border-radius:999px;line-height:0}
.wallet-google img{display:block;width:300px;max-width:100%;height:auto}

/* ---- folded-away detail: a line with a hairline under it, no card --------------------- */
details{border-bottom:1px solid rgba(255,246,238,.14)}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:12px;min-height:52px;font-weight:800;color:var(--cream)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px;
  border-right:3px solid;border-bottom:3px solid;transform:rotate(45deg);transition:transform .2s}
[dir=rtl] details summary::after{transform:rotate(135deg)}
details[open] summary::after,[dir=rtl] details[open] summary::after{transform:rotate(-135deg)}
details>*+*{margin-top:12px}
details>:last-child{margin-bottom:18px}
ol{margin:0;padding-inline-start:1.3em;color:var(--warm)}
ol li+li{margin-top:6px}

.code{font:800 2.4rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;text-align:center;
  direction:ltr;color:var(--yellow)}
.panel .code{color:#fff}
/* :not([type]) is here because an input with no type attribute IS a text field but does not match
   [type=text] - the owner's "forget a customer" box fell through and measured 31px tall */
input[type=tel],input[type=text],input[type=password],input[type=number],input:not([type]){width:100%;min-height:48px;
  border-radius:13px;border:0;box-shadow:inset 0 0 0 1px rgba(255,150,132,.34);
  background:var(--night2);color:var(--warm);padding:8px 16px;direction:ltr;text-align:start}
input::placeholder{color:rgba(199,154,140,.7)}
/* The label IS the target - pressing it anywhere toggles the box - so it has to reach 44px even
   when its text is one line. Measured at 358x29 before this: the owner's master on/off switch for
   the whole programme was the smallest control on their page. */
label.check{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--warm);
  min-height:44px;padding-block:8px}
label.check input{width:24px;height:24px;flex:none;accent-color:var(--blue);margin-top:2px}

/* ---- redeemed: a screen the staff can trust at a glance ------------------------------- */
/* It MOVES. A screenshot does not, and that is what staff are taught to look for. Full navy so it
   cannot be mistaken for the card behind it. */
.done{position:fixed;inset:0;z-index:5;background:var(--navy);color:#EAF0FF;display:grid;
  place-items:center;text-align:center;padding:24px}
/* the full card the reward came from */
.done .card{width:min(200px,56vw);margin:0 auto 18px;animation:arrive .8s cubic-bezier(.16,.8,.18,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}
.done .tick{width:72px;height:72px;border-radius:50%;background:var(--yellow);display:grid;
  place-items:center;margin:0 auto 16px;animation:pulse 1.2s ease-in-out infinite}
.done .tick::after{content:"";width:20px;height:36px;border-right:8px solid var(--navy);
  border-bottom:8px solid var(--navy);transform:rotate(45deg) translate(-4px,-4px)}
.done .clock{font:800 2rem/1 ui-monospace,Menlo,Consolas,monospace;direction:ltr;margin:12px 0}
@keyframes pulse{50%{transform:scale(1.08)}}

footer{display:flex;justify-content:center;margin-top:30px;padding-top:24px;opacity:.9;
  border-top:3px solid transparent;border-image:var(--awning) 3}
footer img{height:24px;display:block}
footer a{display:block;padding:10px;margin:-10px}   /* a 44 px target around the 24 px mark; the negative margin keeps the mark where it was */

/* ---- staff + owner: the same family, but these are tools ------------------------------ */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.stats .wide{grid-column:1/-1}
.big{display:block;color:var(--cream);
  font:900 2.8rem/1 "Archivo","Arial Black",system-ui,sans-serif;font-stretch:112%;letter-spacing:-.04em}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,246,238,.14)}
.tile{background:var(--night);padding:14px 16px}
.tile b{display:block;color:var(--cream);
  font:900 1.8rem/1.1 "Archivo","Arial Black",system-ui,sans-serif;font-stretch:112%;letter-spacing:-.03em}
table{width:100%;border-collapse:collapse;font-size:.95rem}
td,th{padding:9px 4px;text-align:start;border-bottom:1px solid rgba(255,246,238,.14)}
th{color:var(--dim);font-weight:700}

/* ---- wider than a phone ------------------------------------------------------------------ */
/* On a phone the announcement runs edge to edge. Past 520px the page is a centred column, and it
   simply stopped dead 16px outside it - a hard end reads as unfinished. It fades out instead, so the
   column has no visible walls. */
@media (min-width:520px){
  .banner:not(:empty){background:linear-gradient(90deg,transparent,var(--night2) 10%,var(--night2) 90%,transparent)}
}

@media (prefers-reduced-motion:reduce){
  /* the ink simply appears where it lands; the card is not moved */
  .card .new .ink,.card .hub.new .ink{animation:ink-fade .3s var(--d,0s) both}
  .card.leave,.card.enter,.done .card,.done .tick{animation:none}
  details summary::after{transition:none}
  button:active{transform:none}}