/* ============================================================
   ÖzSüt — Müştəri menyusu  (Oh-Look tərzli dizayn)
   ============================================================ */
/* Urbanist self-host olunub (Google Fonts-dan DEYİL).
   Səbəb: @import kənar serverə bloklayıcı sorğudur — CDN ilişsə menu.css
   "yüklənmiş" sayılmır, səhifə render olunmur və ondan sonrakı skriptlər
   icra edilmir (səhifə donur, tab sonsuz fırlanır). Google-un öz verdiyi
   dəyişkən (variable) woff2 faylları, eyni unicode-range-lərlə. */
@font-face {
  font-family: "Urbanist"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Urbanist"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Urbanist-in "ə" glyph-i balaca/nazik dizayn olunub → mətndən seçilir.
   Həll: Urbanist-in ÖZ "e" glyph-i 180° fırladılıb mini-font kimi self-host
   edilir ("Urbanist Schwa", yalnız U+0259, ~1KB/çəki). ə tipoqrafik olaraq
   çevrilmiş e-dir → nəticə mətnlə 100% eyni stil, çəki və baseline.
   Böyük Ə (U+018F) Urbanist-in özündən gəlir (o, düzgün dizayn olunub). */
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-400.woff2") format("woff2"); font-weight: 400; unicode-range: U+0259; font-display: swap; }
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-500.woff2") format("woff2"); font-weight: 500; unicode-range: U+0259; font-display: swap; }
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-600.woff2") format("woff2"); font-weight: 600; unicode-range: U+0259; font-display: swap; }
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-700.woff2") format("woff2"); font-weight: 700; unicode-range: U+0259; font-display: swap; }
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-800.woff2") format("woff2"); font-weight: 800; unicode-range: U+0259; font-display: swap; }
@font-face { font-family: "Urbanist Schwa"; src: url("../fonts/urbanist-schwa-900.woff2") format("woff2"); font-weight: 900; unicode-range: U+0259; font-display: swap; }

:root {
  --bg: #f2f2f3;
  --card: #ffffff;
  --panel: #ffffff;
  --ink: #1b1c1f;
  --ink-soft: #71727a;
  --line: #ececef;
  --line-2: #f4f4f6;

  --accent: #8b3ff0;
  --accent-2: #a855f7;
  --accent-press: #7a2fe0;
  --accent-ink: #ffffff;
  --accent-tint: #f3ecfe;

  --chip: #efeff1;
  --chip-ink: #6b6c74;

  --green: #16a34a;
  --green-bg: #e7f7ec;
  --amber: #b26a00;
  --amber-bg: #fff3e0;
  --danger: #e5484d;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 6px 24px rgba(20, 20, 35, .06);
  --shadow-lg: 0 24px 60px rgba(20, 20, 35, .18);
  --maxw: 500px;
  --font: "Urbanist Schwa", "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
}

/* Default tema: light (ağ). Dark yalnız istifadəçi tema düyməsini basanda
   (data-theme="dark") tətbiq olunur — cihazın OS dark rejimi default-u dəyişmir. */
:root[data-theme="dark"] {
  --bg: #131318;
  --card: #1e1e24;
  --panel: #1e1e24;
  --ink: #f2f2f5;
  --ink-soft: #9a9aa3;
  --line: #2c2c33;
  --line-2: #26262c;
  --chip: #2a2a31;
  --chip-ink: #b7b7c0;
  --accent: #9d63f5;
  --accent-2: #b57bf8;
  --accent-press: #8b4ff0;
  --accent-tint: #2a2140;
  --green-bg: #16281c;
  --amber-bg: #2a2113;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 100px;
  transition: background .2s, color .2s;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }

/* ---------- Icons (simple CSS/SVG masks) ---------- */
.ic { width: 18px; height: 18px; display: inline-block; background: currentColor;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
.ic-phone { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/></svg>"); }
.ic-ig { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c2.7 0 3 0 4.1.1 1 .1 1.7.2 2.3.5.6.2 1.1.5 1.6 1s.8 1 1 1.6c.2.6.4 1.3.5 2.3.1 1.1.1 1.4.1 4.1s0 3-.1 4.1c-.1 1-.2 1.7-.5 2.3-.2.6-.5 1.1-1 1.6s-1 .8-1.6 1c-.6.2-1.3.4-2.3.5-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1-.1-1.7-.2-2.3-.5-.6-.2-1.1-.5-1.6-1s-.8-1-1-1.6c-.2-.6-.4-1.3-.5-2.3C2 15 2 14.7 2 12s0-3 .1-4.1c.1-1 .2-1.7.5-2.3.2-.6.5-1.1 1-1.6s1-.8 1.6-1c.6-.2 1.3-.4 2.3-.5C9 2 9.3 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.3-3.1a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/></svg>"); }
.ic-wa { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm0 1.8a8.2 8.2 0 016.9 12.6l-.2.3.7 2.5-2.6-.7-.3.2A8.2 8.2 0 1112 3.8zm-3.3 4c-.2 0-.5.1-.7.3-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.7 2.7 4.2 3.7 2.1.8 2.5.7 3 .6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3l-1.8-.9c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5 0-.2 0-.3-.1-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.4z'/></svg>"); }
.social--wa { color: #16a34a; }
.ic-web { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 6h-2.8a15.7 15.7 0 00-1.3-3.6A8 8 0 0118.9 8zM12 4c.8 1 1.5 2.4 1.9 4h-3.8c.4-1.6 1.1-3 1.9-4zM4.3 14a8 8 0 010-4h3.2a17 17 0 000 4H4.3zm.8 2h2.8c.3 1.3.8 2.5 1.3 3.6A8 8 0 015.1 16zM7.9 8H5.1a8 8 0 013.9-3.6C8.5 5.5 8 6.7 7.9 8zM12 20c-.8-1-1.5-2.4-1.9-4h3.8c-.4 1.6-1.1 3-1.9 4zm2.3-6H9.7a15 15 0 010-4h4.6a15 15 0 010 4zm.6 5.6c.5-1.1 1-2.3 1.3-3.6h2.8a8 8 0 01-4.1 3.6zM16.5 14a17 17 0 000-4h3.2a8 8 0 010 4h-3.2z'/></svg>"); }
.ic-search { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 4a6 6 0 104 10.5l4.3 4.2 1.4-1.4-4.2-4.3A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/></svg>"); }
.ic-cart { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h-2l-1 2H2v2h2l2.6 8.3A2 2 0 008.5 18H18v-2H9l-.3-1H18a2 2 0 002-1.6L21.5 7H6.2l-.5-1.6A2 2 0 004 4H7zM9 20a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm10 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z'/></svg>"); }
.ic-pin { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/></svg>"); }
.ic-clock { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.6l4 2.3-1 1.7-5-2.9V6h2z'/></svg>"); }
.ic-lock { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm0 2a3 3 0 013 3v3H9V7a3 3 0 013-3zm0 10a2 2 0 011 3.7V19a1 1 0 01-2 0v-1.3A2 2 0 0112 14z'/></svg>"); }
.ic-wifi { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 18a2 2 0 110 4 2 2 0 010-4zm0-5c1.9 0 3.6.8 4.9 2l-1.6 1.6A4.5 4.5 0 0012 15c-1.3 0-2.4.5-3.3 1.3L7.1 15A6.9 6.9 0 0112 13zm0-5c3.3 0 6.3 1.3 8.5 3.5l-1.6 1.6A9.5 9.5 0 0012 10a9.5 9.5 0 00-6.9 2.6L3.5 11A11.9 11.9 0 0112 8z'/></svg>"); }
.ic-card { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5h16a2 2 0 012 2v1H2V7a2 2 0 012-2zM2 10h20v7a2 2 0 01-2 2H4a2 2 0 01-2-2v-7zm3 4v2h4v-2H5z'/></svg>"); }

/* ---------- Hero ---------- */
.hero { padding-top: 12px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

.themetoggle { width: 42px; height: 42px; border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; font-size: 18px; flex: none; }
.themetoggle:active { transform: scale(.94); }

.hero__banner { position: relative; border-radius: var(--radius); overflow: visible;
  height: 168px; margin-bottom: 60px; }
.hero__banner > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius);
  background: linear-gradient(135deg, #ded7f4, #efeaf9); }
.hero__logo {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%);
  width: 100px; height: 100px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-lg);
  border: 4px solid #fff;
}
.hero__logo img { width: 76%; height: 76%; object-fit: contain; }

.hero__socials { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.social { width: 40px; height: 40px; border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); }
.social:active { transform: scale(.92); }
.social .ic { width: 17px; height: 17px; }

.hero__info { text-align: center; }
.hero__info h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.hero__tagline { color: var(--ink-soft); margin-top: 4px; font-size: 14px; }
.hero__table { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: var(--accent); color: #fff; padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(139, 63, 240, .35); }
.hero__table b { font-size: 14px; }

/* ---------- Info tabs (Əlaqə / İş saatları / Wifi) ---------- */
.infotabs { display: flex; gap: 4px; background: var(--card); border-radius: 999px; padding: 5px;
  margin: 18px 0 12px; box-shadow: var(--shadow); }
.infotab { flex: 1; padding: 10px 8px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: .15s; white-space: nowrap; }
.infotab .ic { width: 15px; height: 15px; }
.infotab.on { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(139, 63, 240, .3); }

.infocard { background: var(--card); border-radius: var(--radius); padding: 6px 18px; box-shadow: var(--shadow); }
.inforow { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink); }
.inforow:last-child { border-bottom: none; }
.inforow .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.inforow b { font-weight: 600; }
.inforow .arrow { margin-left: auto; color: var(--ink-soft); }
.infopane__empty { padding: 20px 0; text-align: center; color: var(--ink-soft); font-size: 13.5px; }

/* İş saatları */
.hnow { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 10px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.hnow__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hnow--open { background: rgba(34, 197, 94, .14); color: #16a34a; }
.hnow--closed { background: rgba(239, 68, 68, .13); color: #dc2626; }
.hlist { display: flex; flex-direction: column; padding-bottom: 4px; }
.hrow { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.hrow:last-child { border-bottom: none; }
.hrow--today { font-weight: 800; }
.hrow--today .hrow__d::after { content: " •"; color: var(--accent); }
.hrow__t { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hrow--today .hrow__t { color: var(--ink); }
.hrow__t--off { color: #dc2626; }
.hnote { padding: 10px 0 14px; font-size: 12.5px; color: var(--ink-soft); }

/* Wi-Fi */
.wrow { display: flex; align-items: center; gap: 10px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.wrow:last-child { border-bottom: none; }
.wrow__k { color: var(--ink-soft); font-size: 13px; min-width: 66px; }
.wrow__v { font-weight: 700; word-break: break-all; }
.wcopy { margin-left: auto; flex: none; padding: 7px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.wcopy--ok { background: #16a34a; }

/* Language dropdown — yalnız bayraq (mətn ekran oxuyucusu üçün gizli qalır) */
.dropdown { position: relative; flex: none; }
.langbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; }
.flagic { width: 24px; height: 16px; border-radius: 3px; display: block; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); display: inline-block; margin-left: 2px; margin-top: -3px; }
.dropdown__menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--card); color: var(--ink);
  border-radius: 14px; box-shadow: var(--shadow-lg); list-style: none; overflow: hidden; min-width: 160px;
  z-index: 60; display: none; }
.dropdown.open .dropdown__menu { display: block; }
.dropdown__menu li { padding: 12px 16px; font-size: 14px; }
.dropdown__menu li:hover { background: var(--chip); }
.dropdown__menu--flags { min-width: 0; }
.dropdown__menu--flags li { padding: 9px 13px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; }
.dropdown__menu--flags li.on { background: var(--chip); }

/* ---------- Sticky category nav ---------- */
.catnav { position: sticky; top: 0; z-index: 50; background: var(--bg); margin-top: 22px; }
/* Üst səviyyə qruplar: 24 kateqoriyalı menyuda içkilərə çatmaq üçün müştəri
   çip zolağını 15 çip sürüşdürməli olurdu. İndi bir toxunuşla keçir və
   yalnız həmin qrupun bölmələri render olunur (scroll da yüngülləşir). */
.catnav__groups { display: flex; gap: 6px; padding: 4px; margin-bottom: 2px;
  background: var(--chip); border-radius: 999px; }
.catnav__groups[hidden] { display: none; }
.gtab { flex: 1 1 0; padding: 11px 10px; border-radius: 999px; font-size: 15px; font-weight: 700;
  color: var(--ink-soft); background: none; transition: .15s; white-space: nowrap; }
.gtab.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
/* Üç tabda (Yemək / Şirniyyat / İçkilər) 375px ekranda yazı bir az daralır */
.catnav__groups[data-count="3"] .gtab { padding: 11px 6px; font-size: 14.5px; letter-spacing: -.2px; }
.gtab:active { transform: scale(.985); }
/* Yemək bitib içkilər başlayanda: keçidi bildirən ayırıcı */
.groupdiv { display: flex; align-items: center; gap: 12px; margin: 26px 0 6px;
  scroll-margin-top: calc(var(--sticky-h, 74px) + 12px); }
.groupdiv::before, .groupdiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.groupdiv span { font-size: 14px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.catnav__inner { display: flex; align-items: center; gap: 6px; padding-block: 10px; }
.catnav__search { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); }
.catnav__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  /* Zolaq `overflow-x` ilə kəsir. Daxili boşluq olmasa aktiv çipin bənövşəyi
     kölgəsi (və scale(1.03)) düz xətlə kəsilir və çip axtarış düyməsinin
     içinə girmiş kimi görünür. Mənfi `margin-block` bu boşluğun naviqasiyanı
     hündürləşdirməsinin qarşısını alır (.searchbar `top: 64px` buna bağlıdır). */
  padding: 14px;
  margin-block: -14px;
  scroll-padding-inline: 14px;
  /* Sürüşdürəndə çiplər kəskin xətlə yox, yumşaq sönərək kənarda itsin —
     əks halda kəsilmiş çip axtarış düyməsinə "girmiş" kimi görünür. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px,
    #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px,
    #000 calc(100% - 14px), transparent 100%);
  /* Yalnız üfüqi jest bu zolağa aiddir; şaquli jest səhifəyə ötürülür */
  touch-action: pan-x;
  overscroll-behavior-x: contain; }
.catnav__chips::-webkit-scrollbar { display: none; }
.chip { padding: 10px 18px; border-radius: 999px; background: var(--chip); color: var(--chip-ink);
  font-weight: 700; font-size: 13px; white-space: nowrap;
  /* Aktiv çipə keçid yumşaq olsun (scroll zamanı "sərt" dəyişmə hissi olmasın) */
  transition: background-color .28s cubic-bezier(.4, 0, .2, 1),
              color .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .28s cubic-bezier(.4, 0, .2, 1),
              transform .22s cubic-bezier(.4, 0, .2, 1); }
.chip.active { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(139, 63, 240, .3); }
.catnav__chips .chip.active { transform: translateZ(0) scale(1.03); }
.catnav__chips { scroll-behavior: auto; }   /* sürüşmə rAF ilə idarə olunur */
@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
  .catnav__chips .chip.active { transform: none; }
}

/* ---------- Search bar ---------- */
/* Naviqasiyanın hündürlüyü qrup sətri ilə dəyişir → sabit 64px yerinə
   JS-in ölçdüyü dəyər (--catnav-h) işlədilir. */
.searchbar { position: sticky; top: var(--catnav-h, 64px); z-index: 49; background: var(--bg); padding-bottom: 8px; }
.searchbar .container { display: flex; gap: 8px; }
.searchbar input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 15px; outline: none; }
.searchbar input:focus { border-color: var(--accent); }
.searchbar__close { padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 16px; }

/* ---------- Menu content ---------- */
.menu { position: relative; padding-top: 16px; padding-bottom: 30px; }
.note { background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
  margin-bottom: 18px; }
.note h3 { font-size: 18px; margin-bottom: 8px; }
.note p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

#sections { max-width: 100%; }

/* Bölmə başlığı yapışqan zolağın (qrup tabları + çiplər + açıqdırsa axtarış)
   ALTINDA gizlənməməlidir — hündürlük JS-də ölçülür (--sticky-h). */
.section { margin-bottom: 28px; scroll-margin-top: calc(var(--sticky-h, 74px) + 12px); }
.section__title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; }
.section__sub { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
.section > .grid { margin-top: 12px; }

.grid { display: flex; flex-direction: column; gap: 10px; }

/* Product card */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; padding: 14px; position: relative;
  transition: transform .12s;
  /* Uzun menyuda (80+ kart) ekrandan kənar kartlar layout/paint edilmir —
     scroll zamanı kadr itkisinin qarşısını alır. Dəstəklənməyən brauzerdə
     sadəcə nəzərə alınmır. */
  content-visibility: auto;
  contain-intrinsic-size: auto 80px; }
.card:active { transform: scale(.995); }

.card__av { width: 52px; height: 52px; flex: none; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; position: relative;
  background: var(--accent-tint); color: var(--accent); font-size: 22px; font-weight: 800; }
.card__av img { width: 100%; height: 100%; object-fit: cover; }
.card__pop { position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(139, 63, 240, .5); }

.card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card__name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.card__name .num { display: none; }
.card__desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__bottom { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.card__price { font-size: 16px; font-weight: 800; }
.card__price small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.card__ctrl { margin-left: auto; flex: none; }
.badge { display: none; }

/* ---------- Şəkilli kartlar (hibrid görünüş) ----------
   Bölmə ya tam enli "vitrin" kartlardan (.grid--big), ya da iki sütunlu
   kiçik kartlardan (.grid--small) qurulur; hansı olacağına menu.js-dəki
   catLayout() qərar verir. Şəkilsiz bölmə köhnə sıx sətirdə qalır. */
.grid--big { gap: 14px; }
.grid--small { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Kart: şəkil üstdə, mətn altda. Sütun axını + gövdənin `flex: 1`-i
   yanaşı iki kartın EYNİ hündürlükdə olmasını və qiymət sətrinin aşağıya
   oturmasını təmin edir (ad bir, qonşusu iki sətir olanda da). */
.card--photo { display: flex; flex-direction: column; align-items: stretch;
  padding: 0; overflow: hidden; }
/* Şəkil yüklənənə qədər kartın hündürlüyü dəyişməsin (scroll tullanmasın):
   nisbət şəkil qutusunda sabitdir, təxmini hündürlük isə burada. */
.card--big { contain-intrinsic-size: auto 350px; }   /* ölçülüb: 340–390px */
.card--sm { contain-intrinsic-size: auto 235px; }    /* ölçülüb: 214–270px */

.card__ph { position: relative; width: 100%; overflow: hidden; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent); }
.card--big .card__ph { aspect-ratio: 880 / 520; }
.card--sm .card__ph { aspect-ratio: 4 / 3; }
/* Şəkil hərfin ÜSTÜNDƏ dayanır (bax: menu.js — şəkil açılmasa silinir
   və altdakı hərf görünür, "qırıq şəkil" nişanı qalmır). */
.card__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Şəkli olmayan məhsul: adın ilk hərfi (boş boz qutu qalmasın) */
.card__letter { font-size: 40px; font-weight: 900; opacity: .75; }
.card--sm .card__letter { font-size: 30px; }

.card--photo .card__body { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; }
.card--photo .card__name { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.card--photo .card__desc { font-size: 13px; margin-top: 5px; }
.card--photo .card__bottom { margin-top: auto; padding-top: 10px; min-height: 36px; }
.card--photo .card__price { font-size: 18px; min-width: 0; }

.card--sm .card__body { padding: 10px 12px 12px; }
.card--sm .card__name { font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card--sm .card__desc { font-size: 11.5px; margin-top: 4px; }
.card--sm .card__bottom { padding-top: 8px; gap: 6px; }
.card--sm .card__price { font-size: 15px; }
.card--sm .card__price small { font-size: 11px; }
/* Kiçik kartda səbət düyməsi də kiçilir — qiymətlə yan-yana sığsın */
.card--sm .add { width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
.card--sm .stepper button { width: 28px; height: 32px; }
.card--sm .stepper span { min-width: 18px; font-size: 13px; }

/* Populyar nişanı: şəklin üstündə oxunaqlı pill */
.card--photo .card__pop { position: absolute; top: 10px; left: 10px; width: auto; height: auto;
  padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(27, 28, 31, .72); color: #fff; backdrop-filter: blur(6px);
  box-shadow: none; display: inline-flex; align-items: center; gap: 4px; }
.card--sm .card__pop { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; }

/* Dar ekranda (kiçik telefon) iki sütun yenə sığır, sadəcə ara boşluğu azalır */
@media (max-width: 359px) {
  .grid--small { gap: 8px; }
  .card--sm .card__body { padding: 9px 10px 11px; }
}

/* add / stepper on card */
.add { width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  font-size: 22px; line-height: 1; display: grid; place-items: center; flex: none;
  box-shadow: 0 5px 14px rgba(139, 63, 240, .35); }
.add:active { transform: scale(.9); }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--chip); border-radius: 12px; }
.stepper button { width: 34px; height: 36px; font-size: 20px; color: var(--ink); border-radius: 12px; }
.stepper button:active { background: var(--line); }
.stepper button:disabled { opacity: .3; pointer-events: none; }
.stepper span { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }

/* ---------- Cart combined (add-to-order) sections ---------- */
.cart-sec { margin-bottom: 8px; }
.cart-sec__h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-soft); margin: 6px 0 2px; display: flex; align-items: center; gap: 8px; }
.cart-sec__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cline--sent { opacity: .9; }
.cline--sent .cline__name b { font-weight: 700; }
.cline--served { opacity: .4; }
.cart-tot { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); padding: 4px 0; }
.cart-tot b { color: var(--ink); }

/* ---------- Call waiter FAB ---------- */
/* İnvert pill — arxaplanın əksi rəngdə (dark: açıq pill+tünd yazı, light: tünd
   pill+açıq yazı) ki, hər iki temada aydın oxunsun. Səbətlə eyni hündürlükdə. */
.waiterfab { position: fixed; left: 16px; bottom: 22px; z-index: 70; background: var(--ink); color: var(--bg);
  border-radius: 999px; height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg); font-weight: 800; font-size: 14.5px; }
.waiterfab:active { transform: scale(.96); }
.waiterfab__ic { font-size: 17px; }
.waiterfab.called { background: var(--accent); color: #fff; }
.waiterfab:disabled { opacity: .6; }

/* ---------- Floating cart / "Show order" FAB ---------- */
.cartfab { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 999px;
  height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(139, 63, 240, .45);
  z-index: 70; font-weight: 800; font-size: 14.5px; animation: pop .25s; }
.cartfab .ic { width: 19px; height: 19px; }
.cartfab__count { background: rgba(255, 255, 255, .28); border-radius: 999px; min-width: 24px; height: 24px;
  display: grid; place-items: center; font-size: 13px; padding: 0 6px; }
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

/* Səbət aktivdirsə: "Ofisiant çağır" öz ölçüsündə solda qalır,
   səbət düyməsi mərkəzdən sağa keçir — yan-yana dursunlar */
body.has-cart .cartfab { left: auto; right: 16px; transform: none; animation: popRight .25s; }
@keyframes popRight { from { transform: scale(.8); opacity: 0; } }

/* ---------- Sheets / Modals ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 15, 25, .55); z-index: 80; backdrop-filter: blur(3px); }
.sheet { position: fixed; z-index: 90; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 28px)); max-height: 88vh; border-radius: 24px;
  animation: modalin .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalin { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@keyframes slideup { from { transform: translateY(100%); } }
.sheet--center { width: min(430px, calc(100% - 28px)); }
.sheet__handle { display: none; }

@media (max-width: 600px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: translateY(var(--sheet-y, 0px));
    width: 100%; max-width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0;
    animation: slideup .28s cubic-bezier(.2, .8, .2, 1); }
  .sheet--center { width: 100%; }
  .sheet__handle { display: block; width: 42px; height: 5px; background: var(--line); border-radius: 3px; margin: 10px auto 4px;
    position: relative; touch-action: none; }
  /* barmaqla tutmaq üçün görünməz, daha geniş sahə */
  .sheet__handle::after { content: ""; position: absolute; left: -40px; right: -40px; top: -10px; bottom: -12px; }
  /* barmaq altında: animasiya/keçid yoxdur, ani izləyir */
  .sheet--drag { animation: none; transition: none; user-select: none; }
  /* buraxandan sonra: yerinə qayıdır və ya aşağı sürüşüb bağlanır */
  .sheet--anim { animation: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 14px; border-bottom: 1px solid var(--line); }
.sheet__head h2 { font-size: 19px; font-weight: 800; }
.sheet__close { width: 36px; height: 36px; border-radius: 50%; background: var(--chip); font-size: 16px; }
.sheet__close--float { position: absolute; top: 14px; right: 14px; z-index: 3; }
.sheet__body { overflow-y: auto; padding: 14px 22px; flex: 1; }
.sheet__foot { padding: 14px 22px 22px; border-top: 1px solid var(--line); }

/* Cart line */
.cline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cline__name { flex: 1; }
.cline__name b { display: block; font-size: 15px; }
.cline__name span { font-size: 13px; color: var(--ink-soft); }
.cline__price { font-weight: 800; min-width: 76px; text-align: right; }
.cline__del { padding-left: 12px; border: 0; border-left: 1px solid var(--line); background: none;
  font-size: 20px; line-height: 1; color: var(--danger); cursor: pointer; align-self: stretch;
  display: flex; align-items: center; }
.cline__del:active { opacity: .7; }
.cart-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

.tablestatic { display: flex; align-items: center; gap: 10px; background: var(--accent-tint); color: var(--ink);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px; font-size: 15px; }
.tablestatic__ic { font-size: 20px; }
.tablestatic b { color: var(--accent); font-size: 17px; }

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 15px; font-family: inherit; outline: none; resize: none; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.sheet__totalrow { display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin: 8px 0 14px; }
.sheet__totalrow strong { font-size: 22px; }

.btn { padding: 15px 22px; border-radius: var(--radius-sm); font-weight: 800; font-size: 16px; transition: .12s; }
.btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  box-shadow: 0 6px 16px rgba(139, 63, 240, .22); }
.btn--primary:active { transform: scale(.98); filter: brightness(.97); }
.btn--primary:disabled { opacity: .6; }
.btn--block { width: 100%; }

/* Success */
.success { text-align: center; padding: 30px 24px 24px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.success__check { width: 72px; height: 72px; border-radius: 50%; background: var(--green-bg); color: var(--green);
  font-size: 40px; display: grid; place-items: center; margin: 0 auto 16px; }
.success h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.success__hint { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.success__items { text-align: left; margin-bottom: 14px; }
.success__items:empty { display: none; }
.si { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.si:last-child { border-bottom: none; }
.si__qty { color: var(--accent); font-weight: 800; min-width: 28px; }
.si__name { flex: 1; min-width: 0; }
.si__price { font-weight: 600; flex: none; }
.success__rows { text-align: left; background: var(--line-2); border-radius: var(--radius-sm); padding: 6px 16px; margin-bottom: 18px; }
.srow { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: none; }
.srow span { color: var(--ink-soft); font-size: 14px; }
.srow b { font-size: 16px; }
#successNum { color: var(--accent); }
.btn--outline { background: var(--card); color: var(--accent); border: 1.5px solid var(--accent); margin-top: 10px; }
.btn--outline:active { background: var(--accent-tint); }

/* "Bunları da bəyənə bilərsiniz" — tövsiyələr */
.recos { text-align: left; margin: 4px 0 18px; }
.recos__title { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.recos__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.recos__row::-webkit-scrollbar { height: 6px; }
.recos__row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.reco { flex: 0 0 128px; width: 128px; scroll-snap-align: start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.reco__media { position: relative; height: 78px; background: var(--accent-tint); display: grid; place-items: center; overflow: hidden; color: var(--accent); }
.reco__media img { width: 100%; height: 100%; object-fit: cover; }
.reco__ph { font-size: 30px; }
.reco__badge { position: absolute; top: 6px; left: 6px; background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.reco__name { font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 8px 10px 4px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reco__foot { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 10px; }
.reco__price { font-size: 12.5px; font-weight: 800; }
.reco__add { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 18px; font-weight: 800; line-height: 1; display: grid; place-items: center; flex: none; transition: .12s; }
.reco__add:active { transform: scale(.9); }
.reco__add.is-added { background: var(--green); font-size: 13px; }

/* "Hesabınız istənildi" vərəqi (mərkəzi bildiriş) */
.billask { text-align: center; padding: 30px 24px 24px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.billask__ic { width: 76px; height: 76px; border-radius: 50%; background: var(--amber-bg);
  font-size: 40px; display: grid; place-items: center; margin: 0 auto 16px; }
.billask h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.billask__hint { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }

/* Bill sheet */
.billnote { color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; text-align: center; }

/* Item detail */
.itemdetail { padding: 8px 22px 24px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
/* Şəkil çərçivəsi: sabit 4:3 nisbət. Sabit piksel hündürlüyü (əvvəl 190px)
   şəkillərin aşağısını kəsirdi — yüklənən şəkillər əsasən 4:3-dür. Nisbət
   sabit qaldığı üçün modalın hündürlüyü hər məhsulda eynidir (qiymət və
   "Səbətə at" düyməsi həmişə ekranda qalır), şəklin tam halı isə üstünə
   basanda lightbox-da açılır. */
.itemdetail__img { position: relative; height: 190px; border-radius: var(--radius); margin-bottom: 16px;
  display: grid; place-items: center;
  font-size: 56px; background: var(--accent-tint); color: var(--accent); overflow: hidden; }
/* aspect-ratio dəstəklənmirsə (köhnə WebView) yuxarıdakı sabit hündürlük qalır
   — şəkil kiçilir, amma itmir */
@supports (aspect-ratio: 4 / 3) {
  .itemdetail__img { height: auto; aspect-ratio: 4 / 3; }
}
.itemdetail__img img { width: 100%; height: 100%; object-fit: cover; }
.itemdetail__img.is-zoomable { cursor: zoom-in; }
/* "Böyütmək olar" işarəsi — olmasa istifadəçi şəklin klikləndiyini bilmir */
.itemdetail__zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15, 15, 25, .55); color: #fff; font-size: 15px; display: grid; place-items: center;
  backdrop-filter: blur(4px); pointer-events: none; }
.itemdetail h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.itemdetail__desc { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.itemdetail__price { font-size: 24px; font-weight: 800; margin-bottom: 18px; }
.itemdetail__actions { display: flex; gap: 14px; align-items: center; }
.itemdetail__actions .btn { flex: 1; }

/* Şəklin tam ekran görünüşü (lightbox).
   Kartdakı çərçivə kadrlanmış olduğu üçün şəklin ORİJİNAL halını burada
   `contain` ilə göstəririk — heç nə kəsilmir. Səhifədə user-scalable=no
   olduğuna görə brauzerin öz pinch-zoom-u işləmir: şəklə basanda 2x
   böyüyür və skroll ilə hərəkət etdirilir. */
.lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(8, 8, 12, .93);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  animation: lbIn .18s ease-out; cursor: zoom-out; }
@keyframes lbIn { from { opacity: 0; } }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: zoom-in; }
/* Böyüdülmüş halda: mərkəzləmə söndürülür, yoxsa daşan hissənin sol/yuxarı
   tərəfi skroll ilə əlçatmaz qalır (flex mərkəzləməsinin məlum davranışı). */
.lightbox.is-zoomed { align-items: flex-start; justify-content: flex-start; padding: 0; }
.lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; width: 200%; border-radius: 0; cursor: zoom-out; }
.lightbox__close { position: fixed; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 16px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.lightbox__close:active { transform: scale(.92); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink);
  color: var(--bg); padding: 12px 20px; border-radius: 12px; font-size: 14px; z-index: 120; box-shadow: var(--shadow-lg);
  animation: pop .2s; max-width: calc(100% - 32px); text-align: center; }

/* ---------- Payment ---------- */
.pill__badge { background: var(--accent); color: #fff; border-radius: 999px; min-width: 20px; height: 20px;
  padding: 0 6px; font-size: 12px; display: inline-grid; place-items: center; }
.sheet__back { width: 36px; height: 36px; border-radius: 50%; background: var(--chip); font-size: 22px; line-height: 1; }
.btn--ghost { background: var(--chip); color: var(--ink); margin-top: 10px; }

.paysum { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 16px;
  font-size: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.paysum strong { font-size: 22px; }

/* Mərkəzi vərəqlərdə (masaya verildi / hesab istənildi) məbləğ qutusu */
.paysum--big { justify-content: center; gap: 12px; border: none; background: var(--line-2);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.paysum--big strong { font-size: 26px; color: var(--accent); }

/* Ödəniş xülasəsi — qəbz kimi sətir-sətir: etiket solda, məbləğ sağda.
   Əvvəl üç blok yan-yana (.paysum-un flex-i ilə) düzülürdü və dar ekranda
   bir-birinin üstünə düşürdü — məbləğlə etiket birləşir, ₼ alt sətrə keçirdi. */
.paysum--rows { display: block; padding: 6px 0 12px; }
.paysum__row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 5px 0; font-size: 15px; }
.paysum__row > span { color: var(--ink-soft); min-width: 0; }
.paysum__row > b { font-weight: 700; flex: none; white-space: nowrap; }
.paysum__row--tip > b { color: var(--accent); }
/* Yekun sətri yuxarıdakılardan xətlə ayrılır — YALNIZ bəxşiş sətri görünəndə.
   (Gizli sətirlər DOM-da qalır, ona görə :first-child işləmir.) */
.paysum__row--tip:not([hidden]) ~ .paysum__row--total { margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.paysum__row--total > span { color: var(--ink); font-weight: 700; }
.paysum__row--total > strong { font-size: 22px; flex: none; white-space: nowrap; }

/* Addım göstəricisi (məbləğ → bəxşiş → üsul) */
.paysteps { display: flex; justify-content: center; gap: 6px; margin: 2px 0 16px; }
.paysteps__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line);
  transition: width .2s ease, background .2s ease; }
.paysteps[data-step="1"] .paysteps__dot:nth-child(1),
.paysteps[data-step="2"] .paysteps__dot:nth-child(2),
.paysteps[data-step="3"] .paysteps__dot:nth-child(3) { width: 20px; background: var(--accent); }
.paysteps[data-step="2"] .paysteps__dot:nth-child(1),
.paysteps[data-step="3"] .paysteps__dot:nth-child(1),
.paysteps[data-step="3"] .paysteps__dot:nth-child(2) { background: var(--accent); opacity: .45; }

/* Bölmə başlığı (sual sətirləri) */
.payq { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 14px; }
.payq--sm { font-size: 14px; margin-bottom: 12px; }

/* İkincili seçim sətri — "Hesabı böl" kimi */
.optrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--card);
  border: 1.5px solid var(--line); transition: .12s; }
.optrow:active { transform: scale(.99); background: var(--line-2); }
.optrow__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-tint);
  display: grid; place-items: center; font-size: 17px; }
.optrow__txt { flex: 1; font-size: 15px; font-weight: 700; }
.optrow__arr { color: var(--ink-soft); font-size: 20px; line-height: 1; }

/* ---- Hesabın bölünməsi və bəxşiş (ödəniş vərəqinin 1–2-ci addımları) ---- */
/* Açılan qutu: "Hesabı böl" sətrinin yerini tutur */
.split { background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 14px 14px; margin-bottom: 14px; animation: splitIn .18s ease; }
@keyframes splitIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .split { animation: none; } }

/* Pay sayı çipləri — bərabər enli sıra */
.split__chips, .tip__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.split__chips .chip, .tip__chips .chip { padding: 0; height: 44px; width: 100%; font-size: 15px;
  display: grid; place-items: center; background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); }
.split__chips .chip.active, .tip__chips .chip.active { background: var(--accent); color: #fff;
  border-color: var(--accent); }

/* "Digər" — sərbəst rəqəm/məbləğ üçün stepper */
.split__num, .tip__num { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; }
.split__pm { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--card);
  border: 1.5px solid var(--line); color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; transition: .12s; }
.split__pm:active { transform: scale(.94); background: var(--accent-tint); border-color: var(--accent); }
.split__inp { width: 74px; height: 40px; text-align: center; font-family: inherit; font-size: 17px;
  font-weight: 800; color: var(--ink); background: var(--card); border: 1.5px solid var(--line);
  border-radius: 12px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.split__inp:focus { outline: none; border-color: var(--accent); }
.split__inp::-webkit-outer-spin-button, .split__inp::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.split__unit { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
/* "nəfər" sətrin sağında dayanır ki, −/rəqəm/+ qutusu tam mərkəzdə qalsın */
.split__num { position: relative; }
.split__num .split__unit { position: absolute; right: 4px; }
.tip__inp { width: 110px; }

/* Nəticə sətri — "Sizin payınız" */
.split__res { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--card);
  border: 1.5px solid var(--accent); }
.split__res span { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.split__res strong { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Qalıq / artıq ödənilmiş pay qeydi */
.split__note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; text-align: center;
  color: var(--ink-soft); }

/* Bölməni ləğv et → tam hesaba qayıt */
.split__full { display: block; width: 100%; margin-top: 12px; padding: 10px; border-radius: 10px;
  background: transparent; color: var(--accent); font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; }
.split__full:active { background: var(--accent-tint); text-decoration: none; }

/* Bəxşişin manatla qarşılığı — çiplərin altında */
.tip__amt { margin: 12px 0 0; text-align: center; font-size: 15px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; }
#tipNextBtn { margin-top: 18px; }

/* Rəqəmsal cüzdanlar (Apple / Google Pay) */
.wallets { margin-bottom: 14px; }
/* Düymə mətninin yanındakı balaca ikon (məs. "Kartla ödə" 💳) */
.btn .ic { width: 17px; height: 17px; vertical-align: -3px; margin-left: 7px; opacity: .9; }

/* Cüzdan düyməsi: fon bizimdir, içindəki nişan vendorun rəsmi artwork-udur.
   Nişan HƏR İKİ brendin qaydasına görə ağ + konturludur, ona görə fon qara.
   Nişanın öz konturu düymənin kənarı ilə birləşməməlidir (Apple qaydası) →
   düymədə əlavə border yoxdur və ətrafda kifayət qədər boşluq var. */
.btn--wallet { height: 54px; padding: 0 16px; border-radius: var(--radius-sm); border: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
  background: #000; }
.btn--wallet:active { transform: scale(.99); }
.btn--wallet:disabled { opacity: .5; }
/* Nişanın hündürlüyü: hər iki düymədə görünən nişan ~30px olsun.
   Apple faylında kənar boşluq yoxdur (30px), Google faylında 90 vahid
   kənar var → 580/400 nisbətində böyüdülür (30 × 1.45 ≈ 43.5px). */
.wallets__mark { display: block; width: auto; }
.btn--apple .wallets__mark { height: 30px; }
.btn--google .wallets__mark { height: 43.5px; }
/* Google-un rəsmi düyməsi: buttonSizeMode "fill" konteynerin ölçüsünü tutur */
.wallets__gpay { height: 54px; margin-bottom: 10px; }
.wallets__gpay > * { width: 100%; height: 100%; }
.wallets__sep { height: 1px; background: var(--line); margin: 4px 0 0; }

.btn__amt { font-variant-numeric: tabular-nums; }

.payopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--card); transition: .12s; }
.payopt:hover { border-color: var(--accent); }
.payopt:active { transform: scale(.99); }
.payopt__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--chip); display: grid; place-items: center; font-size: 22px; flex: none; }
.payopt__txt { flex: 1; }
.payopt__txt b { display: block; font-size: 16px; }
.payopt__txt small { color: var(--ink-soft); font-size: 13px; }
.payopt__arr { color: var(--ink-soft); font-size: 22px; }

.walletbtn { width: 100%; height: 52px; border-radius: 12px; font-size: 18px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; transition: .12s; }
.walletbtn:active { transform: scale(.99); }
.walletbtn:disabled { opacity: .5; }
.walletbtn--apple { background: #000; color: #fff; }
.applelogo { width: 17px; height: 20px; display: inline-block; background: #fff;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.05 12.04c-.02-2.2 1.8-3.26 1.88-3.31-1.02-1.5-2.62-1.7-3.19-1.72-1.36-.14-2.65.8-3.34.8-.68 0-1.75-.78-2.88-.76-1.48.02-2.85.86-3.61 2.19-1.54 2.67-.39 6.62 1.1 8.79.73 1.06 1.6 2.25 2.74 2.21 1.1-.05 1.52-.71 2.85-.71 1.33 0 1.71.71 2.88.69 1.19-.02 1.94-1.08 2.66-2.15.84-1.23 1.19-2.42 1.21-2.48-.03-.01-2.32-.89-2.34-3.53zM14.88 5.6c.6-.73 1.01-1.75.9-2.76-.87.04-1.92.58-2.54 1.31-.56.64-1.05 1.68-.92 2.67.97.08 1.96-.49 2.56-1.22z'/></svg>"); }
.walletbtn--google { background: #fff; color: #3c4043; border: 1.5px solid #dadce0; }
.gpay b { font-weight: 700; }

.paydivider { text-align: center; color: var(--ink-soft); font-size: 13px; margin: 16px 0; position: relative; }
.paydivider::before, .paydivider::after { content: ""; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--line); }
.paydivider::before { left: 0; } .paydivider::after { right: 0; }

#payCardBtn { margin-top: 4px; }

/* --- Onlayn ödəniş (Kapital Bank HPP) --- */
/* Xəbərdarlıq zolağı: test rejimi / ödəniş bağlıdır */
.paywarn { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: var(--amber-bg); color: var(--amber); font-weight: 600; }



.paybadge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.paybadge--paid { background: var(--green-bg); color: var(--green); }
.paybadge--cash { background: var(--amber-bg); color: var(--amber); }
.success__pay { margin: 4px 0 12px; }

/* ---------- My orders ---------- */
.myorder { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.myorder__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.myorder__top b { font-size: 16px; }
.myorder__badge { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.myorder__badge.st-pending { background: var(--accent-tint); color: var(--accent); }
.myorder__badge.st-new { background: var(--accent-tint); color: var(--accent); }
.myorder__badge.st-preparing { background: var(--amber-bg); color: var(--amber); }
.myorder__badge.st-ready { background: var(--green-bg); color: var(--green); }
.myorder__badge.st-served { background: var(--chip); color: var(--ink-soft); }
.myorder__badge.cancel { background: var(--chip); color: var(--ink-soft); text-decoration: line-through; }
.myorder__items { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.4; }
.myorder__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.myorder__meta b { font-size: 16px; }

.track { display: flex; justify-content: space-between; position: relative; }
.track::before { content: ""; position: absolute; top: 7px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.track__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; z-index: 1; }
.track__step span { width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.track__step small { font-size: 10.5px; color: var(--ink-soft); text-align: center; }
.track__step.done span { background: var(--accent); border-color: var(--accent); }
.track__step.done small { color: var(--ink); font-weight: 600; }

/* ---------- Geo block overlay ---------- */
.geoblock { position: fixed; inset: 0; z-index: 150; background: var(--bg);
  display: grid; place-items: center; padding: 24px; }
.geoblock__box { background: var(--card); border-radius: var(--radius); max-width: 400px; width: 100%; padding: 34px 28px 28px;
  text-align: center; box-shadow: var(--shadow-lg); }
.geoblock__ic { font-size: 54px; margin-bottom: 14px; }
.geoblock__box h2 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.geoblock__msg { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.geoblock .btn { margin-top: 0; }
/* Köhnəlmiş masa səhifəsi: hansı masadan hansına keçildiyi açıq görünsün */
.stale__rows { display: grid; gap: 8px; margin: 0 0 20px; }
.stale__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.stale__row span { color: var(--ink-soft); }
.stale__row b { font-weight: 800; }
.stale__row--now { background: var(--accent-soft, rgba(124,58,237,.1)); }
.stale__row--now b { color: var(--accent); }

.footer { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 20px 0 40px; }

/* ============ ORDER TRACKER DOCK ============ */
.tdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  margin: 0 auto; width: min(500px, 100%);
  background: var(--card); color: var(--ink);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 44px rgba(20, 20, 35, .2);
  display: flex; flex-direction: column;
  max-height: 88vh;
  transform: translateY(var(--tdock-y, 0px));
}
.tdock--anim { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.tdock[hidden] { display: none; }

.tdock__grab { padding: 10px 0 4px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.tdock__grab span { width: 42px; height: 5px; border-radius: 99px; background: var(--line); }
.tdock--drag .tdock__grab { cursor: grabbing; }

.tdock__peek { display: flex; align-items: center; gap: 12px; padding: 4px 18px 16px; cursor: pointer; touch-action: none; user-select: none; }
.tdock__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.tdock__dot.is-live { animation: tdockPulse 1.6s ease-out infinite; }
.tdock__dot.is-done { background: var(--green); animation: none; }
.tdock__dot.is-cart { background: var(--accent); animation: tdockPulse 1.6s ease-out infinite; }
@keyframes tdockPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 63, 240, .5); }
  100% { box-shadow: 0 0 0 11px rgba(139, 63, 240, 0); }
}
.tdock__peektxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdock__peektxt b { font-size: 15px; line-height: 1.25; }
.tdock__peektxt small { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdock__peeketa { text-align: right; flex: none; display: flex; flex-direction: column; }
.tdock__peeketa b { font-size: 17px; letter-spacing: .2px; }
.tdock__peeketa small { color: var(--ink-soft); font-size: 11px; }
.tdock.is-open .tdock__peeketa { display: none; }
.tdock__chev { flex: none; color: var(--ink-soft); font-size: 20px; line-height: 1; transition: transform .28s ease; transform: translateY(3px); }
.tdock.is-open .tdock__chev { transform: rotate(180deg) translateY(1px); }

.tdock__cprev { padding: 0 18px 6px; max-height: 150px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; }
.tdock__cprev:empty { display: none; padding: 0; }
.tdock.is-open .tdock__cprev { display: none; }
.cpi { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cpi:last-child { border-bottom: none; }
.cpi__qty { color: var(--accent); font-weight: 800; min-width: 22px; }
.cpi__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpi__price { font-weight: 700; flex: none; }

/* Panelin içi sona çatanda sürüşmə arxadakı səhifəyə keçmir.
   flex: 1 1 auto + min-height: 0 — məzmun çox olanda siyahı kiçilir və
   sürüşür; olmasa düymələri ekrandan aşağı itələyir. */
.tdock__full { display: none; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 0 18px 10px; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; }
.tdock.is-open .tdock__full { display: block; }

.tdock__eta { display: flex; align-items: baseline; gap: 12px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.tdock__eta b { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.tdock__eta span { color: var(--ink-soft); font-size: 13px; max-width: 150px; line-height: 1.3; }
.tdock__h { font-size: 16px; font-weight: 800; margin: 18px 0 12px; }

.tdock__orders { display: flex; flex-direction: column; gap: 8px; }
.tord { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 14px; }
.tord__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tord__head b:first-child { font-size: 14px; }
.tord__time { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.tord__tot { margin-left: auto; font-size: 14px; }
.tord__items { color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; margin-bottom: 12px; }

.htrack { display: flex; }
.hstep { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.hstep__time { font-size: 11px; color: var(--ink-soft); min-height: 14px; font-variant-numeric: tabular-nums; }
.hstep__rail { position: relative; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; }
.hstep + .hstep .hstep__rail::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.hstep.is-done .hstep__rail::before { background: var(--green); }
.hstep__node { width: 20px; height: 20px; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; background: var(--line); border: 2px solid var(--line); }
.hstep__lbl { font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; }
.hstep.is-done .hstep__node { background: var(--green); border-color: var(--green); }
.hstep.is-done .hstep__lbl { color: var(--ink); }
.hstep.is-current .hstep__node { background: var(--card); border-color: var(--green); }
.hstep.is-current .hstep__node::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hstep.is-current .hstep__lbl { color: var(--ink); font-weight: 600; }

.tdock__items { display: flex; flex-direction: column; gap: 8px; }
.tdock__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.tdock__row span { color: var(--ink-soft); }
.tdock__qty { color: var(--ink) !important; font-weight: 600; margin-right: 6px; }
.tdock__sum { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.tdock__sum span { color: var(--ink-soft); }
.tdock__sum b { font-size: 18px; }
/* "Hesab 88 ₼ · ödənilib 44 ₼" — yalnız qismən ödənişdə görünür */
.tdock__paid { margin-top: 4px; text-align: right; font-size: 12.5px; color: var(--ink-soft); }
/* Avtomatik seçim izahı + "Öz yediklərini ödə" */
.split__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.split__auto { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--accent-soft, rgba(124,58,237,.08)); color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.45; }
/* "Öz yediklərini ödə" panelin İÇİNDƏ ayrıca boz qutu kimi görünməməlidir
   (panelin özü onsuz da boz fondadır — iki qat bir-birinə qarışırdı).
   Fonsuz, vurğulu mətn düyməsidir; seçiləndə yüngül vurğu fonu qalır. */
.split__items { margin-top: 4px; padding: 13px 12px; background: none; color: var(--accent);
  font-weight: 800; font-size: 16.5px; }
.split__items:active { transform: scale(.99); opacity: .8; }
.split__items--on { background: var(--accent-soft, rgba(139, 63, 240, .10)); color: var(--accent); }
/* "və ya" ayırıcısı: iki yanında xətt */
.split__or { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px;
  font-size: 12.5px; color: var(--ink-soft); }
.split__or::before, .split__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "Öz yediklərini ödə" modalı: sifariş sətirləri + say seçici */
.pitems { display: flex; flex-direction: column; gap: 14px; }
.pitems__ord { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pitems__ordhead { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 10px 14px; background: var(--bg-soft, rgba(0,0,0,.03));
  font-size: 13px; color: var(--ink-soft); }
.pitems__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-top: 1px solid var(--line); }
.pitems__row:first-of-type { border-top: 0; }
.pitems__txt { flex: 1; min-width: 0; }
.pitems__name { display: block; font-weight: 600; }
.pitems__price { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
/* İKRAM: qiymət əvəzinə "İkram" — üstü xətli qiymət + yaşıl etiket */
.pitems__row--gift .pitems__name { opacity: .85; }
.pitems__gift, .cline--gift .cline__price, .si__price--gift {
  color: var(--green, #16a34a); font-weight: 700; font-size: 13px; white-space: nowrap; }
.pitems__gift { flex: none; }
.cline--gift .cline__price s, .si__price--gift s, .pitems__row--gift .pitems__price s { opacity: .5; margin-right: 4px; font-weight: 400; }
.pitems__qty { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pitems__pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.pitems__pm[disabled] { opacity: .35; cursor: default; }
.pitems__n { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pitems__row--on { background: var(--accent-soft, rgba(124,58,237,.06)); }
.pitems__empty { padding: 20px; text-align: center; color: var(--ink-soft); }
.tdock__acts { display: flex; flex-direction: column-reverse; gap: 8px; padding: 10px 18px 16px;
  flex: none; background: var(--card); }
/* Panel açıqdır: siyahı düymələrin altına sürüşür — aralarında aydın sərhəd
   olsun, yoxsa kəsilən sətir düymənin üstünə düşmüş kimi görünür. */
.tdock.is-open .tdock__acts { border-top: 1px solid var(--line); }
.tdock__acts .btn { width: 100%; margin-top: 0; }
.tdock__acts .btn--primary { font-size: 17px; padding: 16px 22px; }

body.has-tdock .waiterfab,
body.has-tdock .cartfab { bottom: 152px; }
body.has-tdock { padding-bottom: 130px; }

/* ---------- Read-only rejim (QR-siz baxış) ---------- */
body.readonly .card__ctrl { display: none; }
body.readonly .itemdetail__actions { display: none; } /* detal modalında "Səbətə at" gizli */
body.readonly .cartfab,
body.readonly .waiterfab,
body.readonly .tdock { display: none !important; }
.branchswitch { display: none; }
body.readonly .branchswitch { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--ink);
  font-weight: 700; font-size: 13px; text-decoration: none; margin-right: auto; }

/* ---------- Filial seçimi (branch picker) ---------- */
.brpick { position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center; padding: 28px 22px; overflow-y: auto; }
/* Filialsız girişdə seçim ekranı İLK kadrdan bəri açıqdır (boot-theme.js),
   siyahı gələnə qədər loqo və başlıq görünür — menyu arxada qalsa belə
   ÜMUMİYYƏTLƏ görünmür. menu.js qərar verəndən sonra atribut götürülür. */
/* [hidden] { display: none !important } yuxarıda (86-cı sətir) olduğu üçün
   burada da !important lazımdır — əks halda qapı işləmir. */
html[data-branchgate] .brpick[hidden] { display: grid !important; }
.brpick__box { width: 100%; max-width: 420px; text-align: center; }
.brpick__logo { width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg); overflow: hidden; }
.brpick__logo img { width: 76%; height: 76%; object-fit: contain; }
.brpick__box h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.brpick__sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.brpick__list { display: flex; flex-direction: column; gap: 10px; }
.brpick__item { display: block; padding: 16px 18px; border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid var(--line); text-align: left; transition: .12s; }
.brpick__item:active { transform: scale(.98); }

/* Kartlar bir-bir süzülüb gəlir. `--i` sıra nömrəsidir, menu.js verir;
   `backwards` olmasa kartlar gecikmə müddətində son halında görünərdi. */
@keyframes brpickIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.brpick__item { animation: brpickIn .42s cubic-bezier(.2, .75, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms); }

/* Filial seçiləndə: seçilən qabarır, qalanları geri çəkilir, sonra keçid olur.
   Vaxtı menu.js-dəki BRPICK_ANIM_MS ilə eyni saxla. */
.brpick__list.is-choosing { pointer-events: none; }
.brpick__list.is-choosing .brpick__item {
  animation: none; transition: opacity .26s ease, transform .26s ease, filter .26s ease;
  opacity: .32; transform: scale(.96); filter: saturate(.6); }
.brpick__list.is-choosing .brpick__item.is-chosen {
  opacity: 1; transform: scale(1.04); filter: none;
  border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  .brpick__item { animation: none; }
  .brpick__list.is-choosing .brpick__item { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   HÜQUQİ PANEL — İstifadə şərtləri / Məxfilik siyasəti
   (legal.js paneli body-ə əlavə edir; brpick/geoblock-dan yuxarıdadır)
   ============================================================ */
.lgl-back { position: fixed; inset: 0; z-index: 290; background: rgba(15, 15, 25, .55); backdrop-filter: blur(3px); }
html.lgl-open { overflow: hidden; }

.lgl { position: fixed; z-index: 300; background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 28px)); max-height: 86vh; border-radius: var(--radius);
  animation: lglIn .22s cubic-bezier(.22, .61, .36, 1); }
@keyframes lglIn { from { opacity: 0; transform: translate(-50%, -46%); } }
.lgl__grab { display: none; }
@media (max-width: 560px) {
  .lgl { left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0;
    animation: lglUp .26s cubic-bezier(.22, .61, .36, 1); }
  @keyframes lglUp { from { transform: translateY(100%); } }
  .lgl__grab { display: flex; justify-content: center; padding: 10px 0 2px; }
  .lgl__grab span { width: 42px; height: 5px; border-radius: 99px; background: var(--line); }
}

@media (prefers-reduced-motion: reduce) { .lgl { animation: none; } }

.lgl__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 20px 12px; }
.lgl__head h2 { font-size: 19px; font-weight: 800; }
.lgl__x { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--chip);
  color: var(--chip-ink); font-size: 15px; }

.lgl__tabs { display: flex; gap: 4px; margin: 0 20px 6px; padding: 5px;
  background: var(--chip); border-radius: 999px; }
.lgl__tab { flex: 1; padding: 10px 8px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--chip-ink); line-height: 1.2; }
.lgl__tab.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

.lgl__body { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.lgl__updated { font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-tint); display: inline-block; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.lgl__intro { font-size: 14.5px; line-height: 1.65; color: var(--ink); margin-bottom: 4px; }
.lgl__h { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 20px 0 6px; }
.lgl__p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }
.lgl__ul { margin: 2px 0 8px; padding-left: 18px; }
.lgl__ul li { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
.lgl__body b { color: var(--ink); font-weight: 700; }
.lgl__link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Səhifədəki linklər ---------- */
.footer__legal { margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 12.5px; }
.footer__legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.footer__sep { opacity: .5; }

.lgl-consent { margin-top: 10px; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.lgl-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

.lgl-links { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.lgl-links a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

.lgl-geonote { margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.lgl-geonote a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

/* ============================================================
   HÜQUQİ MÜSTƏQİL SƏHİFƏ (legal.html — /terms, /privacy)
   ============================================================ */
.lglpage { max-width: 640px; margin-inline: auto; padding: 26px 18px 60px; }
.lglpage__top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lglpage__logo { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow); overflow: hidden; }
.lglpage__logo img { width: 78%; height: 78%; object-fit: contain; }
.lglpage__name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.lglpage__sub { font-size: 12.5px; color: var(--ink-soft); }
.lglpage__back { margin-left: auto; padding: 9px 14px; border-radius: 999px; background: var(--card);
  box-shadow: var(--shadow); font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lglpage__card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 20px 26px; }
.lglpage .lgl__tabs { margin: 0 0 14px; }
.lglpage__foot { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 22px; }

/* ---------- Variant seçimi (yemək detalı) ---------- */
.ivars { margin: 14px 0 4px; }
.ivars__lbl { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.ivars__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ivars__chips .chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ivars__chips .chip b { font-variant-numeric: tabular-nums; }
/* Variantlı yeməyin kartında "+" düyməsi sayı da göstərir */
.add--has { position: relative; }
.add__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
  line-height: 18px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }