/* ═══════════════════════════════════════════════════════════════
   hero.css — «Hero» مساعد الطلب بالدردشة في صفحة الزبون.
   فقاعة عائمة + لوحة دردشة (ملء الشاشة على الهاتف، بطاقة على الكمبيوتر).
   ═══════════════════════════════════════════════════════════════ */
.hero-fab {
  position: fixed; z-index: 460;
  inset-inline-end: var(--phi-1h); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--sp-sm);
  height: var(--phi-4); padding: 0 var(--phi-1h) 0 var(--sp-sm); border-radius: var(--r-sm); cursor: pointer;
  background: var(--c-primary); color: #FFFFFF;
  border: 1px solid rgb(var(--mint-rgb) / .5); box-shadow: var(--elev-4);
  font: 800 .95rem 'IBM Plex Sans Arabic', sans-serif;
  transition: transform var(--transition, var(--dur-3) var(--ease-standard));
  -webkit-tap-highlight-color: transparent;
}
.hero-fab:active { transform: scale(.95); }
.hero-fab .hero-av { width: var(--icon-box); height: var(--icon-box); font-size: var(--t-body-lg); }
/* فوق شريط «تتبع طلبك» العائم حين يظهر */
body:has(.ot-float:not([hidden])) .hero-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.hero-open .hero-fab { display: none; }

.hero-av {
  flex: 0 0 auto; width: var(--icon-box); height: var(--icon-box); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-h, var(--mint-300));
  color: var(--n-900); font: 900 .95rem 'IBM Plex Sans Arabic', sans-serif; box-shadow: 0 0 0 2px rgb(var(--graphite-rgb) / .236);
}

.hero-panel {
  position: fixed; z-index: 470; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg-1, var(--n-950)); color: var(--text, var(--n-50));
  font-family: var(--font-ui); direction: rtl;
  animation: hero-up var(--dur-3) var(--ease-out);
}
.hero-panel[hidden] { display: none; }
@keyframes hero-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .hero-panel {
    inset: auto; inset-inline-end: var(--sp-lg); bottom: 20px; width: 400px; height: min(640px, calc(100vh - var(--h-lg)));
    border-radius: var(--radius-lg, var(--r-lg)); overflow: hidden;
    border: 1px solid rgb(var(--mint-rgb) / .236); box-shadow: var(--elev-1);
  }
}

.hero-head {
  display: flex; align-items: center; gap: var(--phi-0h);
  padding: calc(var(--phi-0h) + env(safe-area-inset-top, 0px)) var(--sp-md) var(--phi-0h);
  background: var(--bg-3, var(--n-900));
  border-bottom: 1px solid rgb(var(--mint-rgb) / .236);
}
.hero-head .hero-t { flex: 1; min-width: 0; line-height: 1.25; }
.hero-head b { display: block; font-size: var(--t-body-lg); color: var(--gold-h, var(--mint-300)); }
.hero-head small { color: var(--text-2, var(--n-400)); font-size: var(--t-label); }
.hero-x {
  width: var(--h-lg); height: var(--h-lg); border-radius: 50%; border: 1px solid rgb(var(--mint-rgb) / .236);
  background: transparent; color: var(--text, var(--n-50)); font-size: var(--t-body-lg); cursor: pointer;
}

.hero-log {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--sp-md) var(--sp-md) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm);
}
.hero-msg { max-width: 86%; padding: var(--phi-0h) var(--sp-md); border-radius: var(--r-lg); font-size: var(--t-body); line-height: 1.7; word-wrap: break-word; }
.hero-bot { align-self: flex-start; background: var(--bg-3, var(--n-900)); border: 1px solid rgb(var(--mint-rgb) / .146); border-start-start-radius: var(--r-md); }
.hero-me { align-self: flex-end; background: var(--c-primary); color: #FFFFFF; border-start-end-radius: var(--r-md); }
.hero-msg b { color: var(--gold-h, var(--mint-300)); }
.hero-me b { color: #FFFFFF; }
.hero-msg small { color: var(--text-2, var(--n-400)); }
.hero-typing { display: inline-flex; gap: var(--sp-2xs); }
.hero-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: hero-dot 984ms infinite; }
.hero-typing i:nth-child(2) { animation-delay: var(--dur-2); } .hero-typing i:nth-child(3) { animation-delay: var(--dur-3); }
@keyframes hero-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ملخص الطلب داخل الدردشة */
.hero-sum { margin: var(--sp-xs) 0 var(--sp-3xs); border-top: 1px dashed rgb(var(--mint-rgb) / .236); padding-top: var(--sp-xs); font-size: var(--t-body); }
.hero-sum .r { display: flex; justify-content: space-between; gap: var(--sp-md); }
.hero-sum .r.total { font-weight: var(--fw-bold); color: var(--gold-h, var(--mint-300)); border-top: 1px solid rgb(var(--mint-rgb) / .236); margin-top: var(--sp-xs); padding-top: var(--sp-xs); }
.hero-sum .muted { color: var(--text-2, var(--n-400)); font-size: var(--t-label); }

/* قائمة أصناف قسم */
.hero-prods { display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.hero-prod { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-xs); border-radius: var(--r-lg); background: rgb(var(--graphite-rgb) / .146); }
.hero-prod img { width: var(--h-lg); height: var(--h-lg); border-radius: var(--r-lg); object-fit: cover; flex: 0 0 auto; background: var(--bg-2); }
.hero-prod .n { flex: 1; min-width: 0; font-size: var(--t-body); line-height: 1.35; }
.hero-prod .n em { display: block; font-style: normal; color: var(--gold, var(--c-accent)); font-size: var(--t-label); }
.hero-prod.off { opacity: .5; }
.hero-add {
  flex: 0 0 auto; width: var(--icon-box); height: var(--icon-box); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--red, var(--c-primary)); color: #FFFFFF; font-size: var(--t-body);
}
.hero-add:disabled { background: var(--bg-4, var(--n-900)); cursor: default; }
.hero-add.ok { background: var(--mint-600); }
.hero-add.ok small { font-size: var(--t-caption); margin-inline-start: var(--sp-3xs); font-weight: var(--fw-bold); }
/* اختيار العدد بعد «+» */
.hero-qty { display: flex; align-items: center; gap: var(--sp-xs); flex: 0 0 auto; padding: var(--sp-2xs); border-radius: var(--r-sm); background: rgb(var(--graphite-rgb) / .236); border: 1px solid rgb(var(--mint-rgb) / .382); }
.hero-qty button { width: var(--icon-box); height: var(--icon-box); border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--bg-4, var(--n-900)); color: var(--text, var(--n-50)); font-size: var(--t-label); }
.hero-qty button:active { transform: scale(.92); }
.hero-qty .q { min-width: 1.6em; text-align: center; font-size: var(--t-body-lg); font-weight: var(--fw-bold); color: var(--gold, var(--c-accent)); font-variant-numeric: tabular-nums; }
.hero-qty .ok { width: auto; padding: 0 var(--sp-md); border-radius: var(--r-sm); background: var(--red, var(--cobalt-700)); color: #FFFFFF; font-weight: var(--fw-bold); font-size: var(--t-body); }
.hero-qty .x { width: var(--icon-box-sm); height: var(--icon-box-sm); background: transparent; color: var(--muted, var(--n-400)); }
@media (max-width: 380px) { .hero-qty button { width: var(--icon-box-sm); height: var(--icon-box-sm); } .hero-qty .ok { padding: 0 var(--phi-0h); } }

/* خريطة صغيرة لتأكيد الموقع */
.hero-map { height: 170px; border-radius: var(--r-lg); margin-top: var(--sp-sm); overflow: hidden; border: 1px solid rgb(var(--mint-rgb) / .236); }
.hero-map-hint { font-size: var(--t-label); color: var(--text-2); margin-top: var(--sp-xs); }

.hero-chips { display: flex; gap: var(--sp-xs); overflow-x: auto; padding: var(--sp-sm) var(--sp-md); scrollbar-width: none; }
.hero-chips::-webkit-scrollbar { display: none; }
.hero-chips:empty { display: none; }
.hero-chips button {
  flex: 0 0 auto; padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid rgb(var(--mint-rgb) / .382); background: var(--bg-2, var(--n-950)); color: var(--text, var(--n-50));
  font: 700 .88rem 'IBM Plex Sans Arabic', sans-serif;
}
.hero-chips button.primary { background: var(--mint-600); border-color: transparent; color: #FFFFFF; }
.hero-chips button.loc { background: var(--red); border-color: transparent; color: #FFFFFF; }
.hero-chips button:active { transform: scale(.96); }

.hero-bar {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--phi-0h) calc(var(--phi-0h) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(var(--mint-rgb) / .146); background: var(--bg-2, var(--n-950));
}
.hero-bar input {
  flex: 1; min-width: 0; height: var(--h-lg); border-radius: var(--r-sm); padding: 0 var(--phi-1h);
  border: 1px solid rgb(var(--mint-rgb) / .236); background: var(--bg-1, var(--n-950)); color: var(--text);
  font: 400 16px 'IBM Plex Sans Arabic', sans-serif; outline: none;
}
.hero-bar input:focus { border-color: var(--gold, var(--c-accent)); }
.hero-send {
  width: var(--h-lg); height: var(--h-lg); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--red); color: #FFFFFF; font-size: var(--t-body-lg);
}
.hero-send:disabled { opacity: .5; }

@media (prefers-reduced-motion: reduce) { .hero-panel { animation: none; } .hero-typing i { animation: none; } }

/* كل مناطق التوصيل داخل الدردشة */
.hero-area-q {
  width: 100%; margin-top: var(--sp-sm); height: var(--h-lg); border-radius: var(--r-lg); padding: 0 var(--sp-md);
  border: 1px solid rgb(var(--mint-rgb) / .382); background: var(--bg-1, var(--n-950)); color: var(--text);
  font: 400 16px 'IBM Plex Sans Arabic', sans-serif; outline: none;
}
.hero-areas { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3xs); }
.hero-areas button {
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid rgb(var(--mint-rgb) / .382); background: var(--bg-2, var(--n-950)); color: var(--text, var(--n-50));
  font: 700 .86rem 'IBM Plex Sans Arabic', sans-serif;
}
.hero-areas button[hidden] { display: none; }
.hero-areas button:active { transform: scale(.96); }
.hero-areas[data-empty="1"]::after { content: 'لا نتائج — جرّب جزءاً آخر من الاسم'; color: var(--text-2); font-size: var(--t-label); }
.hero-msg:has(.hero-areas) { max-width: 94%; }

/* اختيار العدد بعد «+»: سطر مستقل تحت الصنف — كان يُعصر اسم الصنف بجانبه حتى تتكدس حروفه عمودياً */
.hero-prod { flex-wrap: wrap; }
.hero-prod .n { min-width: 7em; }
.hero-prod .hero-qty { order: 5; flex: 1 0 100%; justify-content: flex-end; margin-top: var(--sp-3xs); box-sizing: border-box; }
.hero-prod .hero-qty .ok { margin-inline-start: auto; }