/* The order list: + on dishes, the bottom bar summary, the sheet, the waiter screen, the budget meal. */

/* ---------- + on each dish ---------- */
.tcell, .acell { position: relative; }
.addslot { position: absolute; inset-inline-end: -6px; bottom: -6px; z-index: 2; }
.acell .addslot { inset-inline-end: 8px; bottom: 8px; }
.oplus { width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--nile); background: var(--burg); color: var(--deco);
  display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 3px 10px rgba(4,11,21,.45); }
.oplus svg, .ostep svg, .obtn svg, .osug i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.oplus.on { background: var(--deco); color: var(--burg); }
.oplus b { font: 700 16px/1 var(--mono); }
.oplus:active { transform: scale(.94); }
.ostep { display: inline-flex; align-items: center; background: var(--deco); color: var(--burg); border-radius: 999px; border: 2px solid var(--nile);
  box-shadow: 0 3px 10px rgba(4,11,21,.45); height: 44px; }
.ostep button { width: 38px; height: 40px; border: 0; background: none; color: inherit; font: 700 22px/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.ostep b { min-width: 18px; text-align: center; font: 700 15px/1 var(--mono); }
.os-panel .ostep { box-shadow: none; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream); height: 40px; }
.os-panel .ostep button { width: 36px; height: 38px; }

/* ---------- lightbox: add button ---------- */
.lb-buy { margin-top: 14px; display: grid; gap: 10px; }
/* In the photo view, once the dish is in the order: a plain "Added / My order" row with its count, and the order with its total */
.lb-have { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-2); }
.lb-have.just { border-color: var(--lit); animation: lb-pop .45s ease-out; }
.lb-ok { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--cream); color: var(--nile); font: 700 16px/1 var(--body); }
.lb-have.just .lb-ok { background: var(--lit); color: var(--deco); }
.lb-have-t { flex: 1; min-width: 0; color: var(--deco); font: 700 15px/1.2 var(--body); }
.lb-have .ostep { margin-inline-start: auto; }
.lb-go { width: 100%; flex: none; background: var(--burg); color: var(--deco); }
@keyframes lb-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb-have.just { animation: none; } }
html[lang="ar"] .lb-have-t, html[lang="ckb"] .lb-have-t { font-family: var(--arabic); }
.lb-inlist { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 8px 0 0; color: var(--slate); font-size: 13px; }
.lb-inlist svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- buttons ---------- */
.obtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--cream); font: 700 14px/1.2 var(--body); cursor: pointer; text-decoration: none; }
.obtn.wide { width: 100%; }
.obtn.primary { background: var(--burg); border-color: var(--burg); color: var(--deco); }
.obtn.primary .om { background: var(--deco); color: var(--burg); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.obtn.wa { background: var(--cream); border-color: var(--cream); color: var(--nile); }
.obtn.wa svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; width: 22px; height: 22px; }
.obtn[disabled] { opacity: .6; cursor: progress; }
.om { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.olink { background: none; border: 0; color: var(--cream); font: 600 13.5px/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(231,220,198,.35); cursor: pointer; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.olink.call { justify-content: center; width: 100%; color: var(--slate); }

/* ---------- bottom bar with an order ---------- */
.bar.has-order .note, .bar.has-order .call { display: none; }
.obar { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 0 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--burg); color: var(--deco); text-align: start; }
.obar[hidden] { display: none; }
.ob-ic { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.ob-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ob-ic b { position: absolute; top: -3px; inset-inline-end: -5px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--deco); color: var(--burg);
  font: 700 11px/20px var(--mono); text-align: center; padding: 0 5px; }
.ob-t { flex: 1; display: grid; line-height: 1.2; min-width: 0; }
.ob-t b { font: 700 13px/1.2 var(--body); }
.ob-t .om { font-size: 15px; }
.ob-t small { font: 400 11px/1 var(--mono); opacity: .8; }
.ob-go { flex: none; background: var(--deco); color: var(--burg); border-radius: 999px; padding: 11px 16px; font: 700 13px/1 var(--body); }
html[lang="ar"] .obar, html[lang="ckb"] .obar, html[lang="ar"] .ob-t b, html[lang="ckb"] .ob-t b, html[lang="ar"] .ob-go, html[lang="ckb"] .ob-go { font-family: var(--arabic); }

/* ---------- toast ---------- */
.otoast { position: fixed; inset-inline: 12px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 18px); z-index: 45; max-width: 520px; margin-inline: auto;
  background: var(--deco); color: var(--nile); border-radius: 16px; padding: 10px 10px 10px 14px; box-shadow: 0 10px 30px rgba(4,11,21,.5);
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.otoast.in { opacity: 1; transform: none; }
.otoast[hidden] { display: none; }
.ot-row { display: flex; align-items: center; gap: 10px; }
.ot-ok { width: 26px; height: 26px; border-radius: 999px; background: var(--burg); color: var(--deco); display: grid; place-items: center; font-weight: 700; flex: none; }
.ot-t { flex: 1; font-size: 14px; line-height: 1.35; min-width: 0; }
.ot-view { flex: none; min-height: 40px; border-radius: 999px; border: 0; background: var(--nile); color: var(--deco); font: 700 13px/1 var(--body); padding: 0 16px; cursor: pointer; }
html[lang="ar"] .otoast, html[lang="ckb"] .otoast, html[lang="ar"] .ot-view, html[lang="ckb"] .ot-view { font-family: var(--arabic); }

/* ---------- "Goes well with this": one suggestion under the list ---------- */
.osx { margin-top: 16px; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--panel-2); }
.osx-h { margin: 0 0 10px; font: 700 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lit); }
.osx-row { display: flex; align-items: center; gap: 12px; }
.osx-row img, .osx-ph { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--deco); }
.osx-ph { display: grid; place-items: center; background: var(--panel); }
.osx-n { flex: 1; min-width: 0; display: grid; gap: 3px; }
.osx-n b { font-size: 15px; line-height: 1.3; }
.osx-p { font-size: 14px; color: var(--deco); }
.osx-p s { color: var(--slate-dim); font-size: 12px; margin-inline-end: 4px; }
.osx-add, .osx-x { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.osx-add { border: 0; background: var(--cream); color: var(--burg); }
.osx-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.osx-x { border: 1px solid var(--line-strong); background: transparent; color: var(--slate); font: 700 18px/1 var(--body); }
html[lang="ar"] .osx-h, html[lang="ckb"] .osx-h { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 13px; }
html[lang="ar"] .osx, html[lang="ckb"] .osx { font-family: var(--arabic); }

/* ---------- the sheet ---------- */
body.sheet-open { overflow: hidden; }
.osheet { position: fixed; inset: 0; z-index: 70; }
.osheet[hidden] { display: none; }
.os-bg { position: absolute; inset: 0; background: rgba(4,11,21,.72); opacity: 0; transition: opacity .2s; }
.os-panel { position: absolute; inset-inline: 0; bottom: 0; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px); display: flex; flex-direction: column;
  background: var(--panel); color: var(--cream); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line-strong);
  transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .22s; max-width: 640px; margin-inline: auto; }
.osheet.in .os-bg { opacity: 1; }
.osheet.in .os-panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .os-panel, .os-bg, .otoast { transition: none; } }
.os-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.os-head h2 { flex: 1; margin: 0; font: 700 22px/1.15 var(--display); color: var(--deco); min-width: 0; }
html[lang="ar"] .os-head h2, html[lang="ckb"] .os-head h2 { font-family: var(--arabic); font-size: 17px; line-height: 1.5; }
.os-x, .os-back { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream);
  font: 700 20px/1 var(--body); cursor: pointer; }
.os-back[hidden] { display: none; }
.os-body { overflow-y: auto; padding: 14px 18px 18px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.os-foot { display: grid; gap: 6px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--panel); }
.os-foot[hidden] { display: none; }
html[lang="ar"] .osheet, html[lang="ckb"] .osheet, html[lang="ar"] .osheet .obtn, html[lang="ckb"] .osheet .obtn,
html[lang="ar"] .osheet .olink, html[lang="ckb"] .osheet .olink, html[lang="ar"] .osheet input, html[lang="ckb"] .osheet input,
html[lang="ar"] .osheet textarea, html[lang="ckb"] .osheet textarea { font-family: var(--arabic); }

/* picker */
.pk-hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.pk-hero img, .pk-ph { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none; background: var(--deco); }
.pk-ph { display: grid; place-items: center; background: var(--panel-2); }
.pk-ph svg { width: 34%; height: 50%; opacity: .4; }
.pk-ph.sm { width: 52px; height: 52px; }
.pk-hero p { margin: 0; color: var(--desc); font-size: 13.5px; line-height: 1.55; }
.pk-g { border: 0; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.pk-g legend { font: 700 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lit); margin-bottom: 8px; padding: 0; }
html[lang="ar"] .pk-g legend, html[lang="ckb"] .pk-g legend { font-family: var(--arabic); letter-spacing: 0; font-size: 13px; }
.pk-opt { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel-2); cursor: pointer; }
.pk-opt span { flex: 1; font-size: 14.5px; line-height: 1.35; }
.pk-g legend small { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: var(--slate); border: 1px solid var(--slate-dim); border-radius: 999px; padding: 3px 6px; margin-inline-start: 6px; }
html[lang="ar"] .pk-g legend small, html[lang="ckb"] .pk-g legend small { font-family: var(--arabic); letter-spacing: 0; font-size: 11px; }
.pk-g.chg legend { color: var(--deco); }
.pk-opt.chg { background: transparent; border-style: dashed; min-height: 44px; }
.pk-opt input { width: 20px; height: 20px; accent-color: var(--lit); flex: none; margin: 0; }
.pk-opt:has(input:checked) { border-color: var(--lit); background: rgba(122,31,43,.35); }
.pk-opt.off { opacity: .5; cursor: default; }
.pk-opt small { color: var(--slate); font-size: 12px; }
.pk-p { font: 700 12.5px/1 var(--mono); color: var(--burg); background: var(--deco); border-radius: 999px; padding: 5px 9px; }
.pk-p.free { background: transparent; color: var(--deco); border: 1px solid rgba(242,232,213,.5); font-family: var(--body); }
.pk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-weight: 700; }
.pk-note, .of { display: grid; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--slate); }
.pk-note input, .of input, .of textarea { font: 500 16px/1.4 var(--body); color: var(--cream); background: var(--nile); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; }
.of textarea { resize: vertical; }
.of input:focus, .of textarea:focus, .pk-note input:focus { outline: 2px solid var(--lit); outline-offset: 1px; }
.of.bad input, .of.bad textarea { border-color: var(--lit); }
.of em { color: var(--lit); font-style: normal; font-size: 13px; }
.ocheck { display: flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ocheck input { width: 20px; height: 20px; accent-color: var(--lit); margin: 0; }

/* list */
.olist { list-style: none; margin: 0; padding: 0; }
.ol { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "m m" "q p"; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 420px) { .ol { grid-template-columns: 1fr auto 84px; grid-template-areas: "m q p"; } }
.ol-m { grid-area: m; display: grid; gap: 2px; min-width: 0; }
.ol-m b { font-size: 15px; line-height: 1.3; }
.ol-m small { color: var(--desc); font-size: 12.5px; line-height: 1.45; }
.ol-m .ol-n { font-style: italic; }
.ol .ostep, .ol-rm { grid-area: q; justify-self: start; }
.ol-p { grid-area: p; text-align: end; font-size: 14px; display: grid; }
.ol-p s { color: var(--slate-dim); font-size: 12px; }
.ol-rm { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream); font-size: 18px; cursor: pointer; }
.tagm { font: 700 11px/1 var(--mono); color: var(--deco); background: var(--burg); border-radius: 999px; padding: 3px 7px; vertical-align: 2px; }
.o-empty { display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--slate); padding: 28px 10px; margin: 0; }
.o-empty svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.o-ctx { margin: 0 0 6px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lit); }
html[lang="ar"] .o-ctx, html[lang="ckb"] .o-ctx { font-family: var(--arabic); letter-spacing: 0; font-size: 13px; }
.ol-m .ol-g { color: var(--lit); font-size: 12px; }
.o-tot { margin: 16px 0 0; display: grid; gap: 6px; }
.o-tot div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.o-tot dt { color: var(--slate); font-size: 14px; }
.o-tot dd { margin: 0; }
.o-tot .save dd, .o-tot .save dt { color: var(--cream); }
.o-tot .big dt { color: var(--cream); font-weight: 700; font-size: 16px; }
.o-tot .big .om { font-size: 20px; color: var(--deco); }
.o-tot small { font: 400 11px/1 var(--mono); color: var(--slate); }
.o-minor { display: flex; justify-content: space-between; margin-top: 8px; }
.o-note { background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; margin: 0 0 6px; font-size: 14px; }
.o-warn { color: var(--lit); font-size: 13.5px; margin: 10px 0 0; }
.o-hint { color: var(--slate); font-size: 12.5px; margin: 10px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-lead { margin: 0 0 12px; color: var(--desc); font-size: 14px; line-height: 1.55; }

/* where */
.owhere { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 14px; margin-bottom: 10px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream); cursor: pointer; font: inherit; min-height: 72px; }
.owhere:hover, .owhere:focus-visible { border-color: var(--lit); }
.ow-ic { width: 46px; height: 46px; border-radius: 999px; background: var(--burg); display: grid; place-items: center; font-size: 22px; flex: none; }
.owhere b { display: block; font-size: 16px; }
.owhere small { display: block; color: var(--desc); font-size: 13px; margin-top: 2px; }

/* pickup times, budget chips */
.oslots, .mbudgets { display: flex; flex-wrap: wrap; gap: 8px; }
.ochip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream);
  font: 700 14px/1 var(--mono); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ochip[aria-pressed="true"], .ochip.on { background: var(--cream); color: var(--nile); border-color: var(--cream); }
.ochip[disabled] { opacity: .35; cursor: default; }
.ochip.busy { border-style: dashed; border-color: rgba(196,96,108,.7); }
.ochip.in { padding-inline-end: 6px; font-family: var(--body); font-weight: 600; font-size: 13px; }
.ochip.in input { width: 96px; min-height: 34px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--nile); color: var(--cream);
  font: 700 14px/1 var(--mono); padding: 0 10px; }
.ochip.on input { background: var(--cream); color: var(--nile); }
.dot { width: 10px; height: 10px; border-radius: 999px; border: 1px dashed var(--lit); display: inline-block; }

/* sent */
.o-sent { text-align: center; padding: 12px 6px 4px; }
.os-ok { width: 56px; height: 56px; border-radius: 999px; background: var(--panel); color: var(--cream); border: 1px solid var(--cream); display: inline-grid; place-items: center; font-size: 28px; font-weight: 700; }
.o-sent h3 { font: 700 20px/1.3 var(--body); margin: 14px 0 6px; color: var(--deco); }
.o-sent p { color: var(--desc); margin: 0; }
.o-code { margin-top: 16px !important; display: grid; gap: 4px; }
.o-code b { font: 700 32px/1 var(--mono); letter-spacing: .18em; color: var(--deco); }
html[lang="ar"] .o-sent h3, html[lang="ckb"] .o-sent h3 { font-family: var(--arabic); }

/* ---------- the waiter screen: light, large, Kurdish ---------- */
.osheet.full .os-panel { top: 0; max-height: none; border-radius: 0; background: var(--deco); color: var(--nile); max-width: none; }
.osheet.full .os-head { border: 0; padding-bottom: 0; }
.osheet.full .os-x, .osheet.full .os-back { background: var(--cream); color: var(--nile); border-color: rgba(6,18,34,.15); }
.osheet.full .os-foot { background: var(--deco); border-color: rgba(6,18,34,.12); }
.osheet.full .os-foot .obtn { color: var(--nile); border-color: rgba(6,18,34,.25); }
.wv { font-family: var(--arabic); max-width: 640px; margin: 0 auto; }
.wv-h { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--burg); }
.wv-h b { font-family: var(--mono); font-size: 34px; margin-inline-start: 6px; }
.wv-l { list-style: none; margin: 0; padding: 0; }
.wv-l li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(6,18,34,.12); }
.wq { font: 700 24px/1.2 var(--mono); color: var(--burg); min-width: 48px; }
.wv-l b { display: block; font-size: 21px; line-height: 1.45; }
.wv-l small { display: block; font-family: var(--body); font-size: 14px; color: var(--slate-dim); text-align: right; }
.wv-l em { display: block; font-style: normal; font-size: 16px; color: var(--burg); margin-top: 2px; }
.wv-t { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; margin: 16px 0 0; }
.wv-t b { font: 700 26px/1 var(--mono); }
.wv-n { font-size: 14px; color: var(--slate-dim); margin-top: 10px; }

/* ---------- the budget meal ---------- */
.meal-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 0 0; padding: 12px 12px 12px 14px; border-radius: 16px; cursor: pointer; text-align: start;
  border: 1px solid rgba(196,96,108,.5); background: linear-gradient(120deg, rgba(122,31,43,.55), var(--panel) 75%); color: var(--cream); font: inherit; }
.meal-cta.slim { margin-top: 16px; }
.mc-ic { width: 44px; height: 44px; border-radius: 999px; background: var(--burg); display: grid; place-items: center; flex: none; }
.mc-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--deco); stroke-width: 1.7; stroke-linejoin: round; }
.mc-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.mc-t b { font: 700 19px/1.15 var(--display); color: var(--deco); }
.mc-t small { color: var(--desc); font-size: 12.5px; line-height: 1.4; }
.mc-go { flex: none; background: var(--deco); color: var(--burg); border-radius: 999px; padding: 11px 14px; font: 700 12.5px/1 var(--body); }
html[lang="ar"] .mc-t b, html[lang="ckb"] .mc-t b { font-family: var(--arabic); font-size: 15px; line-height: 1.5; }
html[lang="ar"] .meal-cta, html[lang="ckb"] .meal-cta, html[lang="ar"] .mc-go, html[lang="ckb"] .mc-go { font-family: var(--arabic); }
@media (max-width: 360px) { .meal-cta .mc-ic { display: none; } }
.mbudgets { margin-bottom: 14px; }
/* The package: its name and one-line story above the courses */
.mpkg { margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-strong); }
.mpkg b { display: block; font: 700 21px/1.2 var(--display); color: var(--deco); }
.mpkg p { margin: 6px 0 0; font: italic 500 15.5px/1.45 var(--display); color: var(--cream); }
html[lang="ar"] .mpkg b, html[lang="ckb"] .mpkg b { font-family: var(--arabic); font-size: 17px; line-height: 1.5; }
html[lang="ar"] .mpkg p, html[lang="ckb"] .mpkg p { font-family: var(--arabic); font-style: normal; font-size: 13.5px; line-height: 1.8; }

/* Layer 1, the evenings: one card per budget — name and budget on one baseline, the story, the dishes, what you pay */
.mevs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mev { display: grid; gap: 8px; width: 100%; min-width: 0; text-align: start; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--cream); font: 600 13px/1.4 var(--body); }
.mev:hover { border-color: var(--lit); }
.mev:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }
.mev-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mev-top b { font: 700 19px/1.2 var(--display); color: var(--deco); }
.mev-b { flex: none; font: 700 14px/1 var(--mono); color: var(--cream); }
.mev small { font: italic 500 14.5px/1.4 var(--display); color: var(--desc); }
.mev-th { display: flex; gap: 6px; }
.mev-th img, .mev-th .pk-ph { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.mev-p { font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lit); }
.mev-p s { margin-inline-start: 6px; color: var(--slate-dim); }
.mev.other { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: default; background: none; border-style: dashed; }
.mev.other:hover { border-color: var(--line-strong); }
.mev.other .o-warn { flex-basis: 100%; margin: 0; }
html[lang="ar"] .mev, html[lang="ckb"] .mev, html[lang="ar"] .mev-top b, html[lang="ckb"] .mev-top b { font-family: var(--arabic); }
html[lang="ar"] .mev-top b, html[lang="ckb"] .mev-top b { font-size: 16px; line-height: 1.5; }
html[lang="ar"] .mev small, html[lang="ckb"] .mev small { font-family: var(--arabic); font-style: normal; font-size: 13px; line-height: 1.8; }
html[lang="ar"] .mev-p, html[lang="ckb"] .mev-p { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* Layer 2, the meal in focus: one dish per course, with its picture and a Change button */
.mlines { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mline { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-strong); min-width: 0; }
.mline > img, .mline > .pk-ph { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.mline-t { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 3px; }
.mline-t b { font: 600 15px/1.3 var(--body); color: var(--cream); }
.mline-c { flex: none; }
.mr-back { min-height: 32px; font-size: 12.5px; color: var(--deco); }
.mr-h { margin: 0; font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lit); }
html[lang="ar"] .mr-h, html[lang="ckb"] .mr-h { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 12px; }
html[lang="ar"] .mline-t b, html[lang="ckb"] .mline-t b, html[lang="ar"] .mline-c, html[lang="ckb"] .mline-c { font-family: var(--arabic); }

/* Layer 3, one course's choices: a grid of tiles, the house pick first */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; }
.mtile { display: grid; justify-items: start; align-content: start; gap: 4px; min-width: 0; text-align: start; padding: 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--nile); color: var(--cream); font: 600 13px/1.3 var(--body); min-height: 44px; }
.mtile img, .mtile .pk-ph { width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 8px; object-fit: cover; background: var(--deco); }
.mtile .pk-ph { background: var(--panel-2); }
.mtile b { font-size: 13.5px; line-height: 1.3; }
.mt-d { font: 700 12.5px/1 var(--mono); color: var(--deco); }
.mtile small { font-size: 11.5px; color: var(--slate); }
.mtile.sel { border-color: var(--lit); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--lit); }
.mtile.off { opacity: .45; cursor: default; }
/* The house pick: a burgundy rule under the tile and a small mono label */
.mtile.house { position: relative; }
.mtile.house::after { content: ""; position: absolute; inset-inline: 14px; bottom: -8px; height: 3px; border-radius: 999px; background: var(--burg); }
.mt-house { font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lit); }
html[lang="ar"] .mt-house, html[lang="ckb"] .mt-house { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: 11px; }
.mtile:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }
html[lang="ar"] .mtile, html[lang="ckb"] .mtile { font-family: var(--arabic); }

/* First-visit guide: a walk-through. The page is dimmed and softened; a clear window sits on what the step is about */
.otour { position: fixed; inset: 0; z-index: 90; touch-action: none; }
.otour-dim { position: absolute; inset: 0; background: rgba(4,11,21,.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: clip-path .28s ease; }
.otour-ring { position: absolute; border: 1.5px solid var(--cream); box-shadow: 0 0 0 5px rgba(231,220,198,.14); pointer-events: none; transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; }
.otour-ring.edge { border-width: 1.5px 0 0; box-shadow: none; }
.otour-tip { position: absolute; width: min(340px, calc(100vw - 28px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px; box-shadow: 0 18px 40px rgba(4,11,21,.6); transition: top .28s ease, left .28s ease; }
.otour-t { display: flex; align-items: flex-start; gap: 12px; margin: 0; font: 700 16px/1.4 var(--body); color: var(--deco); }
.otour-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.otour-dots { display: flex; gap: 6px; }
.otour-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); transition: width .28s ease; }
.otour-dots i.on { width: 18px; background: var(--cream); }
.otour-b { display: flex; align-items: center; gap: 8px; }
.otour-b .obtn { min-height: 46px; }
.otour-b [hidden] { display: none; }
.og-n { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--burg); color: var(--deco); display: grid; place-items: center; font: 700 12px/1 var(--mono); }
html[lang="ar"] .otour-t, html[lang="ckb"] .otour-t { font-family: var(--arabic); font-size: 15px; line-height: 1.7; }
/* A phone held sideways has little height: the words and the buttons share one line */
@media (orientation: landscape) and (max-height: 560px) {
  .otour-tip { width: min(640px, calc(100vw - 28px)); display: flex; align-items: center; gap: 16px; padding: 12px 14px; }
  .otour-t { flex: 1; align-items: center; }
  .otour-f { flex: none; margin-top: 0; }
  .otour-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .otour-dim, .otour-ring, .otour-tip, .otour-dots i { transition: none; } }

/* "Start your order" arrival: a short pulse on the first few + buttons */
@keyframes oplus-hint { 0%, 100% { box-shadow: 0 0 0 0 var(--lit); } 50% { box-shadow: 0 0 0 8px transparent; } }
.oplus.hint { animation: oplus-hint 1s ease-out 3; }
@media (prefers-reduced-motion: reduce) { .oplus.hint { animation: none; outline: 2px solid var(--lit); outline-offset: 2px; } }

/* Free-delivery nudge under the total */
.o-free { margin: 10px 0 0; font-size: 13.5px; color: var(--cream); display: grid; gap: 6px; }
.o-free i { display: block; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--lit) var(--p), var(--line-strong) var(--p)); }
.o-free.on { color: var(--deco); font-weight: 700; }
html[lang="ar"] .o-free, html[lang="ckb"] .o-free { font-family: var(--arabic); }