/* ============================================================
   Menu Cafe — Premium SaaS Design System (v1)
   Persian / RTL first. Minimal, flat, neutral surfaces.
   Brand mark carries a subtle "1" motif (see .brand-mark).
   ============================================================ */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --ink: #1c1917;
  --ink-2: #44403c;
  --muted: #78716c;
  --line: #e9e5df;
  --line-soft: #f1ede7;
  --brand: #0e7c66;
  --brand-dark: #0a5c4c;
  --brand-ink: #ffffff;
  --brand-soft: #e6f3ef;
  --gold: #b98a2f;
  --success: #15803d;
  --success-bg: #e7f4ec;
  --warning: #b45309;
  --warning-bg: #fdf1e0;
  --danger: #b91c1c;
  --danger-bg: #fbe9e7;
  --info: #1d4ed8;
  --info-bg: #e8effd;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 4px 14px rgba(28, 25, 23, .06);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --font: 'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --fs-display: clamp(1.9rem, 4vw, 2.9rem);
  --fs-h1: clamp(1.4rem, 2.6vw, 1.9rem);
  --fs-h2: 1.2rem;
  --fs-h3: 1.02rem;
  --fs-body: .98rem;
  --fs-small: .86rem;
  --header-h: 64px;
  --sidebar-w: 248px;
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  direction: rtl;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.6; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 .8rem; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.ltr { direction: ltr; unicode-bidi: embed; overflow-wrap: anywhere; }
table.table td { overflow-wrap: break-word; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem;
  height: var(--header-h); display: flex; align-items: center; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; line-height: 1;
}
.brand-mark i { font-style: normal; color: #fff; }
.brand small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.nav-links { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.nav-links a {
  padding: .45rem .8rem; border-radius: 9px; color: var(--ink-2); font-size: .92rem;
}
.nav-links a:hover { background: var(--line-soft); text-decoration: none; }
.nav-links a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.nav-cta { display: flex; gap: .5rem; align-items: center; }
/* Higher specificity than .btn so the hamburger stays hidden on desktop. */
button.menu-toggle { display: none; }
/* Mobile navigation drawer: hidden everywhere by default. Only the mobile
   breakpoint below may reveal it, and only when explicitly opened. */
.nav-drawer { display: none; }

/* ---------- Layout ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem 1.25rem 3rem; width: 100%; flex: 1; }
.page-narrow { max-width: 720px; }
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .25rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-small); color: var(--muted); margin-bottom: .6rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb .sep { opacity: .5; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }

/* ---------- App shell (sidebar) ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: 1.25rem; align-items: start; }
.sidebar {
  position: sticky; top: calc(var(--header-h) + 1rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; box-shadow: var(--shadow-sm);
}
.sidebar .side-title { font-size: var(--fs-small); color: var(--muted); padding: .4rem .6rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 10px; color: var(--ink-2); font-size: .93rem;
}
.sidebar a:hover { background: var(--surface-2); text-decoration: none; }
.sidebar a.active { background: var(--ink); color: #fff; }
.sidebar .ico { width: 20px; text-align: center; opacity: .75; }
.app-main { min-width: 0; }

/* ---------- Cards / grids / stats ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
/* Grid children must be allowed to shrink so a wide table/form inside
   .table-wrap scrolls internally instead of pushing the whole page
   horizontally on mobile. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stat .k { font-size: var(--fs-small); color: var(--muted); }
.stat .v { font-size: 1.4rem; font-weight: 800; margin-top: .15rem; }
.stat .s { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .93rem;
  padding: .62rem 1.15rem; min-height: 42px; line-height: 1.6;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-light { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-outline { background: #fff; border-color: #efc7c4; color: var(--danger); }
.btn-sm { padding: .34rem .7rem; min-height: 34px; font-size: .85rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
/* The hidden attribute must win over component display rules. */
.btn[hidden], .badge[hidden] { display: none; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.auth-wrap { max-width: 460px; margin: 2rem auto; width: 100%; }
.form-narrow { max-width: 640px; margin: 0 auto; }
/* min-width:0 lets .field shrink inside flex/grid rows (e.g. search bars with
   a button) instead of forcing the row past the viewport. */
.field { margin-bottom: 1rem; min-width: 0; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=tel], .field input[type=url],
.field input[type=date], .field input[type=datetime-local],
.field input[type=search],
.field select, .field textarea, .field input[type=file] {
  display: block; width: 100%; font-family: inherit; font-size: .95rem;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.field .help { font-size: var(--fs-small); color: var(--muted); margin-top: .25rem; }
.errorlist, .field-error {
  list-style: none; margin: .45rem 0 0; padding: .55rem .8rem;
  background: var(--danger-bg); color: var(--danger); border-radius: 9px; font-size: .87rem;
}
.check { display: flex; align-items: center; gap: .55rem; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.qty { display: inline-flex; align-items: center; gap: .4rem; }
.qty input { width: 76px; text-align: center; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; }

/* ---------- Alerts / badges / tables ---------- */
.alert { border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent; }
.alert-info { background: var(--info-bg); color: #1e3a8a; border-color: #c9d8fa; }
.alert-success { background: var(--success-bg); color: #14532d; border-color: #bfe6cc; }
.alert-warning { background: var(--warning-bg); color: #7c3f06; border-color: #f3d9ae; }
.alert-error, .alert-danger { background: var(--danger-bg); color: #7f1d1d; border-color: #f0c4c1; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.badge-green { background: var(--success-bg); border-color: #bfe6cc; color: var(--success); }
.badge-amber { background: var(--warning-bg); border-color: #f3d9ae; color: var(--warning); }
.badge-red { background: var(--danger-bg); border-color: #f0c4c1; color: var(--danger); }
.badge-blue { background: var(--info-bg); border-color: #c9d8fa; color: var(--info); }
.badge-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
table.table th, table.table td { padding: .65rem .8rem; border-bottom: 1px solid var(--line-soft); text-align: right; vertical-align: middle; }
table.table thead th { background: var(--surface-2); font-size: .82rem; color: var(--muted); font-weight: 700; }
table.table tbody tr:last-child td { border-bottom: none; }
table.table tr.hl td { background: var(--brand-soft); }
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pills a { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; color: var(--ink-2); }
.filter-pills a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-pills a:hover { text-decoration: none; }

/* ---------- Placeholders / empty / media ---------- */
.ph {
  background: linear-gradient(180deg, #efece6, #e5e0d7);
  border: 1px dashed #cfc8bc; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .3rem;
  color: #8a847b; font-size: .85rem; text-align: center; overflow: hidden;
}
.ph svg { width: 30px; height: 30px; opacity: .55; }
.ph-16x9 { aspect-ratio: 16/9; }
.ph-4x3 { aspect-ratio: 4/3; }
.ph-1x1 { aspect-ratio: 1/1; }
.ph-sm { min-height: 120px; }
.thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.thumb-lg { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); }
.empty { text-align: center; padding: 2.2rem 1.2rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.empty .ph { max-width: 220px; margin: 0 auto 1rem; }
.qr-frame { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: inline-block; box-shadow: var(--shadow-sm); }
.qr-frame img { width: min(280px, 70vw); height: auto; image-rendering: pixelated; }

/* ---------- Landing ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; padding: 2.5rem 0 1rem; }
.hero h1 { font-size: var(--fs-display); font-weight: 800; margin-bottom: .6rem; }
.hero .lead { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 1.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .9rem; color: var(--muted); }
.preview { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.preview-bar { display: flex; gap: .35rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line-soft); }
.preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.preview-body { padding: 1rem; }
.section { padding: 2.2rem 0 .5rem; }
.section-head { max-width: 640px; margin-bottom: 1.25rem; }
.section-head h2 { font-size: 1.45rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.feature .fic { width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; position: relative; }
.step::before {
  counter-increment: step; content: counter(step, persian);
  position: absolute; top: 1rem; inset-inline-end: 1.1rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.step-first::before { content: "۱"; }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; }
.price-card.pop { border: 2px solid var(--ink); }
.price-card .amount { font-size: 1.5rem; font-weight: 800; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .6rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq-group { margin: 1.2rem 0 .6rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.faq-group:first-of-type { margin-top: .4rem; }
/* Recent menus: responsive horizontal cards (max 4). Scrolls inside the
   card on narrow screens; never pushes the page horizontally. */
.recent-grid { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; margin: 0 0 .6rem; scroll-snap-type: x mandatory; }
.recent-card { flex: 0 0 min(240px, 78vw); scroll-snap-align: start; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; background: #fff; min-width: 0; }
.recent-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; overflow: hidden; }
.recent-logo img { width: 100%; height: 100%; object-fit: cover; }
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.recent-del { flex: none; }
.menu-demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.menu-demo-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.menu-demo-item .ph { border: none; border-radius: 0; }

/* ---------- Menu (customer) ---------- */
.shop-head { background: var(--ink); color: #fff; border-radius: 18px; padding: 1.8rem 1.4rem; text-align: center; margin-bottom: 1.2rem; }
.shop-head h1 { color: #fff; }
.shop-head .sub { color: rgba(255,255,255,.72); }
.shop-head .btn-light { margin-top: .8rem; }
.cat-nav { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem 0 1rem; position: sticky; top: var(--header-h); background: var(--bg); z-index: 5; }
.cat-nav a { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .3rem .95rem; font-size: .88rem; }
.dish { display: flex; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; align-items: center; }
.dish-list { display: grid; gap: .7rem; }
/* The row itself is a grid item: allow it to shrink so long product names
   wrap inside .grow instead of pushing qty controls past the viewport. */
.dish-list > * { min-width: 0; }
.dish .grow { flex: 1; min-width: 0; }
.dish .price { font-weight: 800; white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #fff; margin-top: auto; }
.site-footer .wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; color: var(--muted); font-size: .88rem; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .45s ease both; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .12s; } .rise-3 { animation-delay: .2s; }
.card.hoverable { transition: transform .16s ease, box-shadow .16s ease; }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn, .sidebar a, .nav-links a { transition: background .15s ease, color .15s ease, transform .1s ease; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Legacy aliases (old mc-* classes) ---------- */
.mc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.mc-auth-wrap { max-width: 460px; margin: 0 auto; width: 100%; }
.mc-field { margin-bottom: 1rem; }
.mc-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.mc-field input, .mc-field select, .mc-field textarea { display: block; width: 100%; font-family: inherit; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.mc-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mc-alert-success { background: var(--success-bg); color: #14532d; border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem; }
.mc-alert-error, .mc-error { background: var(--danger-bg); color: #7f1d1d; border-radius: 10px; padding: .7rem 1rem; }
.errorlist { list-style: none; margin: .45rem 0 0; padding: .55rem .8rem; background: var(--danger-bg); color: var(--danger); border-radius: 9px; }

.btn-lg { padding: .8rem 1.6rem; min-height: 50px; font-size: 1.02rem; border-radius: 12px; }

/* ---------- Modern homepage sections ---------- */
.hero-new { padding: 3rem 0 1.5rem; }
.hero-new h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.partner-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1rem; text-align: center; display: flex; flex-direction: column;
  gap: .35rem; align-items: center; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.partner-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.partner-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.article-body { line-height: 2; }
.article-body img { max-width: 100%; border-radius: 12px; }
.article-body h2, .article-body h3 { margin-top: 1.4rem; }
.article-body blockquote { border-inline-start: 3px solid var(--brand); margin: 1rem 0; padding: .4rem 1rem; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; }
.cta-final { background: linear-gradient(135deg, var(--ink), #33302c); color: #fff; border: none; }
.cta-final h2 { color: #fff; }
.cta-final .muted { color: rgba(255,255,255,.7); }

/* ---------- Theme carousel (homepage) ---------- */
.carousel-track {
  display: flex; gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .5rem;
  scroll-behavior: smooth;
}
.theme-card {
  flex: 0 0 min(260px, 78vw); scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; text-align: center;
}
.theme-card h3 { margin: .7rem 0 .5rem; }
.theme-card p { margin: 0; }
.theme-card:focus-within, .theme-card:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.theme-mock { border-radius: 10px; padding: .7rem; border: 1px solid var(--line); }
.theme-mock-head { height: 26px; border-radius: 6px; margin-bottom: .5rem; }
.theme-mock-row { height: 12px; border-radius: 6px; margin-bottom: .4rem; }
.theme-mock-row.short { width: 62%; }
.theme-mock-btn { height: 20px; border-radius: 999px; margin-top: .55rem; }
.carousel-nav { justify-content: center; }
/* Compact theme picker (functional, not a second phone gallery). The large
   phone mocks were removed to stop duplicating the #gallery showcase;
   theme choice + register destination are preserved. */
.theme-pick-card { flex-basis: min(220px, 72vw); }
.theme-swatches { display: flex; gap: .4rem; justify-content: center; margin-bottom: .2rem; }
.theme-swatches span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; }
/* Genuine miniature menu previews (phone-shaped, theme-accurate). */
.theme-preview-card { flex-basis: min(280px, 82vw); }
.theme-phone {
  border: 2px solid; border-radius: 22px; overflow: hidden;
  background: #fff; text-align: right;
  box-shadow: var(--shadow-sm);
}
.theme-phone-notch {
  width: 72px; height: 6px; border-radius: 999px;
  background: rgba(0,0,0,.18); margin: .45rem auto .2rem;
}
.theme-phone-head {
  margin: .2rem .55rem .5rem; border-radius: 12px;
  padding: .55rem .8rem; display: flex; flex-direction: column; gap: .1rem;
}
.theme-phone-head strong { font-size: .95rem; }
.theme-phone-head span { font-size: .72rem; opacity: .85; }
.theme-phone-cats { display: flex; gap: .3rem; padding: 0 .55rem .5rem; }
.theme-phone-cats span {
  font-size: .7rem; border: 1px solid; border-radius: 999px;
  padding: .1rem .55rem; white-space: nowrap;
}
.theme-phone-dish {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 .55rem .5rem; border-radius: 12px; padding: .45rem .55rem;
}
.theme-phone-dish img { width: 28px; height: 28px; flex: none; }
.theme-phone-dish-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.theme-phone-dish-info strong { font-size: .82rem; line-height: 1.5; }
.theme-phone-dish-info small { font-size: .7rem; opacity: .8; }
.theme-phone-add {
  color: #fff; font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* ---------- Modal (QR scanner) ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem;
}
.modal-box {
  position: relative; z-index: 2; width: min(440px, 94vw);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem 1.2rem;
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, .5); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .pricing, .feature-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .menu-demo { grid-template-columns: repeat(2, 1fr); }
  .partner-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar nav { flex-direction: row; overflow-x: auto; }
  .sidebar nav a { flex: none; }
  .nav-links { display: none; }
  button.menu-toggle { display: inline-flex; margin-inline-start: auto; }
  /* Left-side sheet: physical left edge; inner text stays RTL. */
  .nav-backdrop[hidden] { display: none; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(28, 25, 23, .45);
  }
  .nav-drawer {
    display: flex; flex-direction: column; gap: .15rem;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(300px, 84vw); z-index: 70;
    background: #fff; border-inline-end: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem 1.5rem; overflow-y: auto;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .22s ease, visibility .22s;
  }
  .nav-drawer.open { transform: translateX(0); visibility: visible; }
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: .7rem; margin-bottom: .5rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer a { display: block; padding: .6rem .4rem; color: var(--ink-2); border-radius: 8px; }
  .nav-drawer a:hover { background: var(--line-soft); text-decoration: none; }
  body.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
}
@media (max-width: 640px) {
  .page { padding: 1.1rem .9rem 2.2rem; }
  .grid-2, .grid-3, .grid-4, .pricing, .feature-grid, .steps { grid-template-columns: 1fr; }
  .qr-print { grid-template-columns: 1fr; }
  .menu-demo { grid-template-columns: 1fr; }
  .partner-grid, .article-grid { grid-template-columns: 1fr; }
  .hero-new { padding: 2rem 0 1rem; }
  .toolbar .btn { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  table.table { min-width: 520px; }
  .form-card { padding: 1.1rem; }
}

/* ---------- Platform appearance variants (staff-configured) ---------- */
.site-font-system { --font: 'Tahoma', 'Segoe UI', system-ui, sans-serif; }
.site-header-compact { --header-h: 52px; }
.site-header-compact .brand { font-size: 1rem; }
body.site-header-centered .site-header .wrap { justify-content: center; flex-wrap: wrap; height: auto; padding-top: .5rem; padding-bottom: .5rem; }
body.site-header-centered .site-header { height: auto; }
.platform-credit { color: var(--muted); font-size: .82rem; }
.platform-credit:hover { color: var(--brand-dark); }
.public-footer .platform-credit { color: inherit; }

/* ---------- QR print sheets ---------- */
.qr-print { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.qr-sheet { text-align: center; break-inside: avoid; }

/* ---------- Print (invoices) ---------- */
@media print {
  .site-header, .site-footer, .no-print, .sidebar, .breadcrumb, .toolbar { display: none !important; }
  body { background: #fff; }
  .page { max-width: 100%; padding: 0; }
  .card, .table-wrap { box-shadow: none; }
  .qr-print { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; top: -48px; inset-inline-start: 1rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 9px;
  transition: top .15s ease;
}
.skip-link:focus { top: .6rem; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- Footer (platform) ---------- */
.site-footer .wrap.foot-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1.5rem;
  align-items: start; text-align: right;
}
.foot-brand p { margin: .3rem 0 0; }
.foot-links h3 { font-size: .9rem; margin: 0 0 .5rem; color: var(--ink); }
.foot-links nav { display: flex; flex-direction: column; gap: .3rem; }
.foot-links a { color: var(--muted); font-size: .88rem; width: fit-content; }
.foot-links a:hover { color: var(--brand-dark); }
.foot-base {
  border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: .9rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between;
  color: var(--muted); font-size: .82rem;
}
@media (max-width: 640px) {
  .site-footer .wrap.foot-grid { grid-template-columns: 1fr; }
}

/* ---------- Public menu layout (customer-facing, no platform chrome) ---------- */
.public-body { background: var(--bg); }
.public-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.public-topbar .wrap {
  max-width: var(--maxw); margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: .8rem;
}
.public-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); min-width: 0; }
.public-brand:hover { text-decoration: none; }
.public-brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-topbar .spacer { flex: 1; }
.public-footer { text-align: center; padding: 1.6rem 1rem 2.4rem; color: var(--muted); font-size: .82rem; }
.cart-fab {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: .5rem 1.1rem; font-family: inherit; font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.cart-fab:hover { background: #000; color: #fff; text-decoration: none; }
.cart-fab .count {
  background: var(--brand); color: #fff; border-radius: 999px;
  min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; padding: 0 .3rem;
}

/* ---------- Dish add / quantity controls ---------- */
.dish-ctl { display: flex; align-items: center; gap: .5rem; flex: none; }
.qty-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: inherit; touch-action: manipulation;
}
.qty-btn:hover { border-color: var(--ink); }
.qty-btn.add { width: auto; border-radius: 999px; padding: .35rem 1rem; font-size: .88rem; font-weight: 700; background: var(--ink); color: #fff; border-color: var(--ink); }
.qty-btn.add:hover { background: #000; }
.qty-num { min-width: 26px; text-align: center; font-weight: 800; }

/* ---------- Sticky cart bar ---------- */
.cart-bar {
  position: sticky; bottom: 1rem; z-index: 30;
  background: var(--ink); color: #fff; border-radius: 16px;
  padding: .7rem 1rem; display: flex; align-items: center; gap: .8rem;
  box-shadow: var(--shadow); margin-top: 1.2rem;
}
.cart-bar .t { flex: 1; min-width: 0; }
.cart-bar .t strong { display: block; }
.cart-bar .t span { font-size: .82rem; opacity: .75; }
.cart-bar .btn-light { background: #fff; color: var(--ink); border: none; }
.cart-line { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.cart-line:last-child { border-bottom: none; }
.cart-line .grow { flex: 1; min-width: 0; }
/* Real cart page (journey: fill cart, open on a phone): with qty controls,
   a «حذف» button and a 56px thumbnail, the name+price column (flex:1 ->
   basis 0%) was starved to ~15px at <=~430px and every line collapsed
   into vertical word slivers. Wrapping to the second line happens only
   when the row really can't fit; single-line rows (390px+, short names)
   are unchanged. */
@media (max-width: 480px) {
  .cart-line { flex-wrap: wrap; }
  .cart-line .grow { flex: 1 1 auto; }
}
.cart-total { display: flex; justify-content: space-between; font-weight: 800; padding-top: .8rem; }

/* ============================================================
   Unified internal theme (Claude-inspired, homepage-matched).
   Scoped to body.internal (site chrome pages) and
   body.mp-home-page (standalone homepage base sections) so the
   six public menu themes (base_public, own --t-* tokens) and
   standalone mp-* components are never affected.
   Staff inline --brand/--bg/--surface overrides keep winning
   because inline styles beat this stylesheet.
   ============================================================ */
body.internal, body.mp-home-page {
  font-size: 1rem;
  --bg: #F9FAF4;
  --surface: #ffffff;
  --surface-2: #F4F9EC;
  --ink: #26331F;
  --ink-2: #4A5A44;
  --muted: #617259;
  --line: #E0E7D4;
  --line-soft: #EDF2E4;
  --brand: #6FC218;
  --brand-dark: #2E6817;
  --brand-ink: #FFFFFF;
  --brand-soft: #E9F6D8;
  /* Single-source tokens for the second (hover/deep) and accent degrees of
     lime, and for the large radius. dashboard.css consumes these same
     values via --db-* aliases (see dashboard.css token block) so both
     layers stay in sync without duplicating picklists. */
  --brand-hover: #82D330;   /* lime hover  (dashboard --db-saffron-soft). */
  --brand-strong: #4C8B12;  /* deep lime   (dashboard --db-saffron-deep; focus rings / shadows). */
  --forest-2: #3B8020;      /* deep-green hover   (dashboard --db-forest-2). */
  --radius: 18px;
  --radius-lg: 20px;        /* large surfaces: hero cards, dashboard --db-radius. */
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(46, 104, 23, .05), 0 6px 18px rgba(46, 104, 23, .07);
  --shadow-sm: 0 1px 2px rgba(46, 104, 23, .05);
}
/* Lime primary carries white text for contrast (both states). */
body.internal .btn-primary, body.mp-home-page .btn-primary { color: var(--brand-ink); }
/* Homepage button metrics for internal pages: pill, 700 weight, roomy
   padding, ghost/dark hovers and lifted primary like .mp-btn. */
body.internal .btn {
  border-radius: 999px; border-width: 1.5px;
  font-weight: 700; font-size: 1rem; line-height: 1.4;
  padding: .7em 1.5em; gap: .5em;
}
body.internal .btn-sm { padding: .5em 1.2em; font-size: .92rem; }
body.internal .btn-primary:hover, body.mp-home-page .btn-primary:hover {
  background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink);
  transform: translateY(-2px);
}
body.internal .btn-outline { border-color: var(--brand-dark); color: var(--brand-dark); }
body.internal .btn-outline:hover {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}
body.internal .btn-dark { background: var(--brand-dark); border-color: var(--brand-dark); }
body.internal .btn-dark:hover { background: var(--forest-2); border-color: var(--forest-2); transform: translateY(-2px); }
body.internal a:focus-visible, body.internal button:focus-visible,
body.internal input:focus-visible, body.internal select:focus-visible,
body.internal textarea:focus-visible, body.internal summary:focus-visible {
  /* Literal kept (equals --brand-strong) because the CSS contract test pins
     the exact declaration; see core.tests InternalThemeTest. */
  outline: 3px solid #4C8B12; outline-offset: 3px;
}
/* Shared form-control language for every internal page (auth, profile,
   articles, …): the same border weight, radius, padding and focus ring the
   dashboard applies in dashboard.css, so the whole product feels like one
   system. Values are intentionally identical to the dashboard block there;
   keep the two in sync (single token source: the internal theme above). */
body.internal .field input[type=text],
body.internal .field input[type=email],
body.internal .field input[type=password],
body.internal .field input[type=number],
body.internal .field input[type=tel],
body.internal .field input[type=url],
body.internal .field input[type=date],
body.internal .field input[type=datetime-local],
body.internal .field input[type=search],
body.internal .field select,
body.internal .field textarea {
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: .65rem .85rem;
}
body.internal .field input:focus,
body.internal .field select:focus,
body.internal .field textarea:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(111, 194, 24, .28);
  outline: none;
}
/* One accent for toggles everywhere: the dashboard used forest while other
   internal pages inherited the raw saffron --brand from theme selection. */
body.internal .check input, body.internal input[type=range] {
  accent-color: var(--brand-dark);
}
/* Deep-green brand mark with lime motif. */
body.internal .brand-mark, body.mp-home-page .brand-mark { background: #2E6817; }
body.internal .brand-mark i, body.mp-home-page .brand-mark i { color: #7DC91F; }

/* Forest headings/figures match the homepage display type. */
body.internal .page-head h1, body.mp-home-page .page-head h1 { color: var(--brand-dark); }
body.internal .stat .v { color: var(--brand-dark); }
body.internal .sidebar .side-title { font-weight: 700; }
/* Homepage button language for internal pages: pill shape, lifted hover,
   sized inline icons. (Dashboard buttons are aligned in dashboard.css.) */
body.internal .btn { border-radius: 999px; }
body.internal .btn svg { width: 1.15em; height: 1.15em; flex: none; }
body.internal .btn-primary:hover { transform: translateY(-2px); }
/* Homepage nav language: saffron underline instead of filled pill. */
body.internal .nav-links a {
  border-radius: 0; border-bottom: 2px solid transparent;
  padding-bottom: calc(.45rem - 2px);
}
body.internal .nav-links a:hover {
  background: transparent; color: var(--brand-dark);
  border-bottom-color: var(--brand); text-decoration: none;
}
body.internal .nav-links a.active {
  background: transparent; color: var(--brand-dark);
  border-bottom-color: var(--brand-dark);
}
/* Homepage footer language: underline hover with matching offset. */
body.internal .foot-links a:hover {
  color: var(--brand-dark); text-decoration: underline;
  text-underline-offset: 4px;
}
body.internal .foot-links a { font-weight: 500; }
body.internal .site-footer { background: transparent; }
/* Homepage header language: airy greenish-paper blur, larger deep mark. */
body.internal .site-header {
  background: rgba(249, 250, 244, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.internal .brand { font-size: 1.2rem; }
body.internal .brand-svg { width: 38px; height: 38px; flex: none; }
/* Homepage display type for the internal wordmark (staff system-font
   choice wins: Lalezar never overrides an explicit accessibility pick). */
body.internal:not(.site-font-system) .brand > span:last-child {
  font-family: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  font-weight: 400; font-size: 1.4rem; line-height: 1;
}
/* Homepage drawer language: roomy paper sheet, large divided links. */
body.internal .nav-drawer {
  width: min(86vw, 340px);
  padding: 18px 20px 24px;
  background: var(--bg);
  box-shadow: 24px 0 60px -20px rgba(10, 36, 30, .5);
}
body.internal .drawer-head { margin-bottom: 18px; padding-bottom: 0; border-bottom: none; }
body.internal .nav-drawer a {
  padding: 15px 4px; font-size: 1.12rem; font-weight: 500;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
body.internal .nav-drawer a:hover { background: transparent; color: var(--brand-dark); }
@media (max-width: 860px) {
  /* Homepage hamburger language: 44px outlined box, three forest bars. */
  body.internal button.menu-toggle {
    width: 44px; height: 44px; min-height: 0; padding: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: 1.5px solid rgba(46, 104, 23, .18); border-radius: 14px;
    background: #fff; color: var(--brand-dark);
  }
  body.internal button.menu-toggle span {
    display: block; width: 20px; height: 2px;
    background: var(--brand-dark); border-radius: 2px;
  }
}
@media (max-width: 380px) {
  body.internal:not(.site-font-system) .brand > span:last-child { font-size: 1.1rem; }
}

/* ---- Subscription gate: public menu blurred when unsubscribed ---- */
/* Fixed full-page overlay must ignore any ancestor stacking context, so it
   is placed as a direct body child (base_public.html) with explicit edges
   (no `inset` shorthand: older browsers would leave it in flow, below the
   menu) and a stack level above every sticky theme element. */
body.menu-locked { overflow: hidden; }
.menu-disabled-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
}
.menu-disabled-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  max-width: 460px; text-align: center;
  padding: 1.8rem 2rem;
  background: #fff; color: var(--ink, #1f2937);
  border-radius: 18px;
  cursor: default;
  -webkit-user-select: text;
  user-select: text;
  box-shadow: 0 18px 50px -12px rgba(15, 23, 42, .45);
}
.menu-disabled-title { font-weight: 900; font-size: 1.25rem; line-height: 1.8; }
.menu-disabled-sub { font-size: .95rem; color: var(--ink-2, #57534e); }
@media print {
  body.menu-locked { overflow: auto; }
  .menu-disabled-overlay { display: none; }
}