:root{--green:#0f5132;--green-2:#14532d;--green-soft:#ecfdf5;--orange:#f97316;--orange-2:#c2410c;--orange-soft:#fff7ed;--ink:#0f172a;--muted:#64748b;--bg:#f6f7f9;--card:#fff;--line:#e5e7eb;--danger:#e11d48;--radius:14px;--nav:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{font-family:Tajawal,"Noto Sans Arabic",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:15px}
[x-cloak]{display:none!important}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit}img{max-width:100%;display:block}
.app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:calc(var(--nav) + 12px)}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px;min-height:56px}.topbar h1{font-size:1.05rem;margin:0;flex:1;font-weight:800}.topbar .back{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:1.1rem}
.iconbtn{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:1.15rem}.iconbtn .badge{position:absolute;top:-6px;left:-6px;background:var(--orange);color:#fff;font-size:.7rem;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.page{padding:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}.card h3{margin:0 0 8px;font-size:1rem}.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.muted{color:var(--muted);font-size:.9rem}.small{font-size:.85rem}.grow{flex:1}.mt{margin-top:10px}.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;font-weight:800;border:2px solid transparent;min-height:46px;transition:.15s;width:100%}.btn.sm{min-height:38px;padding:8px 12px;width:auto;font-size:.9rem}.btn-primary{background:var(--green);color:#fff}.btn-primary:disabled{opacity:.5}.btn-orange{background:var(--orange);color:#fff}.btn-outline{background:#fff;border-color:var(--green);color:var(--green)}.btn-ghost{background:transparent;color:var(--muted)}.btn-danger{background:#fff;border-color:var(--danger);color:var(--danger)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-weight:700;font-size:.9rem}.field input,.field select,.field textarea{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:500;width:100%}.field input:focus{outline:2px solid #86efac;border-color:transparent}
.deliver-to{background:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.deliver-to b{display:block;font-size:.95rem}.deliver-to span{font-size:.8rem;color:var(--muted)}
.search{margin:12px 14px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center;color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px}.svc{border-radius:18px;padding:18px 14px;color:#fff;display:flex;flex-direction:column;gap:2px;min-height:110px;justify-content:flex-end;position:relative;overflow:hidden}.svc b{font-size:1.25rem}.svc span{font-size:.85rem;opacity:.9}.svc .em{position:absolute;top:10px;left:12px;font-size:2rem}.svc.shop{background:linear-gradient(135deg,#0f5132,#14532d)}.svc.food{background:linear-gradient(135deg,#f97316,#c2410c)}
.section-title{display:flex;justify-content:space-between;align-items:baseline;margin:16px 14px 8px}.section-title h2{margin:0;font-size:1.05rem;font-weight:800}.section-title a{color:var(--green);font-size:.85rem;font-weight:700}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:0 14px 6px;scroll-snap-type:x mandatory}.hscroll>*{scroll-snap-align:start;flex:0 0 auto}
.banner{min-width:88%;border-radius:16px;padding:16px;color:#fff;position:relative;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end}.banner b{font-size:1.15rem}.banner .tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.25);font-size:.7rem;padding:2px 8px;border-radius:999px}.banner .x{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.25);border:0;color:#fff;width:26px;height:26px;border-radius:50%}
.cat{width:78px;text-align:center;font-size:.8rem}.cat .c{width:64px;height:64px;border-radius:20px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:1.7rem;margin:0 auto 4px}
.pcard{width:160px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.pcard img{aspect-ratio:1;object-fit:cover;background:#f1f5f9}.pcard .pb{padding:8px 10px}.pcard .n{font-size:.85rem;font-weight:700;line-height:1.3;height:2.6em;overflow:hidden}.price{color:var(--green);font-weight:800}.strike{color:var(--muted);text-decoration:line-through;font-size:.8rem;margin-inline-start:6px}.seller{font-size:.75rem;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}.pgrid .pcard{width:auto}
.rcard{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 14px 10px}.rcard .lg{width:64px;height:64px;border-radius:14px;background:var(--orange-soft);display:grid;place-items:center;font-size:1.8rem}.rcard b{display:block}.rcard .meta{font-size:.8rem;color:var(--muted)}.chip{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:999px;background:#f1f5f9;color:#334155;margin-inline-end:4px}.chip.ok{background:var(--green-soft);color:var(--green)}.chip.off{background:#fee2e2;color:#991b1b}.chip.orange{background:var(--orange-soft);color:var(--orange-2)}
.wallet-card{margin:14px;background:linear-gradient(135deg,#0f5132,#065f46);color:#fff;border-radius:18px;padding:16px;display:flex;align-items:center;gap:12px}.wallet-card b{font-size:1.4rem;display:block}.wallet-card span{font-size:.8rem;opacity:.85}.wallet-card button{margin-inline-start:auto;background:var(--orange);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:800}
.order-live{margin:14px;background:var(--orange-soft);border:1px solid #fed7aa;border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}.order-live b{display:block;font-size:.95rem}.order-live span{font-size:.8rem;color:var(--orange-2)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;height:var(--nav);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:20}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.72rem;color:var(--muted);font-weight:700}.bottom-nav a .i{font-size:1.35rem}.bottom-nav a.on{color:var(--green)}
.cart-bar{position:fixed;bottom:calc(var(--nav) + 10px);left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:532px;background:var(--green);color:#fff;border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;z-index:19;box-shadow:0 10px 30px rgba(15,81,50,.3)}
.line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.92rem}.line:last-child{border:0}.line.total{font-weight:800;font-size:1.05rem;border-top:2px solid var(--line);padding-top:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}.qty button{width:34px;height:34px;border:0;background:#fff;font-size:1.1rem}.qty span{min-width:28px;text-align:center;font-weight:800}
.item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.item img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f1f5f9}.item:last-child{border:0}
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:800}.status.warning{background:#fef3c7;color:#92400e}.status.info{background:#dbeafe;color:#1e40af}.status.success{background:#dcfce7;color:#166534}.status.danger{background:#fee2e2;color:#991b1b}.status.gray{background:#f1f5f9;color:#475569}
.timeline{list-style:none;padding:0;margin:0}.timeline li{display:flex;gap:10px;padding:6px 0;font-size:.9rem}.timeline .dot{width:10px;height:10px;border-radius:50%;background:var(--green);margin-top:8px;flex:0 0 auto}.timeline .t{color:var(--muted);font-size:.8rem;margin-inline-start:auto;white-space:nowrap}
.sheet{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:30;display:flex;align-items:flex-end;justify-content:center}.sheet .box{background:#fff;width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:16px;max-height:88vh;overflow:auto}.sheet h3{margin:0 0 10px}
.opt{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.opt label{display:flex;align-items:center;gap:8px;font-weight:600}.opt .p{color:var(--muted);font-size:.85rem}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:12px;z-index:50;font-weight:700;max-width:90%;text-align:center}.toast.err{background:var(--danger)}
.empty{text-align:center;color:var(--muted);padding:40px 14px}.empty .e{font-size:3rem}
.tabs{display:flex;gap:6px;padding:10px 14px;overflow-x:auto}.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;color:var(--muted);white-space:nowrap}.tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
.code-box{font-family:ui-monospace,monospace;font-size:1.8rem;letter-spacing:6px;text-align:center;background:var(--green-soft);color:var(--green);border-radius:12px;padding:12px;font-weight:800}
.map{height:240px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.skeleton{background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;height:14px;margin:6px 0}@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.big{font-size:1.5rem;font-weight:800}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.kpi b{display:block;font-size:1.3rem}.kpi span{color:var(--muted);font-size:.8rem}
.switch{position:relative;width:52px;height:30px;background:#cbd5e1;border-radius:999px;border:0;transition:.2s}.switch.on{background:var(--green)}.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}.switch.on::after{left:25px}
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 20px;background:radial-gradient(800px 400px at 50% -10%,#ecfdf5 0,#f6f7f9 60%)}.login .logo{text-align:center;margin-bottom:24px}.login .logo img{width:72px;margin:0 auto 8px}.login .logo b{font-size:1.8rem;color:var(--green)}.login .logo p{margin:0;color:var(--muted)}
.notice{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 12px;border-radius:10px;font-size:.85rem}
@media (min-width:720px){body{background:#e8ebef}.app{box-shadow:0 0 0 1px var(--line);margin-top:0}}