/* ════════════════════════════════════════════════════════════════════════
   Kobe interactive menu (v2) — a faithful, tappable version of the printed
   menu. Self-contained under .kmenu so it never fights the older stylesheets.
   This is the "menu / browse" layer; pressing the cart hands off to the
   existing checkout → delivery → payment engine unchanged.

   Per-restaurant theming lives in the few tokens below — swap these (+ the
   body wood image + logo + menu data) to spin up the next restaurant.
   ════════════════════════════════════════════════════════════════════════ */
.kmenu{
  --k-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --k-thai:  "Prompt", "Inter", system-ui, sans-serif;
  --k-sans:  "Inter", system-ui, sans-serif;
  --k-gold:  #c9a84c;
  --k-cream: #f3ede0;
  --k-muted: rgba(243,237,224,.48);
  --k-line:  rgba(243,237,224,.13);

  color: var(--k-cream);
  padding-bottom: 132px;
  min-height: 100vh;
}

/* ── Sticky category strip (replaces the old flip-book spine) ───────────── */
.kmenu__cats{
  /* -1px tucks the bar under the nav so a sub-pixel rounding gap in --k-navh
     (integer offsetHeight vs fractional rendered height) can't show a sliver. */
  position: sticky; top: calc(var(--k-navh, 70px) - 1px); z-index: 20;
  background: rgba(9,6,4,.84);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--k-line);
}
.kmenu__cats-bar{
  display: flex; align-items: center; gap: 10px;
  max-width: 1200px; margin: 0 auto; padding: 0 18px;
}
.kmenu__cats-inner{
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  /* The 10-category strip overflows on desktop; fade the right edge so trailing
     categories dissolve cleanly instead of being hard-sliced against the search
     pill that sits just beside it. */
  scroll-padding-right: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.kmenu__cats-inner::-webkit-scrollbar{ display: none; }
.kcat{
  flex: 0 0 auto; padding: 17px 15px; white-space: nowrap;
  font-family: var(--k-thai); font-size: var(--fs-2); font-weight: 500;
  color: var(--k-muted); border-bottom: 2px solid transparent;
  transition: color .22s, border-color .22s;
}
.kcat:hover{ color: var(--k-cream); }
.kcat.is-on{ color: var(--k-gold); border-bottom-color: var(--k-gold); }

/* Search — in the bar on web + mobile. */
.kmenu__search{
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  width: 210px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--k-line); color: var(--k-muted);
  /* Clear separation from the category strip so the search reads as its own
     control sitting at the far right, not crowding the last category. */
  margin-left: 18px;
}
.kmenu__search-input{
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--k-cream); font-family: var(--k-thai); font-size: var(--fs-1);
}
.kmenu__search-input::placeholder{ color: var(--k-muted); }
.kmenu__search-x{ color: var(--k-muted); display: flex; }

.kmenu__search-results{
  position: absolute; left: 0; right: 0; top: 100%; z-index: 41;
  max-width: 1200px; margin: 0 auto;
  background: #16100b; border-bottom: 1px solid var(--k-line);
  box-shadow: 0 20px 38px rgba(0,0,0,.3); max-height: 64vh; overflow-y: auto;
}
.kmenu__search-item{
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 18px; border-bottom: 1px solid var(--k-line); color: var(--k-cream);
}
.kmenu__search-item img{ width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.kmenu__search-name{ flex: 1; font-family: var(--k-thai); font-size: var(--fs-2); }
.kmenu__search-price{ flex: 0 0 auto; font-family: var(--k-thai); font-weight: 600; font-size: var(--fs-2); color: var(--k-cream); }
.kmenu__search-price span{ color: var(--k-gold); margin-left: 1px; }
.kmenu__search-empty{ padding: 16px 18px; color: var(--k-muted); font-size: var(--fs-1); }

/* Burger trigger + dropdown — desktop hidden (horizontal strip used instead). */
.kmenu__burger{ display: none; }
.kmenu__drawer{ display: none; }

/* ── Body / category "pages" ───────────────────────────────────────────── */
.kmenu__body{ max-width: 1200px; margin: 0 auto; padding: 0 18px; }

.kpage{ padding: 54px 0 6px; scroll-margin-top: 128px; }
.kpage__head{ margin-bottom: 34px; }
.kpage__title{ text-align: left; }
.kpage__th{
  font-family: var(--k-thai); font-weight: 400; font-size: var(--fs-1);
  color: var(--k-muted); letter-spacing: .4px;
}
.kpage__en{
  margin: 1px 0 0; font-family: var(--k-serif); font-weight: 600;
  font-size: var(--fs-4); line-height: 1; color: var(--k-cream);
  letter-spacing: .4px;
}
.kpage__rule{
  height: 1px; margin-top: 18px; opacity: .55;
  background: linear-gradient(90deg, var(--k-gold), transparent 72%);
}

/* ── Grid: 3-up like the printed page, stepping down responsively ──────── */
.kpage__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px;
}
@media (max-width: 1000px){ .kpage__grid{ grid-template-columns: repeat(2, 1fr); gap: 34px 22px; } }
@media (max-width: 600px){ .kpage__grid{ grid-template-columns: 1fr; gap: 30px; } }

/* ── Mobile: burger category menu + more breathing room ───────────────────── */
@media (max-width: 600px){
  /* More side padding so the photos have breathing room on phones. */
  .kmenu__body{ padding: 0 26px; }
  .kmenu__cats-bar{ padding: 9px 16px; }
  .kmenu__cats-inner{ display: none; }            /* hide the horizontal strip */
  .kmenu__search{ flex: 1 1 auto; width: auto; margin-left: 0; }  /* search takes the row */

  .kmenu__cats{ overflow: visible; }
  /* Burger = icon only, right-aligned so a thumb can reach it one-handed. */
  .kmenu__burger{
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
    background: none; color: var(--k-cream);
  }

  .kmenu__drawer{
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 41;
    background: #16100b; border-bottom: 1px solid var(--k-line);
    box-shadow: 0 20px 38px rgba(0,0,0,.3);
    max-height: 72vh; overflow-y: auto;
  }
  .kmenu__drawer-item{
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 13px 26px; background: none;
    border-bottom: 1px solid var(--k-line); color: var(--k-cream);
  }
  .kmenu__drawer-item.is-on{ color: var(--k-gold); }
  .kmenu__drawer-th{ font-family: var(--k-thai); font-size: var(--fs-2); font-weight: 600; }
  .kmenu__drawer-en{ font-size: var(--fs-1); letter-spacing: 1.2px; text-transform: uppercase; color: var(--k-muted); }
}

/* ── Dish: bare photo on the wood + names + ".-" price ─────────────────── */
.kdish{
  display: flex; flex-direction: column; text-align: left;
  cursor: pointer; background: none; border: 0; padding: 0;
}
.kdish__img{
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 4px; background: #0a0705;
  /* No border/lift-shadow: on the dark page that combo cast a light rim around
     the rounded box (the "glass" glare the manager flagged). Photos sit flat. */
}
.kdish__img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.kdish:hover .kdish__img img{ transform: scale(1.055); }
/* Photos shot on white studio backgrounds glare against the dark page. A 10%
   zoom crops that background border off the edges (the photo already fills via
   object-fit:cover), pulling the dish to the frame. Tagged per-photo via
   .is-zoom (see GLARE_ZOOM in screens-menu.jsx) so dark-plate shots keep their
   full composition. Applied in BOTH themes so the framing stays identical when
   the theme is toggled — only dark needs the glare fix, but consistency wins. */
.kdish__img img.is-zoom{ transform: scale(1.10); }
.kdish:hover .kdish__img img.is-zoom{ transform: scale(1.155); }
/* Same treatment on the item-modal photo so a flagged dish doesn't glare there.
   The modal letterboxes (object-fit:contain) to show the full cut, but that keeps
   the white background in view — so for flagged photos we fill (cover) + zoom,
   matching the grid and the mobile sheet (which already covers). */
.sq-img img.is-zoom{ object-fit: cover; padding: 0; transform: scale(1.10); }

.kdish__tag{
  position: absolute; top: 11px; left: 11px; z-index: 2;
  background: rgba(8,5,3,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--k-gold); font-family: var(--k-sans);
  font-size: var(--fs-1); letter-spacing: 1.7px; text-transform: uppercase; font-weight: 600;
  padding: 4px 8px; border-radius: 2px;
}
.kdish__add{
  position: absolute; bottom: 11px; right: 11px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8,5,3,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(243,237,224,.28); color: var(--k-cream);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.kdish:hover .kdish__add{ background: var(--k-gold); color: #0d0907; border-color: var(--k-gold); }
.kdish__add:active{ transform: scale(.9); }

.kdish__info{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-top: 15px;
}
.kdish__names{ min-width: 0; }
.kdish__th{
  font-family: var(--k-thai); font-weight: 500; font-size: var(--fs-2);
  color: var(--k-cream); line-height: 1.3;
}
.kdish__en{
  font-family: var(--k-serif); font-weight: 600; font-size: var(--fs-2);
  color: var(--k-cream); line-height: 1.18; margin-top: 1px;
}
.kdish__jp{
  font-family: var(--k-sans); font-size: var(--fs-1); color: var(--k-muted);
  margin-top: 4px; letter-spacing: .3px;
}
.kdish__price{
  flex: 0 0 auto; font-family: var(--k-thai); font-weight: 600;
  font-size: var(--fs-2); color: var(--k-cream); white-space: nowrap;
}
.kdish__price span{ color: inherit; margin-left: 1px; }

/* ── Text-only items (no photo) — a list with dotted leaders, like the
   printed menu's drink/side lists. ─────────────────────────────────────── */
.kpage__list{
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 56px;
}
@media (max-width: 760px){ .kpage__list{ grid-template-columns: 1fr; } }

.krow{
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--k-line); text-align: left; width: 100%;
  transition: color .2s;
}
.krow:hover{ color: var(--k-gold); }
.krow__names{ display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.krow__en{
  font-family: var(--k-serif); font-weight: 600; font-size: var(--fs-2);
  color: var(--k-cream); line-height: 1.2;
}
.krow:hover .krow__en{ color: var(--k-gold); }
.krow__th{ font-family: var(--k-thai); font-size: var(--fs-1); color: var(--k-muted); margin-top: 1px; }
.krow__jp{ font-family: var(--k-sans); font-size: var(--fs-1); color: var(--k-muted); opacity: .7; margin-top: 1px; }
.krow__dots{
  flex: 1 1 auto; align-self: flex-end; transform: translateY(-5px);
  border-bottom: 1px dotted rgba(243,237,224,.28); min-width: 18px;
}
.krow__price{
  flex: 0 0 auto; font-family: var(--k-thai); font-weight: 600;
  font-size: var(--fs-2); color: var(--k-cream); white-space: nowrap;
}
.krow__price span{ color: inherit; margin-left: 1px; }

/* ── Footer fine print, like the printed menu ─────────────────────────── */
.kmenu__foot{
  text-align: center; padding: 56px 18px 8px;
  color: var(--k-muted); font-size: var(--fs-1); letter-spacing: .3px; line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════
   Item sheet (tap a dish) — restyled to match the premium menu: Cormorant
   serif title, gold primary action (not red), refined option chips.
   Scoped to .modal__card--sq so the rest of the app is untouched.
   ════════════════════════════════════════════════════════════════════════ */
.modal__card--sq{
  --k-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --k-gold: #c9a84c; --k-cream: #f3ede0;
  background: linear-gradient(180deg,#16100b 0%, #0e0a07 100%) !important;
  border: 1px solid rgba(201,168,76,.18);
}
.modal__card--sq .sq-names__en{ color: var(--k-gold); letter-spacing: 2.4px; }
.modal__card--sq .sq-names__th{
  font-family: var(--k-thai); font-weight: 600; letter-spacing: 0;
  font-size: var(--fs-3); color: var(--k-cream);
}
.modal__card--sq .sq-names .money{ color: var(--k-gold); }
.modal__card--sq .sq-opt__h{ color: var(--k-gold); }

/* Doneness / spice segment chips */
.modal__card--sq .seg button.is-on{
  background: var(--k-gold); color: #0d0907; border-color: var(--k-gold);
}
.modal__card--sq .sq-side.is-on,
.modal__card--sq .sq-side:hover{ border-color: var(--k-gold); background: rgba(201,168,76,.08); }
.modal__card--sq .sq-side.is-on .sq-side__check{ background: var(--k-gold); border-color: var(--k-gold); color:#0d0907; }

/* Primary action: gold, not crimson. Use the Thai font (Sarabun) — --k-sans is
   Inter, which has no Thai glyphs, so the label fell back to a system font; with
   the old 1.6px tracking the Thai "เพิ่มลงตะกร้า" kerned badly. Thai must not be
   letter-spaced, so zero it out, and size up the label + price (was fs-1). */
.modal__card--sq .sq-foot__btn{
  background: var(--k-gold) !important; border-color: var(--k-gold) !important;
  color: #0d0907 !important; font-family: var(--k-thai); font-weight: 600;
  letter-spacing: 0; text-transform: none; font-size: var(--fs-1);
}
.modal__card--sq .sq-foot__btn:hover{ background: #d8b95e !important; border-color:#d8b95e !important; transform: translateY(-1px); }
.modal__card--sq .sq-foot__btn .money{ color:#0d0907; font-family: var(--k-thai); font-size: var(--fs-2); letter-spacing: 0; }
.modal__card--sq .sq-img{
  background: radial-gradient(ellipse at 50% 45%, rgba(201,168,76,.08) 0%, #0a0705 62%);
}
.modal__close{ background: rgba(10,7,5,.6); border:1px solid rgba(201,168,76,.3); }

/* Doneness/segment chips on a phone: pills already wrap + never break a label
   (see .seg in styles.css). Just tighten padding so more fit per row. */
@media (max-width: 600px){
  .modal__card--sq .seg button{
    flex: 1 1 auto; padding: 9px 10px; line-height: 1.15;
  }
}

/* ── Mobile: turn the item modal into a proper BOTTOM SHEET ──────────────
   Slides up from the bottom, rounded top, edge-to-edge cover photo (no more
   letterbox bands), content scrolls. Matches the Grab/foodpanda app feel. */
@media (max-width: 600px){
  .modal{ padding: 0 !important; align-items: flex-end !important; }

  .modal__card--sq{
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(201,168,76,.25) !important;
    animation: kSheetUp .34s cubic-bezier(.2,.8,.2,1) !important;
  }
  @keyframes kSheetUp{ from{ transform: translateY(100%); } to{ transform: none; } }

  /* grab-handle pill at the very top of the sheet */
  .modal__card--sq::before{
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:3px; background:rgba(243,237,224,.32); z-index:5;
  }

  /* photo fills the top edge-to-edge, no padding/letterbox */
  .modal__card--sq .sq-img{
    width:100% !important; aspect-ratio: 5 / 4 !important; max-height: 42vh;
    border-radius: 20px 20px 0 0;
  }
  .modal__card--sq .sq-img img{
    object-fit: cover !important; padding: 0 !important; object-position: center 55%;
  }
  .modal__card--sq .sq-img__badge{ top: 16px; left: 14px; }

  .modal__close{ top: 14px; right: 14px; z-index: 6; }

  /* keep the qty + add-to-cart bar pinned at the bottom of the sheet so it's
     always reachable while the middle content scrolls */
  .modal__card--sq .sq-foot{
    position: sticky; bottom: 0; margin: 16px -24px 0; padding: 14px 24px;
    background: linear-gradient(180deg, rgba(14,10,7,0) 0%, #0e0a07 22%);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Order flow (cart drawer · details · payment) — same premium language as
   the menu: Cormorant serif headings + gold primary actions (not crimson).
   ════════════════════════════════════════════════════════════════════════ */
.drawer__h, .ck__h, .pay__h, .mode__h, .ck-side__h{
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: 0 !important;
}
.ck__h, .pay__h, .mode__h{ font-size: var(--fs-4) !important; }

/* Gold primary CTAs replace the crimson ones across the flow */
.btn--full,
.floating-cart{
  background: var(--gold-leaf) !important;
  border-color: var(--gold-leaf) !important;
  color: #0d0907 !important;
}
.btn--full:hover,
.floating-cart:hover{ background:#d8b95e !important; border-color:#d8b95e !important; }
.btn--full:disabled{ background: rgba(201,168,76,.25) !important; border-color: transparent !important; color: rgba(13,9,7,.5) !important; }
.btn--full .money, .floating-cart .money{ color:#0d0907 !important; }

/* Progress stepper: gold current step instead of crimson */
.stp.is-now .stp__n{ background: var(--gold-leaf) !important; color:#0d0907 !important; border-color: var(--gold-leaf) !important; }

/* ── Order receipt (tracking): unify into the design system, theme-aware ──────
   Legacy screen — serif values, gold labels, green accents. Unify to ONE font
   (Sarabun) and ONE colour, hierarchy from size/weight (the 4 type tokens only).
   The banner is dark navy in BOTH themes (always white text); the receipt card
   is dark in dark mode / white in light mode, so its text + hairlines flip via
   --trk-* tokens — white-on-dark vs ink-on-white (fixes white-on-white in light). */
.trk{ --trk-text: var(--linen-white); --trk-line: rgba(255,255,255,.14); --trk-fill: rgba(255,255,255,.06); }
html[data-theme="light"] .trk{ --trk-text: var(--ink); --trk-line: var(--line-lt); --trk-fill: rgba(0,0,0,.04); }

.trk, .trk *{ font-family: var(--k-thai) !important; letter-spacing: 0 !important; }

/* Banner — dark navy header in both themes → always white */
.trk__h, .trk .sect-label, .trk__sub{ color: var(--linen-white) !important; text-transform: none !important; }

/* Receipt card text — one colour that flips with the card background */
.trk-card__h, .trk-rcpt__no, .trk-rcpt__when, .trk-rcpt__paid,
.trk-line__th, .trk-rcpt__sum, .trk-rcpt__sum span:first-child, .trk-rcpt__free,
.trk-rcpt__sum--total span:first-child, .trk-rcpt__pay, .trk-rcpt__pay svg,
.trk-detail__row span, .trk-detail__row strong, .trk-detail__addr,
.trk-card .money{
  color: var(--trk-text) !important;
  text-transform: none !important;
}
/* secondary lines: same colour, just quieter — hierarchy without hue */
.trk .sect-label, .trk__sub, .trk-card__h, .trk-rcpt__when,
.trk-rcpt__sum span:first-child, .trk-detail__row span{ opacity: .58 !important; }
.trk__h, .trk-rcpt__no, .trk-rcpt__sum--total span:first-child, .trk-rcpt__sum--total .money{ opacity: 1 !important; }
/* size/weight hierarchy (4-level scale only) */
.trk__h{ font-weight: 700 !important; }
.trk-rcpt__sum--total span:first-child{ font-weight: 700 !important; }
.trk-rcpt__sum--total .money{ font-size: var(--fs-3) !important; }
/* neutralise the green pill / gold strip + unify hairlines (theme-aware) */
.trk-rcpt__paid{ background: var(--trk-fill) !important; border-color: var(--trk-line) !important; }
.trk-rcpt__pay{ background: var(--trk-fill) !important; border-color: var(--trk-line) !important; }
.trk-card{ border-color: var(--trk-line) !important; }
.trk-card__h, .trk-rcpt__sums, .trk-rcpt .trk-detail{ border-top-color: var(--trk-line) !important; }
.trk-rcpt__rule{ background: var(--trk-line) !important; }