/* ADMH-Future Menu — design system (app-design).
   Original CSS/SVG-free graphics only: gradients, patterns and shapes.
   Arabic-first, RTL/LTR-safe: logical properties (inline-start/end) throughout,
   so the same stylesheet works in ar/rtl and en/ltr without mirrored hacks. */
*{box-sizing:border-box}
:root{
  --bg:#faf5ec; --bg-soft:#f3ead9; --card:#ffffff; --card-2:#fffaf0;
  --ink:#221a12; --muted:#6b5f52; --muted-2:#8a7d6e;
  --line:#e8ddc9; --line-strong:#d8c9a8;
  --accent:#92400e; --accent-2:#0c4a6e; --accent-text:#ffffff;
  --wa:#1c7a4e; --wa-text:#ffffff; --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --radius:16px; --radius-lg:24px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(34,26,18,.06),0 2px 8px rgba(34,26,18,.05);
  --shadow:0 10px 30px rgba(34,26,18,.12);
  --shadow-lg:0 24px 60px rgba(34,26,18,.18);
  --space:8px;
  --font:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(640px 320px at 85% -40px,rgba(180,83,9,.12),transparent 60%),
  radial-gradient(520px 300px at -10% 20%,rgba(12,74,110,.08),transparent 60%)}
a{color:var(--accent-2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---- Topbar: sticky, calm, one clear action ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(26,20,14,.96);color:#fff;flex-wrap:wrap;box-shadow:0 2px 16px rgba(0,0,0,.18);backdrop-filter:blur(8px)}
.topbar a{color:#fff;text-decoration:none}
.logo{font-weight:900;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.logo::before{content:"";width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#f59e0b,#b45309 55%,#7c2d12),
  repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.35) 4px 6px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.topnav{display:flex;gap:6px;flex-wrap:wrap}
.topnav a{padding:7px 12px;border-radius:999px}
.topnav a:hover{background:rgba(255,255,255,.14)}
.topactions{display:flex;gap:10px;align-items:center}
button,.btn{border:0;border-radius:12px;padding:11px 18px;background:var(--accent);color:var(--accent-text);cursor:pointer;font-size:15px;font-weight:700;text-decoration:none;display:inline-block;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;box-shadow:var(--shadow-sm)}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
button:active,.btn:active{transform:translateY(0)}
button.secondary,.btn.secondary{background:#efe7d8;color:var(--ink);box-shadow:none}
button.secondary:hover,.btn.secondary:hover{background:#e5d9c0}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.danger{background:var(--bad)}
.btn-lg{padding:14px 24px;font-size:17px;border-radius:14px}
.btn-wa,.cartbar .btn-wa{background:var(--wa);color:var(--wa-text)}
#langBtn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
#userChip{font-size:13px;color:#fde68a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Layout / cards ---- */
main{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:24px 20px 120px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin:18px 0;box-shadow:var(--shadow-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.25;margin:.2em 0 .3em;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.3;margin:.2em 0 .4em}
h3{font-size:1.15rem;line-height:1.4;margin:.2em 0 .4em}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:13px}
.badge{display:inline-block;padding:3px 12px;border-radius:999px;background:#dcfce7;font-size:13px;font-weight:700}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.bad{background:#fee2e2;color:#991b1b}
.alert{border:1px solid #fbbf24;background:#fffbeb;border-radius:14px;padding:14px 16px;margin:14px 0}
.error{border:1px solid #fca5a5;background:#fef2f2;border-radius:14px;padding:14px 16px;margin:12px 0}
.success{border:1px solid #86efac;background:#f0fdf4;border-radius:14px;padding:14px 16px;margin:12px 0}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:12px;margin:6px 0 14px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid rgba(146,64,14,.18)}
label{font-weight:700;font-size:14px}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:start}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tabs button{background:#efe7d8;color:var(--ink);box-shadow:none}
.tabs button.active{background:var(--accent);color:#fff}

/* ---- Hero: outcome first, appetite second ---- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:28px 4px 8px;animation:rise .45s ease both}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted);max-width:56ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 12px}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:600}
.trust-row span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.hero-visual{display:flex;justify-content:center}
.menu-mock{width:min(320px,86vw);background:#1f2937;color:#fff;border-radius:28px;padding:20px 18px 18px;box-shadow:var(--shadow-lg);transform:rotate(1.5deg);position:relative}
.menu-mock::after{content:"";position:absolute;inset-inline-start:14px;bottom:-14px;width:70%;height:18px;background:rgba(0,0,0,.18);filter:blur(10px);border-radius:50%}
.mock-head{display:flex;align-items:center;gap:10px;font-weight:900}
.mock-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#dc2626)}
.mock-cat{height:10px;width:55%;background:rgba(255,255,255,.28);border-radius:99px;margin:18px 0 12px}
.mock-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.25)}
.mock-dish{height:10px;width:58%;background:rgba(255,255,255,.75);border-radius:99px}
.mock-price{height:10px;width:22%;background:#fbbf24;border-radius:99px}
.mock-qr{width:64px;height:64px;margin:16px auto 0;border-radius:12px;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,#fff 0 6px,transparent 6px 10px);background-color:#111827;outline:4px solid #fff}

/* ---- Pricing: yearly saving unmissable ---- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.price-card{border:1.5px solid var(--line);border-radius:20px;padding:20px;background:var(--card-2);position:relative}
.price-card.featured{border-color:var(--accent);background:#fff7ed;box-shadow:var(--shadow)}
.save-badge{position:absolute;top:-12px;inset-inline-start:16px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px}
.price-big{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:900;line-height:1.1;margin:6px 0 2px}
.price-big span{font-size:.55em;color:var(--muted)}
.price-big.yearly{margin-top:14px}

/* ---- Template showcase: 10 identities as CSS cards, no screenshots ---- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:16px}
.tpl-card{border:1px solid var(--line);border-radius:18px;padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.tpl-card h3{margin:10px 0 0}
.tpl-card p{margin:0;color:inherit;opacity:.75;font-size:14px}
.tpl-mock{height:64px;border-radius:12px;background:rgba(255,255,255,.55);padding:10px;display:flex;flex-direction:column;gap:6px;position:relative}
.tpl-dish{width:34px;height:34px;border-radius:50%;background:currentColor;opacity:.85}
.tpl-line{height:7px;width:70%;background:currentColor;opacity:.35;border-radius:99px}
.tpl-line.short{width:45%}
.tpl-price{position:absolute;bottom:10px;inset-inline-end:10px;width:26px;height:12px;border-radius:99px;background:currentColor}
.tpl-card[data-template="dijla"]{background:#eef4f8;color:#0c4a6e}
.tpl-card[data-template="baghdad-gold"]{background:#171310;color:#c9a227}
.tpl-card[data-template="souq"]{background:#fdf3e3;color:#b45309}
.tpl-card[data-template="palm"]{background:#eef7ee;color:#15803d}
.tpl-card[data-template="flame-grill"]{background:#fff1f0;color:#dc2626}
.tpl-card[data-template="cafe-cream"]{background:#faf3e7;color:#92400e}
.tpl-card[data-template="pure-white"]{background:#fff;color:#111827;border-color:#e5e7eb}
.tpl-card[data-template="neon-night"]{background:#0b0b12;color:#a855f7}
.tpl-card[data-template="garden"]{background:#f0fdf4;color:#16a34a}
.tpl-card[data-template="marble-royal"]{background:#f8f7f2;color:#b9975b}

/* ---- How it works: a restaurant story, not a manual ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.step{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--card-2)}
.step-no{font-size:2rem;font-weight:900;color:var(--accent);opacity:.35;line-height:1}

/* ---- Dashboard: calm, status first ---- */
.dash-head{border-top:6px solid var(--accent)}
.pub-steps{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pub-step{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:#efe7d8;color:var(--muted)}
.pub-step.done{background:#dcfce7;color:#166534}
.pub-step.todo{background:#fef3c7;color:#92400e}

/* ---- Public shop: food first, phone in one hand, weak light ---- */
.shop-theme{--bg:#eef4f8;--card:#fff;--text:#111827;--muted:#5b5148;--accent:#0c4a6e;--accent-text:#fff;--border:#e5e7eb;background:var(--bg);color:var(--text);border-radius:20px;padding:18px}
.shop-theme[data-template="dijla"]{--bg:#eef4f8;--card:#fff;--accent:#0c4a6e}
.shop-theme[data-template="baghdad-gold"]{--bg:#171310;--card:#241d16;--text:#f5ead0;--muted:#cbbf9a;--accent:#c9a227;--accent-text:#171310;--border:#3a2f22}
.shop-theme[data-template="souq"]{--bg:#fdf3e3;--card:#fffaf0;--accent:#b45309}
.shop-theme[data-template="palm"]{--bg:#eef7ee;--card:#fff;--accent:#15803d}
.shop-theme[data-template="flame-grill"]{--bg:#fff1f0;--card:#fff;--accent:#dc2626}
.shop-theme[data-template="cafe-cream"]{--bg:#faf3e7;--card:#fffdf7;--accent:#92400e;--radius:20px}
.shop-theme[data-template="pure-white"]{--bg:#fff;--card:#fff;--accent:#111827}
.shop-theme[data-template="neon-night"]{--bg:#0b0b12;--card:#171724;--text:#f8fafc;--muted:#a1a1aa;--accent:#a855f7;--border:#2a2a3a}
.shop-theme[data-template="garden"]{--bg:#f0fdf4;--card:#fff;--accent:#16a34a}
.shop-theme[data-template="marble-royal"]{--bg:#f8f7f2;--card:#fff;--accent:#b9975b;--accent-text:#1f2937}
.shop-page{padding-bottom:110px}
.shop-hero{padding:10px 4px 16px}
.shop-hero h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.shop-theme input{background:var(--card);color:var(--text);border-color:var(--border)}
.shop-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:12px 0}
.dish-card{padding:18px}
.dish-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dish-name{font-size:1.25rem;line-height:1.4}
.dish-price{font-size:1.3rem;font-weight:900;color:var(--accent);white-space:nowrap}
.dish-desc{margin:6px 0 12px}
.dish-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-add{background:var(--accent);color:var(--accent-text);min-height:48px;padding:12px 20px;font-size:16px}
.shop-card .price{color:var(--accent);font-weight:800}
.sticky-cats{position:sticky;top:64px;background:var(--bg);padding:12px 0;display:flex;gap:8px;overflow-x:auto;z-index:5;scrollbar-width:none}
.sticky-cats::-webkit-scrollbar{display:none}
.sticky-cats button{background:var(--card);color:var(--text);border:1px solid var(--border);white-space:nowrap;box-shadow:none}
.sticky-cats button.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
#shopSearch{position:sticky;top:0;z-index:6;background:var(--card);box-shadow:var(--shadow-sm)}
.cartbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(920px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line-strong);border-radius:18px;padding:14px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow-lg);z-index:45;animation:cartpop .3s ease}
.cartbar button{background:var(--wa);color:var(--wa-text);min-height:50px;padding:13px 22px;font-size:17px}
.modal{position:fixed;inset:0;background:rgba(20,14,8,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-box{background:#fff;color:#111827;border-radius:20px;padding:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:rise .25s ease both}
.footer{position:relative;z-index:1;max-width:1060px;margin:20px auto;padding:0 20px 30px;color:var(--muted)}
.qrbox{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cartpop{from{transform:translateX(-50%) scale(.97)}to{transform:translateX(-50%) scale(1)}}
@media(max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:12px}
  .hero-visual{display:none}
  .price-grid,.steps{grid-template-columns:1fr}
  .topbar{padding:10px 14px;position:static}
  .topnav{order:3;width:100%}
  main{padding:16px 14px 130px}
  .card{padding:18px 16px}
  .sticky-cats{top:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Phase 2: allergen chips, filters, quality, print ---- */
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:#f3ead9;border:1px solid var(--line-strong);font-size:13px;font-weight:700;margin:2px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.filter-row select{width:auto;flex:1;min-width:180px;margin:0}
.quality-bar{height:12px;background:#efe7d8;border-radius:999px;overflow:hidden;margin:8px 0}
.quality-bar span{display:block;height:100%;background:var(--accent)}
.print-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
@media print{
  .topbar,.cartbar,.sticky-cats,.no-print,#shopSearch{display:none!important}
  main{max-width:210mm;padding:0}
  .card,.shop-theme{box-shadow:none;border:0}
  body{background:#fff}
}

/* Phase 3 additions: quantity selector and operations cards reuse .card/.shop-card. */
.qty-row { display: flex; align-items: center; gap: 8px; }