/* ============================================================
   1. الأزرار — ثلاثية الأبعاد بتوهّج
   ============================================================ */
.btn {
  --lift: 0px;
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  border: none;
  cursor: pointer;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  transform: translateY(var(--lift));
  transition: transform var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-mid) var(--ease-smooth);
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

.btn-primary {
  color: var(--blanc);
  background: linear-gradient(180deg, #ff5b5b 0%, var(--rouge) 45%, var(--rouge-fonce) 100%);
  box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-rest);
}
.btn-primary:hover { box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-hover); }
.btn-primary:active {
  --lift: 2px;
  box-shadow: var(--btn-highlight), var(--btn-shade), 0 2px 6px -1px rgba(var(--rouge-rgb), 0.4);
}

.btn-secondary {
  color: var(--blanc);
  background: linear-gradient(180deg, #333 0%, var(--noir) 55%, #000 100%);
  box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-noir-rest);
}
.btn-secondary:hover { box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-noir-hover); }
.btn-secondary:active {
  --lift: 2px;
  box-shadow: var(--btn-highlight), var(--btn-shade), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
}

.btn-outline {
  color: var(--rouge);
  background: var(--blanc);
  border: 2px solid var(--rouge);
  padding: 12px 26px;
  box-shadow: 0 2px 8px -2px rgba(var(--rouge-rgb), 0.25);
}
.btn-outline:hover { background: rgba(var(--rouge-rgb), 0.06); box-shadow: 0 4px 14px -2px rgba(var(--rouge-rgb), 0.35); }
.btn-outline:active { --lift: 2px; }

.btn-circle {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ============================================================
   2. دوائر الأقسام
   ============================================================ */
.cat-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--texte);
  width: 96px;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-smooth);
}
.cat-item:hover { transform: scale(1.06); }
.cat-item:hover .cat-circle { box-shadow: var(--glow-ring-hover); }

.cat-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-ring-rest);
  transition: box-shadow var(--dur-mid) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.cat-item:active .cat-circle { transform: scale(0.94); }
.cat-circle svg { width: 42px; height: 42px; color: var(--rouge); }
.cat-item span.cat-label { font-size: 13px; font-weight: var(--fw-medium); }

/* ============================================================
   3. شريط التوصيل المجاني — نار
   ============================================================ */
.fire-bar {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.fire-bar-msg { font-size: 14px; font-weight: var(--fw-medium); margin-bottom: var(--space-3); text-align: center; }
.fire-bar-msg strong { color: var(--rouge); direction: ltr; unicode-bidi: isolate; }

.fire-bar-track {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--ligne);
  overflow: visible;
}
.fire-bar-fill {
  height: 100%;
  width: var(--progress, 30%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--feu-1), var(--feu-2) 55%, var(--feu-3));
  position: relative;
  box-shadow: 0 0 10px 1px rgba(255, 138, 0, 0.55);
  transition: width var(--dur-slow) var(--ease-smooth);
}
.fire-bar-flame {
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-58%);
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(255, 138, 0, 0.8));
  transition: font-size var(--dur-mid) var(--ease-bounce);
}

.fire-bar.is-hot .fire-bar-fill { box-shadow: 0 0 18px 3px rgba(255, 138, 0, 0.85); }
.fire-bar.is-hot .fire-bar-flame { font-size: 24px; }

.fire-bar.is-complete .fire-bar-fill { box-shadow: 0 0 26px 6px rgba(255, 138, 0, 1); }
.fire-bar.is-complete .fire-bar-msg strong { animation: burst-pop var(--dur-mid) var(--ease-bounce); display: inline-block; }
@keyframes burst-pop {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   4. بطاقة المنتج
   ============================================================ */
.product-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--dur-mid) var(--ease-smooth), transform var(--dur-mid) var(--ease-smooth);
  width: 220px;
  position: relative;
}
.product-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }

.product-card-media { position: relative; aspect-ratio: 1 / 1; background: #fafafa; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-card-body { padding: var(--space-4); display: flex; flex-direction: column; }
.product-card-title {
  font-size: 14px; font-weight: var(--fw-medium); margin: 0 0 6px; line-height: 1.4;
  min-height: 2.8em; /* دايمًا فضاء سطرين، حتى لو الاسم سطر وحد — باش زر "إشتري" يبقى على نفس الخط بين كل الكروت */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.product-card-price { font-size: 19px; font-weight: var(--fw-bold); color: var(--rouge); margin: 0 0 var(--space-3); direction: ltr; unicode-bidi: isolate; text-align: end; }

/* ---- بريق مشترك: شارة "متوفّر" وزر "إشتري" ---- */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent);
  inset-inline-start: -60%;
  animation: shine-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine-sweep {
  0%   { inset-inline-start: -60%; }
  25%  { inset-inline-start: 130%; }
  100% { inset-inline-start: 130%; }
}

/* ---- شارة التوفّر (متوفّر / غير متوفّر) — مرتبطة بمخزون ووكمرس لاحقًا ---- */
.badge-stock {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-start: var(--space-3);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  z-index: 2;
}
.badge-stock.is-available { background: var(--succes); color: var(--blanc); }
.badge-stock.is-unavailable { background: var(--ligne); color: var(--erreur); }

/* ---- سطر مشترك: شارة "مباع X مرة" على اليمين + التقييم على اليسار، بنفس الخط ---- */
.pc-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.badge-sold {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--texte-doux);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
}
.badge-sold .flame {
  display: inline-block;
  font-size: 12px;
  filter: drop-shadow(0 0 5px rgba(255,138,0,.9));
  animation: flame-wobble 1.1s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes flame-wobble {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(9deg) scale(1.12); }
}

.heart-btn {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
  animation: heart-invite 2.6s ease-in-out infinite;
}
.heart-btn svg { width: 18px; height: 18px; }
.heart-btn .heart-fill {
  fill: var(--rouge);
  stroke: var(--rouge);
  stroke-width: 2;
  transition: fill var(--dur-fast), stroke var(--dur-fast);
}
.heart-btn.is-liked .heart-fill { fill: var(--rouge-fonce); stroke: var(--rouge-fonce); }
.heart-btn.is-liked {
  animation: heart-pulse var(--dur-mid) var(--ease-bounce);
  box-shadow: 0 0 0 3px rgba(var(--rouge-rgb), 0.25), 0 4px 18px 3px rgba(var(--rouge-rgb), 0.85);
}
@keyframes heart-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes heart-invite {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-10deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-6deg); }
}

/* ---- صف التقييم — نجمة + رقم برك، مرتبط بمراجعات ووكمرس لاحقًا ---- */
.rating-row { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.rating-row .star {
  width: 15px; height: 15px;
  color: var(--etoile);
  flex-shrink: 0;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(255,180,0,.75));
  animation: flame-wobble 1.1s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.rating-row b { color: var(--texte); font-weight: var(--fw-bold); }

/* ---- صف الإجراءات: زر إشتري (٤٠٪) + عدّاد الكمية — يلزق في أسفل البطاقة دايمًا ---- */
.card-actions { display: flex; direction: ltr; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--space-2); }
.buy-btn {
  width: 40%;
  flex-shrink: 0;
  height: 38px;
  border: none;
  border-radius: var(--radius-md);
  color: var(--blanc);
  background: linear-gradient(180deg, #ff5b5b 0%, var(--rouge) 45%, var(--rouge-fonce) 100%);
  box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-rest);
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: 13.5px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-mid);
}
.buy-btn:hover { box-shadow: var(--btn-highlight), var(--btn-shade), var(--btn-glow-hover); }
.buy-btn:active { transform: translateY(2px); }

/* "يطير للسلة" — عملة ذهبية مؤقتة تتولّد عند الضغط وتتحرّك نحو أيقونة السلة الحقيقية */
.fly-to-cart {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--or-clair) 45%, var(--or) 78%, var(--or-fonce) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
  animation: fly-arc 900ms var(--ease-smooth) forwards;
}
@keyframes fly-arc {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--fly-x, 300px), var(--fly-y, -300px)) scale(0.4); opacity: 0; }
}

/* ============================================================
   5. السلة الجانبية
   ============================================================ */
.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit);
  z-index: 60;
}
.cart-backdrop.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-mid) var(--ease-smooth), visibility 0s linear;
}
.cart-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  background: var(--blanc);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(100%) scale(0.96);
  transform-origin: 50% 100%;
  opacity: 0;
  filter: blur(3px);
  transition: transform var(--dur-exit) var(--ease-exit), opacity var(--dur-exit) var(--ease-exit), filter var(--dur-exit) var(--ease-exit);
  z-index: 61;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform var(--dur-mid) var(--ease-smooth), opacity var(--dur-mid) var(--ease-smooth), filter var(--dur-mid) var(--ease-smooth);
}

.cart-drawer-head { padding: var(--space-4) var(--space-5) var(--space-3); font-weight: var(--fw-bold); display: flex; justify-content: space-between; align-items: center; }
.cart-qty-v { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.cart-qty-v button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ligne);
  background: var(--blanc);
  color: var(--rouge);
  font-size: 14px;
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cart-qty-v button:active { background: rgba(var(--rouge-rgb), 0.08); }
.cart-qty-v .qty-num { font-size: 13px; font-weight: var(--fw-semibold); }
.cart-remove-btn { border: none; background: none; color: var(--texte-doux); cursor: pointer; padding: 4px; display: flex; }
.cart-remove-btn:hover { color: var(--erreur); }
.cart-remove-btn svg { width: 17px; height: 17px; }
.cart-coupon-row {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  border: none; background: none;
  padding: var(--space-3) 0;
  color: var(--texte-doux);
  font-size: 13.5px;
  font-family: var(--font-main);
  cursor: pointer;
}
.cart-coupon-row svg { width: 17px; height: 17px; color: var(--rouge); }
.coupon-input-row { display: none; gap: 8px; padding-bottom: var(--space-3); }
.coupon-input-row.is-open { display: flex; }
.coupon-input-row .input { height: 42px; font-size: 13.5px; }
.coupon-input-row button {
  flex-shrink: 0;
  height: 42px;
  padding-inline: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  font-size: 13.5px;
  cursor: pointer;
}
.cart-totals-row { display: flex; justify-content: space-between; font-size: 14px; padding-block: 3px; }
.cart-totals-row span:last-child { direction: ltr; unicode-bidi: isolate; }
.cart-totals-row.is-old span { text-decoration: line-through; color: var(--texte-doux); }
.cart-totals-row.is-discount span { color: var(--succes); }
.cart-totals-row.is-final { font-weight: var(--fw-bold); font-size: 17px; padding-top: var(--space-2); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.cart-drawer-foot { padding: var(--space-5); border-top: 1px solid var(--ligne); }

.cart-line-item { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--ligne); align-items: center; }
.cart-line-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; }
.cart-line-item .name { font-size: 14px; font-weight: var(--fw-medium); flex: 1; }
.cart-line-item .price { font-size: 14px; font-weight: var(--fw-bold); color: var(--rouge); direction: ltr; unicode-bidi: isolate; }

.delivery-line {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; color: var(--texte-doux);
  padding-block: var(--space-2);
}
.delivery-icon { width: 22px; height: 22px; color: var(--rouge); flex-shrink: 0; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 32px;
}
.qty-stepper button {
  width: 30px; height: 100%;
  border: none; background: var(--blanc);
  font-size: 16px; font-weight: var(--fw-bold);
  color: var(--rouge);
  cursor: pointer;
}
.qty-stepper button:active { background: rgba(var(--rouge-rgb), 0.08); }
.qty-stepper .qty-value { width: 32px; text-align: center; font-size: 14px; font-weight: var(--fw-semibold); }

/* ============================================================
   7. الروبوتات
   ============================================================ */
.robot-figure { display: inline-block; line-height: 0; }
.robot-figure img { display: block; height: auto; max-width: 100%; }

.dodo-bubble {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 50;
  width: 64px; height: 64px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.86;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
}
.dodo-bubble:hover, .dodo-bubble.is-open { opacity: 1; box-shadow: 0 6px 20px rgba(0,0,0,.25); transform: scale(1.05); }
.dodo-bubble:active { transform: scale(0.94); }
.dodo-bubble img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }

.dodo-panel {
  position: fixed;
  right: var(--space-5);
  bottom: calc(64px + var(--space-6));
  width: min(320px, 88vw);
  height: min(420px, 60vh);
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  z-index: 51;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-mid) var(--ease-smooth);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dodo-panel.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.dodo-panel-head { background: var(--noir); color: var(--blanc); padding: var(--space-4); font-weight: var(--fw-semibold); display:flex; align-items:center; gap:var(--space-2); }
.dodo-panel-body { flex: 1; padding: var(--space-4); overflow-y: auto; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   8. الشريط العلوي — عبارات متحرّكة + شارة ضمان ذهبية
   ============================================================ */
.top-ticker {
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  height: 52px;
  overflow: hidden;
  position: relative;
}
/* ---- شارة "الصلاة القادمة" — بدّلت شارة "ضمان الجودة"، زر حقيقي يفتح إذن الموقع عند الضغط ---- */
.prayer-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding-inline: var(--space-4);
  border: none;
  border-inline-start: 1px solid rgba(var(--or-rgb), 0.35);
  background: linear-gradient(180deg, rgba(var(--or-rgb), 0.16), rgba(var(--or-rgb), 0.05));
  color: var(--or-clair);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  position: relative;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast);
}
.prayer-badge:hover { background: linear-gradient(180deg, rgba(var(--or-rgb), 0.24), rgba(var(--or-rgb), 0.08)); }
.prayer-badge:active { background: linear-gradient(180deg, rgba(var(--or-rgb), 0.3), rgba(var(--or-rgb), 0.1)); }
.prayer-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
  animation: moon-glow 2s ease-in-out infinite;
}
@keyframes moon-glow {
  0%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 4px rgba(var(--or-rgb), 0.9)); }
  50% { transform: rotate(-10deg) scale(1.1); filter: drop-shadow(0 0 8px rgba(var(--or-rgb), 1)); }
}
.prayer-badge.is-locating .prayer-icon { animation: spin 0.9s linear infinite; }
/* ---- عمود النصوص الثلاثة: "متبقي" / العدّاد (بالثواني) / "وقت الصلاة" — خطوط متوازية، نفس المحاذاة ---- */
.prayer-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  gap: 1px;
}
.prayer-remaining-label {
  font-size: 8px;
  font-weight: var(--fw-medium);
  color: rgba(var(--or-rgb), 0.7);
  letter-spacing: .02em;
}
.prayer-countdown {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--or-clair);
}
.prayer-label {
  font-size: 8.5px;
  font-weight: var(--fw-medium);
  color: rgba(var(--or-rgb), 0.85);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.prayer-locate-dot {
  position: absolute;
  top: 6px; inset-inline-end: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--succes);
  box-shadow: 0 0 0 2px var(--noir);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity var(--dur-mid) var(--ease-smooth), transform var(--dur-mid) var(--ease-bounce);
}
.prayer-badge.is-confirmed .prayer-locate-dot { opacity: 1; transform: scale(1); }
.ticker-viewport { flex: 1; overflow: hidden; height: 100%; min-width: 0; }
.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ticker-scroll 22s linear infinite;
  animation-direction: reverse;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-set { display: flex; align-items: center; flex-shrink: 0; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: var(--fw-medium);
  padding-inline: var(--space-4);
  white-space: nowrap;
}
.ticker-item::after { content: "•"; margin-inline-start: var(--space-4); opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  /* الشريط العلوي عبارة، ماشي زخرفة — يبقى يدور دايمًا حتى مع تفضيل "تقليل الحركة" */
  .ticker-track {
    animation-duration: 22s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ============================================================
   9. الهيدر الرئيسي
   ============================================================ */
.main-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.mh-group { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.mh-icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.mh-icon-btn:hover { background: var(--ligne); }
.mh-icon-btn svg { width: 25px; height: 25px; }
.mh-cart-count {
  position: absolute;
  top: 2px; inset-inline-end: 2px;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--blanc);
}
.mh-logo { display: flex; align-items: center; }
.mh-logo img { height: 46px; width: auto; display: block; }
.main-header .mh-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   10. السلايدر
   ============================================================ */
.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--noir);
}
.slider-track {
  display: flex;
  height: 100%;
  direction: ltr; /* مسار السلايدر ثابت الاتجاه فيزيائيًا، بلا علاقة باتجاه الصفحة */
  transition: transform var(--dur-slow) var(--ease-smooth);
}
.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  color: var(--blanc);
  overflow: hidden;
}
.slide::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--zellige-pattern);
  background-size: 120px 120px;
  opacity: .16;
  mix-blend-mode: overlay;
}
/* ---- شريحة صورة كاملة (بانرات تسويقية حقيقية) — بلا حشو ولا نقشة زليج فوقها ---- */
.slide.slide-img { padding: 0; align-items: stretch; }
.slide.slide-img::before { display: none; }
.slide.slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-content { position: relative; z-index: 2; }
.slide-eyebrow { font-size: 12px; font-weight: var(--fw-semibold); opacity: .85; margin: 0 0 4px; }
.slide-title { font-size: 22px; font-weight: var(--fw-bold); margin: 0; text-wrap: balance; }
.slider-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 3;
}
.slider-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  border: none; padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background var(--dur-fast), width var(--dur-fast);
}
.slider-dots button.is-active { background: var(--blanc); width: 18px; border-radius: var(--radius-pill); }

/* ============================================================
   11. صفوف الأقسام — طابع "ستوري"
   ============================================================ */
.story-row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-block: var(--space-3);
  scrollbar-width: none;
}
.story-row::-webkit-scrollbar { display: none; }
.story-item {
  flex-shrink: 0;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  text-align: center;
}
.story-ring {
  width: 70px; height: 70px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 200deg, var(--or-clair), var(--rouge) 35%, var(--rouge-fonce) 65%, var(--or) 100%);
  transition: transform var(--dur-fast) var(--ease-smooth);
}
.story-item:hover .story-ring { transform: scale(1.07); }
.story-item:active .story-ring { transform: scale(0.94); }
.story-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--blanc);
}
.story-avatar img { width: 34px; height: 34px; }
.story-label { font-size: 11.5px; font-weight: var(--fw-medium); line-height: 1.3; }

/* ============================================================
   12. الحقول (Inputs)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: var(--fw-medium); color: var(--texte); }
.input {
  width: 100%;
  height: 48px;
  padding-inline: var(--space-4);
  border: 1.5px solid var(--ligne);
  border-radius: var(--radius-md);
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--font-main);
  font-size: 15px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--texte-doux); }
.input:focus {
  outline: none;
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(var(--rouge-rgb), 0.15);
}
.field-help { font-size: 12.5px; color: var(--texte-doux); }
.field-error-msg { font-size: 12.5px; color: var(--erreur); display: flex; align-items: center; gap: 4px; }
.field.has-error .input { border-color: var(--erreur); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px rgba(var(--erreur-rgb), 0.15); }

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field svg {
  position: absolute;
  inset-inline-start: 14px;
  width: 18px; height: 18px;
  color: var(--texte-doux);
  pointer-events: none;
}
.search-field .input { padding-inline-start: 40px; border-radius: var(--radius-pill); }

/* ============================================================
   13. الشارات (Badges)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  line-height: 1.6;
}
.badge-success { background: var(--succes-bg); color: var(--succes); }
.badge-error { background: var(--erreur-bg); color: var(--erreur); }
.badge-warning { background: var(--avertissement-bg); color: var(--avertissement); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-new { background: var(--rouge); color: var(--blanc); }
.badge-discount { background: var(--noir); color: var(--blanc); }

.badge-count {
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--blanc);
}

/* ============================================================
   14. النوافذ المنبثقة (Modal)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal-backdrop.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-mid) var(--ease-smooth), visibility 0s linear;
}
.modal {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  width: min(400px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  filter: blur(3px);
  transition: transform var(--dur-exit) var(--ease-exit), opacity var(--dur-exit) var(--ease-exit), filter var(--dur-exit) var(--ease-exit);
}
.modal-backdrop.is-open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: blur(0px);
  transition: transform var(--dur-mid) var(--ease-bounce), opacity var(--dur-mid) var(--ease-smooth), filter var(--dur-mid) var(--ease-smooth);
}
.modal-head {
  padding: var(--space-5);
  border-bottom: 1px solid var(--ligne);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: var(--fw-bold);
  font-size: 17px;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--ligne);
  color: var(--texte);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-body { padding: var(--space-5); overflow-y: auto; font-size: 14.5px; color: var(--texte-doux); line-height: 1.6; }
.modal-foot { padding: var(--space-5); border-top: 1px solid var(--ligne); display: flex; gap: var(--space-3); }

/* ---- خيارات داخل Modal (كيما اختيار اللغة) ---- */
.option-list { display: flex; flex-direction: column; }
.lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  border: none;
  border-bottom: 1px solid var(--ligne);
  background: none;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--texte);
  cursor: pointer;
  text-align: start;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:active { background: var(--ligne); }
.lang-option .flag { font-size: 21px; line-height: 1; }
.lang-option.is-selected { color: var(--rouge); font-weight: var(--fw-bold); }
.lang-option .check { margin-inline-start: auto; width: 18px; height: 18px; color: var(--rouge); }

/* ============================================================
   15. الورقة السفلية (Bottom Sheet)
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-smooth);
  z-index: 80;
}
.sheet-backdrop.is-open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--blanc);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 85vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-mid) var(--ease-smooth);
  z-index: 81;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
}
.sheet.is-open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--ligne); margin: 10px auto 4px; flex-shrink: 0; }
.sheet-head { padding: var(--space-3) var(--space-5) var(--space-4); font-weight: var(--fw-bold); font-size: 16px; border-bottom: 1px solid var(--ligne); }
.sheet-body { padding: var(--space-5); overflow-y: auto; }

/* ============================================================
   16. شريط التنقّل السفلي (للهاتف)
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--blanc);
  border-top: 1px solid var(--ligne);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-block: 8px 6px;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 11px;
  font-weight: var(--fw-medium);
  position: relative;
  transition: color var(--dur-fast);
}
.bottom-nav-item svg { width: 23px; height: 23px; }
.bottom-nav-item.is-active { color: var(--rouge); }
.bottom-nav-item .bn-badge {
  position: absolute; top: 2px; inset-inline-start: 52%;
  min-width: 15px; height: 15px; font-size: 9px;
  border-radius: 50%; background: var(--rouge); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--blanc);
}

/* ---- خانة البحث الوسطى — 40٪ من عرض الشريط ---- */
.bottom-nav-search {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 8px 6px;
}
.bn-search-box {
  position: relative;
  width: 100%;
  height: 38px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ligne);
  color: var(--texte-doux);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.bn-search-box:active { background: rgba(var(--rouge-rgb), 0.12); color: var(--rouge); }
.bn-search-text {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 38px);
}
.bn-search-box svg {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================================
   17. القائمة الجانبية (Nav Drawer)
   ============================================================ */
.nav-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit);
  z-index: 60;
}
.nav-drawer-backdrop.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-mid) var(--ease-smooth), visibility 0s linear;
}
.nav-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(300px, 85vw);
  background: var(--blanc);
  transform: translateX(100%) scale(0.97);
  transform-origin: 100% 50%;
  opacity: 0;
  filter: blur(3px);
  transition: transform var(--dur-exit) var(--ease-exit), opacity var(--dur-exit) var(--ease-exit), filter var(--dur-exit) var(--ease-exit);
  z-index: 61;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
}
.nav-drawer.is-open {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform var(--dur-mid) var(--ease-smooth), opacity var(--dur-mid) var(--ease-smooth), filter var(--dur-mid) var(--ease-smooth);
}
.nav-drawer-head { padding: var(--space-5); background: var(--noir); color: var(--blanc); padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); }
.nav-drawer-body { flex: 1; overflow-y: auto; padding-block: var(--space-2); }
.nav-drawer-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 13px var(--space-5);
  color: var(--texte);
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast);
}
.nav-drawer-item:active { background: var(--ligne); }
.nav-drawer-item svg { width: 20px; height: 20px; color: var(--texte-doux); flex-shrink: 0; }
.nav-drawer-item.is-toggle { width: 100%; border: none; background: none; cursor: pointer; font: inherit; justify-content: space-between; }
.nav-drawer-item.is-toggle .chevron { transition: transform var(--dur-fast); }
.nav-drawer-item.is-toggle.is-open .chevron { transform: rotate(180deg); }
.nav-drawer-sublist { max-height: 0; overflow: hidden; transition: max-height var(--dur-mid) var(--ease-smooth); }
.nav-drawer-sublist.is-open { max-height: 640px; }
.nav-drawer-sublist .nav-drawer-item { padding-inline-start: calc(var(--space-5) + 32px); font-size: 13.5px; }
.nav-drawer-sublist .nav-drawer-item img { width: 18px; height: 18px; }

/* ============================================================
   18. حالات التحميل (Loading)
   ============================================================ */
.skeleton {
  background: linear-gradient(100deg, var(--ligne) 30%, #f5f5f5 50%, var(--ligne) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
.skeleton-card { width: 220px; }
.skeleton-card .skeleton-img { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.skeleton-card .skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-card .skeleton-line.w-60 { width: 60%; }
.skeleton-card .skeleton-line.w-40 { width: 40%; }

.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: var(--blanc);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner.spinner-dark { border-color: rgba(0,0,0,0.15); border-top-color: var(--rouge); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; opacity: 0.85; display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   19. حالات فاضية / خطأ / نجاح
   ============================================================ */
.state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  gap: var(--space-2);
}
.state-panel svg { width: 64px; height: 64px; color: var(--ligne); margin-bottom: var(--space-2); }
.state-panel h3 { margin: 0; font-size: 17px; font-weight: var(--fw-bold); }
.state-panel p { margin: 0; font-size: 14px; color: var(--texte-doux); max-width: 280px; line-height: 1.6; }
.state-panel .btn { margin-top: var(--space-3); }
.state-panel.state-error svg { color: var(--erreur); }

.toast {
  position: fixed;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--noir);
  color: var(--blanc);
  padding: 13px var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-smooth), transform var(--dur-mid) var(--ease-smooth);
  z-index: 90;
  max-width: min(360px, 90vw);
}
.toast.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--vert); }
.toast.toast-error .toast-icon { color: #ff6b6b; }

/* ============================================================
   20. الفوتر
   ============================================================ */
.site-footer {
  background: var(--noir);
  color: var(--blanc);
  padding: var(--space-7) var(--space-4) var(--space-5);
}
.footer-newsletter { text-align: center; margin-bottom: var(--space-6); }
.footer-newsletter h3 { font-size: 17px; font-weight: var(--fw-bold); margin: 0 0 6px; }
.footer-newsletter p { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 0 0 var(--space-4); }
.footer-form { display: flex; gap: 8px; max-width: 360px; margin: 0 auto; }
.footer-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanc);
  padding-inline: var(--space-4);
  font-family: var(--font-main);
  font-size: 14px;
}
.footer-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-form input:focus { outline: none; border-color: var(--rouge); }
.footer-form button {
  height: 44px;
  padding-inline: var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.footer-social { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.footer-social a:hover { background: var(--rouge); border-color: var(--rouge); }
.footer-social svg { width: 19px; height: 19px; }
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  font-size: 13.5px;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: var(--space-4);
}
.footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-links a:hover { color: var(--blanc); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.footer-bottom img { height: 26px; margin-bottom: var(--space-2); }

/* ============================================================
   21. طلباتي (أرشيف الطلبات) + تتبّع الطلب + أسهم تمرير الصفوف
   ============================================================ */
.order-card { border: 1px solid var(--ligne); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.order-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.order-card-head .order-num { font-size: 13px; font-weight: var(--fw-bold); }
.order-card-head .order-date { font-size: 11.5px; color: var(--texte-doux); margin-top: 2px; display: block; }
.order-code {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ligne);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-4);
  margin-bottom: var(--space-3);
}
.order-code .label { font-size: 12px; color: var(--texte-doux); }
.order-code .code { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: 4px; color: var(--rouge); font-variant-numeric: tabular-nums; }
.order-price { font-size: 16px; font-weight: var(--fw-bold); color: var(--rouge); margin-bottom: var(--space-3); direction: ltr; unicode-bidi: isolate; }
.order-status-track { display: flex; align-items: center; gap: 4px; margin-bottom: var(--space-4); }
.order-status-track .step { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--ligne); }
.order-status-track .step.is-done { background: var(--succes); }
.order-status-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.order-status-label.status-pending { color: var(--avertissement); }
.order-status-label.status-accepted { color: var(--info); }
.order-status-label.status-delivering { color: var(--rouge); }
.order-status-label.status-delivered { color: var(--succes); }
.order-actions { display: flex; gap: 8px; }
.order-actions .btn { flex: 1; font-size: 13px; padding: 10px 16px; }

/* ---- تتبّع الطلب — نافذة تتراكب فوق طلباتي ---- */
.stacked-backdrop { z-index: 64; }
.stacked-sheet { z-index: 65; }
.track-map-ph {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: var(--ligne);
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-doux);
  margin-bottom: var(--space-4);
}
.track-map-ph svg { width: 46px; height: 46px; opacity: .4; }
.track-rider-row { display: flex; align-items: center; gap: var(--space-3); }
.track-rider-row .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ligne); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--texte-doux); }
.track-rider-row .name { font-weight: var(--fw-bold); font-size: 14px; }
.track-rider-row .eta { font-size: 12.5px; color: var(--texte-doux); }

/* ---- أسهم تمرير صفوف المنتجات ---- */
.row-scroll-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: var(--space-2); }
.scroll-arrow-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ligne);
  background: var(--blanc);
  color: var(--texte);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.scroll-arrow-btn:active { background: var(--ligne); }
.scroll-arrow-btn svg { width: 15px; height: 15px; }
.scroll-arrow-btn[hidden] { display: none; }

/* ============================================================
   22. صفحات فرعية — تواصل، خدمة، سياسات (هيدر مبسّط + محتوى + أكورديون)
   ============================================================ */
.leaf-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
}
.leaf-title { font-size: 21px; font-weight: var(--fw-bold); margin: var(--space-2) 0 var(--space-2); }
.leaf-intro { font-size: 14px; color: var(--texte-doux); line-height: 1.7; margin: 0 0 var(--space-5); }
.policy-note {
  background: var(--avertissement-bg);
  color: var(--avertissement);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.policy-body h2 { font-size: 16px; font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-2); }
.policy-body p { font-size: 14px; color: var(--texte-doux); line-height: 1.8; margin: 0 0 var(--space-3); }
.policy-body ul { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }
.policy-body li { font-size: 14px; color: var(--texte-doux); line-height: 1.8; margin-bottom: 6px; }

/* ---- خيارات التواصل ---- */
.contact-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne);
  color: var(--texte);
  text-decoration: none;
}
.contact-option svg { width: 22px; height: 22px; color: var(--rouge); flex-shrink: 0; }
.contact-option .label { font-size: 12px; color: var(--texte-doux); display: block; margin-bottom: 2px; }
.contact-option .value { font-size: 14.5px; font-weight: var(--fw-semibold); }

/* ---- أكورديون عام (أسئلة شائعة...) ---- */
.acc-item { border-bottom: 1px solid var(--ligne); }
.acc-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border: none; background: none;
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--texte);
  text-align: start;
  cursor: pointer;
}
.acc-toggle .chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--texte-doux); transition: transform var(--dur-fast); }
.acc-toggle.is-open .chevron { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-mid) var(--ease-smooth); }
.acc-body.is-open { max-height: 400px; }
.acc-body p { font-size: 13.5px; color: var(--texte-doux); line-height: 1.7; padding-bottom: var(--space-4); margin: 0; }

/* ---- بطاقة خدمة/صفحة فرعية — هيرو فارغ أكبر ---- */
.leaf-hero {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.leaf-hero svg { width: 48px; height: 48px; color: var(--texte-doux); opacity: .35; }

/* ---- مجموعات روابط الفوتر ---- */
.footer-group-title { font-size: 12px; font-weight: var(--fw-bold); color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-3); }
.footer-group { margin-bottom: var(--space-5); }
.footer-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-group a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 13.5px; }

/* ============================================================
   23. تقييمات ومراجعات المنتج — مشاهدة عامة، بلا حاجة لحساب
   ============================================================ */
.reviews-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.reviews-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--rouge);
  background: var(--blanc);
  color: var(--rouge);
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.reviews-add-btn:hover { background: var(--erreur-bg); }
.reviews-add-btn svg { width: 16px; height: 16px; }
.reviews-score { text-align: center; }
.reviews-score-num { font-size: 40px; font-weight: var(--fw-bold); color: var(--texte); line-height: 1; margin-bottom: 4px; }

.review-stars { display: flex; align-items: center; justify-content: center; gap: 2px; }
.review-stars svg { width: 16px; height: 16px; }
.review-stars .is-filled { color: var(--etoile); }
.review-stars .is-empty { color: var(--ligne); }

.reviews-breakdown { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--space-6); }
.reviews-bar-row { display: flex; align-items: center; gap: var(--space-3); font-size: 12.5px; color: var(--texte-doux); }
.reviews-bar-count { flex-shrink: 0; width: 62px; }
.reviews-bar-track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--ligne); overflow: hidden; }
.reviews-bar-fill { height: 100%; background: var(--etoile); border-radius: var(--radius-pill); }
.reviews-bar-star { flex-shrink: 0; width: 14px; text-align: center; font-weight: var(--fw-semibold); color: var(--texte); }

.review-card { padding-block: var(--space-4); border-bottom: 1px solid var(--ligne); }
.review-card:last-child { border-bottom: none; padding-bottom: 0; }
.review-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; flex-wrap: wrap; }
.review-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--erreur-bg); color: var(--rouge-fonce);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold);
}
.review-name { font-size: 13.5px; font-weight: var(--fw-semibold); }
.review-verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: var(--fw-medium);
  color: var(--succes); background: var(--succes-bg);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.review-verified svg { width: 11px; height: 11px; }
.review-card .review-stars { justify-content: flex-start; margin-bottom: 6px; }
.review-card .review-stars svg { width: 14px; height: 14px; }
.review-text { font-size: 13.5px; color: var(--texte-doux); line-height: 1.7; margin: 0; }
.footer-group a:hover { color: var(--blanc); }

/* ============================================================
   24. البحث الفعلي — نافذة بحث كاملة الشاشة، فلترة حقيقية في المنتجات
   ============================================================ */
.search-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--dur-mid) var(--ease-smooth);
}
.search-overlay.is-open { transform: translateY(0); }
.search-overlay-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: max(var(--space-4), env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--ligne);
  flex-shrink: 0;
}
.search-overlay-head .search-field { flex: 1; }
.search-overlay-cancel {
  border: none; background: none; font-family: var(--font-main);
  font-size: 14px; font-weight: var(--fw-medium); color: var(--texte-doux);
  cursor: pointer; flex-shrink: 0; padding: 8px;
}
.search-overlay-body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.search-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.search-results-count { font-size: 12.5px; color: var(--texte-doux); margin-bottom: var(--space-3); }

/* ============================================================
   25. الحساب وتسجيل الدخول — نموذج تمثيلي، يتحفظ في متصفح الزائر برك
   ============================================================ */
.auth-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); background: var(--ligne); padding: 4px; border-radius: var(--radius-pill); }
.auth-tab {
  flex: 1; border: none; background: none; cursor: pointer;
  padding: 10px; border-radius: var(--radius-pill);
  font-family: var(--font-main); font-size: 13.5px; font-weight: var(--fw-semibold);
  color: var(--texte-doux); transition: background var(--dur-fast), color var(--dur-fast);
}
.auth-tab.is-active { background: var(--blanc); color: var(--texte); box-shadow: var(--card-shadow); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form[hidden] { display: none; }
.register-robot-intro { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--erreur-bg); border-radius: var(--radius-md); }
.register-robot-intro img { width: 44px; height: 44px; flex-shrink: 0; }
.register-robot-intro p { font-size: 12.5px; line-height: 1.5; color: var(--texte); margin: 0; }

.account-header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--ligne); margin-bottom: var(--space-2); }
.account-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--erreur-bg); color: var(--rouge-fonce);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: var(--fw-bold);
}
.account-name { font-size: 15.5px; font-weight: var(--fw-bold); }
.account-phone { font-size: 13px; color: var(--texte-doux); direction: ltr; display: inline-block; }
.account-logout { color: var(--erreur); }

.password-field { position: relative; }
.password-field .input { padding-inline-end: 44px; }
.password-toggle {
  position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: none; background: none; cursor: pointer;
  color: var(--texte-doux); display: flex; align-items: center; justify-content: center;
}
.password-toggle svg { width: 19px; height: 19px; }
.password-toggle.is-visible { color: var(--rouge); }

.auth-forgot {
  align-self: flex-start; margin-top: -8px; padding: 0; border: none; background: none;
  color: var(--rouge); font-family: var(--font-main); font-size: 12.5px; font-weight: var(--fw-medium);
  cursor: pointer;
}

.consent-row {
  display: flex; align-items: center; gap: var(--space-3); text-align: right;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--ligne);
  border-radius: var(--radius-md); background: var(--blanc); cursor: pointer;
  font-family: var(--font-main); transition: border-color var(--dur-fast), background var(--dur-fast);
}
.consent-row .box {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--ligne); background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.consent-row .box svg { width: 14px; height: 14px; color: var(--blanc); opacity: 0; transition: opacity var(--dur-fast); }
.consent-row .text { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--texte-doux); }
.consent-row .text b { display: block; font-size: 13.5px; color: var(--texte); margin-bottom: 2px; }
.consent-row.is-checked { border-color: var(--rouge); background: var(--erreur-bg); }
.consent-row.is-checked .box { background: var(--rouge); border-color: var(--rouge); }
.consent-row.is-checked .box svg { opacity: 1; }

/* ============================================================
   26. صفحة الدفع — عناصر إضافية (نموذج بصري برك، الدفع الحقيقي يبقى صفحة WooCommerce)
   ============================================================ */
.payment-option-list { display: flex; flex-direction: column; gap: var(--space-3); }
.payment-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: 1.5px solid var(--ligne);
  border-radius: var(--radius-md); background: var(--blanc);
  cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.payment-option svg { width: 22px; height: 22px; color: var(--texte-doux); flex-shrink: 0; }
.payment-option .name { font-weight: var(--fw-bold); font-size: 14.5px; }
.payment-option .hint { font-size: 12px; color: var(--texte-doux); }
.payment-option .check { margin-inline-start: auto; width: 20px; height: 20px; color: var(--rouge); flex-shrink: 0; visibility: hidden; }
.payment-option.is-selected { border-color: var(--rouge); background: var(--erreur-bg); }
.payment-option.is-selected svg:first-child { color: var(--rouge); }
.payment-option.is-selected .check { visibility: visible; }
.bank-details {
  display: none; margin-top: var(--space-3); padding: var(--space-4);
  background: var(--ligne); border-radius: var(--radius-md); font-size: 13px; line-height: 1.8;
}
.bank-details.is-open { display: block; }
.bank-details b { display: block; margin-bottom: 2px; }

/* ============================================================
   27. خطوات صفحة الدفع (Checkout Steps) + ملخص الطلب القابل للطي
   ============================================================ */
.checkout-summary-bar { border: 1px solid var(--ligne); border-radius: var(--radius-md); margin-bottom: var(--space-5); overflow: hidden; }
.checkout-summary-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: none; background: var(--blanc); cursor: pointer;
  font-family: var(--font-main); text-align: right;
}
.checkout-summary-toggle .chevron { width: 16px; height: 16px; color: var(--texte-doux); transition: transform var(--dur-fast); flex-shrink: 0; }
.checkout-summary-toggle.is-open .chevron { transform: rotate(180deg); }
.checkout-summary-toggle .checkout-summary-label { flex: 1; font-size: 14px; font-weight: var(--fw-semibold); }
.checkout-summary-thumbs { display: flex; }
.checkout-summary-thumbs span { width: 28px; height: 28px; border-radius: var(--radius-sm); margin-inline-start: -8px; border: 2px solid var(--blanc); }
.checkout-summary-details { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--ligne); }
.checkout-summary-details[hidden] { display: none; }

.checkout-step { border: 1px solid var(--ligne); border-radius: var(--radius-md); margin-bottom: var(--space-4); overflow: hidden; }
.checkout-step-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--blanc); }
.checkout-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--ligne); color: var(--texte-doux);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-bold);
}
.checkout-step.is-done .checkout-step-num { background: var(--succes); color: var(--blanc); }
.checkout-step.is-done .checkout-step-num .num-text { display: none; }
.checkout-step-num .check-icon { display: none; width: 15px; height: 15px; }
.checkout-step-num .lock-icon { display: none; width: 13px; height: 13px; }
.checkout-step.is-done .checkout-step-num .check-icon { display: block; }
.checkout-step.is-done .checkout-step-num .num-text { display: none; }
.checkout-step.is-locked { opacity: .5; }
.checkout-step.is-locked .checkout-step-body { display: none; }
.checkout-step.is-locked .checkout-step-num { background: var(--ligne); color: var(--texte-doux); }
.checkout-step.is-locked .checkout-step-num .num-text,
.checkout-step.is-locked .checkout-step-num .check-icon { display: none; }
.checkout-step.is-locked .checkout-step-num .lock-icon { display: block; }
.checkout-step.is-active .checkout-step-head { background: var(--erreur-bg); }
.checkout-stage-note { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--texte-doux); background: var(--ligne); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); }
.checkout-stage-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--avertissement); }
.checkout-sim-btn {
  width: 100%; margin-top: var(--space-2); padding: 10px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--ligne); background: none; color: var(--texte-doux);
  font-family: var(--font-main); font-size: 12.5px; cursor: pointer;
}
.checkout-sim-btn:hover { border-color: var(--rouge); color: var(--rouge); }
.delivery-code-box { text-align: center; padding: var(--space-5); background: var(--erreur-bg); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.delivery-code-box .label { font-size: 13px; color: var(--texte-doux); margin-bottom: var(--space-2); }
.delivery-code-box .code { font-size: 36px; font-weight: var(--fw-bold); color: var(--rouge); letter-spacing: .1em; direction: ltr; }
.checkout-step-title { font-size: 14.5px; font-weight: var(--fw-bold); flex: 1; }
.checkout-step-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

/* ============================================================
   28. روبوت دهشة العائم — يمين/يسار الشاشة، تنبيهات وعروض تجارية
   ============================================================ */
.dhb-bubble {
  position: fixed;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 72px; height: 72px;
  cursor: pointer;
  opacity: 0.92;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  transition: transform var(--dur-fast) var(--ease-bounce), opacity var(--dur-fast);
}
.dhb-bubble:hover, .dhb-bubble.is-open { opacity: 1; transform: translateY(-50%) scale(1.06); }
.dhb-bubble:active { transform: translateY(-50%) scale(0.94); }
.dhb-bubble img { width: 100%; height: 100%; object-fit: contain; }
.dhb-panel {
  position: fixed;
  left: calc(var(--space-4) + 72px + var(--space-3));
  top: 50%;
  transform: translateY(-50%) translateX(-12px) scale(0.96);
  width: min(260px, 78vw);
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  z-index: 51;
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur-mid) var(--ease-smooth);
  overflow: hidden;
}
.dhb-panel.is-open { transform: translateY(-50%) translateX(0) scale(1); opacity: 1; visibility: visible; }
.dhb-panel-head { background: var(--rouge); color: var(--blanc); padding: var(--space-4); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2); }
.dhb-panel-body { padding: var(--space-4); font-size: 13.5px; color: var(--texte-doux); line-height: 1.7; }