/* ── My Bunsik — customer account layer (Sept 2026) ─────────────────────
   Loaded on index.html, menu.html and my-bunsik.html. Everything is
   prefixed `bk-` so nothing here can restyle the existing site. The promo
   is a compact bottom sheet, never a full-screen page, never a blocking
   backdrop; the sign-in sheet is the same card with a soft scrim. */

:root {
  --bk-gold: #f5a623;
  --bk-gold-deep: #d4891a;
  --bk-ink: #0e0905;
  --bk-card: #15100a;
  --bk-card-2: #1c1610;
  --bk-line: rgba(245, 166, 35, 0.22);
  --bk-text: #f7efe1;
  --bk-muted: rgba(247, 239, 225, 0.68);
  --bk-quiet: rgba(247, 239, 225, 0.42);
  --bk-safe-b: env(safe-area-inset-bottom, 0px);
  --bk-radius: 22px;
}

/* ── Sheets (promo + sign-in) ─────────────────────────────────────────── */
.bk-sheet {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--bk-safe-b));
  z-index: 240;
  margin: 0 auto;
  width: auto;
  max-width: 420px;
  max-height: min(78vh, 640px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--bk-card-2), var(--bk-card));
  color: var(--bk-text);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  padding: 18px 18px calc(18px + var(--bk-safe-b) * 0.25);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}
.bk-sheet.bk-open { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .bk-sheet { transition: none; } }
@media (min-width: 760px) {
  .bk-sheet { left: auto; right: 24px; bottom: 24px; max-width: 380px; margin: 0; }
}
/* ── The checkout's MyBunsik Rewards banner ────────────────────────────
   Shown above the totals while the SERVER says a welcome offer is riding
   on this order; the note below it is the one-shot word after joining.
   Both live in account.css because both checkouts (index.html and
   menu.html) draw them and neither page owns the rewards surface. */
.bk-rewards {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--bk-line);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.045));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.bk-rewards-head {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bk-gold); font-weight: 800;
}
.bk-rewards-claim {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 17px; font-weight: 900; letter-spacing: -0.01em;
  color: var(--bk-text);
}
.bk-rewards-tick {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bk-gold); color: #1a1207; font-size: 12px; font-weight: 900;
}
/* The same block, saying the reward is gone. Muted, no tick: it is
   information, not a failure — the order carries on at full price. */
.bk-rewards.is-spent {
  background: rgba(247, 239, 225, 0.05);
  border-color: rgba(247, 239, 225, 0.14);
}
.bk-rewards.is-spent .bk-rewards-head { color: var(--bk-muted); }
.bk-rewards.is-spent .bk-rewards-claim { font-size: 14px; font-weight: 700; color: var(--bk-muted); }
.bk-rewards.is-spent .bk-rewards-tick { display: none; }

.bk-rewards-note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(245, 166, 35, 0.1); border: 1px solid var(--bk-line);
  color: var(--bk-text); font-size: 14px; font-weight: 700; line-height: 1.45;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── The checkout gate (Sept 2026) ─────────────────────────────────────
   The SAME sheet, lifted over the site's own modals. Those are
   `z-index: 10000 !important`, so the corner promo's 240 would have put
   the join card BEHIND the open checkout — invisible, with a live scrim.
   On a phone it stays the bottom sheet it already is; from 760px up it
   becomes a centred dialog, because here it is a step in checkout rather
   than an aside in the corner of a page someone is browsing. */
.bk-sheet.bk-over-modal { z-index: 40001; }
.bk-scrim.bk-over-modal { z-index: 40000; }
@media (min-width: 760px) {
  .bk-sheet.bk-over-modal {
    left: 50%; right: auto; top: 50%; bottom: auto;
    transform: translate(-50%, calc(-50% + 24px));
    max-width: 420px; max-height: min(86vh, 680px);
  }
  .bk-sheet.bk-over-modal.bk-open { transform: translate(-50%, -50%); }
}

/* "Already have a MyBunsik account? Log in" — the second door out of the
   join card. A signed-out visitor is not necessarily a new one, so this
   is a real choice, not an afterthought under the fold. */
.bk-alt { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--bk-muted); line-height: 1.9; }
.bk-alt button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bk-gold); font-weight: 800; font-size: 13px; text-decoration: underline;
  font-family: inherit;
}
.bk-alt button:hover { color: #ffb43a; }
/* The label above the sign-up fields, so the two doors are legible as
   two doors rather than one form with a link stuck under it. */
.bk-lead { margin: 16px 0 0; font-size: 13px; font-weight: 800; color: var(--bk-text); }
/* The choice screen's two actions want breathing room between them: the
   primary CTA is a block button, LOG IN is a link on its own line. */
.bk-sheet .bk-btn + .bk-alt { margin-top: 16px; }

.bk-scrim {
  position: fixed; inset: 0; z-index: 239;
  background: rgba(8, 4, 0, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.bk-scrim.bk-open { opacity: 1; pointer-events: auto; }

/* Skipping the reward has to be as easy as taking it: nobody is made to
   hand over a name and a number to order dinner. A 44px target (the iOS
   minimum, and comfortably tappable with a thumb), its own colours rather
   than inherited ones — the sheet is always dark, whatever theme the page
   around it is in — and a z-index so it stays above whatever a step
   renders underneath it. */
.bk-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245, 166, 35, 0.38); border-radius: 14px;
  background: rgba(255, 248, 235, 0.07); color: var(--bk-text);
  font-size: 22px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.bk-close:hover { background: rgba(245, 166, 35, 0.16); border-color: var(--bk-gold); }
.bk-close:active { background: rgba(245, 166, 35, 0.24); }
.bk-close:focus-visible { outline: 2px solid var(--bk-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bk-close { transition: none; } }
/* The first line of any step keeps clear of the button rather than
   sliding under it — the eyebrow is short, but a title never is. */
.bk-sheet .bk-eyebrow, .bk-sheet .bk-auth-body > .bk-title:first-child { padding-right: 50px; }

.bk-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bk-gold); font-weight: 800; }
.bk-title { margin: 6px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.bk-title .bk-big { display: block; font-size: 40px; color: var(--bk-gold); letter-spacing: -0.03em; line-height: 1; margin: 2px 0; }
.bk-sub { margin: 4px 0 0; color: var(--bk-muted); font-size: 14px; }
.bk-perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bk-perks li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--bk-text); }
.bk-perks .bk-ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(245, 166, 35, 0.12); color: var(--bk-gold); font-size: 15px;
}
.bk-promo-art {
  position: absolute; right: 14px; top: 54px; width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(245, 166, 35, 0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
@media (max-width: 380px) { .bk-promo-art { display: none; } }

.bk-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin-top: 16px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--bk-gold); color: #1a0f03; font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 26px rgba(245, 166, 35, 0.22);
}
.bk-btn:hover { background: #ffb43a; }
.bk-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.bk-btn.bk-ghost { background: transparent; color: var(--bk-text); border: 1px solid var(--bk-line); box-shadow: none; }
.bk-btn.bk-ghost:hover { background: rgba(245, 166, 35, 0.08); }
.bk-link {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px;
  background: none; border: 0; color: var(--bk-muted); font-size: 14px; text-decoration: underline; cursor: pointer;
}
.bk-fine { margin: 12px 0 0; font-size: 12px; color: var(--bk-quiet); line-height: 1.5; }
.bk-fine a { color: var(--bk-muted); }

/* ── Sign-in fields ───────────────────────────────────────────────────── */
.bk-field { margin-top: 14px; }
.bk-field label { display: block; font-size: 12px; color: var(--bk-muted); margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.bk-input-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--bk-line); border-radius: 14px; background: rgba(255,255,255,0.03); padding: 0 12px;
}
.bk-input-row:focus-within { border-color: var(--bk-gold); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }
.bk-prefix { color: var(--bk-muted); font-weight: 700; font-size: 15px; padding-right: 8px; border-right: 1px solid var(--bk-line); }
.bk-input {
  flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; color: var(--bk-text);
  font-size: 17px; letter-spacing: 0.04em; outline: none;
}
.bk-input::placeholder { color: var(--bk-quiet); letter-spacing: 0.02em; }
.bk-otp { display: flex; gap: 8px; justify-content: space-between; }
.bk-otp input {
  width: 100%; height: 54px; text-align: center; font-size: 22px; font-weight: 800;
  border: 1px solid var(--bk-line); border-radius: 12px; background: rgba(255,255,255,0.03); color: var(--bk-text); outline: none;
}
.bk-otp input:focus { border-color: var(--bk-gold); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }
.bk-error { margin: 10px 0 0; color: #ff9b8a; font-size: 13px; min-height: 1em; }
.bk-note { margin: 10px 0 0; color: var(--bk-muted); font-size: 13px; }
.bk-note button { background: none; border: 0; color: var(--bk-gold); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.bk-welcome { text-align: center; padding: 6px 0 0; }
.bk-welcome .bk-emoji { font-size: 40px; }
.bk-welcome .bk-offer {
  margin: 14px auto 0; padding: 14px; max-width: 300px; border-radius: 16px;
  border: 1px dashed rgba(245,166,35,0.55); background: rgba(245,166,35,0.08);
}
.bk-welcome .bk-offer strong { display: block; font-size: 28px; color: var(--bk-gold); letter-spacing: -0.02em; }
.bk-welcome .bk-offer code { color: var(--bk-text); font-size: 14px; letter-spacing: 0.08em; }

/* ── Nav chip ─────────────────────────────────────────────────────────── */
.bk-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--bk-line);
  background: rgba(245, 166, 35, 0.10); color: var(--bk-gold) !important; font-weight: 800; font-size: 13px; text-decoration: none;
  white-space: nowrap;
  /* the chip is the elastic item in the header row: it gives ground before anything
     can be pushed outside the nav pill (see the header block in index.html) */
  flex: 0 1 auto; min-width: 0;
}
.bk-nav-wave { flex: 0 0 auto; }
.bk-nav-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk-nav-link:hover { background: rgba(245, 166, 35, 0.18); }
/* Narrow phones, in the order the chip gives ground. The header it sits in also carries
   the logo, the theme switch, the ORDER DIRECT CTA and the burger, and none of those may
   be dropped — so the chip is what shrinks, one element at a time:
     <=680  a tighter chip
     <=520  the wave steps out, so "Hi, <name>" survives whole
     <=440  the greeting steps out, the name alone still identifies the chip
     <=380  the name steps out and the wave comes BACK as the whole chip — an icon-only
            pill. Still a full-size tap target and still labelled for screen readers by
            the anchor's aria-label, but ~70px narrower than the name. */
@media (max-width: 680px) {
  .bk-nav-link { padding: 6px 10px; font-size: 12px; gap: 5px; }
}
@media (max-width: 520px) {
  .bk-nav-wave { display: none; }
}
@media (max-width: 440px) {
  .bk-nav-greet { display: none; }
}
@media (max-width: 380px) {
  .bk-nav-wave { display: inline; font-size: 14px; }
  .bk-nav-name { display: none; }
  .bk-nav-link { padding: 7px 9px; gap: 0; }
}

/* ── My Bunsik page (redesigned Sept 2026) ────────────────────────────────
   EVERY rule below is scoped to `.bk-page` — the my-bunsik.html body — so the
   promo and sign-in sheets this same stylesheet paints on index.html and
   menu.html cannot be reached by the account-page design.

   The page is built around one hierarchy: who you are → the reward you hold
   right now → your points → your actions → your activity.

   ── THE ONE-LIT-CARD LAW ───────────────────────────────────────────────
   Exactly ONE card on the page carries the gold border and the lit
   background. Everything else is a quiet panel on the page ground, so gold
   reads as meaning (a live code, a spendable balance, the primary action)
   instead of decoration.

   That treatment now lives in its own class, `.bk-lit`, and the page hands
   it to exactly one card at a time, in this order (assignLitCard() in
   my-bunsik.html):

     1. the ACTIVE REDEMPTION card — a live code the customer is holding up
        at the counter beats everything else on the screen;
     2. the Bunsik Rewards points card — the page's standing subject;
     3. the welcome-gift hero — only when rewards are switched off, i.e.
        when it is the only card that could be lit.

   The hero therefore renders QUIET by default (`.bk-hero.bk-quiet`): the
   welcome gift is a one-time state that ends after the first order, while
   the points balance is there every visit. Its gold survives where gold
   means something — the label and the CTA button. */

.bk-page {
  --bk-panel: rgba(255, 248, 235, 0.035);
  --bk-panel-line: rgba(247, 239, 225, 0.085);
  background: radial-gradient(130% 52% at 50% -8%, rgba(245, 166, 35, 0.12), transparent 62%) var(--bk-ink);
  background-attachment: fixed;
  color: var(--bk-text);
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bk-page * { box-sizing: border-box; }
.bk-page a { color: inherit; }
.bk-page .bk-wrap { max-width: 520px; margin: 0 auto; padding: 0 18px calc(104px + var(--bk-safe-b)); }

/* ── header: back · wordmark · account ────────────────────────────────── */
.bk-page .bk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 2px; }
.bk-page .bk-top img { height: 34px; width: auto; display: block; opacity: 0.94; }
.bk-page .bk-icon-btn {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid var(--bk-panel-line); background: var(--bk-panel); color: var(--bk-text);
  display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 16px;
}
.bk-page .bk-icon-btn:hover { border-color: var(--bk-line); background: rgba(245, 166, 35, 0.09); color: var(--bk-gold); }

.bk-page .bk-hello { margin: 24px 0 0; }
.bk-page .bk-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bk-gold); }
.bk-page .bk-hello h1 { margin: 9px 0 0; font-size: clamp(23px, 6.4vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; }
.bk-page .bk-hello p { margin: 6px 0 0; color: var(--bk-muted); font-size: 14px; line-height: 1.5; }

/* ── section heading: label outside the panel, so panels need no chrome ── */
.bk-page .bk-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 11px; }
.bk-page .bk-sec h2 { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bk-muted); }
/* the negative margin keeps the 36px touch target from adding visual bulk to the heading row */
.bk-page .bk-sec a, .bk-page .bk-sec button {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; margin: -10px 0;
  font-size: 12.5px; font-weight: 700; color: var(--bk-gold);
  background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: inherit;
}
.bk-page .bk-sec a:hover, .bk-page .bk-sec button:hover { text-decoration: underline; }
.bk-page .bk-panel { padding: 16px; border-radius: 18px; border: 1px solid var(--bk-panel-line); background: var(--bk-panel); }

/* ── the lit treatment ────────────────────────────────────────────────────
   One class, worn by exactly one card (see the law above). Kept separate
   from any card's own layout so moving the light from one card to another
   is a classList.toggle and nothing else moves. */
.bk-page .bk-lit {
  border-color: rgba(245, 166, 35, 0.40);
  background: linear-gradient(135deg, #2b1b0d 0%, #1b1208 56%, #140d06 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 220, 150, 0.10);
}
.bk-page .bk-lit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 92% at 88% 18%, rgba(245, 166, 35, 0.17), transparent 64%);
}

/* ── reward hero ──────────────────────────────────────────────────────────
   The artwork sits in its OWN grid column, never absolutely positioned over
   the copy, so no string the server sends can ever collide with the gift. */
.bk-page .bk-hero {
  position: relative; overflow: hidden; margin-top: 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(74px, 26vw, 108px);
  gap: 12px; align-items: center;
  padding: 18px 16px; border-radius: 22px;
  border: 1px solid var(--bk-panel-line);
  background: var(--bk-panel);
}
/* Demoted while the rewards surface owns the light. The gift art loses its
   halo too — a quiet card with a glowing illustration reads as a bug. */
.bk-page .bk-hero.bk-quiet .bk-hero-art svg { filter: none; opacity: 0.88; }
.bk-page .bk-hero-copy { position: relative; z-index: 1; min-width: 0; }
.bk-page .bk-hero-label { display: block; font-size: clamp(9.5px, 2.9vw, 10.5px); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bk-gold); }
.bk-page .bk-hero-big { display: block; margin: 7px 0 0; font-size: clamp(29px, 8.8vw, 38px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.bk-page .bk-hero-sub { display: block; margin: 5px 0 0; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-page .bk-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bk-page .bk-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 8px; border: 1px dashed rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.08);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-page .bk-hero-note { margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bk-muted); }
.bk-page .bk-hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  min-height: 44px; padding: 0 18px; border-radius: 13px;
  background: var(--bk-gold); color: #1a0f03; font-weight: 800; font-size: 14px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.22);
}
.bk-page .bk-hero-cta:hover { background: #ffb43a; }
.bk-page .bk-hero-cta svg { width: 16px; height: 16px; }
.bk-page .bk-hero-art { position: relative; z-index: 1; justify-self: end; width: 100%; }
.bk-page .bk-hero-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5)); }

.bk-page .bk-panel .bk-sub { margin: 6px 0 0; font-size: 13px; color: var(--bk-muted); }

/* ── Bunsik Rewards (Sept 2026) ──────────────────────────────────────────
   The five-stamp card it replaced is gone from the UI entirely — stamps
   were a paper metaphor for a points system that now exists for real.

   Everything below is driven by the server payload. There is no arithmetic
   in this stylesheet and none in the page: the balance, the tier, the
   progress percentage and the shortfall all arrive already computed. */

.bk-page .bk-rw-head { margin: 30px 0 13px; }
.bk-page .bk-rw-head h2 {
  margin: 8px 0 0; font-size: clamp(19px, 5.4vw, 22px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
}

/* ── points card ───────────────────────────────────────────────────────── */
.bk-page .bk-points {
  position: relative; overflow: hidden;
  padding: 18px 16px; border-radius: 22px;
  border: 1px solid var(--bk-panel-line); background: var(--bk-panel);
}
.bk-page .bk-points-top {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.bk-page .bk-points-bal { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bk-page .bk-points-num {
  font-size: clamp(34px, 10vw, 44px); font-weight: 900; letter-spacing: -0.035em; line-height: 1;
  color: var(--bk-gold);
}
.bk-page .bk-points-unit { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-muted); }
.bk-page .bk-tier-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--bk-line); background: rgba(245, 166, 35, 0.10);
  color: var(--bk-gold); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.bk-page .bk-tier-chip svg { flex: 0 0 15px; width: 15px; height: 15px; display: block; }
.bk-page .bk-tier-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-page .bk-lifetime { position: relative; z-index: 1; margin: 7px 0 0; font-size: 12px; color: var(--bk-quiet); }

.bk-page .bk-prog { position: relative; z-index: 1; margin-top: 16px; }
.bk-page .bk-prog-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(247, 239, 225, 0.10);
}
.bk-page .bk-prog-bar > span {
  display: block; height: 100%; min-width: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bk-gold-deep), var(--bk-gold) 70%, #ffd978);
  transition: width 420ms ease;
}
.bk-page .bk-prog-note { margin: 9px 0 0; font-size: 12.5px; color: var(--bk-muted); line-height: 1.5; }
.bk-page .bk-prog-note b { color: var(--bk-gold); }

/* 0 points: not a bar at 0%, a proper first-run invitation. */
.bk-page .bk-points-zero { position: relative; z-index: 1; margin-top: 14px; }
.bk-page .bk-points-zero strong { display: block; font-size: 15px; font-weight: 800; }
.bk-page .bk-points-zero p { margin: 5px 0 0; font-size: 13px; color: var(--bk-muted); line-height: 1.5; }

/* ── ACTIVE REDEMPTION — the code the counter reads ─────────────────────── */
.bk-page .bk-redeem {
  position: relative; overflow: hidden; margin-top: 14px;
  padding: 18px 16px; border-radius: 22px; text-align: center;
  border: 1px solid var(--bk-panel-line); background: var(--bk-panel);
}
.bk-page .bk-redeem > * { position: relative; z-index: 1; }
.bk-page .bk-redeem-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bk-gold); }
.bk-page .bk-redeem-name { display: block; margin: 8px 0 0; font-size: 16px; font-weight: 800; }
.bk-page .bk-redeem-code {
  display: block; margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Legible across a counter on a phone held at arm's length, and it must
     never widen the page: the clamp floors at a size a 360px screen fits. */
  font-size: clamp(26px, 9.2vw, 40px); font-weight: 800; letter-spacing: 0.08em; line-height: 1.1;
  color: var(--bk-text); word-break: break-all;
}
.bk-page .bk-redeem-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(245, 166, 35, 0.14); color: var(--bk-gold);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.bk-page .bk-redeem-status.bk-off { background: rgba(255, 255, 255, 0.06); color: var(--bk-muted); }
.bk-page .bk-redeem-status svg { flex: 0 0 13px; width: 13px; height: 13px; display: block; }
.bk-page .bk-redeem-timer {
  margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--bk-muted);
  font-variant-numeric: tabular-nums;
}
.bk-page .bk-redeem-timer b { color: var(--bk-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bk-page .bk-redeem-show { margin: 12px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
/* THE reassurance. Not fine print: the whole point of the new model is
   that nothing has been spent yet, so it gets its own lit strip. */
.bk-page .bk-redeem-safe {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  margin: 14px 0 0; padding: 11px 12px; border-radius: 13px;
  background: rgba(60, 180, 100, 0.12); color: #a8e8c0; font-size: 12.5px; line-height: 1.5;
}
.bk-page .bk-redeem-safe svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.bk-page .bk-redeem-again { margin-top: 14px; max-width: 320px; margin-left: auto; margin-right: auto; }

/* ── reward catalogue ──────────────────────────────────────────────────── */
.bk-page .bk-rwlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-page .bk-rwlist > li { min-width: 0; }
.bk-page .bk-rwrow {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; border-radius: 16px; border: 1px solid var(--bk-panel-line); background: var(--bk-panel);
}
.bk-page .bk-rwrow.bk-locked { opacity: 0.72; }
.bk-page .bk-rwic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(245, 166, 35, 0.11); color: var(--bk-gold);
}
.bk-page .bk-rwic svg { width: 21px; height: 21px; display: block; }
.bk-page .bk-rwmain { min-width: 0; }
.bk-page .bk-rwname { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.bk-page .bk-rwdesc { margin: 4px 0 0; font-size: 12.5px; color: var(--bk-muted); line-height: 1.5; }
.bk-page .bk-rwcost {
  display: inline-block; margin-top: 9px; padding: 4px 10px; border-radius: 999px;
  background: rgba(245, 166, 35, 0.12); color: var(--bk-gold);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.bk-page .bk-rwlock { margin: 9px 0 0; font-size: 12.5px; font-weight: 700; color: var(--bk-quiet); }
.bk-page .bk-rwacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk-page .bk-rwbtn {
  flex: 1 1 auto; min-width: 150px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--bk-gold); color: #1a0f03;
  font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.bk-page .bk-rwbtn:hover:not(:disabled) { background: #ffb43a; }
.bk-page .bk-rwbtn.bk-ghost { background: transparent; color: var(--bk-gold); border: 1px solid var(--bk-line); }
.bk-page .bk-rwbtn.bk-ghost:hover:not(:disabled) { background: rgba(245, 166, 35, 0.10); }
.bk-page .bk-rwbtn.bk-on { background: rgba(60, 180, 100, 0.18); color: #7ee0a0; border: 1px solid rgba(60, 180, 100, 0.35); }
/* A locked reward is not a dimmed gold slab — gold is reserved for what
   the customer can actually do. It becomes an inert outline instead, with
   the shortfall line above it saying why. LAST in the block, and matching
   the ghost variant explicitly, so no modifier can out-rank it. */
.bk-page .bk-rwbtn:disabled,
.bk-page .bk-rwbtn.bk-ghost:disabled {
  background: transparent; color: var(--bk-quiet);
  border: 1px dashed var(--bk-panel-line); cursor: default;
}

/* ── tier ladder ───────────────────────────────────────────────────────── */
.bk-page .bk-tiers { border-radius: 18px; border: 1px solid var(--bk-panel-line); background: var(--bk-panel); overflow: hidden; }
.bk-page .bk-tierrow { padding: 14px; border-top: 1px solid var(--bk-panel-line); }
.bk-page .bk-tierrow:first-child { border-top: 0; }
.bk-page .bk-tierrow.bk-on { background: rgba(245, 166, 35, 0.07); box-shadow: inset 3px 0 0 var(--bk-gold); }
.bk-page .bk-tierhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-page .bk-tierhead strong { font-size: 14px; font-weight: 800; }
.bk-page .bk-tierhead .bk-tierpts { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--bk-quiet); white-space: nowrap; }
.bk-page .bk-tierben { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.bk-page .bk-tierben li {
  position: relative; padding-left: 15px; font-size: 12.5px; color: var(--bk-muted); line-height: 1.5;
}
.bk-page .bk-tierben li::before { content: "·"; position: absolute; left: 4px; color: var(--bk-gold); font-weight: 900; }

/* ── points history ────────────────────────────────────────────────────── */
.bk-page .bk-filters { display: flex; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.bk-page .bk-filter {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bk-panel-line); background: var(--bk-panel); color: var(--bk-muted);
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.bk-page .bk-filter.bk-on { border-color: var(--bk-line); background: rgba(245, 166, 35, 0.12); color: var(--bk-gold); }
.bk-page .bk-txn-amt { font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-page .bk-txn-amt.bk-plus { color: #7ee0a0; }
.bk-page .bk-txn-amt.bk-minus { color: var(--bk-gold); }

/* ── the confirm sheet's own emphasis ──────────────────────────────────── */
.bk-sheet .bk-confirm-cost {
  margin: 14px 0 0; padding: 12px; border-radius: 14px;
  border: 1px dashed rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.08);
  font-size: 13px; line-height: 1.55; color: var(--bk-text);
}
.bk-sheet .bk-confirm-cost b { color: var(--bk-gold); }
.bk-sheet .bk-sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.bk-sheet .bk-sheet-actions .bk-btn { margin-top: 0; }
.bk-sheet .bk-sheet-actions .bk-btn.bk-ghost { flex: 0 0 38%; }

/* ── quick actions: one grouped list, hairline dividers, no card each ──── */
.bk-page .bk-actions { border-radius: 18px; border: 1px solid var(--bk-panel-line); background: var(--bk-panel); overflow: hidden; }
.bk-page .bk-action {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px;
  color: var(--bk-text); text-decoration: none; font-size: 14.5px; font-weight: 700;
  border-top: 1px solid var(--bk-panel-line);
}
.bk-page .bk-action:first-child { border-top: 0; }
.bk-page .bk-action:hover { background: rgba(245, 166, 35, 0.07); }
.bk-page .bk-action .bk-ic {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; background: rgba(245, 166, 35, 0.11); color: var(--bk-gold);
}
.bk-page .bk-action .bk-ic svg { width: 18px; height: 18px; display: block; }
.bk-page .bk-action span:not(.bk-ic) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-page .bk-action .bk-chev { flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; color: var(--bk-quiet); }
.bk-page .bk-action .bk-chev svg { width: 16px; height: 16px; display: block; }

/* ── rows: orders, reservations, addresses ────────────────────────────── */
.bk-page .bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* a grid item's automatic minimum is min-content, so without this the row
   refuses to shrink and a long order summary widens the whole document
   instead of ellipsising inside its own line */
.bk-page .bk-list > li { min-width: 0; }
.bk-page .bk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 13px 14px; border-radius: 15px; background: var(--bk-panel); border: 1px solid var(--bk-panel-line);
}
.bk-page .bk-row .bk-main { min-width: 0; flex: 1 1 auto; }
.bk-page .bk-row .bk-main strong { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-page .bk-row .bk-main span { display: block; margin-top: 3px; font-size: 12px; color: var(--bk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-page .bk-row .bk-end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bk-page .bk-row .bk-amt { font-weight: 800; font-size: 14px; white-space: nowrap; }
.bk-page .bk-pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  background: rgba(245, 166, 35, 0.14); color: var(--bk-gold);
}
.bk-page .bk-pill.bk-ok { background: rgba(60, 180, 100, 0.16); color: #7ee0a0; }
.bk-page .bk-pill.bk-off { background: rgba(255, 255, 255, 0.06); color: var(--bk-muted); }
.bk-page button.bk-pill { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; font-family: inherit; }
.bk-page .bk-empty {
  margin: 0; padding: 20px 14px; border-radius: 15px; border: 1px dashed var(--bk-panel-line);
  color: var(--bk-muted); font-size: 13px; line-height: 1.55; text-align: center;
}
.bk-page .bk-empty a { color: var(--bk-gold); font-weight: 700; }
.bk-page .bk-row .bk-x { flex: 0 0 auto; border: 0; background: none; color: var(--bk-quiet); font-size: 18px; line-height: 1; cursor: pointer; padding: 8px; border-radius: 9px; }
.bk-page .bk-row .bk-x:hover { color: var(--bk-text); background: rgba(255, 255, 255, 0.05); }

/* ── forms ────────────────────────────────────────────────────────────── */
.bk-page .bk-form { display: grid; gap: 10px; margin-top: 12px; }
.bk-page .bk-form input {
  height: 46px; border-radius: 12px; border: 1px solid var(--bk-panel-line); background: rgba(255, 255, 255, 0.03);
  color: var(--bk-text); padding: 0 12px; font-size: 15px; font-family: inherit; outline: none; min-width: 0;
}
.bk-page .bk-form input:focus { border-color: var(--bk-gold); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.14); }
.bk-page .bk-form .bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── bottom navigation — routes unchanged, active state unmistakable ──── */
.bk-page .bk-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; padding: 0 4px calc(6px + var(--bk-safe-b));
  background: rgba(14, 9, 5, 0.93); backdrop-filter: blur(14px); border-top: 1px solid var(--bk-panel-line);
}
.bk-page .bk-bottom a {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 2px 5px; color: var(--bk-quiet); text-decoration: none; font-size: 10.5px; font-weight: 700;
}
.bk-page .bk-bottom a svg { width: 21px; height: 21px; display: block; }
.bk-page .bk-bottom a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-page .bk-bottom a.bk-active { color: var(--bk-gold); }
.bk-page .bk-bottom a.bk-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--bk-gold);
}

.bk-page .bk-toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--bk-safe-b)); transform: translateX(-50%); z-index: 260;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px;
  background: #2a1d0f; color: var(--bk-text); border: 1px solid var(--bk-line); font-size: 13px;
  opacity: 0; transition: opacity 200ms; pointer-events: none;
}
.bk-page .bk-toast.bk-open { opacity: 1; }
.bk-hidden { display: none !important; }

/* ── signed-out / switched-off states ─────────────────────────────────── */
.bk-page .bk-gate { margin-top: 26px; }
.bk-page .bk-gate .bk-btn { max-width: 360px; }
.bk-page .bk-btn { text-decoration: none; }   /* the "off" state's button is an <a> */

/* ── tablet / desktop: a real account area, not stretched phone cards ─── */
@media (min-width: 760px) {
  .bk-page .bk-wrap { max-width: 640px; padding-top: 8px; padding-bottom: 72px; }
  .bk-page .bk-bottom { display: none; }
  .bk-page .bk-toast { bottom: 28px; }
  .bk-page .bk-hero { padding: 24px 24px; gap: 20px; grid-template-columns: minmax(0, 1fr) 132px; }
}
@media (min-width: 1040px) {
  .bk-page .bk-wrap { max-width: 1060px; }
  .bk-page .bk-cols { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 28px; align-items: start; }
  .bk-page .bk-col > :first-child { margin-top: 0; }
  .bk-page .bk-col > :first-child .bk-rw-head { margin-top: 0; }
  .bk-page .bk-hero { margin-top: 0; grid-template-columns: minmax(0, 1fr) 150px; padding: 28px; }
  .bk-page .bk-hero-big { font-size: 40px; }
  .bk-page .bk-points, .bk-page .bk-redeem { padding: 22px; }
  /* Two columns halve the card width, so the code stops scaling with the
     VIEWPORT and takes a fixed size that still reads across a counter. */
  .bk-page .bk-redeem-code { font-size: 38px; }
}
/* ── narrow phones (360 px and below) ─────────────────────────────────────
   Nothing is dropped; the elastic bits give ground so no row can push the
   document wider than the screen. */
@media (max-width: 380px) {
  .bk-page .bk-wrap { padding-left: 14px; padding-right: 14px; }
  .bk-page .bk-rwrow { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px 12px; }
  .bk-page .bk-rwic { width: 34px; height: 34px; border-radius: 11px; }
  .bk-page .bk-rwic svg { width: 18px; height: 18px; }
  /* Side by side at 360px would give each button ~150px of a ~140px slot;
     stacked they stay full-width, full-height tap targets. */
  .bk-page .bk-rwbtn { flex: 1 1 100%; min-width: 0; }
  .bk-page .bk-filter { padding: 0 11px; }
  .bk-page .bk-tier-chip { padding: 6px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .bk-page * { transition: none !important; } }