/* Afghan House on Odoo: server-rendered markup hooks + new UI states (loading / closed / out of stock /
   error / empty), in the same Snow UI language. Loaded after theme.css + app.css (unchanged copies). */
.ah-hide,.ah-state[hidden],.ah-toast[hidden]{display:none !important}

/* SSR markup: semantic headings and links that must look exactly like the static site's divs/spans */
.sec-h .ah-h2{margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.sec-h .ah-h2 .ic{color:var(--accent)}
h2.cat-title{line-height:1.5}
.cat-title a,.dcard h4 a,.row-item h4 a,.slide h3 a{color:inherit}
.dcard h4 a:focus-visible,.row-item h4 a:focus-visible,.chip:focus-visible,.tab:focus-visible{outline:2px solid var(--accent-tint);outline-offset:2px;border-radius:6px}
.tab{text-decoration:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
@media (min-width:1024px){.sec-h .ah-h2{font-size:22px}}

/* hero without curated dishes: brand slide (logo on the snow gradient, no invented offer) */
.ah-brand-slide{background:radial-gradient(120% 90% at 85% 10%,var(--red-50) 0%,transparent 55%),var(--bg-grad)}
.ah-brand-art{position:absolute;inset:0 0 70px;display:grid;place-items:center}
.ah-brand-art img{width:auto;height:72%;max-width:70%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(36,39,46,.12))}
:root[data-theme="night"] .ah-brand-art img{background:#fff;border-radius:28px;padding:10px}
.slide>.noimg{position:absolute;inset:0;height:100%}
.slide>.noimg .ic{width:64px;height:64px}
@media (min-width:1024px){.ah-brand-art{inset:0 0 110px}}

/* out of stock / category hours */
.dcard.oos .img>img,.dcard.oos .img>.noimg,.dcard.closed .img>img,.dcard.closed .img>.noimg{filter:grayscale(1);opacity:.55}
.dcard.oos h4,.dcard.oos .price{color:var(--text-3)}
.add[disabled],.cta[disabled]{opacity:.38;box-shadow:none;cursor:not-allowed}
.row-item.oos{opacity:.6}
.ah-oos-pill{background:var(--char-800) !important;color:#fff !important}
.ah-closed-pill{background:rgba(255,255,255,.92);color:var(--char-800)}
:root[data-theme="night"] .ah-oos-pill{background:#11141a !important}

/* state panels (error / empty / closed) */
.ah-state{display:flex;align-items:center;gap:10px}
.ah-state>.ic{flex:none;width:22px;height:22px;color:var(--accent)}
.ah-state b{display:block;font-size:13px}
.ah-state small{display:block;font-size:11px;color:var(--text-2)}
.ah-state small a{color:var(--accent);font-weight:600}
.panel.ah-state{margin:14px 0}
.ah-state.error>.ic{color:var(--red-600)}
.ah-state.empty>.ic{color:var(--text-3)}
.ah-inline{font-size:11px;color:var(--text-2);margin:-2px 2px 8px;gap:5px}
.ah-inline .ic{color:var(--accent)}
.ah-inline.oos{color:var(--char-700)}
.ck-drawer .ah-state.closed{background:var(--accent-soft);color:var(--accent-strong);border-radius:12px;padding:9px 12px;font-size:12px;font-weight:600}
.ck-drawer .ah-state.closed small{color:var(--text-2);font-weight:500}
.ck-seg3 button[disabled]{opacity:.45;cursor:not-allowed}
.ck-pay button[disabled]:not(.off){opacity:.45;cursor:not-allowed}

/* loading: skeleton shimmer (tracking / submit) */
@keyframes ah-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ah-skel{display:block;border-radius:10px;background:linear-gradient(90deg,var(--surface-sunk) 25%,var(--surface-2) 50%,var(--surface-sunk) 75%);background-size:200% 100%;animation:ah-shimmer 1.2s linear infinite}
.ah-skel+.ah-skel{margin-top:8px}
.ck-go.loading{opacity:.8;cursor:progress}
.ck-go.loading::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:ah-spin .8s linear infinite}
@keyframes ah-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ah-skel,.ck-go.loading::before{animation:none}}

/* toast (network error, refreshed availability) */
.ah-toast{position:fixed;z-index:99;inset-inline:16px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 20px);max-width:420px;margin:0 auto;display:flex;gap:8px;align-items:center;background:var(--char-800);color:#fff;border-radius:14px;padding:10px 14px;font-size:12px;box-shadow:0 12px 30px rgba(36,39,46,.28)}
.ah-toast.error{background:var(--red-600)}
@media (min-width:1024px){.ah-toast{bottom:24px}}

/* dish page */
.ah-crumbs{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-2);padding:12px 2px 0}
.ah-crumbs a{color:var(--accent);font-weight:600}
.ah-dish{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.ah-dish .ah-dish-img{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-sunk)}
.ah-dish .ah-dish-img img{width:100%;height:100%;object-fit:cover}
.ah-dish .ah-dish-img .noimg .ic{width:56px;height:56px}
.ah-dish h1{margin:2px 0 0;font-size:19px;line-height:1.35}
.ah-dish .en{font-size:11px;color:var(--text-3);direction:ltr;text-align:right}
.ah-kicker{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:600;color:var(--accent)}
.ah-desc{font-size:12px;color:var(--text-2);margin:6px 0 0}
.ah-dish-price{display:flex;align-items:baseline;gap:8px;margin:10px 0}
.ah-dish-price .price{font-size:20px}
.ah-dish-price>small{font-size:10.5px;color:var(--text-2)}
.ah-dish.oos .ah-dish-img>*:not(.fav){filter:grayscale(1);opacity:.55}
@media (min-width:1024px){
  .ah-dish{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;padding:20px}
  .ah-dish h1{font-size:28px}
  .ah-dish .cta.block{width:auto;padding:12px 28px}
}

/* checkout: customer name (guest checkout) + delivery fee line + waiting-for-branch note */
.ck-inp.ck-name{margin-bottom:6px}.ck-inp #ckName{flex:1}
.ck-done .wait{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12px;color:var(--text-2);margin:6px 0 0}
.tl li.rej .node{background:var(--red-50,#fdecec);color:var(--red-400,#d64545)}
.ah-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* dish sheet (owner request): card → centred modal via FLIP. Only transform/opacity animate (see app.js);
   every animated layer is position:fixed, so nothing in the page reflows (no CLS). */
.dcard[data-id],.row-item:has([data-add]){cursor:pointer}
.ah-lifted{opacity:0 !important}
:root.ah-sh-lock{overflow:hidden;scrollbar-gutter:stable}
:root.ah-sh-lock body,:root.ah-sh-lock #wrapwrap{overflow:hidden}
.ah-sh{position:fixed;inset:0;z-index:97;display:grid;place-items:center;padding:calc(var(--safe-t,0px) + 12px) 12px calc(var(--safe-b,0px) + 12px);pointer-events:none}
.ah-sh[hidden]{display:none}
.ah-sh-scrim{position:absolute;inset:0;background:rgba(28,32,42,.42);-webkit-backdrop-filter:blur(8px) saturate(1.05);backdrop-filter:blur(8px) saturate(1.05);pointer-events:auto}
:root[data-theme="night"] .ah-sh-scrim{background:rgba(8,10,14,.6)}
.ah-sh-ghosts{position:fixed;inset:0;z-index:3;pointer-events:none}
.ah-sh-ghost{position:fixed !important;margin:0 !important;box-sizing:border-box;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}
.ah-sh-box{position:relative;z-index:1;width:min(440px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;padding:10px;box-sizing:border-box;pointer-events:auto;outline:none}
.ah-sh-bg{position:absolute;inset:0;background:var(--surface);border-radius:var(--r-xl);box-shadow:0 30px 80px rgba(20,26,40,.32);transform-origin:0 0;will-change:transform}
.ah-sh-ph{position:relative;flex:none;aspect-ratio:1/.82;border-radius:20px;overflow:hidden;background:var(--surface-sunk);transform-origin:0 0;will-change:transform}
.ah-sh-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ah-sh-ph .noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--text-3)}
.ah-sh-ph .noimg .ic{width:56px;height:56px}
.ah-sh-box.oos .ah-sh-ph img{filter:grayscale(1);opacity:.6}
.ah-sh-x{position:absolute;top:18px;inset-inline-end:18px;z-index:2;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--char-800);box-shadow:0 4px 14px rgba(20,26,40,.18)}
.ah-sh-x:focus-visible,.ah-sh-add:focus-visible,.ah-sh .qty button:focus-visible,.ah-sh-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ah-sh-in{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px 6px 2px;display:flex;flex-direction:column;gap:8px}
.ah-sh-tags{display:flex;flex-wrap:wrap;gap:5px}
.ah-sh-tags:empty{display:none}
.ah-sh-tags .pill{background:var(--surface-sunk);color:var(--text-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.ah-sh-tags .pill.red{background:var(--accent-soft);color:var(--accent-strong)}
.ah-sh-in h2{margin:0;font-size:19px;font-weight:700;line-height:1.35}
.ah-sh-in .en{margin-top:-6px;font-size:12px;color:var(--text-3);text-align:right}
.ah-sh-in .en:empty{display:none}
.ah-sh-desc{margin:0;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.ah-sh-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ah-sh-price .price{font-size:19px}
.ah-sh-price>small{font-size:10.5px;color:var(--text-3)}
.ah-sh-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text-2)}
.ah-sh-row .qty{gap:10px}
.ah-sh-row .qty button{width:34px;height:34px;border-radius:10px}
.ah-sh-row .qty button[disabled]{opacity:.4}
.ah-sh-row .qty .ic{width:14px;height:14px}
.ah-sh-row .qty b{min-width:24px;text-align:center;font-size:15px}
.ah-sh-note{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:-4px}
.ah-sh-note small{font-weight:500;color:var(--text-3)}
.ah-sh-ta{width:100%;box-sizing:border-box;resize:none;border:0;border-radius:12px;background:var(--surface-sunk);box-shadow:var(--neu-in);padding:9px 11px;font:inherit;font-size:13px;line-height:1.5;color:var(--text);outline:none}
.ah-sh-ta:focus{box-shadow:var(--neu-in),0 0 0 2px var(--accent-tint)}
.ah-sh-add{margin-top:2px;font-size:14px;padding:13px}
.ah-sh-link{align-self:center;display:inline-flex;align-items:center;gap:2px;font-size:11.5px;color:var(--text-3);padding:2px 6px}
.ah-sh-link[hidden]{display:none}
.ah-fly{position:fixed;z-index:98;width:54px;height:54px;pointer-events:none;will-change:transform}
.ah-fly-in{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface);color:var(--accent);box-shadow:0 8px 22px rgba(242,84,91,.38),0 0 0 3px var(--surface);will-change:transform,opacity}
.ah-fly-in img{width:100%;height:100%;object-fit:cover}
.ah-line-note{display:block;font-size:10px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#cartCntDesk{display:inline-block}
@media (min-width:1024px){
  .ah-sh-box{width:480px;padding:12px}
  .ah-sh-x{top:22px;inset-inline-end:22px}
  .ah-sh-in{padding:14px 8px 4px;gap:10px}
  .ah-sh-in h2{font-size:23px}
  .ah-sh-desc{font-size:14px}
  .ah-sh-price .price{font-size:22px}
}
@media (prefers-reduced-transparency:reduce){.ah-sh-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(28,32,42,.6)}}

/* ---------- branch QR (/menu?b=<id>): banner under the app bar + branch locked at checkout ---------- */
.ah-qrb{display:flex;align-items:center;gap:8px;min-height:40px;margin:6px 14px 0;padding:8px 12px;border-radius:var(--r-md);background:var(--sahab-accent-soft);box-shadow:inset 0 0 0 1px var(--sahab-accent-line);font-size:12.5px;color:var(--text-2)}
.ah-qrb .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mint-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint-500) 20%,transparent)}
.ah-qrb.closed .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.ah-qrb .st{min-width:0}.ah-qrb .st b{font-weight:600;color:var(--mint-500)}.ah-qrb.closed .st b{color:var(--accent-strong)}
.ah-qrb .src{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--sahab-accent-ink);white-space:nowrap}
.ah-qrb .src .ic{color:var(--sahab-accent-deep)}
@media (min-width:900px){.ah-qrb{max-width:1180px;margin:8px auto 0}}
.ck-lock{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface-sunk);box-shadow:var(--neu-in);font-weight:600;font-size:13px;color:var(--text)}
.ck-lock > .ic{color:var(--accent)}
.ck-lock small{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:11px;color:var(--sahab-accent-ink)}

/* live ready time per dish (owner-approved mockup): badge on cards, dish sheet line, cart lines + order total.
   Theme tokens only: gold by default, purple with the Sahabify UI theme. */
.eta-b{position:absolute;bottom:6px;inset-inline-end:6px;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:999px;
  font-size:10.5px;font-weight:700;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--text-2);box-shadow:0 1px 4px color-mix(in srgb,var(--text) 14%,transparent)}
.eta-b svg{width:12px;height:12px;flex:none}
.eta-b.ok svg{color:var(--mint-500)} .eta-b.mid svg{color:var(--sahab-accent-deep)}
.eta-b.busy{background:color-mix(in srgb,var(--accent) 90%,transparent);color:var(--surface)} .eta-b.busy svg{color:inherit}
.eta-sh{margin:10px 0 2px;padding:10px 12px;border-radius:var(--r-md);background:var(--sahab-accent-soft);box-shadow:inset 0 0 0 1px var(--sahab-accent-line);font-size:12.5px;color:var(--text-2)}
.eta-sh .h{display:flex;align-items:center;gap:6px;color:var(--text)} .eta-sh .h svg{width:16px;height:16px;color:var(--sahab-accent-deep)}
.eta-sh .h b{font-weight:700}.eta-sh .live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--text-3)}
.eta-sh .live i,.eta-tot .live i{width:6px;height:6px;border-radius:50%;background:var(--mint-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint-500) 20%,transparent)}
.eta-sh small{display:block;margin-top:4px;line-height:1.5}
.eta-sh.busy{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.eta-sh.busy .h svg,.eta-sh.busy .h b{color:var(--accent-strong)}
.eta-alt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.eta-alt span{font-size:11px;color:var(--text-3);align-self:center}
.eta-alt button{border:0;font:inherit;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--text);box-shadow:var(--neu-sm)}
.eta-alt button b{color:var(--mint-500);font-weight:700}
.eta-ln{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;font-size:10.5px;font-weight:600;color:var(--text-3)}
.eta-ln svg{width:11px;height:11px}.eta-ln.busy{color:var(--accent-strong)}
.eta-tot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:8px 0;padding:10px 12px;border-radius:var(--r-md);background:var(--sahab-accent-soft);box-shadow:inset 0 0 0 1px var(--sahab-accent-line);font-size:12.5px;color:var(--text-2)}
.eta-tot svg{width:16px;height:16px;color:var(--sahab-accent-deep)} .eta-tot b{color:var(--text);font-weight:700}
.eta-tot small{flex-basis:100%;font-size:11px;color:var(--text-3)} .eta-tot .live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--text-3)}
.ah-qrb .st b.tb{color:var(--text)}
.eta-b{z-index:2}.eta-b .num,.eta-ln .num{font-weight:inherit}
.eta-tot[hidden]{display:none}
.eta-tot.busy{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.eta-tot.busy svg{color:var(--accent-strong)}
#cartEta{margin:10px 0 0}
.ck-line .t small .eta-ln{display:inline-flex;margin-inline-start:8px}
.row-item .meta .eta-ln{vertical-align:middle}
/* table QR: no address / car / room, the phone field takes the row */
.ck-row.ck-table #ckAddr,.ck-row.ck-table #ckCar,.ck-row.ck-table #ckRoom,.ck-row.ck-table .ck-dot{display:none !important}
.ck-row.ck-table #ckPhone{flex:1;width:auto;max-width:none}