*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs)}
body{margin:0;font-family:"Plex Arabic",system-ui,sans-serif;background:var(--bg-grad);background-color:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:14px;height:14px}.ic.lg{width:22px;height:22px}
.num{font-feature-settings:"tnum";direction:ltr;unicode-bidi:isolate}
.wrap{max-width:1240px;margin:0 auto;padding:0 14px}

/* ---------- example-data marker ---------- */
.ex{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;letter-spacing:.2px;color:#9A6A00;background:#FFF6DC;border:1px dashed #E9C46A;border-radius:6px;padding:0 5px;line-height:16px;white-space:nowrap}
:root[data-theme="night"] .ex{color:#F3D27A;background:rgba(233,185,73,.12);border-color:rgba(233,185,73,.45)}
.ph-note{position:absolute;inset-inline-start:6px;bottom:6px;font-size:8.5px;color:#fff;background:rgba(36,39,46,.42);backdrop-filter:blur(4px);border-radius:5px;padding:0 5px;line-height:15px}

/* ---------- top app bar ---------- */
.appbar{position:sticky;top:0;z-index:40;padding:calc(var(--safe-t) + 8px) 14px 8px;background:var(--glass);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.appbar .row{display:flex;align-items:center;gap:10px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{width:36px;height:36px;object-fit:contain;border-radius:11px;background:var(--surface-2);box-shadow:var(--neu-sm);padding:3px}
.brand b{display:block;font-size:13.5px;font-weight:700;line-height:1.2}
.brand small{display:block;font-size:10px;color:var(--text-2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand>span{min-width:0;overflow:hidden}
.brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-2);background:var(--surface);border-radius:999px;padding:4px 9px;box-shadow:var(--neu-in);margin-inline-start:auto;white-space:nowrap}
.loc .ic{color:var(--accent)}
/* 390px phones: the branch pill shrinks (ellipsis) instead of running over the brand subtitle */
.loc{min-width:0;max-width:38vw}
#locName{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* phones (390px): brand + tagline + branch pill + 3 buttons do not fit on one line. The logo never shrinks, the
   brand text takes the free space, and the branch pill gets its own line under the brand instead of covering it */
.brand img{flex-shrink:0}
.brand>span{flex:1 1 auto}
@media (max-width:480px){
  .appbar .row{flex-wrap:wrap;row-gap:6px}
  .appbar .row>.brand{flex:1 1 auto;margin-inline-end:auto}
  .appbar .row>.loc{order:9;margin-inline-start:0;max-width:100%}
}
.icon-btn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--neu-sm);color:var(--char-700);position:relative}
:root[data-theme="night"] .icon-btn{color:var(--text)}
.icon-btn .dot{position:absolute;top:7px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--red-400);border:1.5px solid var(--surface)}
.deskNav{display:none}

/* ---------- views (mobile app behaviour) ---------- */
main{padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px)}
[data-views]{display:none}
body[data-view="home"] [data-views~="home"],body[data-view="menu"] [data-views~="menu"],body[data-view="track"] [data-views~="track"],body[data-view="vip"] [data-views~="vip"],body[data-view="cart"] [data-views~="cart"]{display:block}

section{padding:14px 0 4px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:0 0 10px}
.sec-h h2{margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.sec-h h2 .ic{color:var(--accent)}
.sec-h p{margin:2px 0 0;font-size:11px;color:var(--text-2)}
.sec-h a{font-size:11.5px;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:2px;white-space:nowrap}

/* ---------- hero carousel ---------- */
.hero{padding-top:12px}
.carousel{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--neu);aspect-ratio:16/11;background:var(--surface-sunk)}
.slides{display:flex;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.slide{flex:0 0 100%;position:relative;height:100%}
.slide>img{width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(242,245,249,.25) 55%,rgba(242,245,249,.0) 100%)}
.slide .card{position:absolute;z-index:2;inset-inline:12px;bottom:28px;background:rgba(249,251,253,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(36,39,46,.14)}
:root[data-theme="night"] .slide .card{background:rgba(39,43,50,.8);border-color:rgba(255,255,255,.08)}
.slide .card .t{flex:1;min-width:0}
.slide .kicker{display:flex;gap:5px;align-items:center;font-size:10px;font-weight:600;color:var(--accent);margin-bottom:1px}
.slide h3{margin:0;font-size:15px;line-height:1.3;font-weight:700}
.slide .sub{font-size:10.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{font-weight:700;color:var(--text);font-size:13px}
.price small{font-size:9.5px;font-weight:600;color:var(--text-2);margin-inline-start:2px}
.price s{color:var(--text-3);font-weight:500;font-size:10.5px;margin-inline-start:5px}
.cta{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(180deg,var(--red-400),var(--red-500));color:var(--on-accent);font-weight:600;font-size:12px;border-radius:12px;padding:8px 12px;box-shadow:0 6px 14px rgba(242,84,91,.32),inset 0 1px 0 rgba(255,255,255,.35);white-space:nowrap}
.cta.ghost{background:var(--surface);color:var(--accent);box-shadow:var(--neu-sm)}
.cta.block{width:100%;justify-content:center;padding:11px}
.badge-top{position:absolute;z-index:2;top:10px;inset-inline-start:10px;display:flex;gap:5px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;background:rgba(255,255,255,.86);color:var(--char-800);backdrop-filter:blur(6px)}
.pill.red{background:var(--red-500);color:#fff}
.dots{position:absolute;z-index:3;bottom:10px;inset-inline:0;display:flex;justify-content:center;gap:5px}
.dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(36,39,46,.08);transition:all .3s}
.dots i.on{width:18px;background:var(--red-500)}
.progress{position:absolute;z-index:3;top:0;inset-inline:0;height:3px;background:rgba(255,255,255,.35)}
.progress b{display:block;height:100%;width:0;background:var(--red-400)}

/* ---------- quick actions ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.qa{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--text-2);text-align:center}
.qa span.b{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--neu);color:var(--accent)}
.qa span.b .ic{width:21px;height:21px}

/* ---------- chips ---------- */
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:4px 14px 8px;margin:0 -14px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar,.hscroll::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:999px;padding:6px 12px;background:var(--surface);box-shadow:var(--neu-sm);color:var(--text-2);white-space:nowrap}
.chip.on{background:var(--accent-soft);color:var(--accent-strong);box-shadow:var(--neu-in);font-weight:600}

/* ---------- horizontal dish scroller ---------- */
.hscroll{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;padding:6px 14px 14px;margin:0 -14px;scroll-snap-type:x mandatory}
.dcard{flex:0 0 150px;scroll-snap-align:start;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--neu);padding:7px;display:flex;flex-direction:column}
.dcard .img{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/0.82;background:var(--surface-sunk)}
.dcard .img img{width:100%;height:100%;object-fit:cover}
.dcard .tag{position:absolute;top:6px;inset-inline-start:6px}
.fav{position:absolute;top:6px;inset-inline-end:6px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--red-500)}
.dcard h4{margin:7px 3px 0;font-size:12px;font-weight:600;line-height:1.35;height:32px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dcard .en{margin:0 3px;font-size:9.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}
.dcard .foot{display:flex;align-items:center;justify-content:space-between;margin:6px 3px 2px}
.add{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,var(--red-400),var(--red-500));color:#fff;box-shadow:0 4px 10px rgba(242,84,91,.3)}
.add .ic{width:15px;height:15px;stroke-width:2.2}
.noimg{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--snow-100) 0 8px,var(--snow-200) 8px 16px);color:var(--ice-400)}
:root[data-theme="night"] .noimg{background:repeating-linear-gradient(135deg,#262A31 0 8px,#2B2F37 8px 16px);color:#555c69}
.noimg .ic{width:28px;height:28px}

/* ---------- occasions ---------- */
.occ-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.occ{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:118px;background:var(--surface);box-shadow:var(--neu);padding:11px;display:flex;flex-direction:column;justify-content:space-between}
.occ.wide{grid-column:span 2;min-height:126px;flex-direction:row;align-items:stretch;gap:10px}
.occ .ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.occ h4{margin:6px 0 1px;font-size:13px;font-weight:700}
.occ p{margin:0;font-size:10.5px;color:var(--text-2);line-height:1.45}
.occ .dishes{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.occ .dishes span{font-size:9.5px;background:var(--surface-sunk);border-radius:6px;padding:1px 6px;color:var(--text-2)}
.occ .thumb{position:absolute;inset-inline-end:-14px;bottom:-14px;width:78px;height:78px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px var(--surface),var(--neu-sm);opacity:.95}
.occ.wide .thumb{position:static;width:44%;height:auto;border-radius:16px;box-shadow:none;flex:none;object-fit:cover}
.occ .t{flex:1;min-width:0}
.occ.vip{background:linear-gradient(140deg,#FFFFFF 0%,#FFF1F1 100%)}
:root[data-theme="night"] .occ.vip{background:linear-gradient(140deg,#2C3038 0%,#3A2B2F 100%)}

/* ---------- combos ---------- */
.combo{flex:0 0 260px;scroll-snap-align:start;display:flex;gap:10px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--neu);padding:8px}
.combo .img{position:relative;width:92px;flex:none;border-radius:15px;overflow:hidden}
.combo .img img{width:100%;height:100%;object-fit:cover}
.combo .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 0}
.combo h4{margin:0;font-size:12.5px;font-weight:700}
.combo ul{margin:0;padding:0;list-style:none;font-size:10px;color:var(--text-2)}
.combo ul li::before{content:"• ";color:var(--accent)}
.combo .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}

/* ---------- best sellers list ---------- */
.list{display:flex;flex-direction:column;gap:9px}
.row-item{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--neu-sm);padding:7px}
.row-item .rk{width:22px;text-align:center;font-weight:700;color:var(--accent);font-size:13px}
.row-item .img{position:relative;width:54px;height:54px;border-radius:13px;overflow:hidden;flex:none;background:var(--surface-sunk)}
.row-item .img img{width:100%;height:100%;object-fit:cover}
.row-item .t{flex:1;min-width:0}
.row-item h4{margin:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .meta{font-size:10px;color:var(--text-3);display:flex;gap:6px;align-items:center}
.stars{color:var(--gold-400);display:inline-flex;gap:1px}
.stars .ic{width:11px;height:11px;fill:currentColor;stroke:none}

/* ---------- reviews ---------- */
.review{flex:0 0 240px;scroll-snap-align:start;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--neu);padding:11px 12px}
.review .who{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--accent-strong);background:var(--accent-tint)}
.review b{font-size:12px}
.review p{margin:0;font-size:11px;color:var(--text-2);line-height:1.6}

/* ---------- menu view ---------- */
.searchbar{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;box-shadow:var(--neu-in);padding:9px 12px;color:var(--text-3)}
.searchbar input{flex:1;border:0;outline:0;background:transparent;font-size:12.5px;color:var(--text)}
.stickychips{position:sticky;top:calc(var(--safe-t) + 52px);z-index:20;background:var(--bg);padding-top:6px;margin:0 -14px;padding-inline:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.grid2 .dcard{flex:auto}
.cat-title{font-size:13px;font-weight:700;margin:14px 2px 8px;display:flex;align-items:center;gap:6px}
.cat-title small{font-weight:500;color:var(--text-3);font-size:10.5px}
.occ-tags{display:flex;gap:3px;margin:4px 3px 0;flex-wrap:wrap}
.occ-tags i{font-style:normal;font-size:9px;color:var(--accent-strong);background:var(--accent-soft);border-radius:5px;padding:0 5px;line-height:15px}

/* ---------- panels / portal cards ---------- */
.panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--neu);padding:13px}
.panel+.panel{margin-top:12px}
.panel h3{margin:0 0 3px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.panel h3 .ic{color:var(--accent)}
.panel .hint{margin:0 0 10px;font-size:11px;color:var(--text-2)}
.seg{display:flex;background:var(--surface-sunk);border-radius:12px;padding:3px;box-shadow:var(--neu-in);margin-bottom:10px}
.seg button{flex:1;font-size:11.5px;font-weight:500;padding:7px 0;border-radius:10px;color:var(--text-2);display:flex;gap:5px;align-items:center;justify-content:center}
.seg button.on{background:var(--surface-2);color:var(--accent-strong);font-weight:600;box-shadow:var(--neu-sm)}
.field{display:flex;align-items:center;gap:8px;background:var(--surface-sunk);border-radius:12px;box-shadow:var(--neu-in);padding:10px 12px;margin-bottom:10px}
.field .ic{color:var(--text-3)}
.field input{flex:1;border:0;outline:0;background:transparent;font-size:13px}

/* timeline */
.order-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.order-head b{font-size:14px}
.order-head small{display:block;font-size:10.5px;color:var(--text-2)}
.eta{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.eta .big{font-size:20px;font-weight:700;color:var(--accent-strong)}
.eta small{font-size:10.5px;color:var(--text-2)}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{display:flex;gap:11px;position:relative;padding-bottom:14px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;inset-inline-start:15px;top:32px;bottom:2px;width:2px;background:var(--ice-300);border-radius:2px}
.tl li:last-child::before{display:none}
.tl li.done::before{background:linear-gradient(var(--red-400),var(--red-300))}
.tl .node{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--neu-sm);color:var(--text-3);flex:none;position:relative;z-index:1}
.tl li.done .node{background:linear-gradient(180deg,var(--red-400),var(--red-500));color:#fff;box-shadow:0 5px 12px rgba(242,84,91,.3)}
.tl li.now .node{background:var(--surface-2);color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint),var(--neu-sm);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px var(--accent-soft),var(--neu-sm)}}
.tl .t{padding-top:2px}
.tl b{font-size:12.5px;display:block}
.tl small{font-size:10.5px;color:var(--text-2)}
.tl li:not(.done):not(.now) b{color:var(--text-3)}
.mini-items{display:flex;flex-direction:column;gap:6px;margin-top:10px;border-top:1px dashed var(--ice-300);padding-top:10px}
.mini-items div{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-2)}
.mini-items div b{color:var(--text)}

/* VIP */
.vipcard{position:relative;border-radius:var(--r-xl);padding:14px;overflow:hidden;background:linear-gradient(135deg,#FFFFFF 0%,#F4F7FB 45%,#FFE9EA 100%);box-shadow:var(--neu);border:1px solid rgba(255,255,255,.9)}
:root[data-theme="night"] .vipcard{background:linear-gradient(135deg,#2C3038 0%,#2A2E36 50%,#3E2D31 100%);border-color:rgba(255,255,255,.05)}
.vipcard::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;inset-inline-end:-60px;top:-70px;background:radial-gradient(circle,var(--red-100),transparent 70%);opacity:.9}
.vipcard .top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.vipcard .lvl{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--accent-strong)}
.vipcard h3{margin:10px 0 2px;font-size:17px;position:relative;z-index:1}
.vipcard .stats{display:flex;gap:16px;margin-top:10px;position:relative;z-index:1}
.vipcard .stats div{font-size:10px;color:var(--text-2)}
.vipcard .stats b{display:block;font-size:14px;color:var(--text)}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.room{background:var(--surface);border-radius:14px;box-shadow:var(--neu-sm);padding:9px 6px;text-align:center;font-size:10.5px;color:var(--text-2);border:1.5px solid transparent}
.room b{display:block;font-size:13px;color:var(--text)}
.room .ic{color:var(--accent);margin:0 auto 2px}
.room.on{border-color:var(--red-300);background:var(--accent-soft);box-shadow:var(--neu-in)}
.room.busy{opacity:.5}
.slots{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.slot{flex:none;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:10px;background:var(--surface);box-shadow:var(--neu-sm);color:var(--text-2)}
.slot.on{background:var(--char-800);color:#fff;box-shadow:none}
:root[data-theme="night"] .slot.on{background:var(--accent);}
.favs{display:flex;flex-direction:column;gap:8px}
.silent{display:flex;align-items:center;gap:11px;border-radius:var(--r-lg);padding:12px;background:var(--surface);box-shadow:var(--neu)}
.silent .b{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,var(--char-700),var(--char-900));box-shadow:0 6px 14px rgba(36,39,46,.25)}
:root[data-theme="night"] .silent .b{background:linear-gradient(180deg,#4A505B,#383D46)}
.silent .t{flex:1}
.silent b{font-size:13px}
.silent small{display:block;font-size:10.5px;color:var(--text-2)}
.vip-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}

/* cart */
.qty{display:flex;align-items:center;gap:8px;background:var(--surface-sunk);border-radius:10px;padding:3px;box-shadow:var(--neu-in)}
.qty button{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--neu-sm)}
.qty .ic{width:12px;height:12px}
.sum{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);padding:4px 0}
.sum.total{font-size:14px;color:var(--text);font-weight:700;border-top:1px dashed var(--ice-300);margin-top:4px;padding-top:9px}

/* info strip / footer */
.info{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info .panel{padding:11px}
.info b{font-size:12.5px}
.info small{display:block;font-size:10.5px;color:var(--text-2)}
.foot-note{font-size:10px;color:var(--text-3);text-align:center;padding:16px 10px 4px;line-height:1.7}

/* ---------- bottom tab bar ---------- */
.tabbar{position:fixed;z-index:50;inset-inline:10px;bottom:calc(8px + var(--safe-b));height:var(--tabbar-h);display:flex;align-items:stretch;justify-content:space-around;background:var(--glass);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:0 10px 30px rgba(110,125,150,.25),inset 0 1px 0 rgba(255,255,255,.8);padding:0 4px}
:root[data-theme="night"] .tabbar{border-color:rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9.5px;font-weight:500;color:var(--text-3);position:relative}
.tab .ic{width:21px;height:21px;stroke-width:1.7}
.tab .pip{width:40px;height:28px;border-radius:12px;display:grid;place-items:center;transition:all .25s}
.tab.on{color:var(--accent-strong);font-weight:600}
.tab.on .pip{background:var(--accent-soft);box-shadow:var(--neu-in)}
.tab .cnt{position:absolute;top:6px;inset-inline-start:calc(50% + 4px);min-width:16px;height:16px;border-radius:8px;font-size:9px;font-weight:700;line-height:16px;text-align:center;color:#fff;background:var(--red-500);border:1.5px solid var(--snow-50);padding:0 3px}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  :root{--fs:15px}
  body[data-view] [data-views]{display:block}
  body[data-view] [data-views="cart"]{display:none}
  .tabbar{display:none}
  main{padding-bottom:30px}
  .appbar{padding:12px 24px}
  .brand img{width:46px;height:46px}
  .brand b{font-size:16px}.brand small{font-size:11.5px}
  .deskNav{display:flex;gap:4px;margin-inline-start:28px}
  .deskNav a{font-size:13.5px;font-weight:500;color:var(--text-2);padding:8px 14px;border-radius:12px}
  .deskNav a.on{color:var(--accent-strong);background:var(--accent-soft);box-shadow:var(--neu-in)}
  .wrap{padding:0 28px}
  section{padding:30px 0 8px}
  .sec-h h2{font-size:22px}.sec-h p{font-size:13px}
  .hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:stretch}
  .carousel{aspect-ratio:auto;height:470px}
  .slide .card{inset-inline:22px;bottom:34px;padding:16px 18px;max-width:520px}
  .slide h3{font-size:24px}.slide .sub{font-size:13px}.slide .kicker{font-size:12px}
  .price{font-size:17px}
  .cta{font-size:14px;padding:10px 16px}
  .hero-side{display:flex !important;flex-direction:column;gap:14px}
  .quick{grid-template-columns:repeat(4,1fr);gap:14px}
  .qa{font-size:12.5px}.qa span.b{width:64px;height:64px;border-radius:20px}
  .hscroll{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin:0;padding:6px 0 14px}
  .dcard h4{font-size:13.5px}
  .occ-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .occ{min-height:170px;padding:16px}
  .occ.wide{grid-column:span 2}
  .occ h4{font-size:16px}.occ p{font-size:12.5px}
  .occ .thumb{width:110px;height:110px}
  .combos{display:grid !important;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:6px 0 14px}
  .combo{flex:auto}
  .combo .img{width:120px}
  .combo h4{font-size:15px}.combo ul{font-size:12px}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .reviews{display:grid !important;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:6px 0 14px}
  .review{flex:auto}
  .grid2{grid-template-columns:repeat(6,1fr);gap:16px}
  .stickychips{top:72px}
  .portals{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .portals>div>section{padding-top:0}
  .info{grid-template-columns:repeat(4,1fr)}
  .mobile-only{display:none !important}
}
.desk-only{display:none}
@media (min-width:1024px){.desk-only{display:block}}
.hero-side{display:none}
/* small occasion cards: photo cover on top */
.occ .cover{position:relative;margin:-11px -11px 4px;height:74px;overflow:hidden}
.occ .cover img{width:100%;height:100%;object-fit:cover}
.occ .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,var(--surface) 100%)}
.occ .cover .ico{position:absolute;z-index:1;bottom:2px;inset-inline-start:10px;background:var(--surface);box-shadow:var(--neu-sm)}
.occ.vip .cover::after{background:linear-gradient(180deg,rgba(255,255,255,0) 40%,#FFF4F4 100%)}
:root[data-theme="night"] .occ.vip .cover::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,#33292D 100%)}
.row-item .ph-note,.combo .ph-note{font-size:7.5px;line-height:12px;padding:0 3px;inset-inline-start:3px;bottom:3px}
@media (min-width:1024px){.occ .cover{margin:-16px -16px 6px;height:110px}}
/* preview-only simulated status bar & home indicator */
.simbar{position:fixed;z-index:60;top:0;inset-inline:0;height:47px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0;font-weight:600;font-size:15px;color:var(--text);direction:ltr;pointer-events:none}
.simbar svg{fill:currentColor}.simbar .r{display:flex;gap:6px;align-items:center}
.simbar.android{height:28px;font-size:12px;padding:0 16px}
.homebar{position:fixed;z-index:60;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--text);opacity:.85;pointer-events:none}
.homebar.android{width:90px;height:4px;bottom:6px;opacity:.5}
.sim-ios .tabbar{bottom:calc(var(--safe-b) - 6px)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.occ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dcard,.combo,.review,.row-item .t{min-width:0}
html,body{overflow-x:clip}
@media (min-width:1024px){.grid2{grid-template-columns:repeat(6,minmax(0,1fr))}.occ-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hscroll{grid-template-columns:repeat(6,minmax(0,1fr))}}
.brand img{background:#fff}
.chip.more{margin:10px auto 2px;display:flex;color:var(--accent-strong)}
@media (min-width:1024px){
  .combos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .combo .img{width:140px;min-height:130px}
  .reviews{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){.occ-grid>.occ:last-child{grid-column:span 2}}
.tabbar{background:rgba(250,252,254,.93)}
:root[data-theme="night"] .tabbar{background:rgba(42,46,54,.94)}
:root[data-theme="night"] .vipcard::after{background:radial-gradient(circle,rgba(255,107,107,.18),transparent 70%)}

/* functional hooks (no layout change) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fav[aria-pressed="true"] .ic{fill:currentColor}
/* in-page nav on desktop: keep section titles clear of the sticky app bar */
section[id]{scroll-margin-top:84px}

/* ---------- checkout: slide-out cart, form, confirmation (approved mockup desktop-cart-checkout) ---------- */
.ck-scrim{position:fixed;inset:0;z-index:80;background:rgba(40,46,58,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.ck-drawer{position:fixed;top:0;bottom:0;left:0;z-index:90;width:min(430px,100%);box-sizing:border-box;background:var(--surface);box-shadow:20px 0 50px rgba(60,70,90,.25);padding:calc(var(--safe-t) + 18px) 20px calc(var(--safe-b) + 18px);display:flex;flex-direction:column;gap:10px;overflow-y:auto;animation:ck-in .22s ease-out}
@keyframes ck-in{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ck-drawer{animation:none}}
.ck-scrim[hidden],.ck-drawer[hidden],.ck-done[hidden],.ck-drawer [hidden]{display:none}
.ck-drawer h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}
.ck-cnt{font-size:12px;color:var(--text-2);font-weight:500}
.ck-x{margin-inline-start:auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--neu-sm);font-size:16px;color:var(--text-2)}
.ck-lines{display:flex;flex-direction:column;gap:10px}
.ck-lines .hint{margin:0;font-size:12px;color:var(--text-2)}
.ck-line{display:flex;align-items:center;gap:10px;background:var(--surface-sunk);border-radius:14px;padding:8px 10px}
.ck-line img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.ck-line .t{flex:1;font-size:12.5px;font-weight:600;color:var(--text)}.ck-line .t small{display:block;color:var(--text-2);font-weight:500}
.ck-q{direction:ltr;display:flex;gap:4px;align-items:center;font-size:12px;background:var(--surface-2);border-radius:10px;padding:3px 8px;box-shadow:var(--neu-sm)}
.ck-q button{font:inherit;font-size:13px;line-height:1;color:var(--text);padding:0}
.ck-form{display:flex;flex-direction:column;gap:10px;flex:1}
.ck-lab{font-size:11.5px;font-weight:600;color:var(--text-2);margin:4px 0 -4px}
.ck-seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface-sunk);border-radius:12px;padding:4px;box-shadow:var(--neu-in)}
.ck-seg3 button{text-align:center;font-size:12px;padding:7px 0;border-radius:9px;color:var(--text-2)}
.ck-seg3 .on{background:var(--surface-2);color:var(--accent-strong);font-weight:600;box-shadow:var(--neu-sm)}
.ck-inp{display:flex;align-items:center;gap:6px;background:var(--surface-sunk);border-radius:12px;padding:9px 12px;font-size:12px;color:var(--text-2);box-shadow:var(--neu-in)}
.ck-inp input,.ck-inp select{font:inherit;color:var(--text);background:none;border:0;outline:0;min-width:0;padding:0}
.ck-inp input::placeholder{color:var(--text-2);opacity:1}
.ck-inp:focus-within{outline:1.5px solid var(--accent-tint)}
.ck-sel select{appearance:none;-webkit-appearance:none;color:var(--text-2);cursor:pointer;field-sizing:content}
.ck-sel{gap:3px}.ck-sel::after{content:"▾";color:var(--text-2)}
.ck-row #ckAddr,.ck-row #ckCar,.ck-row #ckRoom{flex:1}
.ck-row #ckPhone{width:118px;flex:none}
@supports (field-sizing:content){.ck-row #ckAddr,.ck-row #ckCar,.ck-row #ckPhone{flex:none;width:auto;field-sizing:content;min-width:3ch;max-width:62%}.ck-row #ckPhone{max-width:34%}.ck-row{cursor:text}}
.ck-inp.bad{outline:1.5px solid var(--red-400)}
.ck-pay{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ck-pay button{font-size:11.5px;padding:8px;border-radius:10px;background:var(--surface-2);box-shadow:var(--neu-sm);text-align:center;color:var(--text)}
.ck-pay .on{outline:1.5px solid var(--accent);color:var(--accent-strong);font-weight:600}
.ck-pay .off{opacity:.55;cursor:not-allowed}
.ck-err{font-size:11.5px;color:var(--red-600);display:grid;gap:2px}.ck-err:empty{display:none}
.ck-tot{border-top:1px dashed var(--line);padding-top:8px;font-size:12.5px;display:grid;gap:4px}
.ck-tot div{display:flex;justify-content:space-between}.ck-tot .g{font-size:15px;font-weight:700}
.ck-go{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:6px;padding:12px;border-radius:14px;color:#fff;font:inherit;font-weight:700;background:linear-gradient(180deg,var(--red-400),var(--red-500));box-shadow:0 8px 18px rgba(242,84,91,.3)}
.ck-go[disabled]{opacity:.5;cursor:not-allowed}
.ck-done{position:fixed;z-index:95;top:120px;right:90px;width:400px;max-width:calc(100% - 32px);box-sizing:border-box;background:var(--surface);border-radius:22px;box-shadow:0 30px 60px rgba(60,70,90,.3);padding:22px;text-align:center}
@media (max-width:1023px){.ck-done{right:16px;left:16px;width:auto;margin:auto;top:calc(var(--safe-t) + 90px)}}
.ck-done .ok{width:58px;height:58px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ck-done h3{margin:4px 0;font-size:17px}.ck-done p{margin:4px 0;font-size:12px;color:var(--text-2)}
.ck-done .no{font-size:22px;font-weight:700;letter-spacing:.5px;margin:6px 0}
.ck-steps{display:flex;justify-content:space-between;margin:14px 6px 4px;font-size:10.5px;color:var(--text-2)}
.ck-steps b{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto 4px;background:var(--surface-sunk);box-shadow:var(--neu-in)}
.ck-steps .on b{background:var(--accent)}
.ck-done .ck-go{margin-top:14px;width:100%}
body.ck-open{overflow:hidden}
/* English (/en/...): LTR mirror of the RTL layout; the Arabic secondary name is not shown */
.ah-lang{font-weight:700;font-size:12px;letter-spacing:.02em;text-decoration:none}
.ah-lang[lang="ar"]{font-size:15px;line-height:1}
html[dir="ltr"] .ic:has(use[href="#i-chevron-left"]),html[dir="ltr"] .ic:has(use[href="#i-chevron-right"]){transform:scaleX(-1)}
html[lang="en"] div.en{display:none}
html[dir="ltr"] .ck-drawer{left:auto;right:0;box-shadow:-20px 0 50px rgba(60,70,90,.25);animation-name:ck-in-r}
@keyframes ck-in-r{from{transform:translateX(100%)}to{transform:none}}
/* سفري sub-types (from inside / to the car / home delivery) under the سفري order type */
.ck-seg3:has(> button:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.ck-away{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ck-away[hidden]{display:none}
.ck-away button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;border-radius:12px;background:var(--surface);box-shadow:var(--neu-sm);color:var(--text-2);text-align:center;line-height:1.25}
.ck-away button b{font-size:11.5px;font-weight:600;color:var(--text)}
.ck-away button small{font-size:9.5px;color:var(--text-3)}
.ck-away button .ic{color:var(--text-3)}
.ck-away button.on{box-shadow:inset 0 0 0 1.5px var(--accent-strong),var(--neu-sm)}
.ck-away button.on b,.ck-away button.on .ic{color:var(--accent-strong)}
.ck-away button:disabled{opacity:.45}
#ckCarRow #ckPlate{flex:0 0 34%;min-width:0}