@view-transition{navigation:auto}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.15s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;font:15px/1.5 B,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--c-bg);color:var(--c-text)}
a{color:var(--c-primary);text-decoration:none}
img{display:block;max-width:100%}
h1{margin:0}
.muted{color:var(--c-muted)}
.small{font-size:.85em}
.flash{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;background:var(--c-ok-bg);color:var(--c-ok);font-weight:700}
.hint{color:var(--c-muted);font-size:.85em}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--c-line);border-radius:12px;font:inherit;font-weight:400;background:var(--c-surface);color:var(--c-text)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.js img.fade{opacity:1}}
[hidden]{display:none!important}.js .nojs,html:not(.js) .jsonly{display:none!important}
.cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.off{opacity:.55;cursor:default}
.err{color:var(--c-err);font-weight:700;font-size:.9em;margin:4px 0 0}

/* الخطوط (v5): N = Baloo Bhaijaan 2 للأسماء، B = IBM Plex Sans Arabic للتفاصيل والإدارة، Oi = الاسم الإنجليزي (لا يُنزَّل إلا حين يُستعمل) */
@font-face{font-family:N;font-weight:600 700;font-display:swap;src:url(../fonts/baloo-600-ar.woff2);unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:N;font-weight:600 700;font-display:swap;src:url(../fonts/baloo-600-latin.woff2);unicode-range:U+0000-00FF,U+2013-2193}
@font-face{font-family:B;font-weight:400 500;font-display:swap;src:url(../fonts/plex-400-ar.woff2);unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:B;font-weight:400 500;font-display:swap;src:url(../fonts/plex-400-latin.woff2);unicode-range:U+0000-00FF,U+2013-2193}
@font-face{font-family:B;font-weight:600 800;font-display:swap;src:url(../fonts/plex-700-ar.woff2);unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:B;font-weight:600 800;font-display:swap;src:url(../fonts/plex-700-latin.woff2);unicode-range:U+0000-00FF,U+2013-2193}

html.c{font-size:min(20px,calc(100vw/19.5))}
.cust{
--orange:#EA7317;--yellow:#FFCE22;--yellow-2:#FFBA08;--cream:#FFFCEB;--sky:#28AFFA;--sky-2:#349CE0;--navy:#13192A;--ink:#13192A;--muted:#75705F;--line:#F0E6C8;
--tint-y:#FFF3C4;--tint-o:#FFE7D3;--tint-s:#E2F3FF;--tint-n:#E6E8EE;--in:#FFF3D6;--ok:#15803D;--bad:#C62828;--c-primary:#EA7317;--c-err:#C62828;--c-ok:#15803D;--c-ok-bg:#E3F6E8;--r:1rem;
--name:N,B,system-ui,sans-serif;--ar:B,"Segoe UI",Tahoma,system-ui,sans-serif;--oi:Oi,N,system-ui,sans-serif;
--e:cubic-bezier(.2,.7,.2,1);--t:.22s var(--e);--tabh:4.625rem;--safe:env(safe-area-inset-bottom,0px);
--glass:#ffffffdb;--glass-b:#ffffffd1;--blur:blur(18px) saturate(170%);--card:#ffffffdb;
--g-sh:0 .875rem 2.125rem -.75rem #783c0a38,inset 0 1px 0 #fffffff2;
--clay-w:inset .1875rem .25rem .4375rem #fffffffa,inset -.25rem -.375rem .75rem #c98c4638,0 .75rem 1.375rem -.5rem #78461438;
--clay-o:inset .1875rem .25rem .5rem #ffd6aac7,inset -.3125rem -.4375rem .75rem #8c320066,0 .875rem 1.5rem -.5rem #ea73178c;
--clay-y:inset .1875rem .25rem .5rem #fff8d2f2,inset -.3125rem -.4375rem .75rem #aa6e0057,0 .75rem 1.375rem -.5rem #ffba088c;
--clay-s:inset .1875rem .25rem .5rem #cdeeffe6,inset -.3125rem -.4375rem .75rem #0a508c61,0 .75rem 1.375rem -.5rem #28affa80;
--clay-n:inset .1875rem .25rem .5rem #828cb473,inset -.3125rem -.4375rem .75rem #0000008c,0 .75rem 1.375rem -.5rem #13192a80;
--clay-in:inset .1875rem .25rem .5rem #8c3c0033,inset -.1875rem -.25rem .5rem #ffffffd9;
--sh-tile:0 .5rem 1.125rem #13192a12,0 1px 2px #13192a0a;
--g-orange:linear-gradient(150deg,#FF9F55,#EA7317 70%);--g-yellow:linear-gradient(150deg,#FFE066,#FFBA08);
--g-sky:linear-gradient(150deg,#6ACBFF,#28AFFA 70%);--g-navy:linear-gradient(150deg,#2A3350,#13192A);--g-white:linear-gradient(150deg,#FFF,#FFF3DA);
min-height:100vh;font:400 .8125rem/1.45 var(--ar);color:var(--ink);-webkit-font-smoothing:antialiased;background:#FFF6E0}
.cust::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(420px 320px at 110% 8%,#ffce2259,transparent 70%),radial-gradient(360px 300px at -20% 62%,#ea73172e,transparent 70%),radial-gradient(300px 260px at 110% 92%,#28affa29,transparent 70%),linear-gradient(170deg,#FFF9E3,#FFF2D6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cust{--glass:#ffffffeb}}

.bl{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.bl i{position:absolute;display:block}
.blob{border-radius:62% 38% 56% 44%/52% 48% 52% 48%}
.blob.o{background:radial-gradient(circle at 34% 28%,#FFC08F 0,#FF8D40 34%,#EA7317 62%,#C2580B 100%);box-shadow:inset 14px 16px 26px #ffdebe8c,inset -18px -22px 34px #78280059,0 30px 50px -18px #ea73178c}
.blob.y{background:radial-gradient(circle at 34% 28%,#FFF2A8 0,#FFD84A 36%,#FFBA08 70%,#D99A00 100%);box-shadow:inset 14px 16px 26px #fffad7b3,inset -18px -22px 34px #a064004d,0 30px 50px -18px #ffba0880}
.blob.s{background:radial-gradient(circle at 34% 28%,#C6ECFF 0,#5CC3FF 36%,#28AFFA 66%,#1B7FC0 100%);box-shadow:inset 14px 16px 26px #dcf5ff99,inset -18px -22px 34px #003c7852,0 30px 50px -18px #28affa73}
.bl .cap{border-radius:999px}
.donut{border-radius:50%;background:radial-gradient(circle,transparent 0 31%,#FFE07A 32%,#FFCE22 52%,#E8A800 100%);box-shadow:inset 10px 12px 20px #fffad7a6,inset -14px -18px 26px #a064004d,0 26px 40px -16px #ffba0880}
.donut::after{content:"";position:absolute;inset:31%;border-radius:50%;box-shadow:inset -6px -8px 12px #fffad7b3,inset 6px 8px 12px #a0640059}
.donut.o{background:radial-gradient(circle,transparent 0 31%,#FFB07A 32%,#FF8D40 52%,#D9640F 100%);box-shadow:inset 10px 12px 20px #ffdebe8c,inset -14px -18px 26px #78280052,0 26px 40px -16px #ea731780}
.donut.o::after{box-shadow:inset -6px -8px 12px #ffdebe99,inset 6px 8px 12px #78280059}
.bl .b1{width:11.875rem;height:10.625rem;top:9.375rem;left:-5rem}
.bl .b2{width:7.5rem;height:7.5rem;top:20.625rem;right:-2.75rem}
.bl .b3{width:11.875rem;height:4.625rem;bottom:7.5rem;left:-1.875rem;transform:rotate(-24deg)}
.bl-portal .b1{top:29.375rem;left:-5.625rem}
.bl-portal .b2{top:3.5rem;left:-2.875rem;right:auto;width:6rem;height:6rem}
.bl-portal .b3{top:23.125rem;right:-4.625rem;left:auto;bottom:auto}
.bl-item .b1{top:27.5rem}.bl-item .b2{top:32.5rem}
.bl-co .b1{top:16.25rem}.bl-co .b2{top:29.375rem}.bl-co .b3{bottom:3.75rem}
.bl-track .b1{top:24.375rem;left:-4.375rem}.bl-track .b2{top:6.875rem;right:-2.875rem}
@media (min-width:600px){
.bl .b1{width:clamp(12rem,22vw,26rem);height:clamp(10.7rem,19.7vw,23.3rem);top:18vh;left:clamp(-11rem,-8vw,-5rem)}
.bl .b2{width:clamp(7.5rem,13vw,15rem);height:clamp(7.5rem,13vw,15rem);top:40vh;right:clamp(-6.5rem,-5vw,-2.75rem)}
.bl .b3{width:clamp(12rem,22vw,26rem);height:clamp(4.7rem,8.6vw,10.2rem);bottom:10vh;left:clamp(-8rem,-4vw,-1.875rem)}
.bl-portal .b2{top:8vh;left:clamp(-6.5rem,-4vw,-2.875rem);right:auto}.bl-portal .b1{top:62vh}.bl-portal .b3{top:46vh;right:clamp(-10rem,-6vw,-4.625rem);left:auto;bottom:auto}
}

.cust h1,.cust h2,.cust h3{font-family:var(--name);font-weight:600;line-height:1.25}
.cust .wrap{max-width:none;padding:0 1rem 2.5rem}
.cust .muted,.cust .hint{color:var(--muted)}
.cust .empty{padding:1.5rem;text-align:center;background:var(--card);border-radius:1.25rem;box-shadow:var(--g-sh);color:var(--muted)}
.cust .flash{border-radius:1rem;margin:.75rem 0}
.cust input,.cust textarea,.cust select{margin-top:.3125rem;padding:.625rem .75rem;border:1.5px solid var(--line);border-radius:.75rem;background:#fff;color:var(--navy);font:600 .8125rem/1.5 var(--ar);box-shadow:inset 0 1px 0 #ffffffe6}
.cust input,.cust select{min-height:2.75rem}
.cust input:focus,.cust textarea:focus,.cust select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.cust :focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cust ::placeholder{color:#9A9380;font-weight:500;opacity:1}
.cust .ic{display:block;width:1.25rem;height:1.25rem;flex:none}
.btn-cta,.btn-ghost2{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;min-height:3.125rem;margin-top:.875rem;padding:0 1.125rem;border:0;border-radius:999px;font:700 .9375rem var(--ar);color:#fff;background:var(--g-orange);box-shadow:var(--clay-o);cursor:pointer;transition:transform var(--t)}
.btn-ghost2{width:auto;min-height:2.75rem;font-size:.875rem;color:var(--navy);background:linear-gradient(150deg,#FFF,#FFF4DC);box-shadow:var(--clay-w)}
.btn-cta:active,.btn-ghost2:active{transform:translateY(1px) scale(.985)}
.btn-cta.disabled,.btn-cta:disabled{background:#EDE6D3;color:var(--muted);box-shadow:none}
.nx::after{content:"←";display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--g-yellow);box-shadow:var(--clay-y);color:var(--navy);font-weight:800;flex:none}
.alert{display:block;padding:.5rem .75rem;margin:0 0 .75rem;border-radius:.75rem;background:#FDE7E7;color:var(--bad);font-weight:700}
.alert.ok{background:#E3F6E8;color:var(--ok)}
.sum-box{padding:.875rem;margin:.875rem 0 0;border:1px solid var(--glass-b);border-radius:1.25rem;background:var(--card);box-shadow:var(--g-sh)}
.row-kv{display:flex;justify-content:space-between;gap:.5rem;padding:.1875rem 0;font-weight:600}
.row-kv.muted{color:var(--muted)}
.row-kv.total{border-top:1.5px dashed var(--line);margin-top:.375rem;padding-top:.5rem;font-size:.9375rem;font-weight:800}
.row-kv.total b{font-size:.9375rem}
.toast{position:fixed;bottom:calc(6rem + var(--safe));left:50%;transform:translate(-50%,20px);padding:.625rem 1.125rem;border-radius:999px;background:var(--navy);color:#fff;font-size:.8125rem;font-weight:600;box-shadow:var(--clay-n);opacity:0;pointer-events:none;transition:transform var(--t),opacity var(--t);z-index:30}
.toast.on{opacity:1;transform:translate(-50%,0)}
.slg{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0;font:800 1.125rem/1.2 var(--ar);color:var(--navy)}
.slg .ic{width:2.125rem;height:1.8125rem;color:var(--orange)}
.st-r,.stp{display:inline-flex;align-items:center;gap:.5rem}
.dot{position:relative;flex:none;width:.625rem;height:.625rem;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px #22c55e29}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ring 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ring{from{transform:scale(1);opacity:.7}75%,to{transform:scale(2.6);opacity:0}}
.shut{color:var(--bad)}
.shut .dot{background:#E5484D;box-shadow:0 0 0 3px #e5484d26}
.shut .dot::after{animation:none;opacity:0}

.card-p small,.price-lg small,.size b small,.cl-price small{font-size:.625rem;font-weight:700;color:var(--muted)}
.from{font-size:.625rem;font-weight:700;color:var(--muted)}
.was{display:block;margin-top:-.375rem;font-size:.6875rem;color:var(--muted)}
.o-tag{display:inline-block;margin-inline-start:.3125rem;padding:0 .4375rem;border-radius:999px;background:var(--g-orange);color:#fff;font-size:.625rem;font-weight:700;line-height:1.6}
.t-o{--tint:var(--tint-o)}.t-y{--tint:var(--tint-y)}.t-s{--tint:var(--tint-s)}.t-n{--tint:var(--tint-n)}
.ph{position:relative;display:grid;place-items:center;border-radius:1rem;background:var(--tint,var(--tint-y))}
.ph>img:not(.art){position:absolute;inset:0;width:100%;height:100%;padding:.3125rem;object-fit:contain}
.ph .art,.cl-img .art{width:auto;filter:drop-shadow(0 .625rem .75rem #13192a33)}
.js img.fade{opacity:0;transition:opacity .3s}
.js img.fade.in{opacity:1}
.stk{display:inline-grid;place-items:center;min-width:2.875rem;height:2rem;padding:0 .5rem;border-radius:50%;font:600 .625rem/1 var(--name);text-align:center;white-space:nowrap;transform:rotate(-7deg)}
.c-burg{background:var(--orange);color:var(--cream);box-shadow:var(--clay-o)}
.c-pizza{background:var(--navy);color:var(--orange);box-shadow:var(--clay-n)}
.c-fries{background:var(--yellow);color:var(--orange);box-shadow:var(--clay-y)}
.c-sky{background:var(--sky);color:#fff;box-shadow:var(--clay-s)}

.add,.step{display:none}
.add-wrap:not(.has) .add,.add-wrap.has .step{display:flex;align-items:center;justify-content:center}
.step{height:2rem;padding:0 .125rem;border-radius:999px;background:var(--g-white);box-shadow:var(--clay-w)}
.step button{width:1.625rem;height:1.625rem;padding:0;border:0;border-radius:50%;background:none;color:var(--orange);font:800 1rem/1 var(--ar);cursor:pointer}
.step button:active{box-shadow:var(--clay-in)}
.step .qty{min-width:1.375rem;text-align:center;font-size:.75rem;font-weight:800}

.store .wrap{padding-bottom:calc(var(--tabh) + 2rem + var(--safe))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:calc(var(--tabh) + var(--safe));padding:0 .375rem calc(.75rem + var(--safe));background:#ffffff7a;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:1px solid var(--glass-b);box-shadow:0 -.625rem 1.875rem -1rem #783c0a40,inset 0 1px 0 #fffffff2}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1875rem;padding:0;border:0;background:none;font:700 .625rem var(--ar);color:#8E8876;cursor:pointer}
.tb .ic{width:1.375rem;height:1.375rem}
.tb.on{color:var(--orange)}
.live::after{content:"";position:absolute;top:-2px;left:calc(50% - .9375rem);width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #fff}
.tbc{position:relative;top:-1.375rem;align-self:start}
.cb{position:relative;display:grid;place-items:center;width:3.625rem;height:3.625rem;border-radius:50%;background:var(--g-orange);box-shadow:var(--clay-o),0 0 0 .375rem #ffffff8c;color:#fff;transition:transform var(--t)}
.cb .ic{width:1.625rem;height:1.625rem}
.cb-count{position:absolute;top:-.25rem;left:-.25rem;display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3125rem;border-radius:.625rem;background:var(--g-yellow);box-shadow:var(--clay-y);color:var(--navy);font-size:.6875rem;font-weight:800;font-style:normal}
.cb-count.pulse{animation:pulse .3s ease-out}
@keyframes pulse{40%{transform:scale(1.35)}}
.cb-total,.cb-l,.tbc:not(.show) .cb-count{display:none}
.add:active,.size:active,.tb:active .cb{transform:translateY(1px) scale(.985)}

.dim{position:fixed;inset:0;z-index:20;background:#13192a5c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
.dim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;display:flex;flex-direction:column;max-height:92vh;border-radius:1.875rem 1.875rem 0 0;background:linear-gradient(180deg,#fffdf5fa,#fff6e0fa);box-shadow:0 -1.125rem 2.5rem -.75rem #13192a61,inset 0 1px 0 #fff;transform:translateY(100%);transition:transform .3s var(--e);overscroll-behavior:contain}
.sheet[hidden]{display:none}
.sheet.open{transform:none}
.sheet.drag{transition:none}
.handle{flex:none;width:2.75rem;height:.3125rem;margin:.5rem auto .125rem;border-radius:99px;background:#13192a29}
.sheet-x,.back,.share{display:grid;place-items:center;flex:none;width:2.375rem;height:2.375rem;padding:0;border:0;border-radius:50%;background:var(--g-white);box-shadow:var(--clay-w);color:var(--navy);cursor:pointer}
.sheet-x .ic,.back .ic,.share .ic{width:1.125rem;height:1.125rem}
.sheet-x{position:absolute;top:.75rem;right:.875rem;z-index:3}
.sheet-b{overflow-y:auto;padding:0 1rem var(--safe)}
.sk{display:grid;gap:.625rem;padding:3.5rem 0 1.5rem}
.sk i{display:block;height:3.375rem;border-radius:1rem;background:#fff9;box-shadow:var(--sh-tile)}
.sk .sk-h{height:14.875rem;margin:-3.5rem -1rem .5rem;border-radius:0 0 2.75rem 2.75rem;background:var(--tint-y);box-shadow:none}
.sk .sk-t{width:60%;height:1.5rem;background:#13192a14;box-shadow:none}
.item-page{position:relative}
.item-back{position:absolute;top:.5rem;right:0;z-index:3}
.mh{display:flex;align-items:center;gap:.625rem;min-height:4rem;padding:.75rem 0 .25rem}
.mh h1{flex:1;font-size:1.0625rem;font-weight:700}
.mh-n{display:block;font:700 .6875rem var(--ar);color:var(--muted)}
.mh-t{flex:1;min-width:0}
.item-t{margin:.875rem 0 .75rem;font-size:1.0625rem;font-weight:700;text-align:center}
.sum-box .row-kv b{font-weight:800}

@media (min-width:600px){
.cust .wrap{max-width:960px;margin:0 auto;padding:0 1.5rem 3rem}
.tabbar{left:50%;right:auto;bottom:16px;width:min(520px,calc(100% - 32px));height:var(--tabh);padding-bottom:.75rem;border:1px solid var(--glass-b);border-radius:999px;transform:translateX(-50%);box-shadow:0 1.125rem 2.5rem -1rem #783c0a59,inset 0 1px 0 #fffffff2}
.store .wrap{padding-bottom:calc(var(--tabh) + 4rem)}
.toast{bottom:calc(var(--tabh) + 40px)}
.sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100% - 32px));max-height:86vh;border-radius:32px;transform:translate(-50%,-46%);opacity:0;transition:transform .25s var(--e),opacity .25s}
.sheet.open{transform:translate(-50%,-50%);opacity:1}
.handle{visibility:hidden}
}
@media (min-width:1024px){
.cust .wrap{max-width:1200px}
}
