/* =========================================================
   Dynamic Menu & Ordering — style.css
   Neutral shell is fixed; --primary and its shades are set
   per-restaurant inline in <head> (see index.php), derived
   server-side from restaurants.primary_color.
   ========================================================= */

:root{
  /* fallback palette if the inline block somehow fails to load */
  --primary:        #0f766e;
  --primary-light:  #2a9d8f;
  --primary-dark:   #0b5a54;
  --primary-soft:   rgba(15,118,110,.14);
  --primary-soft-2: rgba(15,118,110,.28);
  --on-primary:     #ffffff;

  --bg:            #1a1713;
  --bg-soft:       #201c17;
  --surface:       #26221c;
  --surface-2:     #2e2921;
  --surface-hi:    #383228;
  --line:          #3c362c;

  --ivory:         #f5efe6;
  --ivory-dim:     #cdc3b4;
  --muted:         #9a8f7f;

  --sage:          #7fa06a;
  --whatsapp:      #3fb96a;

  --radius-s:  10px;
  --radius-m:  16px;
  --radius-l:  22px;
  --radius-pill: 999px;

  --shadow-card:  0 8px 20px -12px rgba(0,0,0,.5);
  --shadow-float: 0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-sheet: 0 -12px 34px -10px rgba(0,0,0,.6);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; }
p{ margin:0; }
i.fa-solid, i.fa-regular, i.fa-brands{ line-height:1; }

::selection{ background: var(--primary); color: var(--on-primary); }
:focus-visible{ outline: 2px solid var(--primary-light); outline-offset: 2px; border-radius: 6px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-light);
  display:flex; align-items:center; gap:8px;
}
.dot-live{ width:6px; height:6px; border-radius:50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(127,160,106,.22); }

/* =====================  APP SHELL  ===================== */
.app-shell{ position: relative; max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
@media (min-width: 900px){
  .app-shell{
    max-width: 480px; margin: 24px auto 0; border-radius: 30px;
    border: 1px solid var(--line); box-shadow: 0 34px 80px -28px rgba(0,0,0,.75);
    overflow: hidden; min-height: calc(100vh - 48px);
  }
  body{ background: #0f0d0a; }
}

/* =====================  TOP BAR  ===================== */
.topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; gap:10px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: rgba(26,23,19,.88);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; }
.logo{ width:38px; height:38px; border-radius:11px; object-fit:cover; flex:0 0 auto; }
.logo-fallback{
  display:grid; place-items:center; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-display); font-weight:600; font-size:15px;
}
.wordmark{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.wordmark b{ font-family: var(--font-display); font-size: 18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wordmark span{ font-size: 11px; color: var(--muted); display:flex; align-items:center; gap:4px; }

.icon-btn{
  width:38px; height:38px; border-radius: var(--radius-pill);
  display:grid; place-items:center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ivory); cursor:pointer; flex:0 0 auto; font-size:15px;
}
.icon-btn:active{ transform: scale(.92); }

.search-wrap{
  position: sticky; top: 62px; z-index: 39; overflow: hidden;
  max-height: 0; transition: max-height .28s ease; background: var(--bg);
}
.search-wrap.open{ max-height: 70px; }
.search-inner{ padding: 8px 16px 12px; }
.search-inner input{
  width:100%; background: var(--surface); border: 1px solid var(--line);
  color: var(--ivory); padding: 11px 14px; border-radius: var(--radius-m);
  font-size: 15px; font-family: var(--font-body);
}
.search-inner input::placeholder{ color: var(--muted); }

/* =====================  HERO  ===================== */
.hero{ padding: 20px 18px 14px; }
.hero h1{
  font-size: 27px; font-weight:600; font-style:italic; color: var(--ivory);
  margin-top: 8px; line-height:1.3;
}
.meta-line{
  margin-top: 10px; display:flex; flex-wrap:wrap; gap: 12px;
  font-size: 12.5px; color: var(--ivory-dim);
}
.meta-line span{ display:flex; align-items:center; gap:6px; }
.meta-line i{ color: var(--primary-light); font-size:12px; }

.special-ribbon{
  margin: 16px 0 4px;
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-radius: var(--radius-m);
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-2);
}
.special-ribbon .flame{
  width: 38px; height:38px; flex: 0 0 auto; border-radius: 50%;
  display:grid; place-items:center; background: var(--primary); color: var(--on-primary); font-size: 15px;
}
.special-ribbon .txt{ min-width:0; }
.special-ribbon .txt b{ 
  display:block; 
  font-size: 14px; 
  font-weight:700; 
  color: var(--ivory);
}
.special-ribbon .txt span{ display:block; font-size: 12px; color: var(--ivory-dim); margin-top:2px; }
.special-ribbon .clock{
  margin-left:auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ivory); background: rgba(0,0,0,.22); padding: 5px 8px; border-radius: 8px; flex:0 0 auto;
}

.menu-item-title{
  color: var(--ivory);
}

/* =====================  CATEGORY PILLS  ===================== */
.pill-nav{ position: sticky; top: var(--safe-top); z-index: 38; background: var(--bg); padding: 10px 0; border-bottom: 1px solid var(--line); }
.pill-scroll{ display:flex; gap:8px; overflow-x:auto; padding: 2px 16px; scrollbar-width:none; }
.pill-scroll::-webkit-scrollbar{ display:none; }
.pill{
  flex: 0 0 auto; padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ivory-dim);
  font-size: 13.5px; font-weight:600; cursor:pointer; white-space: nowrap;
  display:flex; align-items:center; gap:6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill i{ font-size:11px; }
.pill.active{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pill:active{ transform: scale(.96); }

/* =====================  SECTION / MENU  ===================== */
.menu{ padding: 6px 16px 150px; }
.menu-section{ margin-top: 24px; }
.menu-section .head{ display:flex; align-items: baseline; gap:10px; margin-bottom:12px; }
.menu-section .head h2{ font-size: 19px; font-style: italic; }
.menu-section .head .count{ font-family: var(--font-mono); font-size:11px; color: var(--muted); }

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 560px){ .grid{ grid-template-columns: 1fr 1fr; } }

/* ---- item card ---- */
.card{
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; cursor: pointer;
}
.card .media{
  position:relative; width:100%; aspect-ratio: 4/3;
  background: linear-gradient(150deg, var(--surface-hi), var(--surface-2));
  overflow:hidden;
}
.card .media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:active .media img{ transform: scale(1.03); }
.card .media .emoji-fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size: 42px; }
.card .media.no-photo .emoji-fallback{ display:flex; }
.card .media.no-photo img{ display:none; }

/* =====================  DRINKS: compact list  ===================== */
.row-list{ display:flex; flex-direction:column; gap:10px; }

.row-item{
  position:relative; display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 10px 12px; box-shadow: var(--shadow-card); cursor:pointer;
}

.row-thumb{
  position:relative; width:56px; height:56px; border-radius:14px; flex:0 0 auto; overflow:hidden;
  background: linear-gradient(150deg, var(--surface-hi), var(--surface-2));
  display:flex; align-items:center; justify-content:center;
}
.row-thumb img{ width:100%; height:100%; object-fit:cover; }
.row-thumb .emoji-fallback{ display:none; font-size:22px; }
.row-thumb.no-photo .emoji-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.row-thumb.no-photo img{ display:none; }
.row-hot{
  position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%;
  background: var(--primary); color: var(--on-primary); font-size:9px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);
}

.row-info{ flex:1; min-width:0; }
.row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.row-top h3{ font-size:14.5px; font-weight:600; color: var(--ivory); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-mark{ font-size:10px; color: var(--primary-light); margin-left:5px; }
.row-mark.veg{ color: var(--sage); }
.row-desc{
  margin-top:3px; font-size:12px; color: var(--muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

.row-actions{ flex:0 0 auto; }
.row-actions .customize-btn{ padding: 8px 10px; }
.row-actions .customize-btn i{ margin:0; }


.badges{ position:absolute; top:9px; left:9px; display:flex; gap:6px; flex-wrap:wrap; max-width: calc(100% - 18px); }
.badges.inline{ position:static; margin-bottom:10px; }
.badge{
  font-size: 10.5px; font-weight:700; padding: 4px 8px 4px 7px; border-radius: 7px;
  backdrop-filter: blur(4px); display:flex; align-items:center; gap:4px;
}
.badge i{ font-size:9.5px; }
.badge.chef{ background: rgba(0,0,0,.55); color: var(--primary-light); border:1px solid var(--primary-soft-2); }
.badge.hot{ background: var(--primary); color: var(--on-primary); }
.badge.veg{ background: rgba(127,160,106,.9); color: #10190c; }
.badge.pop{ background: rgba(0,0,0,.55); color: var(--ivory); border:1px solid rgba(255,255,255,.15); }

.card .body{ padding: 12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .body h3{ font-size: 16px; line-height:1.25; color: var(--ivory); font-weight: 600; font-style: normal; }
.card .body p{ font-size: 12.5px; color: var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.card .foot{ margin-top: auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top: 10px; }
.price-tag{ font-family: var(--font-mono); font-size: 14px; font-weight:600; color: var(--primary-light); }

.add-btn{
  width:34px; height:34px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  border:none; display:grid; place-items:center; font-size: 15px; cursor:pointer; flex: 0 0 auto;
}
.add-btn:active{ transform: scale(.9); }

.stepper{ display:flex; align-items:center; gap:0; background: var(--primary); border-radius: var(--radius-pill); overflow:hidden; height:34px; }
.stepper button{ width:32px; height:34px; border:none; background:transparent; color: var(--on-primary); font-size:13px; cursor:pointer; display:grid; place-items:center; }
.stepper button:active{ background: rgba(0,0,0,.15); }
.stepper .qty{ min-width: 18px; text-align:center; font-family: var(--font-mono); font-weight:600; color: var(--on-primary); font-size: 13px; }

.customize-btn{
  position:relative; display:flex; align-items:center; gap:6px;
  background: var(--surface-2); border: 1px solid var(--primary-soft-2); color: var(--ivory);
  padding: 8px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight:600; cursor:pointer;
}
.customize-btn i{ font-size:11px; color: var(--primary-light); }
.customize-btn:active{ transform: scale(.96); }
.count-pip{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  border-radius:50%; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-mono); font-size:10px; font-weight:700; display:grid; place-items:center;
  border: 2px solid var(--bg);
}

.empty-state{ text-align:center; padding: 50px 20px; color: var(--muted); }
.empty-state i{ font-size:26px; margin-bottom:12px; color: var(--primary-light); display:block; }

/* =====================  FLOATING RAIL  ===================== */
.float-rail{ position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 45; display:flex; flex-direction:column; gap:12px; }
@media (min-width: 900px){ .float-rail{ right: calc(50% - 240px + 14px); } }
.float-btn{
  width:54px; height:54px; border-radius:50%; border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: var(--shadow-float);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; position:relative; color: var(--ivory); font-size:16px;
}
.float-btn .lb{ font-family: var(--font-mono); font-size: 7.5px; letter-spacing:.03em; text-transform:uppercase; color: var(--ivory-dim); }
.float-btn:active{ transform: scale(.92); }
.float-btn.chef{ color: var(--primary-light); }
.float-btn.special.is-active{ color: var(--primary-light); border-color: var(--primary-soft-2); }
.float-btn.special.is-active::before{
  content:""; position:absolute; inset:-4px; border-radius:50%; border: 2px solid var(--primary-light);
  animation: pulse-ring 2.2s ease-out infinite;
}
.float-btn .pip{ position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:50%; background: var(--primary); border: 2px solid var(--bg); display:none; }
.float-btn.special.is-active .pip{ display:block; }
@keyframes pulse-ring{ 0%{ opacity:.8; transform: scale(1); } 100%{ opacity:0; transform: scale(1.3); } }

/* =====================  CART BAR  ===================== */
.cart-bar{
  position: fixed; left:0; right:0; bottom: 0; z-index: 46; display:flex; justify-content:center;
  padding: 0 14px calc(14px + var(--safe-bottom)); pointer-events:none;
  transform: translateY(140%); transition: transform .32s cubic-bezier(.2,.9,.25,1);
}
.cart-bar.show{ transform: translateY(0); }
.cart-bar .inner{
  pointer-events:all; width:100%; max-width: 528px; background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-pill); padding: 8px 8px 8px 18px; display:flex; align-items:center; gap:12px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.5);
}
.cart-bar .count{ font-family: var(--font-mono); font-weight:600; font-size: 13px; }
.cart-bar .total{ margin-left:auto; font-family: var(--font-mono); font-weight:700; font-size:13.5px; }
.cart-bar .view{
  background: rgba(0,0,0,.2); color: var(--on-primary); border:none; padding: 11px 17px;
  border-radius: var(--radius-pill); font-weight:600; font-size: 13px; display:flex; align-items:center; gap:7px; cursor:pointer;
}

/* =====================  BOTTOM SHEETS  ===================== */
.overlay{ position: fixed; inset:0; z-index: 60; background: rgba(9,7,5,.6); opacity:0; pointer-events:none; transition: opacity .25s ease; }
.overlay.show{ opacity:1; pointer-events:all; }

.sheet{
  position: fixed; left:0; right:0; bottom:0; z-index: 61; max-width: 560px; margin: 0 auto;
  background: var(--bg-soft); border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom:none;
  box-shadow: var(--shadow-sheet); transform: translateY(102%); transition: transform .34s cubic-bezier(.2,.9,.25,1);
  max-height: 88vh; display:flex; flex-direction:column;
}
.sheet.show{ transform: translateY(0); }
.sheet .grabber{ width:36px; height:4px; border-radius:4px; background: var(--line); margin: 10px auto 4px; }
.sheet .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding: 6px 18px 10px; border-bottom:1px solid var(--line); }
.sheet .sheet-head h3{ font-size:17px; color: var(--ivory);}
.sheet .sheet-body{ padding: 16px 18px calc(18px + var(--safe-bottom)); overflow-y:auto; }

#itemSheet .detail-media{
  width:100%; aspect-ratio: 16/10; border-radius: var(--radius-m); overflow:hidden;
  background: linear-gradient(150deg, var(--surface-hi), var(--surface-2));
  display:grid; place-items:center; position:relative; margin-bottom:14px;
}
#itemSheet .detail-media img{ width:100%; height:100%; object-fit:cover; }
#itemSheet .detail-media .emoji-fallback{ font-size:50px; display:none; }
#itemSheet .detail-media.no-photo img{ display:none; }
#itemSheet .detail-media.no-photo .emoji-fallback{ display:block; }
.detail-name{ font-size:20px; margin-bottom:6px; color: var(--ivory);}
.detail-desc{ color: var(--ivory-dim); font-size:13.5px; line-height:1.6; margin-bottom: 18px; }

/* option groups */
.option-group{ margin-bottom: 18px; padding-bottom:16px; border-bottom: 1px solid var(--line); }
.option-group:last-child{ border-bottom:none; margin-bottom:6px; }
.og-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.og-head h4{ font-size:14px; font-weight:700; font-family: var(--font-body); color: var(--ivory);}
.og-tag{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); }
.og-choices{ display:flex; flex-direction:column; gap:8px; }
.choice-row{
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--line); cursor:pointer;
}
.choice-row input{ accent-color: var(--primary); width:16px; height:16px; flex:0 0 auto; }
.choice-row .cr-label{ flex:1; font-size:13.5px; color: var(--ivory);}
.choice-row .cr-price{ font-family: var(--font-mono); font-size:12px; color: var(--primary-light); }
.choice-row:has(input:checked){ border-color: var(--primary-soft-2); background: var(--primary-soft); }

.detail-foot{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.qty-select{ display:flex; align-items:center; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-pill); height:46px; flex:0 0 auto; }
.qty-select button{ width:42px; height:46px; border:none; background:transparent; color: var(--ivory); font-size:14px; cursor:pointer; }
.qty-select .qty{ min-width:24px; text-align:center; font-family: var(--font-mono); font-weight:600; font-size:14px; color: var(--ivory);}
.btn-primary{
  flex:1; background: var(--primary); color: var(--on-primary); border:none; border-radius: var(--radius-pill);
  padding: 14px 16px; font-weight:700; font-size:14px; cursor:pointer;
}
.btn-primary:active{ transform: scale(.98); }

/* cart sheet */
.cart-item{ display:flex; gap:12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cart-item:last-of-type{ border-bottom:none; }
.cart-item .thumb{
  width:54px; height:54px; border-radius:12px; flex:0 0 auto; overflow:hidden;
  background: linear-gradient(150deg, var(--surface-hi), var(--surface-2)); display:grid; place-items:center; font-size:20px;
}
.cart-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item .thumb.no-photo img{ display:none; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info h4{ font-size:13.5px; font-weight:700; font-family: var(--font-body); color: var(--ivory); }
.cart-item .info .opts{ font-size:11.5px; color: var(--muted); margin-top:3px; line-height:1.5; }
.cart-item .info .line-price{ font-family: var(--font-mono); font-size:12px; color: var(--primary-light); margin-top:4px; }
.cart-item .ctrl{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.cart-item .stepper{ height:30px; }
.cart-item .stepper button{ width:28px; height:30px; font-size:12px; }
.cart-item .remove{ font-family: var(--font-mono); font-size:10px; color: var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline; }

.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color: var(--ivory-dim); padding: 5px 0; }
.summary-row.total{ color: var(--ivory); font-weight:700; font-size:16px; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-family: var(--font-mono); }
.ticket-no{ font-family: var(--font-mono); font-size:10.5px; color: var(--muted); margin-top: 4px; }

.field{ margin-top: 12px; }
.field label{ display:block; font-size:11px; color: var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.field input, .field textarea{
  width:100%; background: var(--surface); border:1px solid var(--line); color: var(--ivory);
  padding:11px 13px; border-radius: var(--radius-s); font-size:14.5px; font-family: var(--font-body);
}
.field textarea{ resize:vertical; min-height:56px; }

.order-mode{ display:flex; gap:8px; margin-top:4px; }
.order-mode button{
  flex:1; padding:10px; border-radius: var(--radius-s); background: var(--surface); border:1px solid var(--line);
  color: var(--ivory-dim); font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.order-mode button.active{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.schedule-days, .schedule-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip-btn{
  padding:9px 14px; border-radius: var(--radius-pill); background: var(--surface); border:1px solid var(--line);
  color: var(--ivory-dim); font-size:12.5px; font-weight:600; cursor:pointer;
}
.chip-btn.active{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.whatsapp-btn{
  margin-top:18px; width:100%; background: var(--whatsapp); color:#fff; border:none; border-radius: var(--radius-pill);
  padding:15px; font-weight:700; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
}
.whatsapp-btn:active{ transform: scale(.98); }
.whatsapp-btn:disabled{ opacity:.5; }

.cart-empty{ text-align:center; padding: 34px 10px; color: var(--muted); }
.cart-empty i{ font-size:26px; margin-bottom:10px; display:block; color: var(--primary-light); }

/* =====================  TOAST  ===================== */
.toast{
  position: fixed; left:50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 80;
  background: var(--surface-hi); color: var(--ivory); border: 1px solid var(--line);
  padding: 11px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight:600;
  opacity:0; pointer-events:none; transition: opacity .22s ease, transform .22s ease;
  box-shadow: var(--shadow-float); max-width: 86%;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

/* =====================  FOOTER  ===================== */
.site-footer{ padding: 28px 20px calc(120px + var(--safe-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.site-footer .fname{ font-family: var(--font-display); font-size:19px; font-style:italic; color: var(--ivory); margin-bottom:6px; }
.site-footer .rows{ margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.site-footer .rows span{ display:flex; gap:8px; align-items:center; }
.site-footer .rows i{ color: var(--primary-light); width:14px; text-align:center; }
.site-footer .fine-print{ margin-top:16px; font-size:11px; opacity:.75; }

/* =====================  FOOTER: REVIEW US + SOCIAL  ===================== */
.footer-engage{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 16px 18px; margin-bottom: 22px;
}
.review-us-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--on-primary); font-weight:700; font-size:13.5px; font-family: var(--font-body);
  padding: 11px 20px; border-radius: var(--radius-pill); text-decoration:none;
  box-shadow: 0 10px 24px -10px var(--primary-soft-2);
  transition: transform .18s ease;
}
.review-us-btn:active{ transform: scale(.96); }
.review-us-btn i{ font-size:12px; }
.review-us-btn .rub-shine{
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: rub-shine-move 3.2s ease-in-out infinite;
}
@keyframes rub-shine-move{
  0%{ left:-60%; }
  45%{ left:130%; }
  100%{ left:130%; }
}
 
.social-icons-row{ display:flex; gap:8px; flex-wrap:wrap; }
.social-icon-btn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: var(--surface-2); border:1px solid var(--line); color: var(--ivory-dim);
  font-size:14px; transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.social-icon-btn:hover{ color: var(--primary-light); border-color: var(--primary-soft-2); transform: translateY(-2px); }
 
/* =====================  REVIEW PROMPT MODAL  ===================== */
.review-modal-overlay{
  position: fixed; inset:0; z-index: 95; background: rgba(9,7,5,.65);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.review-modal-overlay.show{ opacity:1; pointer-events:all; }
.review-modal{
  position:relative; width:100%; max-width: 380px; background: var(--surface-hi);
  border:1px solid var(--line); border-radius: var(--radius-l); padding: 32px 24px 24px;
  text-align:center; box-shadow: var(--shadow-float);
  transform: scale(.92) translateY(8px); transition: transform .25s ease;
}
.review-modal-overlay.show .review-modal{ transform: scale(1) translateY(0); }
.review-modal-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--line); color: var(--ivory-dim);
  display:grid; place-items:center; cursor:pointer;
}
.review-modal-icon{
  width:56px; height:56px; border-radius:50%; margin: 0 auto 14px; display:grid; place-items:center;
  background: var(--primary-soft); color: var(--primary-light); font-size:22px;
}
.review-modal h3{ font-size:18px; color: var(--ivory); line-height:1.35; margin-bottom:10px; font-style:normal; }
.review-modal p{ font-size:13.5px; color: var(--ivory-dim); line-height:1.6; margin-bottom:22px; }
.review-modal-actions{ display:flex; flex-direction:column; gap:10px; }
.review-modal-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--primary); color: var(--on-primary); font-weight:700; font-size:14px;
  padding:13px; border-radius: var(--radius-pill); text-decoration:none;
}
.review-modal-later{
  background:none; border:none; color: var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================  LIGHT THEME  =====================
   Toggled in Restaurant Content. Only the neutral canvas flips —
   --primary and its shades stay exactly as derived from the
   restaurant's own brand color in both themes. Applied as CSS
   variable overrides on .app-shell so every component below
   (all of which already read from these variables) re-themes
   automatically with no per-component changes needed. */
.app-shell.theme-light{
  --bg:            #faf8f4;
  --bg-soft:       #f3f0ea;
  --surface:       #ffffff;
  --surface-2:     #f2efe8;
  --surface-hi:    #e9e4d8;
  --line:          #e2ddd0;

  --ivory:         #211d17; /* primary text — dark now, on a light background */
  --ivory-dim:     #4a463c;
  --muted:         #8b8272;

  --shadow-card:  0 8px 20px -14px rgba(20,15,5,.18);
  --shadow-float: 0 10px 24px -10px rgba(20,15,5,.2);
  --shadow-sheet: 0 -12px 30px -14px rgba(20,15,5,.18);
}
@media (min-width: 900px){
  body:has(.app-shell.theme-light){ background: #efece4; }
}

/* =====================  FIELD VALIDATION  ===================== */
.field input.has-error{ border-color: #d9614f; }
.field-error{ display:block; margin-top:5px; font-size:11.5px; color:#e2685a; }

/* order-mode can render up to 4 buttons (Delivery/Pickup/Dine In/Room Service) 
.order-mode{ flex-wrap: wrap; }
.order-mode button{ flex: 1 1 calc(50% - 4px); }*/
/* =========================================================
   SIA DUKANI ADDITIONS — products, services, booking, tracking
   ========================================================= */
.dot-closed{ width:6px; height:6px; border-radius:50%; background: var(--muted); box-shadow:0 0 0 3px rgba(150,150,150,.2); }
.hero{ position:relative; }
.hero .cover{ height:120px; margin:-20px -18px 16px; background-size:cover; background-position:center; border-radius:0 0 var(--radius-l) var(--radius-l); }
.hero-desc{ margin-top:8px; font-size:13.5px; line-height:1.6; color: var(--ivory-dim); max-width:60ch; }
.hero-note{ margin-top:10px; font-size:12.5px; color: var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color: var(--ivory-dim); background: var(--surface); border:1px solid var(--line); padding:6px 11px; border-radius: var(--radius-pill); }
.chip i{ color: var(--primary-light); font-size:11px; }

/* type switch + pills */
.pill-nav{ padding-top:8px; }
.type-seg{ display:flex; gap:4px; margin:0 16px 8px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-pill); padding:3px; }
.type-seg button{ flex:1; border:none; background:transparent; color: var(--ivory-dim); font-size:12.5px; font-weight:700; padding:8px 6px; border-radius: var(--radius-pill); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.type-seg button.active{ background: var(--primary); color: var(--on-primary); }
.pill.is-hidden{ display:none; }

/* prices */
.price-block{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; }
.price-now{ font-family: var(--font-mono); font-size:14px; font-weight:600; color: var(--primary-light); }
.price-now.quote{ font-family: var(--font-body); font-size:13px; }
.price-from{ font-family: var(--font-body); font-size:11px; font-weight:600; color: var(--muted); }
.price-was{ font-family: var(--font-mono); font-size:11.5px; color: var(--muted); }
.price-unit{ font-size:11.5px; color: var(--muted); }
.theme-light .price-now{ color: var(--primary-dark); }

/* product cards + rows */
.brand-tag{ font-size:10.5px; font-weight:700; letter-spacing:.03em; color: var(--muted); }
.p-card .body h3{ font-size:15px; }
.p-card .foot{ align-items:flex-end; }
.is-out{ opacity:.6; }
.sold-out-tag{ font-size:11.5px; font-weight:700; color: var(--muted); border:1px dashed var(--line); padding:6px 10px; border-radius: var(--radius-pill); }
.badge.sale{ background:#d9483b; color:#fff; }
.badge.new{ background: var(--primary); color: var(--on-primary); }
.badge.top{ background: rgba(0,0,0,.6); color:#ffd166; }
.badge.low{ background:#f5b942; color:#3a2a00; }
.badge.out{ background: rgba(0,0,0,.72); color:#fff; }
.row-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:2px; font-size:11.5px; color: var(--muted); }
.row-sub .badge{ backdrop-filter:none; padding:2px 7px; font-size:10.5px; }
.row-item{ position:relative; display:flex; align-items:center; gap:12px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l); padding:10px 12px; box-shadow: var(--shadow-card); cursor:pointer; }
.row-item .row-thumb{ width:60px; height:60px; }
.row-item .row-top h3{ font-size:14.5px; }
.row-item.svc .row-top h3{ white-space:normal; }
.row-item.svc{ align-items:flex-start; }
.row-item.svc .row-actions{ align-self:center; }
.row-desc{ margin-top:3px; font-size:12px; color: var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-item .price-block{ margin-top:5px; }
.row-list.after-products{ margin-top:12px; }
.svc-meta span{ display:inline-flex; align-items:center; gap:5px; }
.svc-meta i{ color: var(--primary-light); font-size:10.5px; }
.book-btn{ background: var(--primary); color: var(--on-primary); border:none; border-radius: var(--radius-pill); padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.book-btn:active{ transform: scale(.96); }
.add-btn.at-max{ opacity:.4; }

/* detail sheet */
#itemSheet .detail-media{ padding:0; }
.gallery{ position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery::-webkit-scrollbar{ display:none; }
.gallery img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; }
.gallery-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; pointer-events:none; }
.gallery-dots i{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.55); }
.gallery-dots i.on{ background:#fff; }
.detail-price{ margin:2px 0 10px; }
.detail-price .price-now{ font-size:17px; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color: var(--ivory-dim); margin-bottom:10px; }
.og-tag.req{ color: var(--primary-light); }
.detail-foot .btn-primary:disabled{ opacity:.45; }
.choice-row .cr-price small{ color: var(--muted); font-size:10.5px; margin-left:4px; }

/* checkout extras */
.order-mode.wrap{ flex-wrap:wrap; }
.order-mode.wrap button{ flex:1 1 calc(50% - 4px); }
.coupon-row{ display:flex; gap:8px; margin:4px 0 6px; }
.coupon-row input{ flex:1; background: var(--surface); border:1px solid var(--line); color: var(--ivory); padding:10px 12px; border-radius: var(--radius-s); font-size:14px; text-transform:uppercase; }
.coupon-msg{ font-size:12px; min-height:16px; margin-bottom:8px; color: var(--muted); }
.coupon-msg.ok{ color: var(--sage); font-weight:600; } .coupon-msg.err{ color:#e2685a; }
.summary-row.good{ color: var(--sage); }
.hint-line{ font-size:12px; color: var(--muted); margin:6px 0; } .hint-line:empty{ display:none; }
.hint-line.warn{ color:#e2954a; }
.form-error{ background: rgba(217,97,79,.12); border:1px solid rgba(217,97,79,.35); color:#e2685a; border-radius: var(--radius-s); padding:10px 12px; font-size:13px; margin-top:12px; }
.field select{ width:100%; background: var(--surface); border:1px solid var(--line); color: var(--ivory); padding:11px 13px; border-radius: var(--radius-s); font-size:14.5px; font-family: var(--font-body); }
.field input[type=date]{ color-scheme: dark; }
.theme-light .field input[type=date]{ color-scheme: light; }
.cart-item .line-price small{ color: var(--muted); }
.pay-details{ margin-top:10px; padding:12px 14px; background: var(--surface); border:1px solid var(--primary-soft-2); border-radius: var(--radius-s); font-size:13px; color: var(--ivory-dim); }
.pay-details .pd-title{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; font-weight:700; color: var(--ivory); }
.pay-details .pd-title i{ color: var(--primary-light); }
.pay-details .pd-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px dashed var(--line); }
.pay-details .pd-left{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pay-details .pd-label{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.pay-details .pd-value{ font-family: var(--font-mono); font-size:14px; font-weight:600; color: var(--ivory); word-break:break-all; }
.pay-details .pd-copy{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer; background: var(--primary-soft); color: var(--primary-light); border:1px solid var(--primary-soft-2); border-radius: var(--radius-pill); padding:7px 12px; font-size:12px; font-weight:700; }
.pay-details .pd-note{ margin-top:6px; padding-top:10px; border-top:1px dashed var(--line); line-height:1.55; }

/* booking sheet */
.bk-service{ display:flex; gap:12px; align-items:center; padding:12px; background: var(--primary-soft); border:1px solid var(--primary-soft-2); border-radius: var(--radius-m); margin-bottom:6px; }
.bk-service .emo{ width:44px; height:44px; border-radius:12px; background: var(--surface); display:grid; place-items:center; font-size:22px; flex:0 0 auto; overflow:hidden; }
.bk-service .emo img{ width:100%; height:100%; object-fit:cover; }
.bk-service b{ display:block; font-size:14.5px; } .bk-service span{ font-size:12px; color: var(--ivory-dim); }
.staff-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.staff-chips::-webkit-scrollbar{ display:none; }
.staff-chip{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius: var(--radius-pill); border:1px solid var(--line); background: var(--surface); color: var(--ivory-dim); font-size:12.5px; font-weight:600; cursor:pointer; }
.staff-chip .av{ width:28px; height:28px; border-radius:50%; background: var(--primary-soft); color: var(--primary-light); display:grid; place-items:center; font-size:11px; font-weight:800; overflow:hidden; }
.staff-chip .av img{ width:100%; height:100%; object-fit:cover; }
.staff-chip.active{ background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.staff-chip.active .av{ background: rgba(255,255,255,.25); color: var(--on-primary); }
.date-strip{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.date-strip::-webkit-scrollbar{ display:none; }
.date-chip{ flex:0 0 auto; width:56px; padding:9px 0; text-align:center; border-radius: var(--radius-m); border:1px solid var(--line); background: var(--surface); color: var(--ivory); cursor:pointer; }
.date-chip small{ display:block; font-size:10.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.date-chip b{ display:block; font-size:17px; font-family: var(--font-mono); margin-top:2px; }
.date-chip.active{ background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.date-chip.active small{ color: var(--on-primary); opacity:.8; }
.date-chip.off{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.time-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
@media (max-width:380px){ .time-grid{ grid-template-columns: repeat(3, 1fr); } }
.time-btn{ padding:10px 0; border-radius: var(--radius-s); border:1px solid var(--line); background: var(--surface); color: var(--ivory); font-size:12.5px; font-weight:700; cursor:pointer; font-family: var(--font-mono); }
.time-btn.active{ background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* success screens */
.done-card{ text-align:center; padding:10px 4px 4px; }
.done-icon{ width:64px; height:64px; border-radius:50%; margin:6px auto 14px; display:grid; place-items:center; background: var(--primary-soft); color: var(--primary-light); font-size:26px; }
.done-card h3{ font-size:20px; color: var(--ivory); margin-bottom:6px; }
.done-card p{ font-size:13.5px; color: var(--ivory-dim); line-height:1.6; }
.done-ref{ display:inline-block; margin:12px 0; font-family: var(--font-mono); font-weight:700; letter-spacing:.06em; background: var(--surface); border:1px dashed var(--primary-soft-2); border-radius: var(--radius-s); padding:8px 14px; color: var(--ivory); }
.done-lines{ text-align:left; margin:12px 0; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding:6px 14px; }
.done-lines .summary-row{ padding:8px 0; border-bottom:1px dashed var(--line); } .done-lines .summary-row:last-child{ border-bottom:none; }
.done-actions{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.btn-ghost{ display:flex; align-items:center; justify-content:center; gap:8px; background: var(--surface); color: var(--ivory); border:1px solid var(--line); border-radius: var(--radius-pill); padding:13px; font-weight:700; font-size:13.5px; text-decoration:none; cursor:pointer; }
.site-footer .rows a{ text-decoration:underline; text-underline-offset:2px; }
.fine-print.powered{ text-align:center; opacity:.9; }

/* shop picker */
.picker-shell{ max-width:880px; margin:0 auto; padding: calc(48px + var(--safe-top)) 20px 60px; }
.picker-head{ text-align:center; margin-bottom:34px; }
.picker-badge{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--primary-light); background: var(--primary-soft); border:1px solid var(--primary-soft-2); padding:6px 14px; border-radius: var(--radius-pill); margin-bottom:18px; }
.picker-head h1{ font-size:30px; font-weight:600; color: var(--ivory); line-height:1.25; }
.picker-head p{ margin-top:10px; font-size:14.5px; color: var(--ivory-dim); }
.picker-search{ max-width:420px; margin:26px auto 8px; position:relative; }
.picker-search input{ width:100%; background: var(--surface); border:1px solid var(--line); color: var(--ivory); padding:13px 16px 13px 42px; border-radius: var(--radius-pill); font-size:14.5px; font-family: var(--font-body); }
.picker-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color: var(--muted); font-size:13px; }
.picker-grid{ margin-top:28px; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media (min-width:640px){ .picker-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:480px){ .picker-grid{ grid-template-columns:1fr; } }
.picker-card{ display:flex; align-items:center; gap:13px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l); padding:16px; text-decoration:none; color:inherit; box-shadow: var(--shadow-card); }
.picker-card:hover{ border-color: var(--primary-soft-2); }
.picker-card.best-match{ border-color: var(--primary); }
.pc-logo{ width:48px; height:48px; border-radius:13px; object-fit:cover; flex:0 0 auto; }
.pc-logo-fallback{ display:grid; place-items:center; color:#fff; font-family: var(--font-display); font-weight:600; font-size:16px; }
.pc-info{ min-width:0; } .pc-name{ font-size:14.5px; font-weight:700; color: var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-meta{ font-size:11.5px; color: var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-status{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:10.5px; font-weight:700; }
.pc-status-dot{ width:6px; height:6px; border-radius:50%; background: var(--muted); }
.pc-status-open, .pc-status-open .pc-status-dot{ color:#3f9a5b; } .pc-status-open .pc-status-dot{ background:#3f9a5b; }
.pc-status-closing_soon, .pc-status-opening_soon{ color:#d18a2b; } .pc-status-closing_soon .pc-status-dot, .pc-status-opening_soon .pc-status-dot{ background:#d18a2b; }
.picker-empty, .picker-no-results{ text-align:center; padding:50px 20px; color: var(--muted); font-size:13.5px; line-height:1.7; }
.picker-no-results{ display:none; }
.picker-empty i{ font-size:26px; color: var(--primary-light); display:block; margin-bottom:14px; }

/* order / booking tracking page */
.track-shell{ max-width:520px; margin:0 auto; padding: calc(28px + var(--safe-top)) 18px 60px; }
.track-shell h1{ font-size:24px; color: var(--ivory); margin:14px 0 6px; }
.track-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l); padding:18px; margin-top:16px; box-shadow: var(--shadow-card); }
.track-card h2{ font-size:18px; color: var(--ivory); }
.tl{ list-style:none; margin:16px 0 4px; padding:0; }
.tl li{ position:relative; padding:0 0 16px 30px; font-size:13.5px; color: var(--muted); }
.tl li::before{ content:""; position:absolute; left:6px; top:3px; width:12px; height:12px; border-radius:50%; background: var(--surface-2); border:2px solid var(--line); }
.tl li::after{ content:""; position:absolute; left:11px; top:17px; bottom:-3px; width:2px; background: var(--line); }
.tl li:last-child::after{ display:none; }
.tl li.done{ color: var(--ivory); } .tl li.done::before{ background: var(--primary); border-color: var(--primary); }
.tl li.now{ color: var(--primary-light); font-weight:700; } .tl li.now::before{ background: var(--surface); border-color: var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius: var(--radius-pill); font-size:12px; font-weight:700; background: var(--primary-soft); color: var(--primary-light); }
.status-pill.bad{ background: rgba(217,97,79,.15); color:#e2685a; }
.track-lines{ margin-top:10px; } .track-lines .summary-row{ padding:7px 0; }