/* ════════════════════════════════════════════════════════════════════════
   Kobe Steakhouse — feedback round (v2)
   Loaded LAST. Additive overrides for: dark wood-grain theme, real brand
   logo, map pin picker, recommended add-ons, bank-transfer + slip payment,
   side-dish summaries, and mobile polish.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand body font is Inter (per brand guidelines). */
  --sans: "Inter", "Outfit", "Helvetica Neue", system-ui, sans-serif;

  /* Dark wood-grain — deep aged timber planks, warm not flat black. */
  --wood-base: linear-gradient(135deg,#1c140f 0%,#140d09 45%,#1f1611 100%);
  --wood-planks: repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 116px,
      rgba(0,0,0,.55) 118px,
      rgba(120,90,60,.05) 119px,
      rgba(0,0,0,0) 121px);
  --wood-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.16' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23w)' opacity='0.35'/></svg>");
}

/* ── Real dark-walnut woodgrain (extracted from the printed Kobe menu) ──── */
body{
  background: #110b07 url("img/wood-dark.jpg") repeat;
  background-size: 300px auto;
}
body::after{                       /* gentle center-bias vignette for depth */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(120% 90% at 50% 12%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}

/* Menu page sits directly on the wood table — no parchment, no cards */
.flipmenu{
  background: transparent;
  color: var(--linen-white);
}

/* ════════════════ MENU — match the printed Kobe menu ════════════════ */
/* Section header: large serif title (right), hairline rule beneath */
.book-page__head{
  border-bottom-color: rgba(201,168,76,.30);
  align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 30px;
}
.book-page__cat{ text-align: right; order: 2; }
.book-page__cat-th{
  font-family: var(--thai), var(--serif);
  font-weight: 400; font-size: 15px;
  color: var(--aged-parchment); opacity:.7;
  letter-spacing: 0; margin-bottom: 2px;
}
.book-page__cat-en{
  font-family: var(--serif);
  font-weight: 600; font-style: normal;
  font-size: 38px; line-height: 1;
  letter-spacing: .5px; text-transform: none;
  color: var(--linen-white); margin-top: 0;
}
.page-turn{ color: rgba(245,237,216,.55); border-color: rgba(201,168,76,.28); }
.page-turn:hover:not(:disabled){ color: var(--linen-white); border-color: var(--gold-leaf); background: rgba(201,168,76,.08); }
.book-page__num{ color: var(--aged-parchment); opacity:.6; }
.book-page__empty{ color: var(--aged-parchment); opacity:.8; }
.page-dot{ background: rgba(201,168,76,.3); }
.page-dot.is-on{ background: var(--gold-leaf); }

/* Grid — 3 columns like the printed menu */
.book-page__grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}

/* Dish = bare photo on the wood + names + ".-" price (no card chrome) */
.dish-card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0;
}
.dish-card:hover{
  transform: none;
  box-shadow: none;
}
.dish-card__img{
  aspect-ratio: 4/3;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  background: #0a0705;
}
.dish-card__img::after{ display:none; }   /* kill the bottom gradient */
.dish-card:hover .dish-card__img img{ transform: scale(1.04); }

.dish-card__badge{
  top: 9px; left: 9px;
  background: rgba(8,5,3,.6);
  border-radius: 2px;
  padding: 4px 8px;
}
.dish-card__hover{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--linen-white);
  background: rgba(10,7,5,.55);
  opacity:0; transition: opacity .25s;
}
.dish-card:hover .dish-card__hover{ opacity:1; }

.dish-card__meta{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px; padding: 12px 2px 0;
}
.dish-card__names{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dish-card__th{
  font-family: var(--thai), var(--serif);
  font-weight: 400; font-size: 13.5px;
  color: var(--aged-parchment); opacity:.78; line-height: 1.3;
}
.dish-card__en{
  font-family: var(--serif);
  font-weight: 600; font-size: 16.5px;
  text-transform: none; letter-spacing: .2px;
  color: var(--linen-white); line-height: 1.25;
}
.dish-card__jp{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .5px;
  color: var(--aged-parchment); opacity:.4; line-height: 1.3;
  margin-top: 1px;
}
.dish-card__price{
  flex:0 0 auto;
  font-family: var(--serif); font-weight: 600;
  font-size: 17px; color: var(--linen-white);
  white-space: nowrap; padding-top: 16px;
}
.dish-card__dash{ color: var(--gold-leaf); margin-left: 1px; }

.sq-names__jp{
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .5px;
  color: var(--aged-parchment); opacity:.45;
  margin: 2px 0 8px;
}

/* Footer fine print, like the printed menu */
.book-page__foot{ border-top-color: rgba(201,168,76,.18); }

/* Responsive grid — printed menu is 3-up on desktop; step down on smaller screens.
   These override the unconditional 3-col rule above (this file loads last). */
@media (max-width: 1100px){
  .book-page__grid{ grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}

/* Sticky sub-header: stack its three children so nothing bleeds off-screen. */
@media (max-width: 820px){
  .flipmenu__header{ padding: 14px 16px; }
  .flipmenu__header-inner{ flex-wrap: wrap; gap: 12px; }
  .flipmenu__header-left{ flex: 1 1 100%; }
  .deliver-to-btn{ flex: 1 1 100%; }
  .flipmenu__search{ flex: 1 1 100%; min-width: 0; }
}

/* Meta row (mode · branch · km · eta) must wrap, not clip off-screen, on narrow
   phones — and each value stays intact ("13.7 KM", not "13.7 / KM"). */
.flipmenu__meta{ flex-wrap: wrap; row-gap: 4px; }
.flipmenu__meta > span{ white-space: nowrap; }
@media (max-width: 560px){
  .book-page__grid{ grid-template-columns: 1fr; gap: 22px; }
  /* Title gets its own full-width line above the prev/next buttons so the
     serif heading reads cleanly instead of wrapping in a narrow column. */
  .book-page__head{ flex-wrap: wrap; }
  .book-page__cat{ order: -1; flex: 1 1 100%; margin-bottom: 12px; }
  .book-page__cat-en{ font-size: 30px; }
  .dish-card__img{ aspect-ratio: 16/10; }
  .dish-card__th{ font-size: 14.5px; }
  .dish-card__en{ font-size: 17px; }
}
@media (max-width: 380px){
  .book-page__cat-en{ font-size: 26px; }
}

/* ── Real brand logo (replaces CSS wordmark) ───────────────────────────── */
.kobe-logo{
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

/* ── Side-dish lines in checkout Order Summary ─────────────────────────── */
.ck-side__line{ margin-bottom: 10px; }
.ck-side__sides{
  display:flex; align-items:center; gap:6px;
  margin: 3px 0 0 22px;
  font-size: 11px; color: var(--gold-leaf); opacity:.85; line-height:1.4;
}

/* ── Center-pin location picker (Google Maps) ──────────────────────────── */
.ck-geo{ display:flex; flex-direction:column; }

/* Search box doubles as the editable address line (Places autocomplete). */
.ck-geo__searchbar{
  position:relative; display:flex; align-items:center; gap:10px;
  height: 46px; padding: 0 10px 0 12px;
  border:1px solid rgba(201,168,76,.35); border-radius: var(--r);
  background: rgba(255,255,255,.06);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ck-geo__searchbar:focus-within{
  border-color: var(--gold-leaf);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
  background: rgba(255,255,255,.1);
}
.ck-geo__searchic{ display:flex; color: var(--gold-leaf); flex:0 0 auto; }
.ck-geo__input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family: var(--sans); font-size: 14px; color: var(--linen-white);
}
.ck-geo__input::placeholder{ color: rgba(253,250,244,.4); }
.ck-geo__clear{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background: rgba(201,168,76,.16); color: var(--gold-leaf);
  transition: background .2s, transform .12s;
}
.ck-geo__clear:hover{ background: rgba(201,168,76,.28); }
.ck-geo__clear:active{ transform: scale(.9); }

/* Explicit "use my current location" button — the only thing that prompts for
   geolocation; the site never asks on its own. */
.ck-geo__locbtn{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:10px; padding:9px 14px; border-radius: var(--r); cursor:pointer;
  border:1px solid rgba(201,168,76,.4); background: rgba(255,255,255,.06);
  color: var(--aged-parchment); font-family: var(--sans); font-size:12.5px; font-weight:600;
  transition: background .18s, border-color .18s, transform .12s;
}
.ck-geo__locbtn svg{ color: var(--gold-leaf); flex:0 0 auto; }
.ck-geo__locbtn:hover:not(:disabled){ background: rgba(201,168,76,.16); border-color: var(--gold-leaf); }
.ck-geo__locbtn:active:not(:disabled){ transform: scale(.98); }
.ck-geo__locbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* Map stage */
.ck-geo__stage{
  position:relative; margin-top:12px; height: 300px;
  border-radius: var(--r); overflow:hidden;
  border:1px solid rgba(201,168,76,.35); background:#1a1410;
}
.ck-geo__canvas{ position:absolute; inset:0; }

.ck-geo__skeleton{ position:absolute; inset:0; background:#241d17; overflow:hidden; }
.ck-geo__skeleton span{
  position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.12) 50%, transparent 82%);
  animation: ckShimmer 1.3s infinite;
}
@keyframes ckShimmer{ to{ transform: translateX(100%); } }

/* Pin locked to the map centre; map pans underneath. */
.ck-geo__pin{
  position:absolute; left:50%; top:50%; z-index:3; pointer-events:none;
  transform: translate(-50%,-100%); margin-top:-1px;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.32));
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.ck-geo__pin[data-busy="true"]{ transform: translate(-50%,-112%); }
.ck-geo__ground{
  position:absolute; left:50%; top:50%; z-index:2; pointer-events:none;
  width:11px; height:4px; border-radius:50%; background: rgba(0,0,0,.32);
  transform: translate(-50%,-50%);
}

.ck-geo__locate{
  position:absolute; right:12px; bottom:12px; z-index:4;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,168,76,.45);
  background: rgba(26,20,16,.85); color:#e9d9b3;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  transition: transform .15s, background .2s;
}
.ck-geo__locate:hover{ background:#1a1410; transform: translateY(-1px); }
.ck-geo__locate:active{ transform: scale(.93); }

.ck-geo__chip{
  position:absolute; left:12px; top:12px; z-index:4;
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  background: rgba(26,20,16,.85); color:#e9d9b3;
  font-size: 11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.ck-geo__chip svg{ color:#c9a84c; flex:0 0 auto; }

.ck-geo__fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  color: var(--gold-leaf); font-size:12.5px; line-height:1.5;
}

.ck-geo__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:10px; flex-wrap:wrap;
}
.ck-geo__hint{
  display:flex; align-items:center; gap:8px; flex:1; min-width:190px;
  font-size: 11.5px; line-height:1.4; color: var(--ember-bronze);
  transition: color .2s;
}
.ck-geo__foot.is-done .ck-geo__hint{ color:#5cc98c; }
.ck-geo__foot.is-done .ck-geo__hint svg{ stroke:#5cc98c; }
.ck-geo__confirm{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius: var(--r); cursor:pointer;
  border:1px solid var(--gold-leaf); background:transparent;
  font-family: var(--sans); font-size:12.5px; font-weight:600; color: var(--gold-leaf);
  transition: background .18s, color .18s, border-color .18s, opacity .18s;
}
.ck-geo__confirm:not(:disabled):hover{ background: var(--gold-leaf); color: var(--char-black); }
.ck-geo__confirm:disabled{ opacity:.5; cursor:not-allowed; }
.ck-geo__confirm.is-ok{ background:#2e7d4f; border-color:#2e7d4f; color:#fff; }

/* Inline field validation hint (e.g. phone format). */
.field__err{ margin-top:6px; font-size:11px; line-height:1.3; letter-spacing:.2px; color:#e08a72; }
html[data-theme="light"] .field__err{ color:#c0492c; }

/* Places autocomplete dropdown — float above the card, match the theme. */
.pac-container{
  z-index: 99999; margin-top:6px; border-radius:10px;
  border:1px solid rgba(201,168,76,.4); box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-family: var(--sans); background:#fff;
}
.pac-item{ padding:7px 11px; font-size:12.5px; border-top:1px solid rgba(0,0,0,.05); cursor:pointer; }
.pac-item:hover, .pac-item-selected{ background: rgba(201,168,76,.12); }
.pac-item-query{ font-size:13px; color: var(--char-black); }
.pac-icon{ margin-top:3px; }

/* Light theme: the picker flips to dark-on-light surfaces. */
html[data-theme="light"] .ck-geo__searchbar{ background: rgba(255,255,255,.7); border-color: rgba(201,168,76,.4); }
html[data-theme="light"] .ck-geo__searchbar:focus-within{ background:#fff; border-color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__searchic{ color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__input{ color: var(--char-black); }
html[data-theme="light"] .ck-geo__input::placeholder{ color: rgba(60,46,34,.45); }
html[data-theme="light"] .ck-geo__clear{ background: rgba(139,94,60,.12); color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__clear:hover{ background: rgba(139,94,60,.24); }
html[data-theme="light"] .ck-geo__locbtn{ background: rgba(255,255,255,.6); color: var(--char-black); }
html[data-theme="light"] .ck-geo__locbtn svg{ color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__locbtn:hover:not(:disabled){ background: rgba(201,168,76,.14); border-color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__stage{ background:#e9e5dd; }
html[data-theme="light"] .ck-geo__skeleton{ background:#ece7df; }
html[data-theme="light"] .ck-geo__skeleton span{ background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.65) 50%, transparent 82%); }
html[data-theme="light"] .ck-geo__fallback{ color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__foot.is-done .ck-geo__hint{ color:#2e7d4f; }
html[data-theme="light"] .ck-geo__foot.is-done .ck-geo__hint svg{ stroke:#2e7d4f; }
html[data-theme="light"] .ck-geo__confirm{ color: var(--char-black); border-color: var(--ember-bronze); }
html[data-theme="light"] .ck-geo__confirm:not(:disabled):hover{ background: var(--ember-bronze); color:#fff; }

/* ── Recommended add-ons (set items) ───────────────────────────────────── */
.sq-addons{ display:flex; flex-direction:column; gap:8px; }
.sq-addon{
  display:flex; align-items:center; gap:12px;
  padding: 8px; border:1px solid rgba(139,94,60,.22);
  border-radius: var(--r); background: rgba(255,255,255,.5);
  transition: border-color .2s, background .2s;
}
.sq-addon.is-on{ border-color: var(--ember-bronze); background: rgba(201,168,76,.12); }
.sq-addon__img{ width:46px; height:46px; border-radius:5px; object-fit:cover; flex:0 0 auto; }
.sq-addon__info{ flex:1; min-width:0; }
.sq-addon__name{ font-family: var(--serif); font-size:14px; color: var(--char-black); line-height:1.2; }
.sq-addon__price{ font-size:12px; color: var(--ember-bronze); margin-top:2px; }
.sq-addon__add{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--kobe-crimson); color: var(--kobe-crimson);
  transition: background .2s, color .2s;
}
.sq-addon__add:hover{ background: var(--kobe-crimson); color: var(--linen-white); }

/* ── Bank transfer details + slip upload ───────────────────────────────── */
.bank{ display:flex; flex-direction:column; gap:8px; }
.bank-row{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding: 12px 14px; border-radius: var(--r);
  border:1px solid rgba(201,168,76,.28); background: rgba(0,0,0,.18);
  transition: border-color .2s;
}
.bank-row:hover{ border-color: var(--gold-leaf); }
.bank-row--static{ cursor: default; }
.bank-row__label{ flex:0 0 42%; font-size:11px; letter-spacing:1px; text-transform:uppercase; color: var(--gold-leaf); }
.bank-row__value{ flex:1; font-family: var(--serif); font-size:16px; color: var(--linen-white); }
.bank-row__copy{ flex:0 0 auto; font-size:11px; letter-spacing:1px; text-transform:uppercase; color: var(--ember-bronze); }

.slip-drop{ display:block; cursor:pointer; }
.slip-drop__empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding: 34px 18px; text-align:center;
  border: 1.5px dashed rgba(201,168,76,.4); border-radius: var(--r);
  color: var(--gold-leaf); transition: border-color .2s, background .2s;
}
.slip-drop:hover .slip-drop__empty{ border-color: var(--gold-leaf); background: rgba(201,168,76,.05); }
.slip-drop__th{ font-family: var(--serif); font-size:16px; color: var(--linen-white); }
.slip-drop__en{ font-size:12px; color: var(--aged-parchment); opacity:.7; }
.slip-preview{ position:relative; border-radius: var(--r); overflow:hidden; border:1px solid var(--gold-leaf); }
.slip-preview img{ width:100%; max-height:320px; object-fit:contain; background:#0d0907; display:block; }
.slip-preview__x{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background: rgba(26,20,16,.82); color: var(--linen-white);
  border:1px solid rgba(201,168,76,.5);
  box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: background .18s, transform .12s;
}
.slip-preview__x:hover{ background: var(--kobe-crimson); border-color: var(--kobe-crimson); }
.slip-preview__x:active{ transform: scale(.9); }
.slip-preview__ok{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding: 8px; font-size:12px; letter-spacing:.4px;
  background: rgba(127,115,78,.25); color: var(--linen-white);
}
.pay__need-slip{
  margin-top:10px; text-align:center; font-size:12px; color: var(--ember-bronze);
}

/* ════════════════ Mobile polish ════════════════ */
@media (max-width: 768px){
  .ck-geo__stage{ height: 260px; }
  .sq-addon__name{ font-size:13px; }
  .bank-row{ flex-wrap: wrap; gap:4px 12px; }
  .bank-row__label{ flex-basis:100%; }
  .bank-row__value{ flex-basis:auto; }
  .bank-row__copy{ margin-left:auto; }
}

@media (max-width: 640px){
  /* keep order summary readable, not pinned, on phones */
  .ck__side, .pay__side{ position: static; }
  .ck-geo__stage{ height: 240px; }
  .nav__inner{ padding: 12px 16px; gap: 12px; }
  .nav__chip{ padding: 7px 10px; font-size: 11px; }
  /* logo a touch smaller so nav never overflows at 320px */
  .nav__brand .kobe-logo{ width: 132px !important; }
}

@media (max-width: 380px){
  .nav__brand .kobe-logo{ width: 112px !important; }
  .nav__chip-dot{ display:none; }
}