/* ========== Reset & Base ========== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAFA; --text:#212121; --muted:#6b7280; --line:#e5e7eb;
  --white:#fff; --primary:#E53935; --primary-2:#FF7043; --accent:#FFB74D;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 16px 40px rgba(0,0,0,.10);
  --h-header:68px; --h-footer:68px; --safe:env(safe-area-inset-bottom,0px);
  --gap:12px; --gap-lg:16px;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
}
html[dir="rtl"] body{direction:rtl}
body{
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ========== Layout Containers ========== */
.container{max-width:1140px;margin:0 auto;padding:0 16px}
.app-main{padding-top:calc(var(--h-header) + 12px); padding-bottom:calc(var(--h-footer) + 12px + var(--safe))}

/* ========== Fixed Header ========== */
.app-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.app-header__inner{
  height:var(--h-header); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:10px}
.logo{color:var(--primary); font-weight:900; font-size:var(--fs-18); letter-spacing:.3px}
.branch{color:var(--muted); font-size:var(--fs-13)}
.branch select{
  margin-inline-start:6px; border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:var(--white);
}
.header-actions{display:flex; align-items:center; gap:8px}
.btn-ghost{
  text-decoration:none; color:#111; background:#f5f5f5; padding:10px 12px; border-radius:999px; font-size:var(--fs-14);
}
.btn-cart{
  position:relative; text-decoration:none; color:#fff; background:var(--primary);
  padding:10px 14px; border-radius:999px; font-weight:700; box-shadow:var(--shadow-sm);
}
.badge-count{
  position:absolute; top:-8px; left:-8px; background:#111; color:#fff; font-size:11px;
  border-radius:999px; padding:2px 6px; line-height:1;
}

/* ========== Fixed Footer (Bottom Nav) ========== */
.app-footer{
  position:fixed; bottom:0; left:0; right:0; z-index:1000; background:var(--white); border-top:1px solid var(--line);
  padding-bottom:var(--safe);
}
.footer-nav{ height:var(--h-footer); display:flex; align-items:center; justify-content:space-around; }
.foot-link{
  text-decoration:none; color:#111; font-weight:600; font-size:var(--fs-14);
  padding:10px 12px; border-radius:10px;
}
.foot-link:hover{ background:#f7f7f7 }

/* ========== Banner (Slider feel without JS jitter) ========== */
.banner{ display:grid; gap:10px; margin-top:10px }
.banner-card{
  background:linear-gradient(135deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#fff; padding:16px; border-radius:var(--radius); box-shadow:var(--shadow-md);
  font-size:var(--fs-15);
}
.banner-card b{font-size:var(--fs-16)}
.banner-card span{opacity:.95; font-size:var(--fs-13)}

/* ========== Category Chips (Sticky on mobile & desktop) ========== */
.cat-strip{
  position:sticky; top:var(--h-header); z-index:900; background:#fff; border-bottom:1px solid var(--line);
}
.cat-inner{
  display:flex; gap:8px; overflow-x:auto; padding:10px 0; scroll-snap-type:x proximity; scrollbar-width:thin;
}
.chip{
  scroll-snap-align:start; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; white-space:nowrap; cursor:pointer; font-size:var(--fs-14);
}
.chip.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

/* ========== Sections & Grid ========== */
.section{ padding:16px 0 }
.sec-title{ font-size:var(--fs-16); font-weight:900; margin-bottom:10px }

.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
@media(min-width:640px){ .grid{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:992px){ .grid{ grid-template-columns:repeat(4,1fr) } }

/* ========== Product Card ========== */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .08s ease;
}
.card:active{ transform:translateY(1px) }
.img-wrap{ position:relative; width:100%; aspect-ratio: 4/3; background:#f3f3f3 }
.img-wrap img{ width:100%; height:100%; object-fit:cover; display:block }
.badge{
  position:absolute; top:10px; left:10px; background:var(--accent); color:#111; font-weight:700;
  padding:4px 8px; border-radius:10px; font-size:var(--fs-12)
}
.card-body{ padding:10px; display:grid; gap:8px }
.card .title{ font-weight:900; font-size:var(--fs-15); line-height:1.3 }
.card .desc{
  color:var(--muted); font-size:var(--fs-13);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price{ font-size:var(--fs-14); color:#222; font-weight:700 }
.card-actions{ display:flex; gap:8px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:0; border-radius:var(--radius-sm); padding:10px 12px; font-weight:700; font-size:var(--fs-14);
}
.btn.primary{ background:var(--primary); color:#fff }
.btn.outline{ background:#fff; border:1px solid var(--line); color:#111 }

/* ========== Mini Cart (Checkout Bar) ========== */
.mini-cart{
  position:fixed; right:16px; left:16px; bottom:calc(var(--h-footer) + 12px + var(--safe));
  display:none; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow-lg);
}
.mini-cart.show{ display:flex }
.mini-cart .total{ font-weight:900; font-size:var(--fs-16) }
.mini-cart .cta{
  text-decoration:none; color:#fff; background:var(--primary); padding:10px 14px; border-radius:var(--radius-sm); font-weight:800
}

/* ========== Product Page (Details) ========== */
.product-hero{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md); margin-top:8px
}
.product-hero .img{ width:100%; aspect-ratio:16/9; background:#f3f3f3 }
.product-hero .img img{ width:100%; height:100%; object-fit:cover; display:block }
.product-body{ padding:16px; display:grid; gap:14px }
.product-title{ font-size:var(--fs-18); font-weight:900 }
.product-desc{ color:var(--muted); line-height:1.8 }
.opt-group{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px }
.opt-title{ font-weight:800; margin-bottom:8px }
.opt-row{ display:flex; flex-wrap:wrap; gap:8px }
.opt-row label{
  border:1px solid var(--line); border-radius:999px; padding:8px 12px; display:inline-flex; align-items:center; gap:6px; background:#fff; cursor:pointer; font-size:var(--fs-14)
}
.opt-row input{ accent-color:var(--primary) }
.qty{ display:flex; align-items:center; gap:8px }
.qty button{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:18px
}
.product-buy{
  position:sticky; bottom:calc(var(--h-footer) + 12px + var(--safe));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow-lg)
}
.product-buy .price{ font-weight:900; font-size:var(--fs-16) }

/* ========== Flash ========== */
.flash{
  position:fixed; top:calc(var(--h-header) + 8px); left:50%; transform:translateX(-50%);
  background:#111; color:#fff; padding:8px 12px; border-radius:10px; z-index:1200; font-size:var(--fs-13); box-shadow:var(--shadow-sm)
}

/* ========== Desktop polish ========== */
@media(min-width:992px){
  .banner{ grid-template-columns:repeat(3,1fr) }
  .banner-card{ min-height:84px; display:flex; align-items:center; justify-content:center }
  .app-header__inner{ gap:20px }
  .brand .logo{ font-size:var(--fs-20) }
  .product-body{ padding:20px }
}
/* ===== Checkout Polish ===== */
.page-title{ font-size:18px; font-weight:900; margin:8px 0 4px }
.page-sub{ color:var(--muted); margin-bottom:10px; font-size:14px }

/* steps */
.steps{ display:flex; gap:8px; margin-bottom:8px }
.step{
  flex:0 0 auto; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px;
  background:#f3f4f6; color:#111; border:1px solid var(--line)
}
.step.active{ background:var(--primary); color:#fff; border-color:var(--primary) }
.step.done{ background:#10b981; color:#fff; border-color:#10b981 }

/* layout */
.checkout-grid{ display:grid; gap:14px; grid-template-columns:1fr }
@media(min-width:992px){
  .checkout-grid{ grid-template-columns:1.2fr .8fr }
}

/* form */
.card-pad{ padding:14px }
.form-grid{ display:grid; gap:12px }
.field{ display:grid; gap:6px }
.label{ font-weight:800; font-size:14px }
.req{ color:var(--primary) }
.input{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background:#fff; font-size:14px
}
.input.is-invalid{ border-color:#ef4444; background:#fff7f7 }
.help{ color:var(--muted); font-size:12px }
.help.invalid{ color:#ef4444 }

/* summary */
.summary-title{ font-size:15px; font-weight:900; margin-bottom:8px }
.summary-items{ display:grid; gap:10px; margin-bottom:8px; max-height:260px; overflow:auto }
.summary-item .summary-line{ display:flex; justify-content:space-between; align-items:flex-start }
.summary-item .name{ font-weight:800 }
.summary-item .price{ font-weight:900 }
.summary-item .meta{ color:var(--muted); font-size:12px; margin-top:4px; line-height:1.6 }
.summary-row{ display:flex; justify-content:space-between; margin:6px 0 }
.summary-row.total{ font-size:16px; font-weight:900 }
.divider{ border:0; border-top:1px solid var(--line); margin:6px 0 }
.summary-sticky{ position:sticky; top:calc(var(--h-header) + 12px) }

.btn-lg{ padding:12px 16px; border-radius:12px; font-size:16px; font-weight:900 }

/* responsive helpers */
.hide-mobile{ display:none }
.hide-desktop{ display:block }
@media(min-width:992px){
  .hide-mobile{ display:block }
  .hide-desktop{ display:none }
}
/* ===== Tracking Timeline ===== */
.timeline{ position:relative; padding:6px 0 6px 0; display:grid; gap:10px }
.tl-item{ display:flex; align-items:flex-start; gap:10px; position:relative }
.tl-item::before{
  content:""; position:absolute; right:10px; left:10px; top:18px; height:1px; background:var(--line); z-index:0; display:none;
}
.tl-dot{
  width:14px; height:14px; border-radius:999px; background:#d1d5db; border:2px solid #fff; box-shadow:var(--shadow-sm); margin-top:4px; flex:0 0 auto;
}
.tl-content{ display:grid; gap:2px }
.tl-title{ font-weight:800; font-size:14px }
.tl-time{ color:var(--muted); font-size:12px }

/* حالات */
.tl-item.done .tl-dot{ background:#10b981 }
.tl-item.active .tl-dot{ background:var(--primary) }
.tl-item.idle  .tl-dot{ background:#d1d5db }
/* حالة الطلب — زر/بادج واحد */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-weight:800; margin-top:6px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:14px;
}

/* الألوان حسب الحالة */
.status-yellow{ background:#fff8e1; color:#8a6d00; border-color:#ffecb3 }   /* Pending */
.status-blue  { background:#e3f2fd; color:#0b5fa8; border-color:#bbdefb }   /* Preparing */
.status-purple{ background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff }   /* OnTheWay */
.status-green { background:#ecfdf5; color:#065f46; border-color:#d1fae5 }   /* Completed */
.status-red   { background:#fef2f2; color:#991b1b; border-color:#fee2e2 }   /* Cancelled */
.status-pill{
  display:inline-block; padding:10px 14px; border-radius:999px;
  font-weight:800; margin-top:8px; font-size:14px;
}
.status-yellow{background:#fff8e1;color:#8a6d00;}
.status-blue{background:#e3f2fd;color:#0b5fa8;}
.status-purple{background:#f3e8ff;color:#6b21a8;}
.status-green{background:#ecfdf5;color:#065f46;}
.status-red{background:#fef2f2;color:#991b1b;}