/* ============================================================
   ÖzSüt — Müştəri menyusu
   ============================================================ */
:root {
  --bg: #f2f3f5;
  --card: #ffffff;
  --ink: #1c1d21;
  --ink-soft: #6b6f76;
  --line: #e7e8ec;
  --hero: #2b2b2f;
  --hero-2: #3a3a40;
  --accent: #d62828;
  --accent-ink: #ffffff;
  --chip: #eef0f3;
  --note: #fff6bf;
  --radius: 18px;
  --shadow: 0 8px 30px rgba(20, 20, 30, .08);
  --shadow-lg: 0 20px 60px rgba(20, 20, 30, .22);
  --maxw: 1180px;
  --font: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { 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: 90px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

/* ---------- 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-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>"); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,20,25,.55), rgba(20,20,25,.85)),
    var(--hero) url("/img/banner.svg") center/cover;
  color: #fff;
  padding-bottom: 26px;
}
.hero__topbar { display: flex; justify-content: flex-end; padding: 16px 20px 0; }
.selectors { display: flex; gap: 10px; }
.hero__body {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; padding-top: 70px; flex-wrap: wrap;
}
.hero__left { display: flex; align-items: flex-end; gap: 18px; }
.hero__logo {
  width: 92px; height: 92px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow);
  flex: none;
}
.hero__logo img { width: 70%; height: 70%; object-fit: contain; }
.hero__info h1 { font-size: 44px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.hero__tagline { color: #d7d7db; margin-top: 8px; font-size: 15px; }
.hero__address { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.hero__address .arrow { width: 8px; height: 8px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); display: inline-block; }
.hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero__meta .hero__address { margin-top: 0; }
.hero__table { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(214,40,40,.4); }
.hero__table b { font-size: 15px; }
.hero__actions { display: flex; align-items: center; gap: 12px; }

/* Pills / buttons in hero */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill--ghost { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.pill--ghost:hover { background: rgba(255,255,255,.24); }
.pill--static { cursor: default; }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); display: inline-block; margin-left: 2px; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; color: #fff; }
.iconbtn:hover { background: rgba(255,255,255,.24); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown__menu { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; color: var(--ink);
  border-radius: 12px; 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: 11px 16px; font-size: 14px; }
.dropdown__menu li:hover { background: var(--chip); }

/* ---------- Sticky category nav ---------- */
.catnav { position: sticky; top: 0; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.catnav__inner { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.catnav__search { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); }
.catnav__chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.catnav__chips::-webkit-scrollbar { display: none; }
.chip { padding: 12px 22px; border-radius: 999px; background: var(--chip); color: var(--ink-soft);
  font-weight: 700; font-size: 14px; white-space: nowrap; transition: .15s; text-transform: uppercase;
  letter-spacing: .3px; }
.chip.active { background: var(--hero); color: #fff; }

/* ---------- Search bar ---------- */
.searchbar { position: sticky; top: 70px; z-index: 49; background: var(--bg); padding-bottom: 8px; }
.searchbar .container { display: flex; gap: 8px; }
.searchbar input { flex: 1; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; font-size: 15px; outline: none; }
.searchbar__close { padding: 0 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 16px; }

/* ---------- Menu content ---------- */
.menu { position: relative; padding-top: 24px; padding-bottom: 40px; }
.note { position: absolute; top: 24px; right: 20px; width: 300px; background: var(--note);
  border-radius: 10px; padding: 22px 22px 26px; box-shadow: var(--shadow);
  transform: rotate(1.2deg); font-family: "Comic Sans MS", "Segoe UI", cursive; }
.note__pin { position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.3); transform: translateX(-50%); }
.note h3 { font-size: 22px; margin-bottom: 12px; }
.note p { font-size: 15px; line-height: 1.6; color: #333; }

#sections { max-width: calc(100% - 340px); }
@media (max-width: 900px) {
  .note { position: static; width: auto; margin-bottom: 20px; transform: none; }
  #sections { max-width: 100%; }
}

.section { margin-bottom: 40px; scroll-margin-top: 84px; }
.section__title { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

/* Product card */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; overflow: hidden; position: relative; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card__main { flex: 1; padding: 18px 16px 16px 20px; display: flex; flex-direction: column; min-width: 0; }
.card__name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.card__name .num { color: var(--ink-soft); font-weight: 800; margin-right: 4px; }
.card__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.card__price { font-size: 18px; font-weight: 800; }
.card__price small { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.card__media { width: 118px; flex: none; position: relative; }
.card__media img, .card__ph { width: 100%; height: 100%; object-fit: cover; }
.card__ph { display: grid; place-items: center; font-size: 30px;
  background: linear-gradient(135deg, #f5f5f7, #e9eaee); color: #b9bcc4; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; z-index: 2; text-transform: uppercase; }

/* add / stepper on card */
.add { width: 40px; height: 40px; border-radius: 12px; background: var(--hero); color: #fff;
  font-size: 24px; line-height: 1; display: grid; place-items: center; flex: none; }
.add:active { transform: scale(.94); }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--chip); border-radius: 12px; }
.stepper button { width: 38px; height: 40px; font-size: 22px; color: var(--ink); border-radius: 12px; }
.stepper button:active { background: #dfe1e6; }
.stepper button:disabled { opacity: .3; pointer-events: none; }
.stepper span { min-width: 26px; text-align: center; font-weight: 800; font-size: 15px; }

/* ---------- 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: .85; }
.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 ---------- */
.waiterfab { position: fixed; left: 16px; bottom: 20px; z-index: 70; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg); font-weight: 700; font-size: 14px; }
.waiterfab:active { transform: scale(.96); }
.waiterfab__ic { font-size: 17px; }
.waiterfab.called { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 420px) { .waiterfab__txt { display: none; } .waiterfab { padding: 13px; } }

/* ---------- Floating cart FAB ---------- */
.cartfab { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--accent); color: #fff; border-radius: 999px; padding: 14px 22px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); z-index: 70;
  font-weight: 700; font-size: 15px; animation: pop .25s; }
.cartfab__count { background: rgba(255,255,255,.25); border-radius: 999px; min-width: 24px; height: 24px;
  display: grid; place-items: center; font-size: 13px; }
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

/* ---------- Sheets / Modals ---------- */
/* Desktop: mərkəzi modal — Mobil: aşağıdan açılan panel */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15,15,20,.55); z-index: 80; backdrop-filter: blur(3px); }
.sheet { position: fixed; z-index: 90; background: #fff; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px)); max-height: 88vh; border-radius: 22px;
  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% - 32px)); }
.sheet__handle { display: none; }

@media (max-width: 600px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-width: 100%; max-height: 90vh; border-radius: 22px 22px 0 0;
    animation: slideup .28s cubic-bezier(.2, .8, .2, 1); }
  .sheet--center { width: 100%; }
  .sheet__handle { display: block; width: 42px; height: 5px; background: #d9dbe0; border-radius: 3px; margin: 10px auto 4px; }
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 22px 12px; border-bottom: 1px solid var(--line); }
.sheet__head h2 { font-size: 20px; }
.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: #e5484d; cursor: pointer; align-self: stretch;
  display: flex; align-items: center; }
.cline__del:active { color: #c2373b; }
.cart-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

.tablestatic { display: flex; align-items: center; gap: 10px; background: #fdeaea; color: var(--ink);
  border: 1px solid #f6cccc; border-radius: 12px; 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: 12px; font-size: 15px; font-family: inherit; outline: none; resize: none; }
.field input:focus, .field textarea:focus { border-color: var(--hero); }

.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: 14px; font-weight: 700; font-size: 16px; transition: .12s; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:active { transform: scale(.98); filter: brightness(.95); }
.btn--primary:disabled { opacity: .6; }
.btn--block { width: 100%; }

/* Success */
.success { text-align: center; padding: 30px 24px 24px; }
.success__check { width: 72px; height: 72px; border-radius: 50%; background: #e7f7ec; color: #1a9d4b;
  font-size: 40px; display: grid; place-items: center; margin: 0 auto 16px; }
.success h2 { font-size: 22px; 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: #f7f8fa; border-radius: 14px; 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: #fff; color: var(--accent); border: 1.5px solid var(--accent); margin-top: 10px; }
.btn--outline:active { background: #fdeaea; }

/* "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: 14px; overflow: hidden; display: flex; flex-direction: column; }
.reco__media { position: relative; height: 78px; background: #f2f3f5; display: grid; place-items: center; overflow: hidden; }
.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;
  border: none; cursor: pointer; transition: .12s; }
.reco__add:active { transform: scale(.9); }
.reco__add.is-added { background: #1a9d4b; font-size: 13px; }

/* Served → ödəniş prompt-u (yemək masaya veriləndə açılır) */
.served { text-align: center; padding: 30px 24px 24px; }
.served__ic { width: 76px; height: 76px; border-radius: 50%; background: #fff3e0;
  font-size: 40px; display: grid; place-items: center; margin: 0 auto 16px; }
.served h2 { font-size: 22px; margin-bottom: 8px; }
.served__hint { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.paysum--big { justify-content: center; gap: 12px; border: none; background: #f7f8fa;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.paysum--big strong { font-size: 26px; color: var(--accent); }

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

/* Item detail */
.itemdetail { padding: 8px 22px 24px; }
.itemdetail__img { height: 190px; border-radius: 16px; margin-bottom: 16px; display: grid; place-items: center;
  font-size: 56px; background: linear-gradient(135deg, #f5f5f7, #e9eaee); color: #c3c6cd; overflow: hidden; }
.itemdetail__img img { width: 100%; height: 100%; object-fit: cover; }
.itemdetail h2 { font-size: 22px; 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; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); background: #1c1d21;
  color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; z-index: 120; box-shadow: var(--shadow-lg);
  animation: pop .2s; }

/* ---------- 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; }

.payopt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px;
  border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: #fff; transition: .12s; }
.payopt:hover { border-color: var(--hero); background: #fafafb; }
.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; }

.cardform__row { display: flex; gap: 12px; }
.cardform__row .field { flex: 1; }
#payCardBtn { margin-top: 4px; }
.testnote { text-align: center; color: var(--ink-soft); font-size: 12.5px; margin-top: 14px; }

.paybadge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.paybadge--paid { background: #e7f7ec; color: #1a9d4b; }
.paybadge--cash { background: #fff3e0; color: #b26a00; }
.success__pay { margin: 4px 0 12px; }

/* ---------- My orders ---------- */
.myorder { border: 1px solid var(--line); border-radius: 16px; 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: #f3e8ff; color: #7e22ce; }
.myorder__badge.st-new { background: #fde8e8; color: #d62828; }
.myorder__badge.st-preparing { background: #fef3c7; color: #b45309; }
.myorder__badge.st-ready { background: #dcfce7; color: #15803d; }
.myorder__badge.st-served { background: #eef0f3; color: #64748b; }
.myorder__badge.cancel { background: #f1f2f4; color: #94a0af; 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: #fff; 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: rgba(20,20,25,.72); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px; }
.geoblock__box { background: #fff; border-radius: 22px; 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; margin-bottom: 10px; }
.geoblock__msg { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.geoblock .btn { margin-top: 0; }

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

/* Small screens hero tweaks */
@media (max-width: 560px) {
  .hero__body { padding-top: 40px; }
  .hero__info h1 { font-size: 34px; }
  .hero__logo { width: 72px; height: 72px; }
  .hero__actions { width: 100%; }
  #phoneText { display: none; }
}

/* ============ ORDER TRACKER DOCK (sifariş izləmə) ============ */
.tdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  margin: 0 auto; width: min(560px, 100%);
  background: var(--card); color: var(--ink);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 44px rgba(20, 20, 30, .22);
  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: #d3d5da; }
.tdock--drag .tdock__grab { cursor: grabbing; }

/* --- yığılmış zolaq --- */
.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: #16a34a; 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(214, 40, 40, .5); }
  100% { box-shadow: 0 0 0 11px rgba(214, 40, 40, 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__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); }

/* --- bağlı halda səbət önizləməsi --- */
.tdock__cprev { padding: 0 18px 6px; max-height: 150px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.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; }

/* --- açıq hissə --- */
.tdock__full { display: none; overflow-y: auto; padding: 0 18px 20px; -webkit-overflow-scrolling: touch; }
.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: 700; 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; margin: 18px 0 12px; }

/* --- sifariş blokları + üfüqi mərhələ axını --- */
.tdock__orders { display: flex; flex-direction: column; gap: 8px; }

.tord { border: 1px solid var(--line); border-radius: 14px; 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; }
/* birləşdirici xətt soldakı addımdan gəlir */
.hstep + .hstep .hstep__rail::before {
  content: ""; position: absolute; top: 50%; left: -50%; right: 50%;
  height: 2px; margin-top: -1px; background: var(--line);
}
/* yalnız tamamlanmış addıma GƏLƏN xətt yaşıl olur */
.hstep.is-done .hstep__rail::before { background: #16a34a; }
.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: #16a34a; border-color: #16a34a; }
.hstep.is-done .hstep__lbl { color: var(--ink); }
.hstep.is-current .hstep__node { background: #fff; border-color: #16a34a; }
.hstep.is-current .hstep__node::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.hstep.is-current .hstep__lbl { color: var(--ink); font-weight: 600; }

/* --- məhsullar / cəm / düymələr --- */
.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; }
.tdock__acts { display: flex; gap: 10px; padding: 10px 18px 16px; }
.tdock.is-open .tdock__acts { padding-top: 0; margin-top: -4px; }
.tdock__acts .btn { flex: 1; }

/* dock açıqkən üzən düymələri yuxarı qaldır */
body.has-tdock .waiterfab,
body.has-tdock .cartfab { bottom: 150px; }

/* yığılmış dock səhifənin sonunu örtməsin */
body.has-tdock { padding-bottom: 130px; }