/* 🎨 صفحة الطلب من الويب — نفس ستايل أبلكيشن سوبرا: أبيض + فحمي ودهبي + بنفسجي للمختار + زمردي للنجاح */
:root{
  --bg:#F7F8FA;--card:#fff;--ink:#1C1C1C;--muted:#6B7280;--soft:#9CA3AF;--line:#E5E7EB;--surface:#F3F4F6;
  --charcoal:#1C1C1C;--navy:#1A1A2E;--gold:#C9A227;--gold-text:#9A7A1A;--gold-hi:#F1D57A;--gold-line:#EDE7D5;--cream:#FFF8E6;
  --purple:#6D28D9;--purple-soft:#F1EAFE;--emerald:#0F6E56;--emerald-soft:#E3F5EE;
  --shadow:0 4px 18px rgba(17,24,39,.06);--shadow-lg:0 12px 40px rgba(17,24,39,.2);
  --ui:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif;--body:"IBM Plex Sans Arabic","Readex Pro","Segoe UI",Tahoma,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
.hide{display:none!important}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

/* شريط علوي أبيض زي رئيسية الأبلكيشن */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--gold-line)}
.top .wrap{display:flex;align-items:center;gap:8px;height:58px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.emblem{width:36px;height:36px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#E9CF6B,var(--gold),#8C6A12);flex:none}
.emblem img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#111}
.brand b{display:block;font-family:var(--serif);font-size:18px;letter-spacing:2px;color:var(--charcoal);line-height:1}
.brand small{display:block;font-size:10px;color:var(--gold-text);margin-top:2px}
.top .sp{flex:1}
.pill{text-decoration:none;display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:8px 12px;font-family:var(--ui);font-weight:600;font-size:12.5px;white-space:nowrap;transition:transform .15s}
.pill:active{transform:scale(.95)}
.pill.line{border:1.5px solid var(--gold);color:var(--gold-text);background:#fff}
.pill.dark{background:var(--charcoal);color:var(--gold-hi)}

/* غلاف المحل */
.cover{position:relative;height:200px;overflow:hidden;background:var(--navy)}
.cover .bgimg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(16px) brightness(.5);transform:scale(1.15)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45))}
.cover .in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding-bottom:16px}
.cover .logo{width:88px;height:88px;border-radius:24px;object-fit:cover;background:#fff;border:3px solid rgba(255,255,255,.95);box-shadow:0 10px 26px rgba(0,0,0,.35);animation:pop .55s cubic-bezier(.2,1.4,.4,1) both}
.cover h1{margin:0;font-family:var(--ui);font-weight:700;font-size:25px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
@keyframes pop{from{transform:scale(.6)}}
.info{position:relative;z-index:2;margin-top:-20px;background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;background:var(--surface);color:var(--muted)}
.chip.open{background:var(--emerald-soft);color:var(--emerald)}
.chip.open::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.chip.closed{background:#FDECEC;color:#C62828}
.chip.min{background:var(--cream);color:var(--gold-text);border:1px solid #F3DFA2}
.chip.prev{background:var(--charcoal);color:var(--gold-hi)}

.search{margin-top:12px;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #E7D49A;border-radius:16px;padding:0 14px;height:50px;transition:box-shadow .2s}
.search:focus-within{box-shadow:0 0 0 4px rgba(201,162,39,.15)}
.search svg{flex:none;color:var(--gold-text)}
.search input{flex:1;border:0;outline:0;background:none;height:100%;min-width:0}
.search button{color:var(--soft);font-size:16px;width:28px;height:28px;border-radius:50%}

.appbar{margin-top:12px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--navy),#2A2350);color:#fff;border-radius:20px;padding:13px 14px;box-shadow:var(--shadow);overflow:hidden;position:relative;text-decoration:none}
.appbar::before{content:"";position:absolute;inset-inline-start:-40px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.4),transparent 70%)}
.appbar .ic{font-size:26px;position:relative}
.appbar b{font-family:var(--ui);font-size:14.5px}
.appbar small{display:block;color:#C9C6DA;font-size:12px;margin-top:2px}
.appbar .pill{margin-inline-start:auto;background:linear-gradient(135deg,#E9CF6B,var(--gold));color:var(--charcoal);position:relative}

/* الأقسام */
.tabs{position:sticky;top:58px;z-index:20;background:rgba(247,248,250,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tabs .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:none;border-radius:999px;padding:8px 15px;background:var(--surface);font-family:var(--ui);font-weight:500;font-size:13.5px;color:var(--muted);transition:all .2s}
.tab.on{background:var(--purple);color:#fff;box-shadow:0 4px 12px rgba(109,40,217,.3)}

.sec{padding-top:16px;scroll-margin-top:124px}
.sec h2{font-family:var(--ui);font-size:17px;margin:4px 0 12px;display:flex;align-items:center;gap:8px}
.sec h2::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--gold)}
.sec h2 .cnt{font-size:12px;background:var(--cream);color:var(--gold-text);border-radius:8px;padding:1px 8px}
.grid{display:grid;gap:12px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.prod{position:relative;display:flex;gap:12px;background:var(--card);border-radius:20px;padding:12px;text-align:start;width:100%;align-items:stretch;box-shadow:var(--shadow);transition:transform .15s;animation:rise .35s ease both}
.prod:active{transform:scale(.98)}
@keyframes rise{from{transform:translateY(8px)}}
.prod .pi{flex:1;min-width:0;display:flex;flex-direction:column}
.prod .pn{font-family:var(--ui);font-weight:700;font-size:15px;line-height:1.4}
.prod .pd{color:var(--muted);font-size:12.5px;margin-top:4px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .pp{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price{font-family:var(--ui);font-weight:700;color:var(--gold-text)}
.price.sel{font-size:13px}
.old{color:var(--soft);text-decoration:line-through;font-size:12.5px}
.pimgw{position:relative;flex:none;width:100px;height:100px}
.prod .pimg{width:100px;height:100px;border-radius:16px;object-fit:cover;background:var(--surface);display:block}
.add{position:absolute;bottom:-6px;inset-inline-end:-6px;width:32px;height:32px;border-radius:11px;background:var(--charcoal);color:var(--gold-hi);font-size:20px;line-height:31px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pimgw.noimg{width:32px;height:auto;align-self:flex-end}
.pimgw.noimg .add{position:static;display:block}
.incart{position:absolute;top:-6px;inset-inline-start:-6px;background:var(--purple);color:#fff;border-radius:999px;min-width:24px;height:24px;padding:0 7px;font-size:12.5px;font-weight:700;line-height:24px;text-align:center;box-shadow:0 3px 8px rgba(109,40,217,.35);animation:pop .3s both;z-index:1}
.prod.off{opacity:.55}
.prod.off .add{background:var(--soft);color:#fff}
.tag{font-size:11px;border-radius:6px;padding:1px 6px;background:#FDECEC;color:#C62828;font-weight:600}

.empty{text-align:center;color:var(--muted);padding:60px 16px}
.empty b{display:block;font-family:var(--ui);font-size:18px;color:var(--ink);margin-bottom:6px}
.noresult{text-align:center;color:var(--muted);padding:36px 0}
.spacer{height:120px}

/* شريط السلة — فحمي ودهبي */
.cartbar{position:fixed;inset-inline:0;bottom:0;z-index:25;padding:10px 16px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
.cartbar button{pointer-events:auto;max-width:688px;margin:0 auto;display:flex;width:100%;align-items:center;gap:10px;background:var(--charcoal);color:#fff;border-radius:20px;padding:15px 16px;font-family:var(--ui);font-weight:700;box-shadow:var(--shadow-lg);animation:slideUp .35s cubic-bezier(.2,1.2,.4,1) both}
.cartbar.bump button{animation:bump .45s}
@keyframes bump{30%{transform:scale(1.05)}60%{transform:scale(.98)}}
@keyframes slideUp{from{transform:translateY(120%)}}
.cartbar .n{background:linear-gradient(135deg,#E9CF6B,var(--gold));color:var(--charcoal);border-radius:9px;padding:2px 9px}
.cartbar .t{margin-inline-start:auto;color:var(--gold-hi)}

/* الشيت */
.sheet-bg{position:fixed;inset:0;background:rgba(17,17,17,.5);z-index:40;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:41;max-height:92vh;overflow-y:auto;background:var(--card);border-radius:26px 26px 0 0;max-width:720px;margin:0 auto;padding-bottom:calc(10px + env(safe-area-inset-bottom));animation:sheetIn .32s cubic-bezier(.2,1,.3,1) both}
@keyframes sheetIn{from{transform:translateY(100%)}}
.sheet .bar{position:sticky;top:0;background:var(--card);display:flex;align-items:center;gap:8px;padding:14px 16px 12px;z-index:2}
.sheet .bar::before{content:"";position:absolute;top:6px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:var(--line)}
.sheet .bar b{font-family:var(--ui);font-size:17px;flex:1}
.x{width:36px;height:36px;border-radius:50%;background:var(--surface);font-size:15px;color:var(--muted);flex:none}
.sheet .body{padding:0 16px 14px}
.simg{width:100%;max-height:270px;object-fit:cover;border-radius:20px;background:var(--surface);display:block}
.sdesc{color:var(--muted);font-size:13.5px;margin:10px 0 0;line-height:1.6}
.grp{margin-top:18px}
.grp h3{font-family:var(--ui);font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req{font-size:11px;background:var(--cream);color:var(--gold-text);border:1px solid #F3DFA2;border-radius:6px;padding:1px 7px;font-weight:700}
.grp.miss .req{background:#FDECEC;color:#C62828;border-color:#F5B5B5}
.grp.miss{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:8px;width:100%;text-align:start;background:#fff;transition:all .15s}
.opt:active{transform:scale(.99)}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid #C7CBD3;flex:none;position:relative;transition:all .15s}
.opt.multi .dot{border-radius:6px}
.opt.on{border-color:var(--purple);background:var(--purple-soft)}
.opt.on .dot{border-color:var(--purple);background:var(--purple)}
.opt.on .dot::after{content:"";position:absolute;inset:4px;border-radius:inherit;background:#fff}
.opt.multi.on .dot::after{inset:0;content:"✓";color:#fff;font-size:12px;line-height:16px;text-align:center;background:none}
.opt .op{margin-inline-start:auto;color:var(--gold-text);font-weight:700;font-size:13.5px}
.ingr{display:flex;flex-wrap:wrap;gap:6px}
.ing{border:1.5px solid var(--emerald);color:var(--emerald);background:var(--emerald-soft);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600}
.ing::before{content:'✓ '}
.ing.off{border-color:#F5B5B5;color:#C62828;background:#FDECEC;text-decoration:line-through}
.ing.off::before{content:'✕ '}
.field{display:block;width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.field:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.12)}
label.l{display:block;font-family:var(--ui);font-weight:600;font-size:13.5px;margin:14px 0 6px}
.row{display:flex;gap:8px}
.row>*{flex:1;min-width:0}
.qty{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:14px;padding:4px;flex:none}
.qty button{width:36px;height:36px;border-radius:11px;background:var(--charcoal);font-size:19px;font-weight:700;color:var(--gold-hi)}
.qty span{font-family:var(--ui);font-weight:700;font-size:16px;min-width:22px;text-align:center}
.foot{position:sticky;bottom:0;background:var(--card);padding:12px 16px 4px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:15px 16px;font-family:var(--ui);font-weight:700;width:100%;transition:transform .12s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.main{background:var(--charcoal);color:var(--gold-hi)}
.btn.vio{background:var(--purple);color:#fff}
.btn.soft{background:var(--surface);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:#C62828;font-size:13px;margin-top:8px}
.note{color:var(--muted);font-size:12.5px;margin-top:6px}

/* السلة والدفع */
.line{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);animation:rise .25s both}
.line .ln{flex:1;min-width:0}
.line .ln b{font-family:var(--ui);font-weight:700}
.line .lo{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.line .price{color:var(--emerald)}
.line .qty button{width:30px;height:30px;font-size:16px;border-radius:9px}
.step{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.step>h3{font-family:var(--ui);font-size:15px;margin:0 0 4px;display:flex;gap:8px;align-items:center}
.step>h3::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--gold)}
.seg{display:flex;background:var(--surface);border-radius:14px;padding:4px;gap:4px;margin:10px 0 4px}
.seg button{flex:1;padding:10px;border-radius:11px;font-family:var(--ui);font-weight:600;color:var(--muted);transition:all .15s}
.seg button.on{background:var(--charcoal);color:var(--gold-hi)}
#map{height:250px;border-radius:16px;margin-top:10px;z-index:1;border:1px solid var(--line)}
.sum{margin-top:6px}
.sum div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--muted)}
.sum div span:last-child{color:var(--ink);font-weight:600}
.sum .disc span{color:var(--emerald)!important}
.totcard{margin-top:10px;background:var(--charcoal);color:#fff;border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.totcard b{font-family:var(--serif);font-size:24px;color:var(--gold-hi)}
.ok{background:var(--emerald-soft);color:var(--emerald);border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:8px;font-weight:600}
.warn{background:var(--cream);color:#8a5a00;border:1px solid #F3DFA2;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:8px}
.who{display:flex;align-items:center;gap:8px;background:var(--emerald-soft);color:var(--emerald);border-radius:14px;padding:11px 12px;font-size:14px;font-weight:600}
.who button{margin-inline-start:auto;color:var(--muted);font-weight:600;font-size:13px}

/* نجاح ومتابعة */
.done{text-align:center;padding:30px 0}
.done .big{width:96px;height:96px;margin:0 auto;border-radius:50%;background:var(--emerald-soft);display:grid;place-items:center;font-size:46px;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.done h2{font-family:var(--ui);font-size:24px;margin:14px 0 6px}
.track{display:flex;justify-content:space-between;margin:24px 0 6px;position:relative}
.track::before{content:"";position:absolute;top:16px;inset-inline:16px;height:3px;background:var(--line)}
.track div{position:relative;flex:1;font-size:12px;color:var(--soft)}
.track i{display:block;width:34px;height:34px;border-radius:50%;background:var(--surface);border:2px solid var(--line);margin:0 auto 6px;font-style:normal;line-height:30px;font-size:15px;transition:all .3s}
.track div.on i{background:var(--emerald-soft);border-color:var(--emerald)}
.track div.on{color:var(--ink);font-weight:700}
.track div.cur i{box-shadow:0 0 0 6px rgba(15,110,86,.15);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 11px rgba(15,110,86,.04)}}

.toast{position:fixed;top:68px;inset-inline:16px;z-index:60;max-width:520px;margin:0 auto;background:var(--charcoal);color:#fff;border-radius:16px;padding:12px 16px;font-size:14px;box-shadow:var(--shadow-lg);animation:slideDown .3s both}
@keyframes slideDown{from{transform:translateY(-20px)}}
.load{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(241,213,122,.35);border-top-color:var(--gold-hi);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle}
.load.dark{border-color:rgba(201,162,39,.25);border-top-color:var(--gold)}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{height:116px;border-radius:20px;background:linear-gradient(90deg,#EEF0F3,#F8F9FB,#EEF0F3);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 🌙 الوضع الليلي — نفس ألوان دارك الأبلكيشن (AppColors) */
:root[data-theme="dark"]{
  --bg:#0B0F1A;--card:#161D2F;--ink:#F3F4F6;--muted:#9CA3AF;--soft:#6B7280;--line:#2A3348;--surface:#1E2740;
  --charcoal:#0F1422;--navy:#0F1422;--gold-text:#E2C25A;--gold-line:#2A3348;--cream:#2A2414;
  --purple:#8B5CF6;--purple-soft:#241B45;--emerald:#34D399;--emerald-soft:#0F2A24;
  --shadow:0 4px 18px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .top{background:rgba(11,15,26,.92)}
:root[data-theme="dark"] .brand b{color:#F3F4F6}
:root[data-theme="dark"] .tabs{background:rgba(11,15,26,.92)}
:root[data-theme="dark"] .pill.line,:root[data-theme="dark"] .search,:root[data-theme="dark"] .opt,:root[data-theme="dark"] .field{background:var(--card)}
:root[data-theme="dark"] .search{border-color:#5A4A1A}
:root[data-theme="dark"] .chip.min,:root[data-theme="dark"] .req,:root[data-theme="dark"] .warn{border-color:#5A4A1A}
:root[data-theme="dark"] .warn{color:#F1D57A}
:root[data-theme="dark"] .chip.closed,:root[data-theme="dark"] .tag,:root[data-theme="dark"] .ing.off{background:#3A1A1F;color:#FCA5A5;border-color:#5B2930}
:root[data-theme="dark"] .btn.main,:root[data-theme="dark"] .cartbar button,:root[data-theme="dark"] .totcard,:root[data-theme="dark"] .seg button.on,:root[data-theme="dark"] .qty button,:root[data-theme="dark"] .add,:root[data-theme="dark"] .pill.dark{background:#000;border:1px solid #3A3220}
:root[data-theme="dark"] .skel{background:linear-gradient(90deg,#161D2F,#1E2740,#161D2F);background-size:200% 100%}
:root[data-theme="dark"] .leaflet-tile{filter:brightness(.75) invert(1) contrast(.9) hue-rotate(180deg) saturate(.4)}
.iconbtn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--gold-line);display:grid;place-items:center;font-size:15px;font-weight:700;font-family:var(--ui);color:var(--gold-text);flex:none;background:var(--card)}
html[dir="ltr"] .sec h2::before,html[dir="ltr"] .step>h3::before{order:-1}

/* زرار باقي المحلات */
.more{margin-top:10px;display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--gold-line);border-radius:20px;padding:12px 14px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.more:active{transform:scale(.98)}
.more .ic{width:42px;height:42px;border-radius:14px;background:var(--cream);display:grid;place-items:center;font-size:20px;flex:none}
.more b{font-family:var(--ui);font-size:14.5px;display:block}
.more small{color:var(--muted);font-size:12px}
.more .arr{margin-inline-start:auto;font-size:26px;color:var(--gold-text);line-height:1}
html,body{overflow-x:hidden}
@media(max-width:480px){.top .lbl{display:none}.top .pill{width:36px;height:36px;padding:0;justify-content:center}}

/* 💬 شات خدمة العملاء */
#supportLayer .more{margin-top:10px}
.chatbox{height:min(52vh,420px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px}
.msg{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg small{display:block;font-size:11px;color:var(--gold-text);font-weight:700;margin-bottom:2px}
.msg img{display:block;max-width:100%;border-radius:10px;margin-top:6px}
.msg.me{align-self:flex-start;background:var(--charcoal);color:#fff;border-end-start-radius:4px}
.msg.them{align-self:flex-end;background:var(--surface);border-end-end-radius:4px}
.chatin{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--line)}

/* 🏪 صفحة كل المحلات */
.shero{background:linear-gradient(160deg,var(--navy),#2A2350);color:#fff;padding:22px 0 30px;position:relative;overflow:hidden}
.shero::before{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.35),transparent 70%)}
.shero h1{font-family:var(--ui);font-size:24px;margin:0 0 4px;position:relative}
.shero p{margin:0;color:#C9C6DA;font-size:13.5px;position:relative}
.shero .search{background:#fff;border-color:transparent;margin-top:16px;position:relative}
:root[data-theme="dark"] .shero .search{background:var(--card)}
.cats{display:flex;gap:10px;overflow-x:auto;padding:14px 16px 4px;scrollbar-width:none;max-width:720px;margin:0 auto}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;width:76px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted)}
.cat .ci{width:64px;height:64px;margin:0 auto 6px;border-radius:20px;background:var(--card);box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden;border:2px solid transparent;transition:all .2s;font-size:26px}
.cat .ci img{width:100%;height:100%;object-fit:cover}
.cat.on{color:var(--ink)}
.cat.on .ci{border-color:var(--purple);box-shadow:0 6px 16px rgba(109,40,217,.25);transform:translateY(-2px)}
.tools{display:flex;gap:8px;align-items:center;margin-top:10px}
.tools .pill{border:1.5px solid var(--line);background:var(--card);color:var(--muted)}
.tools .pill.on{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
.tools .cnt{margin-inline-start:auto;color:var(--muted);font-size:12.5px}
.feat{display:flex;gap:12px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.feat::-webkit-scrollbar{display:none}
.fcard{flex:none;width:230px;border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);text-decoration:none;position:relative}
.fcard .fimg{height:110px;background-size:cover;background-position:center;position:relative}
.fcard .fimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.45))}
.fcard .fl{position:absolute;bottom:-22px;inset-inline-start:12px;width:48px;height:48px;border-radius:14px;object-fit:cover;border:3px solid var(--card);background:#fff;z-index:1}
.fcard .fb{padding:26px 12px 12px}
.fcard b{font-family:var(--ui);font-size:15px;display:block}
.fcard .star{position:absolute;top:10px;inset-inline-end:10px;z-index:1;background:linear-gradient(135deg,#E9CF6B,var(--gold));color:var(--charcoal);font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px}
.scard{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:20px;padding:12px;box-shadow:var(--shadow);text-decoration:none;position:relative;overflow:hidden;animation:rise .35s ease both;transition:transform .15s}
.scard:active{transform:scale(.98)}
.scard::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.scard .sl{width:68px;height:68px;border-radius:18px;object-fit:cover;background:var(--surface);flex:none}
.scard .si{flex:1;min-width:0}
.scard b{font-family:var(--ui);font-size:15.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:12px;color:var(--muted);align-items:center}
.smeta .rt{color:var(--gold-text);font-weight:700}
.scard.closed{opacity:.6}
.scard .go{font-size:24px;color:var(--gold-text)}
.badge{font-size:11px;border-radius:6px;padding:1px 7px;font-weight:700}
.badge.o{background:var(--emerald-soft);color:var(--emerald)}
.badge.c{background:#FDECEC;color:#C62828}
.badge.h{background:var(--charcoal);color:var(--gold-hi)}
.helpcard{margin-top:22px;display:flex;align-items:center;gap:12px;background:var(--card);border-radius:20px;padding:14px;box-shadow:var(--shadow);border:1.5px solid var(--gold-line)}
.helpcard .ic{width:46px;height:46px;border-radius:15px;background:var(--emerald-soft);display:grid;place-items:center;font-size:22px;flex:none}
.helpcard b{font-family:var(--ui);display:block}
.helpcard small{color:var(--muted)}
.helpcard .btn{width:auto;margin-inline-start:auto;padding:11px 14px}

/* 🎁 كود خصم الأبلكيشن */
.coupon{position:relative;margin-top:4px;border:2px dashed var(--gold);background:var(--cream);border-radius:20px;padding:16px;text-align:center}
.coupon small{display:block;color:var(--gold-text);font-weight:700;font-size:12px}
.coupon b{display:block;font-family:var(--serif);font-size:30px;letter-spacing:4px;color:var(--ink);margin:6px 0 10px;user-select:all}
.steps{margin:14px 0 8px;padding-inline-start:22px;line-height:2;font-size:14px}
.steps li::marker{color:var(--gold-text);font-weight:700}
.appbar .pill.gift{animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-7deg)}95%{transform:rotate(7deg)}}

button.appbar{width:100%;text-align:start;font:inherit;cursor:pointer}

/* 📍 عناوين العميل */
.addrs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.addrs::-webkit-scrollbar{display:none}
.addr{flex:none;max-width:220px;text-align:start;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:9px 12px;transition:all .15s}
.addr b{display:block;font-family:var(--ui);font-size:13.5px}
.addr small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr.on{border-color:var(--purple);background:var(--purple-soft)}