/* Brand («propaganda») colour: ONE variable, --ah-brand, defined in theme_afghan_house/static/src/css/theme.css.
   The fallback below is only used when the site theme is not loaded. */
#maida,.so-root{--accent:var(--ah-brand,#F13D3D);--accent-2:color-mix(in srgb,var(--accent) 88%,#000);--accent-3:color-mix(in srgb,var(--accent) 76%,#000);--gold:#E9B949;--hdr:56px;--cat:150px}
[data-theme=night] #maida,[data-theme=night] .so-root{
  --bg:#110C0A;--bg-glow:radial-gradient(120% 60% at 50% 0%,#3a2318 0%,#1a110d 45%,#110C0A 100%);
  --hdr-bg:rgba(17,12,10,.92);--text:#F4EEE9;--muted:#A3968C;--line:rgba(255,255,255,.08);
  --card:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));--card-sh:0 10px 26px rgba(0,0,0,.35);
  --tile:#1F1612;--pill:#1C1411;--pill-b:rgba(255,255,255,.12);--price:var(--gold);--vignette:radial-gradient(closest-side,rgba(242,84,91,.10),rgba(0,0,0,0));
  --modal:#0D0907;--glass-text:#fff;--glass-bg:linear-gradient(135deg,rgba(242,84,91,.34),rgba(194,52,60,.22));--glass-b:rgba(255,190,190,.35);
  --sec:#191210;--stage:radial-gradient(70% 55% at 50% 35%,rgba(242,84,91,.16),rgba(0,0,0,0) 70%),#0D0907;
}
#maida,.so-root{
  --bg:#F2F5F9;--bg-glow:linear-gradient(180deg,#F7F9FC 0%,#EEF2F7 100%);
  --hdr-bg:rgba(242,245,249,.92);--text:#24272E;--muted:#6A7180;--line:rgba(36,39,46,.08);
  --card:#F9FBFD;--card-sh:6px 6px 14px rgba(150,166,190,.32),-6px -6px 14px rgba(255,255,255,.95);
  --tile:#FFFFFF;--pill:#F9FBFD;--pill-b:rgba(36,39,46,.1);--price:var(--accent-3);--vignette:radial-gradient(closest-side,rgba(242,84,91,.10),rgba(255,255,255,0));
  --modal:#F2F5F9;--glass-text:#2a1214;--glass-bg:linear-gradient(135deg,rgba(255,170,170,.46),rgba(242,84,91,.28));--glass-b:rgba(255,255,255,.7);
  --sec:#F9FBFD;--stage:radial-gradient(60% 50% at 50% 35%,rgba(242,84,91,.12),rgba(242,84,91,0) 70%),linear-gradient(180deg,#F9FBFD,#EBF0F5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#F2F5F9;color:#24272E;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;font-size:14px}
[data-theme=night] body{background:#110C0A;color:#F4EEE9}
#maida{background:var(--bg-glow) fixed,var(--bg);color:var(--text);min-height:100vh}
button{font-family:inherit;color:inherit}
.app{max-width:520px;margin:0 auto;padding-bottom:96px}
/* header */
.hdr{position:sticky;top:var(--site-h,0px);z-index:30;height:var(--hdr);display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--hdr-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hdr .brand{display:flex;align-items:center;gap:8px;min-width:0}
.hdr .brand img{width:38px;height:30px;object-fit:contain;background:#fff;border-radius:8px;padding:2px}
.hdr .brand b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pills{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.pill{height:30px;border-radius:999px;border:1px solid var(--pill-b);background:var(--pill);display:flex;align-items:center;gap:5px;padding:0 10px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.tbl{color:var(--gold);border-color:rgba(233,185,73,.35)}
.seg{padding:2px;gap:0}
.seg button{border:0;background:transparent;height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button.on{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff}
/* categories */
.cats{position:sticky;top:calc(var(--site-h,0px) + var(--hdr));z-index:25;height:var(--cat);background:var(--hdr-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cats-scroll{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;height:100%;align-items:center;padding:0 8px 0 44px;scroll-behavior:smooth}
[dir=ltr] .cats-scroll{padding:0 44px 0 8px}
.cats-scroll::-webkit-scrollbar{display:none}
.chip{flex:none;width:90px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:6px 0}
.chip .t{width:58px;height:58px;border-radius:14px;background:var(--tile);display:grid;place-items:center;overflow:hidden;border:1.5px solid transparent;transition:background .25s,border-color .25s,transform .25s}
.chip .t img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.chip span{font-size:11px;color:var(--muted);max-width:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.on .t{background:linear-gradient(145deg,var(--accent),var(--accent-3));border-color:rgba(255,200,200,.55);transform:translateY(-1px)}
.chip.on span{color:var(--accent);font-weight:700}
.more{position:absolute;top:50%;translate:0 -50%;inset-inline-end:8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--pill-b);background:var(--pill);cursor:pointer;font-size:15px;display:grid;place-items:center;z-index:2}
/* grid */
.gridwrap{position:relative;min-height:60vh;padding:14px 16px 0}
.sec-title{font-size:15px;font-weight:700;margin:2px 2px 12px;display:flex;align-items:center;gap:8px}
.sec-title small{font-weight:500;color:var(--muted);font-size:11.5px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.card{position:relative;border-radius:24px;background:var(--card);box-shadow:var(--card-sh);padding:8px 8px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(14px);animation:cardIn .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cardIn{to{opacity:1;transform:none}}
.card .im{width:100%;aspect-ratio:1.2/1;display:grid;place-items:center;background:var(--vignette);border-radius:18px}
.card .im img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));transition:transform .35s}
.card:active .im img{transform:scale(.96)}
.card h3{font-size:13px;line-height:1.45;margin:8px 4px 2px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.price{color:var(--price);font-weight:700;font-size:12.5px}
.price small{display:block;font-size:9.5px;font-weight:500;color:var(--muted)}
.plus{position:absolute;bottom:10px;inset-inline-end:10px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--price);color:var(--price);background:transparent;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer}
.card .price{margin-bottom:22px}
.spin{position:absolute;inset:0;display:none;place-items:start center;padding-top:22vh}
.spin.on{display:grid}
.spin i{width:42px;height:42px;border-radius:50%;border:3.5px solid rgba(242,84,91,.18);border-top-color:var(--accent);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* bottom pills */
.dock{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:flex;gap:10px;z-index:40}
.dock button{white-space:nowrap;height:44px;border-radius:999px;border:1px solid var(--pill-b);background:var(--hdr-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:0 18px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.dock svg{color:var(--accent)}
.toast{position:fixed;bottom:84px;left:50%;translate:-50% 20px;background:#2b1f1a;color:#fff;padding:10px 16px;border-radius:14px;font-size:12.5px;opacity:0;pointer-events:none;transition:.3s;z-index:80;box-shadow:0 10px 24px rgba(0,0,0,.35);max-width:86vw;text-align:center}
:root:not([data-theme=night]) .toast{background:#24272E}
.toast.on{opacity:1;translate:-50% 0}
/* sidebar (desktop) */
.side{display:none}
@media(min-width:1000px){
  body{display:block}
  .layout{display:flex;align-items:flex-start;max-width:1440px;margin:0 auto}
  .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:var(--site-h,0px);height:calc(100vh - var(--site-h,0px));width:270px;flex:none;padding:20px 16px;border-inline-end:1px solid var(--line);overflow:auto;scrollbar-width:thin}
  .side .logo{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
  .side .logo img{width:120px;background:#fff;border-radius:16px;padding:6px}
  .side .logo b{font-size:17px}.side .logo small{color:var(--accent);font-size:12px}
  .side .row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
  .vcats{display:flex;flex-direction:column;gap:4px;margin-top:6px}
  .vcat{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:6px 8px;border-radius:14px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);text-align:start}
  .vcat img{width:40px;height:40px;object-fit:contain;background:var(--tile);border-radius:11px;padding:2px}
  .vcat.on{background:linear-gradient(135deg,rgba(242,84,91,.22),rgba(194,52,60,.12));color:var(--accent)}
  .vcat .n{margin-inline-start:auto;font-size:11px;color:var(--muted)}
  .app{max-width:none;flex:1;min-width:0}
  .hdr,.cats{display:none}
  .gridwrap{padding:24px 28px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
  .dock{left:auto;inset-inline-end:28px;translate:none}
}
/* modal */
.modal{position:fixed;inset:0;z-index:60;display:none}
.modal.on{display:block}
.modal .dim{position:absolute;inset:0;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.modal.show .dim{opacity:1}
.sheet{position:absolute;inset:0;margin:0 auto;max-width:520px;background:var(--modal);display:flex;flex-direction:column;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.modal.show .sheet{opacity:1;transform:none}
@media(min-width:1000px){.sheet{inset:3vh 0;max-width:1180px;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .mgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:6px;align-items:start}
  .mcolA{position:sticky;top:0}
  .mhead h2{font-size:20px}}
.mcolB{padding:0 4px}
.mhead{position:relative;padding:16px 56px 8px;text-align:center}
.mhead h2{margin:0;font-size:17px;font-weight:700;line-height:1.4}
.mhead .cl{font-size:11.5px;color:var(--accent);font-weight:600}
.x{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--pill-b);background:var(--pill);font-size:18px;cursor:pointer;display:grid;place-items:center}
.mbody{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:16px}
#stage3d{position:relative;margin:4px 10px 0;border-radius:24px;overflow:hidden;background:var(--stage);touch-action:none}
#stage3d::before{content:"";position:absolute;inset-inline:0;bottom:0;top:var(--cardTop,58%);border-radius:24px 24px 0 0;background:var(--sec);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.18)}
#stage3d canvas{position:relative;z-index:1}
#stage3d canvas{display:block;width:100%;height:100%;outline:none;opacity:0;transition:opacity .5s}
#stage3d.ready canvas{opacity:1}
#stage3d .ph{z-index:1;position:absolute;left:50%;translate:-50% 0;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));transition:opacity .45s;pointer-events:none}
#stage3d.ready .ph{opacity:0}
.ov{position:absolute;inset:0;pointer-events:none;z-index:2}
.ov svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dot{fill:#fff;stroke:var(--accent-3);stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,255,255,.95))}
.dot-ring{fill:none;stroke:#fff;stroke-width:1.5}
:root:not([data-theme=night]) .lead{stroke:#C2343C;filter:none}:root:not([data-theme=night]) .dot-ring{stroke:#E2434B}
.lead{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:5 4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1.5px rgba(194,52,60,.95))}
.panel{position:absolute;top:0;left:0;width:var(--pw,130px);padding:6px 12px;border-radius:16px;color:var(--glass-text);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-b);
  box-shadow:0 8px 22px rgba(194,52,60,.22),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;scale:.88;transition:opacity .35s,scale .35s}
.panel.on{opacity:1;scale:1}
.panel h4{margin:0;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .kcal{white-space:nowrap;font-size:14px;font-weight:700;color:var(--gold);line-height:1.25}
:root:not([data-theme=night]) .panel .kcal{color:var(--accent-3)}
.panel .kcal small{font-size:10.5px;font-weight:500;opacity:.8}
.panel .macros{font-size:10.5px;opacity:.85;margin-top:1px}
.panel .fact{margin-top:3px;font-size:10.5px;opacity:.85;line-height:1.45}
.mob .panel{padding:5px 10px;border-radius:14px}
.panel .hd{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mob .panel h4{font-size:11.5px}.mob .panel .kcal{font-size:13px}
.mob .panel .fact{display:none}
.mob .panel .macros{font-size:9.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{position:absolute;z-index:3;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:8px;z-index:2}
.tools button{width:34px;height:34px;border-radius:50%;border:1px solid var(--pill-b);background:var(--pill);cursor:pointer;font-size:14px}
.hint{position:absolute;z-index:3;top:12px;left:50%;translate:-50% 0;font-size:10.5px;color:var(--muted);background:var(--pill);padding:3px 10px;border-radius:999px;white-space:nowrap;transition:opacity .6s;z-index:2;border:1px solid var(--pill-b)}
.desc{padding:6px 14px 4px;color:var(--muted);font-size:12.5px;line-height:1.7}
.blk{margin:12px 14px 0}
.blk h5{margin:0 0 8px;font-size:12px;letter-spacing:.3px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}
.blk h5 small{font-weight:500;color:var(--accent);font-size:10.5px}
.ntiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 10px 0}
.nt{border-radius:16px;padding:9px 6px 8px;text-align:center;border:1.5px solid var(--line);background:var(--sec)}
.nt:first-child{background:linear-gradient(145deg,var(--accent),var(--accent-3));border-color:transparent;color:#fff}
.nt .e{font-size:16px;line-height:1}.nt b{display:block;font-size:16px;margin-top:4px}.nt span{font-size:10.5px;opacity:.8}
.nt:first-child span{opacity:.9}
.ilist{display:flex;flex-direction:column;gap:2px;background:var(--sec);border:1px solid var(--line);border-radius:18px;padding:6px}
.irow{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:12px}
.irow+.irow{border-top:1px dashed var(--line)}
.irow .em{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:18px;background:rgba(242,84,91,.12)}
.irow .nm{flex:1;min-width:0;font-size:13px;font-weight:600}
.irow .nm small{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.irow .kc{font-size:12px;font-weight:700;color:var(--price);white-space:nowrap}
.opts{display:flex;gap:8px}
.opt{flex:1;border:1.5px solid var(--pill-b);background:var(--pill);border-radius:999px;padding:8px 10px;font-size:12.5px;font-weight:600;cursor:pointer}
.opt.on{border-color:var(--accent);background:rgba(242,84,91,.14);color:var(--accent)}
.adds{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.add{flex:1 0 104px;border-radius:18px;padding:10px 8px;text-align:center;background:var(--sec);border:1px solid var(--line)}
.add .em{font-size:26px;line-height:1.2}.add b{display:block;font-size:12px;margin:4px 0 1px}.add small{font-size:10px;color:var(--muted)}
.qty{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px}
.qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--pill-b);background:var(--pill);cursor:pointer;font-size:14px;line-height:1}
.qty button:last-child{background:var(--accent);border-color:var(--accent);color:#fff}
.qty span{min-width:12px;font-weight:700;font-size:13px}
.tot{font-size:11px;color:var(--muted);padding:6px 14px 0;text-align:center}
details{margin:8px 14px 0;background:var(--sec);border:1px solid var(--line);border-radius:18px;overflow:hidden}
summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:700;font-size:13.5px;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(242,84,91,.14);color:var(--accent)}
summary .ch{margin-inline-start:auto;transition:transform .25s;color:var(--muted)}
details[open] summary .ch{transform:rotate(180deg)}
.dc{padding:0 14px 14px}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--pill);border:1px solid var(--pill-b);font-size:12.5px;font-weight:500}
.chip2 svg{color:var(--accent)}
.chip2.now{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff;border-color:transparent}.chip2.now svg{color:#fff}
.warn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;margin-bottom:8px;font-size:12.5px;line-height:1.6}
.warn b{display:block;font-size:13px}
[data-theme=night] .warn.red{background:rgba(226,67,75,.14)}[data-theme=night] .warn.amber{background:rgba(224,162,27,.13)}[data-theme=night] .warn.info{background:rgba(61,180,138,.12)}
:root:not([data-theme=night]) .warn.red{background:#FFF0F0}:root:not([data-theme=night]) .warn.amber{background:#FFF8E6}:root:not([data-theme=night]) .warn.info{background:#EEF7F3}
.warn.red{border-inline-start:4px solid #E2434B}.warn.red svg{color:#FF6B6B}
.warn.amber{border-inline-start:4px solid #E0A21B}.warn.amber svg{color:#E0A21B}
.warn.info{border-inline-start:4px solid #3DB48A}.warn.info svg{color:#3DB48A}
.warn svg{flex:none;margin-top:2px}
.note{font-size:11px;color:var(--muted);line-height:1.7;padding:10px 18px 0}
.cta{padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--modal)}
.cta button{width:100%;border:0;border-radius:18px;padding:12px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent-3) 100%);color:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(242,84,91,.35);display:flex;flex-direction:column;align-items:center;gap:2px}
.cta b{font-size:15px;display:flex;align-items:center;gap:8px}.cta small{font-size:11.5px;opacity:.9}

/* order tracking bar (guest's open order on this table) — Bashar item 12, 2026-10-14 */
#maida .md-trackbar{position:fixed;inset-inline:12px;bottom:76px;z-index:30}
#maida .md-trackbar button{width:100%;display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:14px;
  background:var(--accent);color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18)}
#maida .md-trackbar span{opacity:.9;font-weight:600}
#maida .md-trackbar em{margin-inline-start:auto;font-style:normal;text-decoration:underline}
#maida .md-status{font-weight:700}
/* ---- Bashar notes 2026-10-14: larger pictures (first design), clearer BOLD section names, brand title ---- */
#maida .chip{width:108px;gap:7px}
#maida .chip .t{width:84px;height:84px;border-radius:18px}
#maida .chip .t img{width:80px;height:80px;object-fit:contain}
#maida .chip span{font-size:13px;font-weight:800;color:var(--text);max-width:104px;letter-spacing:0}
#maida .chip.on span{color:var(--accent);font-weight:800}
#maida .vcat{font-weight:800}
#maida .card .im{aspect-ratio:1/1}
#maida .card .im img{width:100%;height:100%}
/* ---- owner rule 2026-10-16: the dish is never clipped by the card frame ----
   fixed square frame with inner padding, the photo is contained (never cropped), no overflow clipping,
   the press effect only shrinks (scale <= 1) and the drop shadow stays inside the padding */
#maida .card .im{aspect-ratio:1/1;padding:6%;box-sizing:border-box;overflow:visible;min-width:0;min-height:0}
#maida .card .im img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));transform-origin:center}
#maida .card:active .im img{transform:scale(.97)}
#maida .card h3{font-size:14px;font-weight:800}
#maida .hdr .brand b,#maida .side .logo b{color:var(--accent);font-weight:800;font-size:16px}
#maida .sec-title{color:var(--accent);font-weight:800;font-size:17px}
#maida .md-sub{grid-column:1/-1;margin:10px 2px 0;font-size:15px;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:8px;border-bottom:2px solid color-mix(in srgb,var(--accent) 25%,transparent);padding-bottom:6px}
#maida .md-sub small{font-weight:600;color:var(--muted);font-size:11.5px}