/* طاولتي — نظام التصميم (نسخة PHP النيتف)
   مستقل عن web/assets/css/app.css لأن أسماء الأصناف هنا مبنيّة على HTML مُصيَّر من الخادم. */

:root{
  --flame:#ED6A2C; --flame-d:#C9521A; --flame-l:#FFEDE3;
  --amber:#F9B233; --amber-l:#FFE7B8;
  --basil:#16A46B; --basil-l:#E4F7EE;
  --ink:#1A1512; --ink-60:#6B6058; --ink-40:#9A8F86;
  --paper:#FFFDFA; --sand:#FFF6EA; --line:#EFE4D6;
  --danger:#D93B30; --danger-l:#FDECEA;
  --r:16px; --r-sm:10px; --r-lg:24px;
  --sh:0 1px 2px rgba(26,21,18,.05), 0 8px 24px -12px rgba(26,21,18,.18);
  --sh-lg:0 24px 60px -28px rgba(26,21,18,.35);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.65;
}
h1,h2,h3,h4{font-family:Rubik,"IBM Plex Sans Arabic",sans-serif; margin:0 0 .5rem; line-height:1.25}
h1{font-size:1.75rem; font-weight:800}
h2{font-size:1.2rem; font-weight:700}
a{color:inherit; text-decoration:none}
p{margin:.35rem 0}
img{max-width:100%; display:block}
s{color:var(--ink-40)}
em{font-style:normal}
summary{cursor:pointer; font-weight:600; color:var(--flame-d)}
table{border-collapse:collapse; width:100%}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.muted{color:var(--ink-60)}
.small{font-size:.82rem}
.grow{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.hidden{display:none}
.center{text-align:center}
.pad{padding:38px 24px}
.mt{margin-top:14px}
.inline{display:inline}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.back{display:inline-block; color:var(--ink-60); margin-bottom:6px}

/* ------------------------------------------------------------ الشريط العلوي */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,253,250,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:16px; height:66px}
.brand{display:flex; align-items:center; gap:9px; font-family:Rubik; font-weight:800; font-size:1.15rem}
.brand-mark{width:34px; height:34px; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(140deg,var(--flame),var(--amber)); color:#fff; font-size:1.05rem}
.brand-word{color:var(--flame-d)}
.topnav{display:flex; align-items:center; gap:16px; margin-inline-start:auto; font-weight:600}
.topnav a{color:var(--ink-60)}
.topnav a:hover{color:var(--flame-d)}
.topnav .ghost{color:var(--ink-40); font-weight:500}
.cart-link{position:relative}
.dot{position:absolute; top:-9px; inset-inline-start:-12px; background:var(--flame); color:#fff;
  min-width:19px; height:19px; border-radius:10px; font-size:.7rem; display:grid; place-items:center; padding:0 5px}
.loc-pill{display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--sand);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:.86rem; cursor:pointer; color:var(--ink);
  max-width:270px}
.loc-pill:hover{border-color:var(--flame)}
.loc-pill .pin{color:var(--flame)}
.loc-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ------------------------------------------------------------ الرسائل */
.flashes{margin-top:14px; display:grid; gap:8px}
.flash{padding:11px 16px; border-radius:var(--r-sm); font-weight:600; border:1px solid}
.flash-ok{background:var(--basil-l); border-color:#BFE9D5; color:#0C6B45}
.flash-err{background:var(--danger-l); border-color:#F6C9C5; color:#9E2119}
.flash-warn{background:var(--amber-l); border-color:#F3D79A; color:#7A5405}

/* ------------------------------------------------------------ الأزرار والحقول */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border:1px solid transparent; background:var(--flame); color:#fff; font:inherit; font-weight:700;
  padding:11px 20px; border-radius:var(--r-sm); transition:.15s}
.btn:hover{background:var(--flame-d)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--flame); color:var(--flame-d)}
.btn.danger{color:var(--danger); border-color:#F1C6C2}
.btn.danger:hover{background:var(--danger-l); border-color:var(--danger)}
.btn-sm{padding:7px 13px; font-size:.85rem; border-radius:9px}
.btn-lg{padding:14px 26px; font-size:1.02rem}
.btn.wide,.wide{width:100%}
.qbtn{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:#fff;
  font:inherit; font-weight:700; cursor:pointer}
.qbtn:hover{border-color:var(--flame)}
.qbtn.del{color:var(--danger)}

.in{width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; color:var(--ink)}
.in:focus{outline:none; border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-l)}
.in-num{max-width:110px}
.in-sm{max-width:180px; padding:7px 11px; font-size:.85rem}
.lbl{display:block; margin:12px 0 5px; font-weight:600; font-size:.88rem; color:var(--ink-60)}
.chk,.in-inline{display:inline-flex; align-items:center; gap:7px; font-size:.9rem; color:var(--ink-60)}
textarea.in{resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start}
.form-grid .wide{grid-column:1/-1}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--sh); margin-block:14px}
.filters .in{width:auto; min-width:150px}

.seg{display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--sand); border:1px solid var(--line);
  padding:4px; border-radius:999px; margin-bottom:16px}
.seg a{padding:7px 16px; border-radius:999px; font-weight:600; font-size:.88rem; color:var(--ink-60)}
.seg a.on{background:#fff; color:var(--flame-d); box-shadow:var(--sh)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff;
  padding:6px 12px; border-radius:999px; font-size:.85rem; cursor:pointer}
.chip:has(input:checked){border-color:var(--flame); background:var(--flame-l); color:var(--flame-d); font-weight:600}

/* ------------------------------------------------------------ البطاقات */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px;
  box-shadow:var(--sh); margin-bottom:16px}
.page{padding-block:26px 60px}
.narrow{max-width:760px; margin-inline:auto}
.page-title{margin-bottom:4px}
.empty{text-align:center; padding:48px 20px; color:var(--ink-60)}
.empty h3{color:var(--ink)}
.notice{background:var(--amber-l); border:1px solid #F3D79A; border-radius:var(--r); padding:14px 18px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px}
.success{border-color:#BFE9D5; background:var(--basil-l)}

/* ------------------------------------------------------------ الهيرو والرادار */
.hero{background:linear-gradient(160deg,var(--sand),#fff 62%); border-bottom:1px solid var(--line)}
.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding-block:52px}
.eyebrow{color:var(--flame-d); font-weight:700; letter-spacing:.02em; margin:0}
.hero h1{font-size:2.6rem; margin:.3rem 0 .6rem}
.hero h1 span{color:var(--flame)}
.lede{font-size:1.05rem; color:var(--ink-60); max-width:46ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 10px}

.radar{position:relative}
.radar svg{width:100%; height:auto}
.radar .ring{fill:none; stroke:var(--line); stroke-width:1.5}
.radar .me{fill:var(--flame)}
.radar .blip circle{fill:var(--basil); opacity:.9}
.radar .blip text{font-size:11px; fill:var(--ink-60); font-family:"IBM Plex Sans Arabic"}
.radar-cap{text-align:center; color:var(--ink-60); font-size:.86rem; margin-top:6px}

/* ------------------------------------------------------------ الأقسام والشبكات */
.sect{padding-block:34px}
.sect-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px}
.sect-head a{color:var(--flame-d); font-weight:600; font-size:.9rem}
.grid{display:grid; gap:16px}
.stores{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dishes{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.revs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.join3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.cuisine-strip{display:flex; gap:18px; overflow-x:auto; padding-bottom:8px}
.cuisine{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:88px; font-size:.85rem;
  font-weight:600; color:var(--ink-60)}
.cuisine-img{width:74px; height:74px; border-radius:50%; overflow:hidden; border:2px solid var(--line);
  background:var(--sand); display:grid; place-items:center; transition:.15s}
.cuisine-img img{width:100%; height:100%; object-fit:cover}
.cuisine:hover .cuisine-img{border-color:var(--flame); transform:translateY(-3px)}

/* بطاقة متجر */
.store{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); transition:.16s; display:block}
.store:hover{transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:#E3D2BC}
.store.closed{opacity:.72}
.store-cover{display:block; position:relative; height:132px; background:var(--sand)}
.store-cover img{width:100%; height:100%; object-fit:cover}
.closed-tag{position:absolute; inset-inline-end:10px; top:10px; background:rgba(26,21,18,.8); color:#fff;
  font-size:.75rem; padding:4px 10px; border-radius:999px}
.store-body{display:block; padding:13px 15px 16px}
.store-top{display:flex; align-items:center; gap:9px}
.store-logo{width:38px; height:38px; border-radius:11px; overflow:hidden; border:1px solid var(--line);
  background:#fff; flex:none}
.store-logo img{width:100%; height:100%; object-fit:cover}
.store-logo.lg{width:70px; height:70px; border-radius:18px}
.store-name{flex:1; font-size:1rem}
.store-meta{display:flex; flex-wrap:wrap; gap:6px; color:var(--ink-60); font-size:.85rem; margin-top:6px}
.star{color:var(--amber); font-weight:700}

/* مؤشر القرب */
.prox{display:inline-flex; flex-direction:column; align-items:center; gap:1px; flex:none}
.prox svg{width:38px; height:38px; transform:rotate(-90deg)}
.prox-bg{fill:none; stroke:var(--line); stroke-width:4}
.prox-fg{fill:none; stroke:var(--basil); stroke-width:4; stroke-linecap:round; transition:.4s}
.prox b{font-size:.7rem; color:var(--ink-60)}

/* بطاقة صنف */
.dish{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); display:flex; flex-direction:column}
.dish-img{position:relative; height:132px; background:var(--sand); display:block}
.dish-img img{width:100%; height:100%; object-fit:cover}
.off{position:absolute; top:9px; inset-inline-start:9px; background:var(--flame); color:#fff;
  font-size:.72rem; padding:3px 9px; border-radius:999px}
.dish-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px}
.price{font-weight:800; color:var(--flame-d)}
.opt-group{border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; margin:8px 0}
.opt-group legend{font-size:.82rem; font-weight:700; color:var(--ink-60); padding-inline:5px}
.req{color:var(--danger); font-size:.72rem}
.opt{display:flex; align-items:center; gap:7px; font-size:.86rem; padding:2px 0}
.opt b{margin-inline-start:auto; color:var(--flame-d)}
.add-row{display:flex; gap:8px; align-items:center; margin-top:8px}

/* صفحة المتجر */
.store-hero{position:relative; height:250px; overflow:hidden; background:var(--sand)}
.store-hero-img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.store-hero-in{position:relative; display:flex; gap:16px; align-items:flex-end; height:100%;
  padding-bottom:20px; color:#fff; background:linear-gradient(to top,rgba(26,21,18,.85),transparent 72%)}
.store-hero-in h1{color:#fff; margin:0}
.store-hero-in .store-meta,.store-hero-in .muted{color:rgba(255,255,255,.85)}
.tabs{display:flex; gap:8px; overflow-x:auto; padding:12px 0; position:sticky; top:66px;
  background:var(--paper); border-bottom:1px solid var(--line); z-index:20}
.tabs a{padding:7px 15px; border-radius:999px; background:var(--sand); font-weight:600; font-size:.88rem;
  white-space:nowrap}
.tabs a:hover{background:var(--flame-l); color:var(--flame-d)}
.menu-cat{padding-block:26px}
.tag{display:inline-block; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:600}
.tag.ok{background:var(--basil-l); color:#0C6B45}
.tag.warn{background:var(--amber-l); color:#7A5405}
.tag.err{background:var(--danger-l); color:#9E2119}
.rev p{margin:6px 0}

/* ------------------------------------------------------------ السلة والطلبات */
.cart-store{display:flex; align-items:center; gap:12px}
.cart-line{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-img{width:56px; height:56px; border-radius:12px; overflow:hidden; background:var(--sand); flex:none}
.cart-img img{width:100%; height:100%; object-fit:cover}
.cart-info{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.qty-form{display:flex; align-items:center; gap:7px}
.line-total{min-width:86px; text-align:end}
.totals div{display:flex; justify-content:space-between; padding:5px 0; color:var(--ink-60)}
.totals .grand{border-top:1px dashed var(--line); margin-top:6px; padding-top:10px; color:var(--ink);
  font-size:1.1rem; font-weight:800}
.sum-line{display:flex; justify-content:space-between; gap:12px; padding:5px 0}
.row-actions{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cart-bar{position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:12px 0;
  box-shadow:0 -8px 24px -18px rgba(26,21,18,.4); z-index:30}
.cart-bar-in{display:flex; align-items:center; justify-content:space-between; gap:14px; font-weight:700}

.addr-list{display:grid; gap:8px}
.addr{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; display:flex;
  flex-direction:column; gap:2px}
.addr.on{border-color:var(--flame); background:var(--flame-l)}
.addr-row{border-bottom:1px solid var(--line); padding:10px 0}
.addr-row:last-child{border-bottom:0}
.pay-row{display:flex; gap:10px; flex-wrap:wrap}
.pay{display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 14px; cursor:pointer; font-size:.9rem}
.pay:has(input:checked){border-color:var(--flame); background:var(--flame-l)}

.order-row{display:flex; align-items:center; gap:12px}
.order-card .mini{margin:8px 0; padding-inline-start:20px; color:var(--ink-60); font-size:.88rem}
.st{display:inline-block; padding:3px 11px; border-radius:999px; font-size:.78rem; font-weight:700;
  background:var(--sand); color:var(--ink-60); width:fit-content}
.st.big{font-size:.95rem; padding:6px 16px}
.st-pending{background:var(--amber-l); color:#7A5405}
.st-accepted,.st-preparing{background:var(--flame-l); color:var(--flame-d)}
.st-ready,.st-assigned,.st-picked_up{background:#E7F0FF; color:#1D4ED8}
.st-delivered{background:var(--basil-l); color:#0C6B45}
.st-cancelled,.st-rejected{background:var(--danger-l); color:#9E2119}

.timeline{list-style:none; margin:16px 0 0; padding:0; position:relative}
.timeline:before{content:""; position:absolute; inset-inline-start:7px; top:8px; bottom:8px; width:2px;
  background:var(--line)}
.timeline li{position:relative; padding-inline-start:28px; padding-block:7px; color:var(--ink-40)}
.timeline li:before{content:""; position:absolute; inset-inline-start:0; top:13px; width:16px; height:16px;
  border-radius:50%; background:#fff; border:2px solid var(--line)}
.timeline li.done{color:var(--ink)}
.timeline li.done:before{background:var(--basil); border-color:var(--basil)}
.timeline li.now:before{background:var(--flame); border-color:var(--flame); box-shadow:0 0 0 5px var(--flame-l)}
.timeline li b{display:block}
.notif{padding:9px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.notif:last-child{border-bottom:0}
.notif.unread{border-inline-start:3px solid var(--flame); padding-inline-start:10px}
.map-box{height:280px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin-top:10px}
.map-box.sm{height:180px}
.leg{border-inline-start:3px solid var(--flame-l); padding-inline-start:14px; margin:14px 0}
.leg b{display:block}
.online-bar{position:sticky; top:0; z-index:15}

/* ------------------------------------------------------------ الانضمام والتذييل */
.join-band{background:var(--sand); border-radius:var(--r-lg); padding:34px 26px; margin-block:20px 50px}
.join-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
.join-card p{color:var(--ink-60); min-height:60px}
.veh-row{display:flex; gap:10px; flex-wrap:wrap}
.veh{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 18px; cursor:pointer;
  display:flex; align-items:center; gap:8px}
.veh:has(input:checked){border-color:var(--flame); background:var(--flame-l)}
.auth{display:grid; place-items:center; min-height:66vh}
.auth-card{width:100%; max-width:420px}

.footer{background:var(--ink); color:#EFE7DE; margin-top:40px; padding-top:38px}
.footer-in{display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px; padding-bottom:28px}
.footer h4{color:#fff; margin-bottom:8px}
.footer a{display:block; color:#C9BFB5; padding:3px 0}
.footer a:hover{color:var(--amber)}
.footer .brand-word{color:var(--amber)}
.footer .muted{color:#A99E94}
.copy{border-top:1px solid rgba(255,255,255,.1); padding-block:16px; font-size:.83rem; color:#A99E94}

/* ------------------------------------------------------------ لوحات التحكم */
body.panel{background:var(--sand)}
.shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
.side{background:#fff; border-inline-end:1px solid var(--line); padding:20px 16px; position:sticky; top:0;
  height:100vh; display:flex; flex-direction:column; gap:6px}
.side-title{font-size:.8rem; color:var(--ink-40); font-weight:700; margin:14px 4px 4px}
.side nav{display:flex; flex-direction:column; gap:2px}
.side nav a{padding:10px 14px; border-radius:var(--r-sm); font-weight:600; color:var(--ink-60)}
.side nav a:hover{background:var(--sand)}
.side nav a.on{background:var(--flame-l); color:var(--flame-d)}
.side-out{margin-top:auto; padding:10px 14px; color:var(--danger); font-weight:600}
.main{padding:26px 28px 60px; max-width:1180px}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px}
.kpi div{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--sh)}
.kpi span{font-size:.82rem; color:var(--ink-60)}
.kpi b{font-size:1.45rem; font-family:Rubik}
.tbl{font-size:.9rem}
.tbl th{text-align:start; font-size:.78rem; color:var(--ink-40); font-weight:700; padding:8px 6px;
  border-bottom:1px solid var(--line)}
.tbl td{padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.thumb{width:44px; height:44px; object-fit:cover; border-radius:9px}
.bars{display:flex; align-items:flex-end; gap:5px; height:130px; padding-top:10px}
.bar{flex:1; background:linear-gradient(to top,var(--flame),var(--amber)); border-radius:5px 5px 0 0; min-height:4px}
.acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ------------------------------------------------------------ النوافذ */
.modal-back{position:fixed; inset:0; background:rgba(26,21,18,.55); display:grid; place-items:center;
  z-index:100; padding:20px}
.modal{background:#fff; border-radius:var(--r-lg); padding:20px; width:min(560px,100%); box-shadow:var(--sh-lg)}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}

/* ------------------------------------------------------------ الاستجابة */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .radar{max-width:380px; margin-inline:auto}
  .two,.form-grid{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    border-inline-end:0; border-bottom:1px solid var(--line)}
  .side nav{flex-direction:row; flex-wrap:wrap}
  .side-out{margin:0}
  .side-title{display:none}
  .main{padding:18px 16px 50px}
}
@media (max-width:640px){
  h1{font-size:1.45rem}
  .hero h1{font-size:2rem}
  .topbar-in{height:auto; padding-block:10px; flex-wrap:wrap; gap:10px}
  .topnav{width:100%; margin:0; justify-content:space-between; font-size:.9rem}
  .loc-pill{max-width:none; flex:1}
  .store-hero{height:auto}
  .store-hero-in{flex-direction:column; align-items:flex-start; padding-block:24px}
  .tabs{top:0}
  .cart-line{flex-wrap:wrap}
  .line-total{min-width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ------------------------------------------------------------ ميزات v2 */
.wal{color:var(--basil); font-size:.82rem}
.fav-form{display:inline}
.fav{background:#fff; border:1px solid var(--line); border-radius:999px; width:34px; height:34px;
  font-size:1.05rem; line-height:1; cursor:pointer; color:var(--ink-40); transition:.15s}
.fav:hover{border-color:var(--flame); color:var(--flame)}
.fav.on{color:var(--flame); border-color:var(--flame); background:var(--flame-l)}
.fav-form.on-card{position:absolute; top:10px; inset-inline-start:10px; z-index:5}
.fav-form.inline-fav .fav{width:26px; height:26px; font-size:.85rem; vertical-align:middle}
.store-wrap{position:relative}
.hero-tags{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.banners{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.banner{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--sand); min-height:150px; box-shadow:var(--sh)}
.banner img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.banner-txt{position:relative; display:flex; flex-direction:column; gap:4px; padding:22px;
  min-height:150px; justify-content:flex-end; color:#fff;
  background:linear-gradient(to top,rgba(26,21,18,.8),transparent 70%)}
.banner-txt b{font-size:1.2rem; font-family:Rubik}

/* ------------------------------------------------------------ تحديد الموقع */
.locbar{display:flex; gap:12px; align-items:center; margin:20px 0 10px; flex-wrap:wrap}
.locbar-field{flex:1; min-width:260px; position:relative; display:flex; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 18px 6px 6px;
  box-shadow:var(--sh)}
.locbar-field:focus-within{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-l)}
.locbar-field .mag{color:var(--ink-40); font-size:1.3rem; line-height:1; margin-inline-end:8px}
.locbar-field input{flex:1; border:0; outline:none; font:inherit; background:transparent;
  padding:9px 0; min-width:0; color:var(--ink)}
.locbar-field input::placeholder{color:var(--ink-40)}
.gps{width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--line);
  background:var(--sand); color:var(--ink-60); font-size:1.05rem; cursor:pointer; transition:.15s}
.gps:hover{border-color:var(--flame); color:var(--flame); background:var(--flame-l)}
.gps.busy{opacity:.5; pointer-events:none}
.locbar-go{white-space:nowrap; border-radius:999px}
.loc-now{margin-bottom:12px}
.loc-now a{color:var(--flame-d); font-weight:600}
.locstrip{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px;
  margin-block:12px}

/* صفحة تحديد الموقع */
.locate-search{display:flex; gap:10px; align-items:center; margin-block:16px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 18px 6px 6px;
  box-shadow:var(--sh)}
.locate-search .mag{color:var(--ink-40); font-size:1.3rem}
.locate-search .in{border:0; box-shadow:none; background:transparent; flex:1}
.locate-search .in:focus{box-shadow:none}
.locate-search .btn{border-radius:999px; flex:none}
.gps-row{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.res-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.res-row:last-child{border-bottom:0}
.res-row .grow{display:flex; flex-direction:column; gap:2px}
.map-box.lg{height:420px}

/* المنتقي المنبثق */
.locmodal{padding:0; overflow:hidden; width:min(640px,100%); display:flex; flex-direction:column;
  max-height:90vh}
.locmodal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); font-family:Rubik; font-size:1.05rem}
.locmodal-head .x{background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer;
  color:var(--ink-60); padding:0 4px}
.locmodal-search{display:flex; align-items:center; gap:8px; padding:12px 18px;
  border-bottom:1px solid var(--line)}
.locmodal-search .mag{color:var(--ink-40); font-size:1.25rem}
.locmodal-search input{flex:1; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; font:inherit; outline:none; min-width:0}
.locmodal-search input:focus{border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-l)}
.locmodal-results{display:none; max-height:190px; overflow-y:auto; border-bottom:1px solid var(--line)}
.locmodal-results.on{display:block}
.lpr{display:flex; flex-direction:column; gap:2px; width:100%; text-align:start; background:none;
  border:0; border-bottom:1px solid var(--line); padding:10px 18px; font:inherit; cursor:pointer}
.lpr:hover{background:var(--sand)}
.lpr b{font-size:.92rem}
.lpr span{color:var(--ink-60); font-size:.8rem}
.locmodal-map{height:300px; flex:1; min-height:220px}
.locmodal-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-top:1px solid var(--line); flex-wrap:wrap}

@media (max-width:640px){
  .locbar-go{width:100%}
  .locmodal{max-height:94vh}
  .locmodal-map{height:240px}
  .map-box.lg{height:320px}
}

/* ------------------------------------------------------------ جدول المطاعم في الإدارة */
.mtbl td{vertical-align:middle}
.mcell{display:flex; align-items:center; gap:10px}
.mcell > span:last-child{display:flex; flex-direction:column; gap:1px; min-width:0}
.mavatar{width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none;
  border:1px solid var(--line); background:var(--sand)}
.mavatar img{width:100%; height:100%; object-fit:cover}
.mavatar.txt{display:grid; place-items:center; font-weight:800; font-size:.85rem; color:#fff;
  background:linear-gradient(140deg,var(--flame),var(--amber)); border:0}
.pill{display:inline-block; padding:3px 11px; border-radius:999px; font-size:.78rem; font-weight:700;
  background:var(--flame-l); color:var(--flame-d)}
.iact{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-size:.9rem;
  color:var(--ink-60); transition:.15s; text-decoration:none}
.iact:hover{border-color:var(--flame); color:var(--flame-d); background:var(--flame-l)}
.iact.ok:hover{border-color:var(--basil); color:var(--basil); background:var(--basil-l)}
.iact.warn:hover{border-color:var(--amber); color:#7A5405; background:var(--amber-l)}
.iact.danger:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-l)}
.delbox{background:var(--danger-l); border:1px solid #F1C6C2; border-radius:var(--r-sm);
  padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.delbox b{width:100%}
.delbox p{width:100%; margin:0}
.pager{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding-top:14px;
  border-top:1px solid var(--line); margin-top:10px}
.pager a{padding:6px 13px; border-radius:8px; border:1px solid var(--line); font-size:.86rem;
  color:var(--ink-60)}
.pager a.on{background:var(--flame); color:#fff; border-color:var(--flame); font-weight:700}
.pager a:hover{border-color:var(--flame)}

/* شريط انتحال الهوية */
.imp-bar{background:var(--ink); color:#FFE7B8; padding:10px 20px; display:flex; gap:14px;
  align-items:center; justify-content:center; flex-wrap:wrap; font-size:.9rem; font-weight:600}
.imp-bar b{color:#fff}
.imp-bar .btn{background:var(--amber); color:var(--ink)}

@media (max-width:860px){
  .mtbl{display:block; overflow-x:auto; white-space:nowrap}
  .acts{flex-wrap:nowrap}
}

/* ------------------------------------------------------------ جدول الإدارة */
.mb{margin-bottom:16px}
.avatar{width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:.85rem; overflow:hidden; font-family:Rubik}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.lg{width:64px; height:64px; border-radius:18px; font-size:1.2rem}
.mcell{display:flex; align-items:center; gap:10px}
.mcell>span:last-child{display:flex; flex-direction:column; gap:1px; min-width:0}

.kpi.stat4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.statcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--sh); transition:.15s;
  border-inline-start:4px solid var(--ink-40)}
.statcard:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
.statcard.on{border-color:var(--flame); background:var(--flame-l)}
.statcard span{font-size:.82rem; color:var(--ink-60)}
.statcard b{font-size:1.6rem; font-family:Rubik}
.statcard.ok{border-inline-start-color:var(--basil)}
.statcard.warn{border-inline-start-color:var(--amber)}
.statcard.bad{border-inline-start-color:var(--danger)}

.filterbar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.fb{display:flex; flex-direction:column; gap:5px; flex:1; min-width:200px}
.fb.sm{flex:0 0 170px; min-width:150px}
.fb>span{font-size:.76rem; font-weight:700; color:var(--ink-40); letter-spacing:.02em}
.filterbar .btn{margin-bottom:1px}

.table-card{padding:0; overflow-x:auto}
.mtbl{font-size:.88rem; min-width:860px}
.mtbl th{padding:14px 12px; background:var(--sand)}
.mtbl td{padding:12px}
.mtbl tr:hover td{background:#FFFCF7}
.pill{display:inline-block; background:var(--flame-l); color:var(--flame-d); border-radius:999px;
  padding:3px 11px; font-size:.78rem; font-weight:700}
.acts{display:flex; gap:6px}
.ico{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; font-size:.9rem; color:var(--ink-60);
  transition:.15s; padding:0}
.ico:hover{border-color:var(--flame); color:var(--flame); background:var(--flame-l)}
.ico.bad:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-l)}

.pager{display:flex; gap:6px; justify-content:center; margin:14px 0}
.pager a{min-width:36px; height:36px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line); background:#fff; font-weight:600; color:var(--ink-60)}
.pager a.on{background:var(--flame); color:#fff; border-color:var(--flame)}

.imp-bar{background:var(--ink); color:#FFE7B8; display:flex; align-items:center; gap:14px;
  justify-content:center; flex-wrap:wrap; padding:10px 18px; font-size:.9rem; font-weight:600;
  position:sticky; top:0; z-index:60}
.imp-bar b{color:#fff}

@media (max-width:640px){
  .filterbar .fb,.filterbar .fb.sm{flex:1 1 100%}
  .statcard b{font-size:1.3rem}
}
