:root{
  --khan-primary:#ff6a3d;
  --khan-primary-dark:#e2531f;
  --khan-secondary:#1e2a4a;
  --khan-bg:#f6f7fb;
  --khan-card:#ffffff;
  --khan-radius:16px;
}

*{ box-sizing:border-box; }

body{
  font-family:'Tajawal', sans-serif;
  background:var(--khan-bg);
  color:#22273a;
}

a{ text-decoration:none; }

/* ---------- Navbar ---------- */
.khan-navbar{
  background:linear-gradient(90deg,var(--khan-secondary),#2c3d6a);
  padding:.7rem 0;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.khan-logo{
  font-weight:900;
  font-size:1.5rem;
  color:#fff !important;
}
.khan-navbar .nav-link{
  color:#e9ecf5 !important;
  font-weight:500;
}
.khan-navbar .nav-link:hover{ color:var(--khan-primary) !important; }
.khan-search{
  border-radius:0 30px 30px 0 !important;
  border:0;
}
.khan-navbar .input-group-text{
  border-radius:30px 0 0 30px !important;
}
.cart-badge{
  position:absolute;
  top:-4px;
  left:-8px;
  font-size:.6rem;
}
.khan-btn{
  background:var(--khan-primary);
  border:none;
  color:#fff !important;
  border-radius:30px;
  padding:.4rem 1.2rem;
  font-weight:700;
  transition:.2s;
}
.khan-btn:hover{ background:var(--khan-primary-dark); color:#fff !important; }
.khan-btn-outline{
  border:1.5px solid #fff;
  color:#fff !important;
  border-radius:30px;
  padding:.4rem 1.2rem;
  font-weight:700;
}
.khan-btn-outline:hover{ background:#fff; color:var(--khan-secondary) !important; }

/* ---------- Hero / categories ---------- */
.category-scroll{
  display:flex;
  gap:.8rem;
  overflow-x:auto;
  padding:1rem .2rem;
  scrollbar-width:thin;
}
.category-pill{
  flex:0 0 auto;
  background:var(--khan-card);
  border-radius:20px;
  padding:.7rem 1.2rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  color:#22273a;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  border:2px solid transparent;
  white-space:nowrap;
}
.category-pill i{ color:var(--khan-primary); font-size:1.1rem; }
.category-pill.active, .category-pill:hover{
  border-color:var(--khan-primary);
  color:var(--khan-primary-dark);
}

/* ---------- Product Card ---------- */
.product-card{
  background:var(--khan-card);
  border-radius:var(--khan-radius);
  overflow:hidden;
  box-shadow:0 3px 14px rgba(0,0,0,.06);
  transition:.2s transform, .2s box-shadow;
  height:100%;
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.product-img-wrap{
  aspect-ratio:1/1;
  background:#eef0f6;
  overflow:hidden;
}
.product-img-wrap img{
  width:100%; height:100%; object-fit:cover;
}
.product-body{ padding:.9rem; display:flex; flex-direction:column; gap:.4rem; flex-grow:1; }
.product-name{ font-weight:700; font-size:.95rem; line-height:1.3; }
.product-price{ color:var(--khan-primary-dark); font-weight:900; font-size:1.05rem; }
.store-chip{
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:#666;
}
.store-chip img{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:1.5px solid #eee;
}
.delivery-chip{
  font-size:.72rem;
  background:#eef7ee;
  color:#2e7d32;
  padding:.15rem .5rem;
  border-radius:10px;
  display:inline-block;
  width:fit-content;
}

/* ---------- Filters bar ---------- */
.filters-bar{
  background:var(--khan-card);
  border-radius:var(--khan-radius);
  padding:.8rem 1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* ---------- Auth cards ---------- */
.auth-wrap{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}
.auth-card{
  background:var(--khan-card);
  border-radius:var(--khan-radius);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  padding:2rem;
  width:100%;
  max-width:460px;
}
.form-control, .form-select{
  border-radius:10px;
  padding:.6rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--khan-primary);
  box-shadow:0 0 0 .2rem rgba(255,106,61,.15);
}

/* ---------- Cart / merchant group ---------- */
.merchant-group{
  background:var(--khan-card);
  border-radius:var(--khan-radius);
  padding:1rem;
  margin-bottom:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.cart-item-row{
  display:flex; align-items:center; gap:.8rem; padding:.6rem 0;
  border-bottom:1px solid #f0f0f3;
}
.cart-item-row img{ width:60px; height:60px; border-radius:10px; object-fit:cover; }

/* ---------- Dashboard sidebar ---------- */
.dash-sidebar{
  background:var(--khan-secondary);
  min-height:100vh;
  padding:1.5rem 1rem;
}
.dash-sidebar a{
  color:#e9ecf5;
  display:block;
  padding:.7rem 1rem;
  border-radius:10px;
  margin-bottom:.3rem;
  font-weight:600;
}
.dash-sidebar a:hover, .dash-sidebar a.active{
  background:var(--khan-primary);
  color:#fff;
}
.dash-card{
  background:var(--khan-card);
  border-radius:var(--khan-radius);
  padding:1.2rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.stat-card{
  background:linear-gradient(135deg,var(--khan-primary),#ff9466);
  color:#fff;
  border-radius:var(--khan-radius);
  padding:1.3rem;
}

/* ---------- Badges ---------- */
.badge-pending{ background:#fff3cd; color:#8a6300; }
.badge-accepted{ background:#d1e9dd; color:#1a7a4c; }
.badge-rejected{ background:#f8d7da; color:#a12634; }
.badge-expired{ background:#e2e3e5; color:#555; }

/* ---------- Footer ---------- */
.khan-footer{
  background:var(--khan-secondary);
  color:#cfd4e6;
}
.khan-footer .khan-logo{ color:#fff; }

/* ---------- Top announcement banner ---------- */
.site-banner{
  background:linear-gradient(90deg,var(--khan-primary),#ff9466);
  color:#fff;
  text-align:center;
  padding:.6rem 1rem;
  font-weight:700;
  font-size:.9rem;
  transition:.2s opacity;
}
.site-banner:hover{ opacity:.92; color:#fff; }

/* ---------- Social buttons ---------- */
.social-btn{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  color:#fff !important;
  transition:.2s transform;
}
.social-btn:hover{ transform:translateY(-3px); }
.social-instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-whatsapp{ background:#25D366; }
.social-facebook{ background:#1877F2; }
.social-telegram{ background:#26A5E4; }

/* ---------- Misc ---------- */
.section-title{
  font-weight:900;
  font-size:1.3rem;
  margin:1.4rem 0 1rem;
  border-right:5px solid var(--khan-primary);
  padding-right:.7rem;
}
.empty-state{
  text-align:center;
  padding:3rem 1rem;
  color:#8a8f9e;
}
.empty-state i{ font-size:3rem; margin-bottom:1rem; display:block; color:#d5d8e3; }

@media (max-width:576px){
  .auth-card{ padding:1.3rem; }
  .khan-logo{ font-size:1.2rem; }
}