/* ════════════════════════════════════════════════════════════════════════
   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:  "Sarabun", "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{
  position: sticky; top: var(--k-navh, 70px); 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-inner{
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  max-width: 1200px; margin: 0 auto; padding: 0 18px;
  justify-content: safe center;
}
.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: 14.5px; 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); }

/* ── 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: right; }
.kpage__th{
  font-family: var(--k-thai); font-weight: 400; font-size: 14px;
  color: var(--k-muted); letter-spacing: .4px;
}
.kpage__en{
  margin: 1px 0 0; font-family: var(--k-serif); font-weight: 600;
  font-size: clamp(32px, 6vw, 48px); line-height: 1; color: var(--k-cream);
  letter-spacing: .4px;
}
.kpage__rule{
  height: 1px; margin-top: 18px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--k-gold) 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; } }

/* ── 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; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 4px; background: #0a0705;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 16px 34px rgba(0,0,0,.5);
}
.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); }

.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: 8.5px; 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: flex-start;
  gap: 14px; margin-top: 15px;
}
.kdish__names{ min-width: 0; }
.kdish__th{
  font-family: var(--k-thai); font-weight: 500; font-size: 16px;
  color: var(--k-cream); line-height: 1.3;
}
.kdish__en{
  font-family: var(--k-serif); font-weight: 600; font-size: 19px;
  color: var(--k-cream); line-height: 1.18; margin-top: 1px;
}
.kdish__jp{
  font-family: var(--k-sans); font-size: 11px; color: var(--k-muted);
  margin-top: 4px; letter-spacing: .3px;
}
.kdish__price{
  flex: 0 0 auto; font-family: var(--k-serif); font-weight: 600;
  font-size: 20px; color: var(--k-cream); white-space: nowrap; padding-top: 2px;
}
.kdish__price span{ color: var(--k-gold); 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: 17px;
  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: 13px; color: var(--k-muted); margin-top: 1px; }
.krow__jp{ font-family: var(--k-sans); font-size: 10.5px; 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-serif); font-weight: 600;
  font-size: 17px; color: var(--k-cream); white-space: nowrap;
}
.krow__price span{ color: var(--k-gold); 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: 11px; 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-serif); font-weight: 600; letter-spacing: 0;
  font-size: 28px; 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 */
.modal__card--sq .sq-foot__btn{
  background: var(--k-gold) !important; border-color: var(--k-gold) !important;
  color: #0d0907 !important; font-family: var(--k-sans); letter-spacing: 1.6px;
}
.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; }
.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: 5 options overflow a phone in one row — wrap them
   into a tidy chip grid on narrow screens so nothing clips. */
@media (max-width: 600px){
  .modal__card--sq .seg{
    flex-wrap: wrap; gap: 7px; border: 0; overflow: visible;
  }
  .modal__card--sq .seg button{
    flex: 1 1 30%; padding: 9px 8px; border-radius: 6px;
    border: 1px solid rgba(201,168,76,.35) !important; 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: 46px !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; }