@import url("/assets/fonts.css");

/* ═══════════════════════════════════════════════════════════════════
   واجهة المتجر — موبايل أولاً، عرض أقصى 480 بكسل.
   لا لون هوية ثابت هنا: --brand و--brand-dark تُحقنان من صف المتجر.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:      #1d1d2b;
  --muted:    #6f6f85;
  --faint:    #9c9cb0;
  --line:     #e9e9f1;
  --bg:       #f2f2f6;
  --frame:    #f6f6fa;   /* خلفية صندوق الصور — محايدة فاتحة */
  --surface:  #ffffff;
  --ok:       #1a7f52;
  --ok-bg:    #e7f6ee;
  --sale:     #d92d20;

  --bar-height: 3.875rem;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* السمة hidden يجب أن تسبق أي display في الأنماط — وإلا ظهر المخفي */
[hidden] { display: none !important; }

/* تسمية للقارئ الآلي دون أن تُرى — الحقول تكتفي بالـplaceholder بصرياً */
/* !important عمداً: `.field select { width: 100% }` أخصّ من `.sr-only`
   فكان يغلبه، فيصير <select> المحافظات المخفيّ عنصراً مطلقاً بعرض
   الصفحة كلها يفيض عن الشاشة يساراً ويهزّ الصفحة أفقياً على الهاتف. */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.shell {
  position: relative;   /* أي عنصرٍ مطلق داخله (sr-only) يُحتوى هنا لا في الصفحة */
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  min-height: 100vh;
  overflow-x: hidden;
}

/* حزامٌ أخير لا بديلاً عن اصطياد الفائض: لا تمرير أفقي للصفحة مهما حدث */
html, body { overflow-x: hidden; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.4; }
img { max-width: 100%; display: block; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ ١ · المعرض ═══════════════════════════════════════════════════ */

/* بعرض الشاشة كاملاً — لا هامش جانبي على الهاتف — وحوافٌ سفلية مقوَّسة
   تفصله عمّا تحته. وعلى الشاشة الواسعة يُقيَّد ويُقوَّس من الجهات كلها. */
.gallery {
  position: relative;
  background: var(--frame);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

@media (min-width: 560px) {
  .gallery { margin: 1rem 1.125rem 0; border-radius: 20px; }
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slides::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* النسبة تثبّت ارتفاع الصندوق فلا تقفز الصفحة بين صورة وأخرى.
     و4/3 لا 1/1: الشريحة `contain` لا `cover`، فالإطار المربّع
     يزيد الفراغ حول الصور العريضة ولا يكبّر المنتج. */
  aspect-ratio: 1 / 1;
  background: var(--frame);
}

/* cover في مربّع: صور الخطّ الآلي وعلي إكسبرس مربّعة أصلاً فلا يُقصّ منها
   شيء، وتملأ العرض بلا شريطَين جانبيَّين من لون الإطار. */
.slide img { width: 100%; height: 100%; object-fit: cover; }

.slide.empty {
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: .9375rem;
}

/* ── المصغَّرات ──
   النقطة تقول «هناك صورة أخرى» ولا تقول ما فيها، فيتصفّح الزبون
   بالتخمين. والمصغَّرة تُريه قبل أن ينقر. */
.thumbs {
  display: flex;
  gap: .5rem;
  padding: .625rem 1.125rem 0;   /* تحت المعرض مباشرةً بلا فجوة */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.thumbs::-webkit-scrollbar { display: none; }

.dot {
  flex: 0 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--frame);
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  transition: opacity .18s, border-color .18s, transform .12s;
}

 /* المصغَّرة تُقصّ عمداً: مربّع منتظم يُنتقى منه، لا عرضٌ للمنتج.
    والشريحة نفسها تبقى `contain` فلا يضيع من البضاعة شيء. */
.dot img { width: 100%; height: 100%; object-fit: cover; }
.dot:active { transform: scale(.95); }

.dot.on {
  opacity: 1;
  border-color: var(--brand);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* ── أسهم التنقّل ──
   للفأرة وحدها: الإصبع يسحب، ولا معنى لسهمٍ يغطّي الصورة على الهاتف */
.nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s, background .18s;
}

.gallery:hover .nav { opacity: 1; }
.nav:hover { background: #fff; }
.nav.prev { inset-inline-start: .75rem; }
.nav.next { inset-inline-end: .75rem; }

@media (hover: none) {
  .nav { display: none; }
}

/* شريط الخصم: أول ما تقع عليه العين قبل قراءة اسم المنتج */
.ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 3;
  padding: .375rem .875rem .4375rem;
  border-end-start-radius: var(--radius);
  background: linear-gradient(135deg, var(--sale), #b02218);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 3px 12px rgba(217, 45, 32, .35);
}


/* ═══ ٢ · الاسم والسعر ═════════════════════════════════════════════ */

.head { padding: 1.125rem 1.125rem .25rem; }
.head h1 { font-size: 1.375rem; line-height: 1.35; }
.head .short { margin: .375rem 0 0; color: var(--muted); font-size: .9375rem; }

.prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: .625rem; margin-top: .75rem; }

/* السعر أكبر عنصر في الصفحة بعد الصورة — هو سبب البقاء أو المغادرة */
.prices .now { font-size: 1.75rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.prices .now small { font-size: .9375rem; font-weight: 600; }
.prices .was { color: var(--faint); text-decoration: line-through; font-size: 1.0625rem; }

/* المبلغ بالدينار لا النسبة: «توفّر ٥٠٠٠ دينار» يُفهم فوراً */
.save-line {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin: .5rem 0 0;
  padding: .1875rem .625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sale) 10%, white);
  color: var(--sale);
  font-size: .8125rem;
  font-weight: 500;
}

.save-line b { font-weight: 700; }

/* ── الشريط الحيّ ──
   أرقامه من القاعدة لا مصنوعة: كم طلبه فعلاً وكم بقي فعلاً. */
.pulse {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .875rem 1.125rem 0;
}

.pulse-item {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: .8125rem;
  font-weight: 500;
}

.pulse-item b { font-weight: 700; }

.pulse-item.low {
  background: color-mix(in srgb, #e0a800 16%, white);
  color: #8a5e00;
}

.pulse-item.low svg { width: 1rem; height: 1rem; }

/* نقطة تنبض — إشارة «الآن» بلا نصّ يقولها */
.ping {
  position: relative;
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
}

.ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ping {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ═══ ٤ · شارات الثقة: صارت بطاقةً واحدة فوق زرّ التأكيد — انظر ١٧ ═══ */

/* ═══ ٥ · التفاصيل ═════════════════════════════════════════════════ */

.details { padding: 1.25rem 1.125rem 0; }
.details h2 { font-size: 1.0625rem; margin-bottom: .75rem; }
.details .block + .block { margin-top: 1.125rem; }
.details h3 { font-size: .9375rem; margin-bottom: .375rem; color: var(--brand-dark); }
.details p { margin: 0; color: #45455c; font-size: .9375rem; line-height: 1.9; }
.details .block p + p { margin-top: .75rem; }
.details img { width: 100%; border-radius: var(--radius); margin: .5rem 0; }

/* ═══ ٦ · الفاصل ═══════════════════════════════════════════════════ */

.divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 1.125rem 1.25rem;
  color: var(--faint);
  font-size: .8125rem;
  font-weight: 500;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* الجواب على «وإذا ما وصل؟» عند لحظة القرار لا في أعلى الصفحة وحدها */
.cod-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  margin: 0 1.125rem 1rem;
  padding: .625rem .875rem;
  border-radius: 10px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
}

.cod-line svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; stroke-width: 2.4; }

/* ═══ ٧ · الفورم ═══════════════════════════════════════════════════ */

.order { padding: 0 1.125rem; }

.step { margin: 0 0 1rem; padding: 0; border: 0; }

.step legend {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}

.step .num {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .875rem;
}

/* ── العروض ──
   أقوى ما في صفحة الدفع عند الاستلام. الزبون الذي يقرأ «القطعتان
   بـ٢٥ ألف · القطعة ١٢٥٠٠ بدل ١٥٠٠٠ · توفّر ٥٠٠٠» يأخذ اثنتين —
   والصفّ الواحد الذي يقول «قطعتان ٢٥٠٠٠» لا يقول له شيئاً.
   وكل رقم هنا حسبه الخادم. */

.offers { display: flex; flex-direction: column; gap: .625rem; }

.offer {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}

/* البطاقة الموسومة تُفسح لشارتها فوقها */
.offer.tagged { margin-top: .625rem; padding-top: 1.125rem; }

.offer:active { transform: scale(.994); }
.offer input { position: absolute; opacity: 0; pointer-events: none; }

/* الشارة تركب حافّة البطاقة العليا — تُرى قبل أن يُقرأ العرض،
   ولا تزاحم نصّه فتدفعه إلى سطر ثانٍ */
.offer .tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
  padding: .125rem .5rem;
  border-radius: 999px;
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20, 20, 34, .18);
}

/* «الأوفر» تُحسب ولا تُكتب: أكبر توفير بين العروض متعددة الكمية */
.offer .best-tag { background: var(--ok); }

/* دائرة الاختيار مرسومة — الافتراضية يختلف شكلها بين الأنظمة */
.offer .mark {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #d3d3e0;
  border-radius: 50%;
  transition: border-color .15s, box-shadow .15s;
}

.offer .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1875rem; }

/* نصّ صاحب المتجر كما كتبه — سطران على الأكثر ثم يُقصّ بلا كسر التخطيط */
.offer .text { font-size: .9375rem; font-weight: 600; line-height: 1.5; }

.offer .sub { display: flex; flex-wrap: wrap; gap: .25rem .625rem; font-size: .75rem; }
.offer .unit { color: var(--muted); }
.offer .save { color: var(--ok); font-weight: 700; }

/* السعر في طرف ثابت: تُقارن الأعمدة بنظرة واحدة.
   وتحته السعر «قبل» مشطوباً — الفرق يُرى بلا قراءة. */
.offer .price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .0625rem; }
.offer .price b { color: var(--brand-dark); font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.offer .price s { color: var(--faint); font-size: .8125rem; white-space: nowrap; }

.offer.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.offer.on .mark { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--brand); }


/* ── الخيارات ── */

.option { margin-top: 1rem; }
.option-name { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 700; }
.option-name i { color: var(--sale); font-style: normal; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.chip small { color: var(--muted); font-size: .75rem; }
.chip.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, white); font-weight: 700; }

/* ── الحقول ── */

.field { margin-bottom: .5rem; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .5625rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fbfbfd;
  color: inherit;
  font: inherit;
  /* 16px مقصود: أي أصغر يجعل iOS يكبّر الصفحة عند التركيز على الحقل */
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}

.field textarea { resize: vertical; line-height: 1.6; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  background: #fff;
}

.field input.bad { border-color: var(--sale); }
.field .err { margin: .375rem 0 0; color: var(--sale); font-size: .8125rem; }

/* ── كود الخصم ── */

.coupon-row { display: flex; gap: .5rem; }
.coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; }

.coupon-apply {
  flex: 0 0 auto;
  padding: 0 1rem;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.coupon-apply:hover { border-color: var(--brand); background: #fbfbfd; }
.coupon-apply:active { transform: translateY(1px); }

/* الأخضر هو الافتراضي: أغلب ما يُعرض هنا نجاحُ تطبيق */
.coupon-note { margin: .375rem 0 0; color: var(--ok, #1a9e5f); font-size: .8125rem; }
.coupon-note.bad { color: var(--sale); }

/* ── شاشة المحافظات ──
   منسدلة النظام على الهاتف تفتح عجلةً ضيّقة تُظهر أربعة أسماء من
   ثمانية عشر، فيمرّر الزبون بحثاً عن محافظته. وشبكة عمودين تُريها
   كلها بنظرة — وهي أكثر ما يُترك عنده الطلب. */

.gov-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .5625rem .75rem;
  min-height: 2.75rem;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fbfbfd;
  color: var(--faint);
  font: inherit;
  font-size: 1rem;
  text-align: start;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

/* اختيرت محافظة ⇒ النصّ داكن كأي حقل مملوء */
.gov-trigger.filled { color: var(--ink); font-weight: 600; }
.gov-trigger:active { border-color: var(--brand); }
.gov-trigger svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--muted); }

.gov-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 20, 34, .55);
  backdrop-filter: blur(2px);
  animation: review-fade .18s ease-out;
}

.gov-box {
  width: 100%;
  max-width: 30rem;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 40px rgba(20, 20, 34, .3);
  animation: review-rise .22s ease-out;
}

.gov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem .875rem;
  border-bottom: 1px solid var(--line);
}

.gov-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.gov-head p { margin: .1875rem 0 0; color: var(--muted); font-size: .8125rem; }

.gov-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--line-soft, #f1f1f6);
  color: var(--muted);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.gov-close:hover { background: var(--line); color: var(--ink); }

/* عمودان: ثمانَ عشرة محافظة في تسعة صفوف تُقرأ بلا تمرير طويل */
.gov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  padding: 1rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.gov-item {
  min-height: 3rem;
  padding: .5rem .625rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}

.gov-item:hover { border-color: var(--brand); }
.gov-item:active { transform: scale(.97); }

.gov-item.on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand-dark);
}

@media (min-width: 560px) {
  .gov-sheet { align-items: center; padding: 1.5rem; }
  .gov-box { border-radius: 20px; }
}

/* ── شاشة المراجعة ──
   تحلّ محلّ ملخّص كان تحت الفورم لا يقرؤه أحد. الآن يضغط الزبون
   «أرسل الطلب» فترتفع ورقة تعرض ما اختاره وما كتبه ومبلغه، ثم
   يؤكّد — فلا يصل طلب لم يقرأه صاحبه.

   الأرقام فيها من الخادم (`POST /quote`) لا من حساب في المتصفح. */

body.locked { overflow: hidden; }

.review {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(20, 20, 34, .55);
  backdrop-filter: blur(2px);
  animation: review-fade .18s ease-out;
}

@keyframes review-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes review-rise { from { transform: translateY(14px); } to { transform: translateY(0); } }

/* ورقة تصعد من أسفل الشاشة — أقرب إلى تطبيق الهاتف من نافذة وسطى */
.review-sheet {
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: var(--surface, #fff);
  box-shadow: 0 -8px 40px rgba(20, 20, 34, .3);
  animation: review-rise .22s ease-out;
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem .75rem;
  border-bottom: 1px solid var(--line);
}

.review-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; }

.review-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--line-soft, #f1f1f6);
  color: var(--muted);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.review-close:hover { background: var(--line); color: var(--ink); }

.review-body { padding: 1rem 1.125rem; overflow-y: auto; }

.review-product { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; }

.review-product img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  background: var(--line-soft, #f1f1f6);
}

.review-product b { display: block; font-size: .9375rem; line-height: 1.5; }
.review-product small { display: block; margin-top: .125rem; color: var(--muted); font-size: .8125rem; }
.review-product .review-saving { color: var(--ok); font-weight: 700; }

/* صفّان لكل سطر: التسمية رمادية والقيمة داكنة — ولا يُقصّ عنوان طويل */
.review-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .375rem .875rem;
  margin: 0 0 .875rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  background: #fafafc;
  font-size: .875rem;
}

.review-rows dt { color: var(--muted); white-space: nowrap; }
.review-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.review-totals { display: flex; flex-direction: column; gap: .375rem; }
.review-totals .line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.review-totals .line span { color: var(--muted); }
.review-totals .off b { color: var(--ok, #1a9e5f); }

.review-totals .total {
  margin-top: .375rem;
  padding-top: .625rem;
  border-top: 1px dashed var(--line);
  font-size: 1.125rem;
}

.review-totals .total span { color: var(--ink); font-weight: 700; }
.review-totals .total b { color: var(--brand); font-weight: 700; }

.review-note {
  margin: .875rem 0 0;
  padding: .625rem .75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, white);
  color: var(--ink);
  font-size: .8125rem;
  text-align: center;
}

.review-foot {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .875rem 1.125rem calc(.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface, #fff);
  border-radius: 0 0 20px 20px;
}

.review-confirm {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .1s, box-shadow .15s;
}

.review-confirm:active { transform: translateY(1px); }
.review-confirm:disabled { opacity: .7; cursor: progress; }

.review-edit {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

.review-edit:hover { color: var(--ink); }

/* على الشاشة الواسعة تصير نافذة وسطى لا ورقة صاعدة */
@media (min-width: 560px) {
  .review { align-items: center; padding: 1.5rem; }
  .review-sheet { border-radius: 20px; }
  .review-foot { border-radius: 0 0 20px 20px; }
}

/* ── زر الطلب ── */

.order-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 1rem;
  padding: .875rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .1s, box-shadow .15s;
}

.order-button:active { transform: translateY(1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 30%, transparent); }

/* المبلغ في قرص داخل الزر: يقرأ الزبون ما سيدفعه على الزر نفسه */
.order-button b {
  padding: .125rem .625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-weight: 700;
}

/* لمعة تمرّ مرّة كل بضع ثوانٍ — تجذب العين إلى الزر بلا وميض مزعج */
.order-button::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  animation: sheen 4.5s ease-in-out infinite;
}

@keyframes sheen {
  0%, 62%  { transform: translateX(0); }
  82%, 100% { transform: translateX(-420%); }
}

.order-button:disabled { opacity: .75; cursor: progress; }
.order-button:disabled::after { display: none; }

.pending {
  margin: .625rem 0 0;
  padding: .625rem .875rem;
  border-radius: 10px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: .875rem;
  text-align: center;
}

/* ═══ ٨ · الشريط السفلي ════════════════════════════════════════════ */

.bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 10;
  max-width: 480px;
  margin: 0 auto;
  height: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px));
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .875rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(20, 20, 34, .07);
}

.bar-price { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bar-price small { color: var(--muted); font-size: .75rem; }
.bar-price b { color: var(--brand-dark); font-size: 1.125rem; font-weight: 700; }

.bar-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .6875rem 1.375rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}

.bar-button svg { width: 1rem; height: 1rem; stroke-width: 2.4; }
.bar-button:active { transform: translateY(1px); }

/* ═══ التذييل ══════════════════════════════════════════════════════
   في كل صفحة. هوية البائع وتواصلُه وسياساتُه — ما يبحث عنه مراجع
   الإعلانات، وما يطمئن الزبون قبل أن يعد بالدفع نقداً عند بابه. */

/* **حشو الشريط السفلي في التذييل لا في `.shell`**: كان `.shell` يحجز
   ارتفاع الشريط بحشوٍ سفلي أبيض تحت التذييل الرمادي — شريطٌ أبيض يُرى
   تحت نهاية الصفحة، ويُرى كاملاً كلما اختفى الشريط (`.away`). وبوضعه
   في التذييل يمتدّ لونه إلى آخر الصفحة ويطفو الشريط فوقه، ويبقى نصّ
   التذييل غير محجوبٍ كما كان. */
.foot {
  margin-top: 2.5rem;
  padding: 1.5rem 1.125rem calc(1.75rem + var(--bar-height) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: #fafafc;
  text-align: center;
}

/* صفحةٌ بلا شريط سفلي: حشو التذييل العادي وحده */
.no-bar .foot { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }

.foot-name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--brand-dark); }

.foot-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem 1rem;
  margin: .625rem 0 0;
}

.foot-contact a { color: var(--ink); font-size: .875rem; font-weight: 600; text-decoration: none; }
.foot-contact a:hover { color: var(--brand-dark); }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .75rem;
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px dashed var(--line);
}

.foot-links a { color: var(--muted); font-size: .8125rem; text-decoration: none; }
.foot-links a:hover { color: var(--brand-dark); text-decoration: underline; }

.foot-note { margin: .875rem 0 0; color: var(--faint); font-size: .75rem; }
.foot-copy { margin: .25rem 0 0; color: var(--faint); font-size: .75rem; }

/* ═══ صفحات السياسات ═══════════════════════════════════════════════ */

.doc { padding: 1.25rem 1.125rem 0; }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.doc-back svg { width: 1rem; height: 1rem; }
.doc-back:hover { color: var(--brand-dark); }

.doc h1 { font-size: 1.375rem; margin-bottom: 1rem; }

.doc-body p { margin: 0 0 .875rem; color: #45455c; font-size: .9375rem; line-height: 1.85; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body b { color: var(--ink); font-weight: 700; }

/* ═══ القائمة والصفحات الفارغة ═════════════════════════════════════ */

.store-head { padding: 1.25rem 1.125rem; text-align: center; border-bottom: 1px solid var(--line); }
.store-head h1 { font-size: 1.25rem; color: var(--brand-dark); }
.store-head .logo { max-height: 3rem; margin: 0 auto; object-fit: contain; }

.catalog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  padding: 1rem 1.125rem;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.card:active { transform: translateY(1px); }

/* الصورة مربّعة كاملة لا يغطيها شيء: صور المنتجات المركّبة 1080×1080 وعليها
   كتابةٌ مصمَّمة، فإطار 4:3 مع `cover` كان يقصّ أعلاها وأسفلها — وفي متصفحات
   الهاتف لا يُحسب `height:100%` داخل شبكة بنسبة، فتأخذ الصورة طولها المربّع
   وتفيض تحت الإطار فيُرسم الاسم فوقها. الإطار مربّع يقصّ ما يفيض، والصورة
   كاملة داخله، والاسم والسعر تحتها في كل المقاسات. */
.card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-image .empty { color: var(--faint); font-size: .8125rem; }

.card-body { padding: .625rem .75rem .75rem; }
.card-body h2 { font-size: .9375rem; font-weight: 500; }

.card-price { display: flex; align-items: baseline; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.card-price .now { color: var(--brand); font-weight: 700; font-size: .9375rem; }
.card-price .was { color: var(--faint); text-decoration: line-through; font-size: .8125rem; }

.blank { padding: 3rem 1.5rem; text-align: center; color: var(--muted); }
.blank.tall { min-height: 70vh; display: grid; place-content: center; gap: .5rem; }
.blank h1 { font-size: 1.25rem; color: var(--ink); }
.blank p { margin: 0; font-size: .9375rem; }

.ghost-button {
  display: inline-block;
  margin-top: .75rem;
  padding: .625rem 1.25rem;
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}


/* ═══ أخطاء الفورم ═════════════════════════════════════════════════ */

.form-errors {
  margin-bottom: 1rem;
  padding: .75rem .875rem;
  border: 1px solid color-mix(in srgb, var(--sale) 30%, white);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sale) 8%, white);
}

.form-errors p { margin: 0; color: var(--sale); font-size: .875rem; }
.form-errors p + p { margin-top: .25rem; }

/* ═══ صفحة الشكر ═══════════════════════════════════════════════════ */

.thanks { padding: 2rem 1.125rem 1.5rem; text-align: center; }

.thanks .tick {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, white);
  color: var(--brand);
}

.thanks .tick svg { width: 2rem; height: 2rem; stroke-width: 2.4; }

.thanks h1 { font-size: 1.375rem; }
.thanks .lead { margin: .375rem 0 1.25rem; color: var(--muted); font-size: .9375rem; }

.order-no {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .4375rem .875rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
}

.order-no span { color: var(--muted); font-size: .8125rem; }
.order-no b { color: var(--brand-dark); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

.receipt, .who {
  margin-bottom: 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafafc;
  text-align: right;
}

.receipt .line, .who .line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9375rem;
}

.receipt .line + .line, .who .line + .line { margin-top: .5rem; }
.receipt .muted, .who span:first-child { color: var(--muted); font-size: .8125rem; }

/* اسم المنتج عنواناً فوق أسطره: العرض، وقبل الخصم ووفّرت إن كان خصم، والمجموع */
.receipt .item-head { margin-bottom: .5rem; }
.receipt .item-head + .line { margin-top: 0; }
.receipt .item-head b { font-weight: 700; }
.receipt .item-head ~ .item-head { margin-top: .875rem; padding-top: .875rem; border-top: 1px dashed var(--line); }

/* الأرقام إنجليزية بفواصل الآلاف — والسعر «قبل» مشطوباً بجانبه */
.receipt .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt .ltr s { color: var(--faint); margin-inline-end: .25rem; }
.receipt .offer-phrase { text-align: end; }
.receipt .saved span:last-child { color: var(--ok); font-weight: 700; }
.who b { font-weight: 500; }
.who b.ltr { direction: ltr; unicode-bidi: isolate; }

.receipt .total {
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px dashed var(--line);
  font-size: 1.0625rem;
}

.receipt .total span { color: var(--ink); font-weight: 700; font-size: 1rem; }
.receipt .total b { color: var(--brand); }

.whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.whatsapp svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.9; }

.thanks .more { display: inline-block; margin-top: 1rem; color: var(--brand-dark); font-weight: 700; }

/* ═══ تفضيلات المستخدم ═════════════════════════════════════════════ */

/* من أطفأ الحركة في نظامه: لا نبض ولا لمعة ولا انتقال */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ ١٥ · المعرض: الشاشة الكاملة ═════════════════════════════════
   لا عدّاد ولا نقاط فوق الصورة: المصغَّرات تحتها تقول «أين أنا» و«ما
   هناك» معاً، وطبقتان فوق الصورة تحجبان جزءاً من المنتج بلا فائدة. */

.slide { cursor: zoom-in; }
.slide.empty { cursor: default; }

/* الشاشة الكاملة: خارج .shell، سوداء، والشرائح scroll-snap كالمعرض */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #0c0c14;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.lb-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.lb-track::-webkit-scrollbar { display: none; }

/* مقرَّبةً: لا سحب بين الشرائح — الإصبع يجرّ الصورة نفسها */
.lightbox.zoomed .lb-track { overflow: hidden; touch-action: none; }

.lb-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lb-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform .12s ease-out;
  will-change: transform;
}

.lightbox.zoomed .lb-slide img { transition: none; }

.lb-close {
  position: absolute;
  inset-block-start: calc(.75rem + env(safe-area-inset-top, 0px));
  inset-inline-start: .75rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lb-counter {
  position: absolute;
  inset-block-start: calc(1.25rem + env(safe-area-inset-top, 0px));
  inset-inline-end: 1rem;
  z-index: 2;
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.lb-hint {
  margin: 0;
  padding: .625rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .75rem;
  color: rgba(255, 255, 255, .6);
}

.lightbox.zoomed .lb-hint { visibility: hidden; }

/* ── الشاشة الواسعة: لا تكبير إطلاقاً ──
   الصورة على الشاشة الواسعة معروضةٌ بحجمٍ كافٍ أصلاً، وفتحُها فوق
   الصفحة خطوةٌ زائدة تُغلق بخطوةٍ أخرى. فالنقر لا يفعل شيئاً، والأسهم
   والنقاط وحدها تنقّل. وعلى الهاتف تبقى الشاشة الكاملة بالتقريب
   والسحب كما هي — هناك الصورة صغيرة والإصبع يقرّبها. */
@media (min-width: 768px) {
  .slide { cursor: default; }
}
/* ═══ ١٦ · التوصيل بالرقم ═══════════════════════════════════════════ */

/* تحت العروض مباشرةً — الزبون يجمع في رأسه قبل أن يكتب حرفاً */
.ship-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0 0;
  padding: .625rem .75rem;
  border-radius: 10px;
  background: var(--ok-bg);
  color: #1f5a3e;
  font-size: .8125rem;
  line-height: 1.5;
}

.ship-line svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--ok); }
.ship-line b { color: var(--ok); font-weight: 800; }

/* ═══ ١٧ · شارات الثقة فوق زرّ التأكيد ═══════════════════════════════
   ثلاث إجابات على ثلاثة أسئلة تمنع الطلب في الدفع عند الاستلام: «متى
   أدفع؟» و«يوصل لعندي؟» و«وإذا ما عجبني؟». بطاقةٌ واحدة بلون المتجر
   شفّافاً، والأيقونات ملوّنة، والعنوان أثقل من شرحه، والكلّ على محاذاةٍ واحدة. */

.trust-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin: .875rem 0 0;
  padding: .875rem .5rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, white);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 5%, white);
}

/* كل عمودٍ على محوره الوسطي: أيقونة فوق عنوان فوق شرح */
.tm { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .375rem; text-align: center; min-width: 0; }

.tm-ico {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
}

.tm-ico svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2; }
.tm-ico.cod   { background: var(--ok); }
.tm-ico.ship  { background: var(--brand); }
.tm-ico.check { background: #d97706; }

.tm-text { display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
.tm-text b { font-size: .75rem; font-weight: 800; color: var(--ink); }
.tm-text small { font-size: .6875rem; font-weight: 400; color: var(--muted); margin-top: .125rem; }

/* ═══ ٢١ · رأس هوية المتجر ═══════════════════════════════════════════ */

.brand-bar {
  padding: calc(.625rem + env(safe-area-inset-top, 0px)) 1.125rem .625rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, white), color-mix(in srgb, var(--brand) 6%, white));
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, white);
}

.brand-link { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }

.brand-logo, .brand-mark {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* بلا شعار: الحرف الأول في قرصٍ بلون المتجر */
.brand-mark {
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-name { font-size: 1rem; font-weight: 800; color: var(--brand-dark); }
.brand-tagline { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ ٢٢ · سطرٌ تحت السعر ═══════════════════════════════════════════ */

.price-note { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
/* ═══ ١٨ · نقاط البيع في الوصف ══════════════════════════════════════ */

.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.points li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: #45455c;
  font-size: .9375rem;
  line-height: 1.6;
}

.points svg {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .25rem;
  padding: .125rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, white);
  color: var(--brand);
  stroke-width: 2.6;
}

.details .block p + .points, .details .block .points + p { margin-top: .625rem; }

/* ═══ ١٩ · «الأوفر» شارةً وحدها ══════════════════════════════════════
   البطاقة كبقيّة البطاقات: خلفيةٌ وحدٌّ واحد للجميع. التمييز اللوني
   الأخضر كان يزاحم تمييز **المختار** بلون المتجر، فيرى الزبون بطاقتين
   «مضيئتين» ولا يعرف أيّهما اختار. الشارة في زاويتها تكفي. */

.offer .best-tag {
  background: var(--ok);
  font-size: .75rem;
  padding-inline: .75rem;
  box-shadow: 0 3px 10px rgba(26, 127, 82, .35);
}

/* ═══ ٢٠ · الشريط بعد الفورم، وواتساب ═══════════════════════════════ */

.bar { transition: transform .25s ease, opacity .25s ease; }

/* مخفيٌّ حتى يمرّ الزبون بالفورم — وأثناء أي شاشةٍ مفتوحة */
.bar.away, body.locked .bar { transform: translateY(110%); opacity: 0; pointer-events: none; }

.wa-fab {
  position: fixed;
  inset-block-end: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px) + .875rem);
  inset-inline-start: .875rem;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem .5rem .625rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .4);
}

.wa-fab svg { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.wa-fab:active { transform: translateY(1px); }

/* والشريط مخفيٌّ ⇒ الزرّ ينزل إلى الأسفل بدل أن يعلّق في الفراغ */
body:has(.bar.away) .wa-fab { inset-block-end: calc(env(safe-area-inset-bottom, 0px) + .875rem); }
body.locked .wa-fab { display: none; }

@media (min-width: 560px) {
  .wa-fab { inset-inline-start: calc(50% - 240px + .875rem); }
}

/* ═══ ٢٣ · شريط التوصيل بين العروض والاستمارة ═══════════════════════ */

.ship-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 1rem 0 .25rem;
  padding: .75rem .875rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 9%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
  color: var(--brand-dark);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.ship-bar svg { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--brand); stroke-width: 2; }
.ship-bar b { font-weight: 800; color: var(--brand); }

/* سطرٌ تحت حقل الاسم يقول إنه اختياري — لا تخمين */
.field .hint-line { margin: .375rem 0 0; color: var(--faint); font-size: .75rem; }
.field textarea.bad { border-color: var(--sale); }
.gov-trigger.bad { border-color: var(--sale); }