/* Noka Coffee & Eatery — customer-facing styles */

:root {
  --gold: #c4a777;
  --gold-deep: #a8874f;
  --espresso: #241c16;
  --espresso-soft: #3a2e25;
  --cream: #faf6ef;
  --cream-2: #f2ebdf;
  --line: #e3d9c8;
  --ink: #2b241e;
  --muted: #7c6f62;
  --ok: #2f7d4f;
  --warn: #b7791f;
  --bad: #b3392c;
  --radius: 16px;
  --shadow: 0 18px 45px rgba(36, 28, 22, .12);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Playfair Display", "Georgia", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 84px 0; }
.section-sm { padding: 48px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin-bottom: 10px;
}
.lede { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }

/* ------------------------------------------------------------------ header */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 26px; height: 70px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 40px; width: auto; display: block; color: var(--espresso); }
.brand:hover .brand-logo { color: var(--gold-deep); }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--ink); opacity: .8; }
.nav a:hover, .nav a.active { opacity: 1; color: var(--gold-deep); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--ink); }

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--espresso); color: var(--cream); }
.btn-primary:hover { background: #17110d; box-shadow: 0 10px 24px rgba(36,28,22,.25); }
.btn-gold { background: var(--gold); color: var(--espresso); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-ghost { border-color: var(--espresso); color: var(--espresso); background: transparent; }
.btn-ghost:hover { background: var(--espresso); color: var(--cream); }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: var(--espresso); color: var(--cream); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 78% 12%, rgba(196,167,119,.30), transparent 62%),
    radial-gradient(600px 400px at 8% 88%, rgba(196,167,119,.14), transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 96px 0 104px; }
.hero h1 { color: #fff; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p { color: rgba(250,246,239,.78); font-size: 1.1rem; max-width: 52ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-facts { display: flex; gap: 34px; margin-top: 44px; flex-wrap: wrap; }
.hero-facts div { border-left: 2px solid var(--gold); padding-left: 14px; }
.hero-facts strong { display: block; font-size: 1.05rem; color: #fff; }
.hero-facts span { font-size: .84rem; color: rgba(250,246,239,.62); }

.hero-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(196,167,119,.28);
  border-radius: 22px; padding: 26px;
}
.hero-card h3 { color: var(--gold); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font); }
.hero-card ul { list-style: none; margin: 0; padding: 0; }
.hero-card li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(196,167,119,.22); font-size: .95rem; }
.hero-card li:last-child { border-bottom: 0; }
.hero-card li span { color: rgba(250,246,239,.72); }
.hero-card li b { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------- cards */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Menu cards live on their own auto-fitting grid: as many 160px-minimum
   columns as fit — 2 on a phone, 5-6 on a desktop — so the 4:3 photo box
   stays a sensible size on every screen without breakpoint juggling. */
.dish-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: 0 2px 10px rgba(36,28,22,.04);
}
.card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--cream-2); display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; }

.feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* -------------------------------------------------------------- menu cards */
.menu-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.menu-tab {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: .9rem; font-family: inherit; color: var(--ink);
}
.menu-tab.active { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

.dish {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
/* One fixed photo box for every card, whatever shape the upload is.
   The padding-top trick pins the height to 75% of the width (a 4:3 box) and
   works on every browser and WebView, unlike the aspect-ratio property. The
   image is then absolutely positioned and cover-cropped into it. */
.dish-thumb {
  position: relative; width: 100%; padding-top: 75%;
  background: linear-gradient(135deg, #e8dcc6, #d6c3a3); overflow: hidden;
}
.dish-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.dish-thumb .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; color: rgba(36,28,22,.35);
}
.dish-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.dish-name { font-weight: 700; font-size: .95rem; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.dish-desc { font-size: .82rem; color: var(--muted); flex: 1; }
.dish-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.price { font-weight: 700; color: var(--espresso); white-space: nowrap; }

.badge {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.badge-bestseller { background: #fdf0dc; color: #9a6b12; }
.badge-new { background: #e4f3ea; color: #1d6b38; }
.badge-promo { background: #fbe6e3; color: #b3392c; }
.badge-soldout { background: #eee9e1; color: #7c6f62; }

/* ---------------------------------------------------------------- sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.stat-row { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 26px; }
.stat b { display: block; font-family: var(--display); font-size: 2rem; color: var(--gold-deep); }
.stat span { font-size: .85rem; color: var(--muted); }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.hours-table tr.today td { color: var(--gold-deep); font-weight: 700; }

/* ------------------------------------------------------------------ footer */
.footer { background: var(--espresso); color: rgba(250,246,239,.72); padding: 64px 0 28px; margin-top: 0; }
.footer h4 { color: #fff; font-size: .95rem; margin: 0 0 14px; }
.footer-logo { height: 40px; width: auto; display: block; color: var(--gold); margin-bottom: 14px; }
.sr-only-visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.install-logo { height: 46px; width: auto; display: block; color: var(--espresso); margin-bottom: 14px; }
.footer a { color: rgba(250,246,239,.72); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.footer-bottom { border-top: 1px solid rgba(250,246,239,.12); margin-top: 40px; padding-top: 20px; font-size: .82rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: .95rem; font-family: inherit; background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
textarea.input { min-height: 90px; resize: vertical; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; font-size: .9rem; font-family: inherit; color: var(--ink); transition: .12s;
}
.chip:hover:not(:disabled) { border-color: var(--gold); }
.chip.active { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }
.chip:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.alert { padding: 13px 16px; border-radius: 10px; font-size: .9rem; margin-bottom: 16px; }
.alert-ok { background: #eaf7ee; color: #1d6b38; }
.alert-err { background: #fdecea; color: #a12d21; }
.alert-info { background: #f1f0fb; color: #4b3f8f; }
.alert-warn { background: #fdf4e3; color: #8a6412; }

/* --------------------------------------------------------------- self order */
.order-layout { display: grid; grid-template-columns: 1fr 370px; gap: 28px; align-items: start; }
.cart-panel { position: sticky; top: 88px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cart-body { max-height: 42vh; overflow-y: auto; padding: 6px 20px; }
.cart-line { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .qty-badge { min-width: 26px; height: 26px; border-radius: 8px; background: var(--cream-2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.cart-line .cl-main { flex: 1; min-width: 0; }
.cart-line .cl-name { font-weight: 600; font-size: .92rem; }
.cart-line .cl-opts { font-size: .78rem; color: var(--muted); }
.cart-line .cl-price { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.cart-empty { padding: 34px 10px; text-align: center; color: var(--muted); font-size: .9rem; }
.cart-foot { padding: 18px 20px; border-top: 1px solid var(--line); background: var(--cream); }
.tot-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 4px 0; }
.tot-row.grand { font-size: 1.15rem; font-weight: 800; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }

.qty-ctl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.qty-ctl button { border: 0; background: #fff; width: 30px; height: 30px; font-size: 16px; cursor: pointer; color: var(--ink); font-family: inherit; }
.qty-ctl button:hover { background: var(--cream-2); }
.qty-ctl span { min-width: 30px; text-align: center; font-weight: 700; font-size: .88rem; }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(20,15,11,.55); display: none; z-index: 200; }
.sheet-backdrop.open { display: block; }
.sheet {
  position: fixed; z-index: 201; background: #fff; border-radius: 18px;
  width: min(520px, calc(100% - 32px)); max-height: 86vh; overflow: auto;
  left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;
}
.sheet.open { display: block; }
.sheet-head { padding: 20px 22px 12px; border-bottom: 1px solid var(--line); }
.sheet-body { padding: 18px 22px; }
.sheet-foot { padding: 16px 22px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; }
.opt-group { margin-bottom: 18px; }
.opt-group h4 { margin: 0 0 8px; font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.opt-group .req { font-size: .68rem; background: var(--cream-2); padding: 2px 7px; border-radius: 999px; color: var(--muted); font-weight: 600; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; cursor: pointer; font-size: .92rem; }
.opt-row:hover { border-color: var(--gold); }
.opt-row input { accent-color: var(--espresso); }
.opt-row .od { margin-left: auto; color: var(--muted); font-size: .85rem; }
/* A group that only applies to one choice of the group above it. */
.opt-group.opt-sub { margin: -6px 0 18px 14px; padding-left: 12px; border-left: 3px solid var(--gold); }
.opt-group .sub-note { background: #fdf1dc; color: #92650f; }
.opt-group[hidden] { display: none; }

.mobile-cart-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--espresso); color: var(--cream); padding: 12px 18px;
  align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------------------------------------------------------------- timeline */
.steps { display: flex; gap: 0; margin: 24px 0 8px; }
.step { flex: 1; text-align: center; position: relative; font-size: .8rem; color: var(--muted); }
.step::before {
  content: ""; display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--line); margin: 0 auto 8px; position: relative; z-index: 1;
}
.step::after { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: var(--line); }
.step:last-child::after { display: none; }
.step.done { color: var(--ok); font-weight: 600; }
.step.done::before { background: var(--ok); }
.step.done::after { background: var(--ok); }

.receipt { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.receipt-code { font-family: var(--display); font-size: 2rem; letter-spacing: .06em; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; padding: 64px 0 72px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .order-layout { grid-template-columns: 1fr; }
  .cart-panel { position: fixed; inset: auto 0 0 0; border-radius: 18px 18px 0 0; z-index: 210; transform: translateY(100%); transition: transform .25s ease; max-height: 88vh; }
  .cart-panel.open { transform: translateY(0); }
  .mobile-cart-bar { display: flex; }
  body.has-cart-bar { padding-bottom: 74px; }
}

@media (max-width: 680px) {
  .brand-logo { height: 32px; }
  .nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--cream); flex-direction: column; padding: 16px 20px; border-bottom: 1px solid var(--line); gap: 14px; }
  .nav.open { display: flex; }
  .nav-toggle { display: block; }
  .grid-3, .grid-4, .grid-2, .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
}

@media print {
  .topbar, .footer, .no-print { display: none !important; }
  body { background: #fff; }
}

/* Reservation controls: date and guests side by side where there is room,
   with the time slots always given a full row of their own. An inline
   4-column grid used to survive the mobile breakpoint and squeeze the slot
   chips into a single narrow column. */
.res-controls {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.res-controls .res-slots { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .res-controls { grid-template-columns: 1fr 1fr 2fr; }
  .res-controls .res-slots { grid-column: auto; }
}

/* ---- self-order layering: sheets always above the mobile cart ---- */
.sheet-backdrop { z-index: 300; }
.sheet { z-index: 301; }
body.sheet-open { overflow: hidden; }
.cart-backdrop { position: fixed; inset: 0; background: rgba(20,15,11,.45); display: none; z-index: 205; }
.cart-backdrop.open { display: none; }
@media (max-width: 900px) {
  .cart-backdrop.open { display: block; }
}
.ctx-hint { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdf3e2; color: #8a5a12; font-size: .9rem; font-weight: 600; }
.so-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 400;
  background: #241c16; color: #fff; padding: 11px 18px; border-radius: 12px;
  font-size: .92rem; font-weight: 600; max-width: 88vw; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.so-toast.ok { background: #2f7d4f; }
.so-toast.bad { background: #b3392c; }
@media (min-width: 901px) { .so-toast { bottom: 28px; } }

/* ---- self-order "bungkus": a dine-in line packed to go, order stays at the table ----
   Each cart line gets a two-segment control next to the qty stepper. The
   dine-in segment is deliberately quiet (cream) and the packed segment loud
   (gold), so packed lines stand out and the default stays calm. The qty badge
   turns gold too, so the state is readable even when the row wraps. */
.cl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pack-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.pack-seg button {
  border: 0; background: #fff; height: 30px; padding: 0 11px; cursor: pointer; flex: 0 1 auto; min-width: 0;
  font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: background .12s, color .12s;
}
.pack-seg button + button { border-left: 1px solid var(--line); }
.pack-seg button:hover { background: var(--cream-2); }
.pack-seg button[aria-pressed="true"] { background: var(--cream-2); color: var(--ink); }
.pack-seg button.is-pack[aria-pressed="true"] { background: var(--gold); color: var(--espresso); border-left-color: var(--gold); }
.cart-line.packed .qty-badge { background: var(--gold); color: var(--espresso); }
@media (max-width: 380px) {
  .pack-seg button { padding: 0 8px; font-size: .72rem; }
}

/* "Semua dibungkus" switch in the checkout sheet (label wraps a hidden checkbox) */
.switch-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; user-select: none; transition: background .15s, border-color .15s;
}
.switch-row[hidden] { display: none; }
.switch-row.on { border-color: var(--gold); background: #fdf7ea; }
.switch-row .sw-text { flex: 1; min-width: 0; }
.switch-row .sw-title { display: block; font-weight: 700; font-size: .95rem; }
.switch-row .sw-sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.sw-knob { flex: none; width: 48px; height: 28px; border-radius: 999px; background: #d9d0c1; position: relative; transition: background .15s; }
.sw-knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.switch-row input:checked + .sw-knob { background: var(--gold-deep); }
.switch-row input:checked + .sw-knob::after { transform: translateX(20px); }
.switch-row input:focus-visible + .sw-knob { outline: 2px solid var(--gold); outline-offset: 2px; }