/* ═══════════════════════════════════════════════════════════════════════
   خطّ محتوى النموذج — Tajawal
   ملفّات محلّية مستضافة ذاتياً (assets/fonts/tajawal/) بلا اعتماد على
   الإنترنت، عربي + لاتيني معاً فيعمل بكلا اللغتين فعلياً (خلافاً لخطّ
   GC EpicPro السابق الذي كان لاتينياً فقط ولا يغطّي العربية). يُستخدَم
   فقط داخل عناصر النموذج (sf-*)؛ أزرار التنقّل وشريط التقدّم والصفحة
   اللغوية محميّة ولم تُلمس.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Tajawal';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/tajawal/tajawal-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════
   startflow.css
   المرجع البصري: interface-replication (primitives.tsx / questionnaire.tsx)
   ملاحظة: كلّ قواعد .start-ov__* المتعلّقة بالخطوة 0 (اختيار اللغة)
   محمية ولم تُلمس. فقط sf-* وتخطيط البطاقات وشريط التنقّل تغيّرت.
   
   تحديث: تم تعديل النموذج ليصبح ملء الشاشة بدلاً من بطاقة مع إضافة
   الرسوم المتحركة العشوائية للنصوص
   ═══════════════════════════════════════════════════════════════════════ */

/* ── متغيّرات المرجع ───────────────────────────────────────────────── */
:root {
  --sf-gold:         #d9b45f;
  --sf-gold-bright:  tan;
  --sf-gold-dim:     #b3934c;
  --sf-gold-border:  rgba(111,100,64,.6);
  --sf-gold-border-h:rgba(217,180,95,.7);
  --sf-cream:        #efe6cf;
  --sf-text:         #e8e0cf;
  --sf-text-muted:   #7d7657;
  --sf-desc-gold:    #b3934c;
  --sf-bg-panel:     rgba(12,13,20,.6);
  --sf-bg-field:     rgba(12,13,20,.6);
  --sf-bg-ta:        rgba(12,13,20,.4);
  /* التدرّج الذهبي للنصوص */
  --sf-grad: linear-gradient(175deg, #fbe6b8 0%, #ecca7c 40%, #c99f4d 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   الغلاف الخارجي — لا تغيير (Step 0 محمي)
   ═══════════════════════════════════════════════════════════════════════ */

.start-ov {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #0a0b10;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.start-ov.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .45s ease;
}

.start-ov::before {
  display: none;
}
@keyframes start-halo {
  0%,100% { opacity:.65; transform:scale(1)    }
  50%      { opacity:1;   transform:scale(1.04) }
}
@media (prefers-reduced-motion:reduce) { .start-ov::before { animation:none } }

/* ── اللوح الرئيسي ───────────────────────────────────────────────── */
.start-ov__panel {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0a0b10;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(25px,4.46vw,86px);
  transform: translateY(16px) scale(.985);
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.start-ov.is-open .start-ov__panel { transform: none }
@media (prefers-reduced-motion:reduce) {
  .start-ov         { transition-duration: .01ms }
  .start-ov__panel  { transition-duration: .01ms }
}

/* ── زرّ الخروج × ─────────────────────────────────────────────────── */
.start-ov__exit {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 3;
  width: clamp(42px, 3.4vw, 52px); height: clamp(42px, 3.4vw, 52px);
  border-radius: 50%;
  background: rgba(10,10,10,.72);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: clamp(16px, 1.3vw, 20px);
  display: grid; place-items: center;
  text-decoration: none;
  transition: background .3s ease, transform .3s ease;
}
.start-ov__exit:hover { background: #1f1f1f; transform: scale(1.08) }
.start-ov__exit:active { transform: scale(.96) }
.start-ov__exit:focus-visible { outline: 1px solid rgba(242,237,228,.5); outline-offset: 4px }

/* ═══════════════════════════════════════════════════════════════════════
   الخطوة 0 — اختيار اللغة (محمية، لا تُعدَّل)
   ═══════════════════════════════════════════════════════════════════════ */
.start-ov__view          { position: absolute; inset: 0 }
.start-ov__view[hidden]  { display: none !important }

.start-ov__view--lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(32px,8vw,110px);
}
.start-ov__choice {
  position: relative;
  width: clamp(240px,49.6vw,960px);
  aspect-ratio: 489/77;
  container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #f2ede4;
  border-radius: 2.45cqw;
  transition: transform .3s ease, background .35s ease;
}
.start-ov__choice:hover,
.start-ov__choice:focus-visible { transform: scale(1.02); background: rgba(255,244,225,.05) }
.start-ov__choice:active { transform: scale(.98) }
.start-ov__choice:focus-visible { outline: 1px solid rgba(242,237,228,.5); outline-offset: 5px }
.start-ov__dash {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.start-ov__dash rect {
  x: .5px; y: .5px;
  width: calc(100% - 1px); height: calc(100% - 1px);
  rx: 2.45cqw; fill: none; stroke-width: 1.2; stroke-dasharray: 7 25;
}
.start-ov__dash rect:nth-child(1) { stroke: rgba(190,70,18,.95) }
.start-ov__dash rect:nth-child(2) { stroke: rgba(96,128,62,.9); stroke-dashoffset: -16 }
.start-ov__choice--ar span {
  font-family: 'Traditional Arabic','Noto Naskh Arabic','Amiri',serif;
  font-weight: 700; font-size: 6.95cqw; line-height: 1; padding-bottom: .14em;
}
.start-ov__choice--en span {
  font-family: 'Bodoni MT','Didot','Playfair Display',Georgia,'Times New Roman',serif;
  font-weight: 700; font-size: 6.15cqw; line-height: 1; letter-spacing: .01em;
}
.start-ov__choice.is-picked { background: rgba(255,244,225,.09) }

/* ═══════════════════════════════════════════════════════════════════════
   بطاقات النموذج — الحاوية والانتقال
   ═══════════════════════════════════════════════════════════════════════ */
.start-ov__view--card {
  display: flex;
  flex-direction: column;
}

/* منطقة المحتوى القابلة للتمرير */
.start-ov__card {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(56px,7vh,84px) clamp(28px,4vw,72px) clamp(120px,16vh,160px);
  transition: opacity .24s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  align-items: center;
  /* عندما يفيض المحتوى عن الشاشة: ابدأ من الأعلى بدل التمركز
     (يمنع اختفاء بداية البطاقة فوق نقطة التمرير) — يعمل على الويب والهاتف معاً */
  align-items: safe center;
  justify-content: center;
  min-height: 100vh;
}
.start-ov__card::-webkit-scrollbar { display: none }

/* انتقال البطاقة — الدخول: انزلاق أفقي بلا ضبابية (يمين ← يسار متجاوِز
   الموضع النهائي ← عودة واستقرار يمين) مع تلاشي الشفافية معاً (sf-card-slide-in)
   الخروج: ذوبان + ضبابية بسيطان لكامل البطاقة كوحدة واحدة — بلا تغيير       */
.start-ov__card.is-enter-from-below,
.start-ov__card.is-enter-from-above  {
  animation: sf-card-slide-in .6s ease forwards;
}
.start-ov__card.is-exit-up,
.start-ov__card.is-exit-down         { opacity: 0; filter: blur(14px);
  transition: opacity .25s ease, filter .25s ease }
.start-ov__card.is-out               { opacity: 0 }

@keyframes sf-card-slide-in {
  0%   { opacity: 0; transform: translateX(70px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* زرّ الرجوع — حبّة صغيرة بمثلّث وشُرَط كما في التصاميم */
.start-ov__back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(10,10,10,.5);
  color: #f2ede4;
  font-size: 11px;
  letter-spacing: .18em;
  text-decoration: none;
  transition: background .3s ease;
}
.start-ov__back:hover { background: rgba(30,30,30,.7) }
.start-ov__back-tri {
  width: 0; height: 0;
  border-block: 5px solid transparent;
  border-inline-end: 8px solid #f2ede4;
}

/* عمود التنقّل في الذيل: «التالي» وتحته حبّة الرجوع الصغيرة */
.start-ov__navcol {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── شريط التنقّل السفلي — داخل view--card (كالمرجع) ────────────────── */
.start-ov__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  padding: 14px clamp(20px, 3vw, 44px) 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10,11,16,.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* رسالة التحقّق العامة — تظهر فوق شريط التنقّل عند النقر على التالي مع حقول مطلوبة فارغة */
.start-ov__validation-msg {
  width: 100%;
  text-align: center;
  font-family: 'Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(224,90,60,.95);
  padding: 0 24px 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.start-ov__validation-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.start-ov__view--card.is-en .start-ov__validation-msg {
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* زرّ التالي — cream pill بـ like مثلّث أحمر */
.start-ov__next {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 26px;
  border-radius: 999px;
  border: none;
  background: #f4f1ea;
  color: #141414;
  font-family: 'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vh, 20px);
  line-height: 1;
  cursor: pointer;
  transition: transform .25s ease, opacity .3s ease;
}
.start-ov__next:hover:not(:disabled) { transform: scale(1.05) }
.start-ov__next:disabled { opacity: .35; cursor: not-allowed }
.start-ov__next-tri {
  width: 0; height: 0;
  border-block: 6px solid transparent;
  border-inline-start: 10px solid #d23929;
}
.start-ov__next-label { white-space: nowrap }

/* شريط التقدّم — خطيّ متقطّع مع فقّاعة نسبة */
.start-ov__prog {
  position: relative;
  flex: 1;
  height: 34px;
}
.start-ov__prog::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 16px;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,.8) 0 7px, transparent 7px 15px);
}
.start-ov__prog-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  height: 6.4px;
  width: 1%;
  background: linear-gradient(to right, #57c46a, #cdd23a, #e2603a, #d23929);
  transition: width .8s cubic-bezier(.3,.7,.3,1);
  border-radius: 3.5px;

}
.start-ov__prog-bubble {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(10,10,10,.55);
  color: #f2ede4;
  display: grid;
  place-items: center;
  font-family: 'Bodoni MT', Georgia, serif;
  font-size: 11.5px;
  transition: inset-inline-start .8s cubic-bezier(.3,.7,.3,1);
}

/* ═══════════════════════════════════════════════════════════════════════
   sf-card-body — الحاوية الداخلية لكل بطاقة (تُبنى بواسطة render())
   ═══════════════════════════════════════════════════════════════════════ */
.sf-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  /* وحدة vh تتحجّم تلقائياً حسب ارتفاع الشاشة — نفس السلوك على الويب والهاتف */
  padding-bottom: 8vh;
}

/* ── عنوان الصفحة (page-level title) ──────────────────────────────
   مرجع: text-[26px] sm:text-[30px] font-extrabold text-gold-grad
          heading-glow text-center mb-10 text-balance               */
.sf-page-title {
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1.3;
  text-align: center;
  /* تدرّج ذهبيّ */
  background: var(--sf-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: white;
  /* توهّج */
  filter: drop-shadow(0 0 14px rgba(226,188,108,.3));
  margin: 0;
  max-width: 680px;
  align-self: center;
}
.start-ov__view--card.is-en .sf-page-title {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* سطر فرعيّ تحت عنوان الصفحة */
.sf-page-subtitle {
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 500;
  font-size: clamp(14px, 1.8vh, 16px);
  line-height: 1.6;
  color: tan;
  text-align: center;
  max-width: 560px;
  margin: -12px 0 0;
  align-self: center;
}
.start-ov__view--card.is-en .sf-page-subtitle {
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   sf-grid — شبكة الكتل
   ═══════════════════════════════════════════════════════════════════════ */

/* شبكة عامّة: عمودان على الشاشات الكبيرة */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px,100%), 1fr));
  gap: 40px 56px;
  align-items: start;
  width: 100%;
}

/* كتلة أخيرة يتيمة (عدد فرديّ من الكتل خارج sf-block--full) → تُوسَّط
   بعرض عمود واحد بدل التصاقها بجهة واحدة من الصفّ */
.sf-grid:not(.sf-grid--single) > .sf-block:not(.sf-block--full):last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 28px);
  margin: 0 auto;
}

/* حالة خاصّة: كتلة معلَّمة يدوياً (block.center) تبقى يتيمة رغم عدم
   مطابقتها لقاعدة nth-child(odd) أعلاه — مثلاً عندما تسبقها كتلة
   sf-block--full فتُزيح تناوب الأعمدة. نفس معاملة الكتلة اليتيمة. */
.sf-block--center {
  grid-column: 1 / -1;
  max-width: calc(50% - 28px);
  margin: 0 auto;
}

/* بطاقة بعمود واحد مُمرکَز (single:true كبطاقة الخدمة وبطاقة الميزانية) */
.sf-grid--single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}

/* بطاقة عمودين صريحة (بطاقة العميل: حقول + خيارات) */
.sf-grid--two-col {
  grid-template-columns: 1.2fr 1fr;
  gap: 40px 40px;
}

/* ── الأعمدة ─────────────────────────────────────────────────────── */
.sf-col {
  display: flex;
  flex-direction: column;
  gap: 24px;          /* مرجع gap-y-10 = 40px بين الأقسام، gap-4 = 16px بين الحقول */
  min-width: 0;
}
/* عمود الحقول: فجوة أصغر بين حقل وحقل */
.sf-col--fields { gap: 16px }
/* عمود الخيارات: فجوة أكبر بين الأقسام */
.sf-col--choices { gap: 40px }

/* ── كتلة واحدة (sf-block) ─────────────────────────────────────── */
.sf-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.sf-block--full {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
}
.sf-block--full > .sf-block__heading { text-align: center }
.sf-block--full > .sf-block__opts {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ── عنوان الكتلة / رأس القسم (QuestionHeading) ────────────────────
   مرجع: text-[17px] font-bold text-gold-grad heading-glow           */
.sf-block__heading {
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 4px;
  /* تدرّج ذهبيّ */
  background: var(--sf-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: white;
  filter: drop-shadow(0 0 10px rgba(226,188,108,.25));
}
.start-ov__view--card.is-en .sf-block__heading {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}
.sf-block__heading--left {
  text-align: unset;
  font-weight: unset;
  font-size: unset;
}
.sf-block__heading--center { text-align: center }

/* عنوان مقسوم إلى جزء أبيض (lead) وجزء ذهبيّ (rest) */
.sf-block__heading-lead {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  filter: none;
}
.sf-block__heading-rest {
  color: tan;
  -webkit-text-fill-color: tan;
  background: none;
  filter: none;
}

/* سطر وصف القسم (subtitle) — تصميم "العنوان الفرعي": ذهبيّ صريح، عريض،
   أصغر من عنوان السؤال (بلا تدرّج/توهّج) */
.sf-block__subtitle {
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 700;
  font-size: 16px;
  color: tan;
  line-height: 1.5;
  margin: -6px 0 4px;
}
.start-ov__view--card.is-en .sf-block__subtitle {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* السؤال الذي يليه عنوان فرعي (helper) — تصميم مختلف: أبيض ناصع بتوهّج
   أبيض بدل التدرّج الذهبيّ، ليتناسق مع العنوان الفرعي الذهبيّ أسفله.
   text-xl md:text-2xl lg:text-[28px] font-bold text-text-primary
   [text-shadow:0_0_14px_rgba(255,255,255,0.45),0_0_28px_rgba(255,255,255,0.2)] */
.sf-block:has(> .sf-block__subtitle) > .sf-block__heading {
  font-weight: 700;
  font-size: 22px;
  background: none;
  -webkit-background-clip: unset;
          background-clip: unset;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  filter: none;
  text-shadow: 0 0 14px rgba(255,255,255,.45), 0 0 28px rgba(255,255,255,.2);
}
@media (min-width: 768px) {
  .sf-block:has(> .sf-block__subtitle) > .sf-block__heading { font-size: 26px }
}
@media (min-width: 1024px) {
  .sf-block:has(> .sf-block__subtitle) > .sf-block__heading { font-size: 30px }
}

/* رسائل التحقّق */
.sf-block__msg {
  display: none;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(224,90,60,.9);
}
.sf-block.is-invalid .sf-block__msg { display: block }

/* ═══════════════════════════════════════════════════════════════════════
   TextField — حقل نص برمز T (FieldRow + TextField في المرجع)
   ═══════════════════════════════════════════════════════════════════════ */

/* صفّ الحقل: input يسار + label يمين (RTL) */
.sf-field-row {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: rtl;
}
.sf-field-row__label {
  flex: none;
  width: 190px;
  text-align: right;
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sf-text);
  cursor: default;
}
/* LTR: label يسار، input يمين */
.start-ov__view--card[dir="ltr"] .sf-field-row { direction: ltr }
.start-ov__view--card[dir="ltr"] .sf-field-row__label { text-align: left }
.start-ov__view--card.is-en .sf-field-row__label {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* حاوية الحقل: رمز T + input */
.sf-text-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid var(--sf-gold-border);
  background: var(--sf-bg-field);
  padding: 0 18px;
  height: 46px;
  transition: border-color .2s;
}
.sf-text-field:focus-within {
  border-color: var(--sf-gold-border-h);
}
.sf-text-field__glyph {
  flex: none;
  font-family: 'Bodoni MT','Didot','Playfair Display',Georgia,serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-gold);
  line-height: 1;
  user-select: none;
}
.sf-text-field__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--sf-text);
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  font-size: 19px;
  direction: ltr;
  text-align: left;
}
.sf-text-field__input::placeholder { color: var(--sf-text-muted) }

/* حالة خطأ التحقّق على الحقل */
.sf-block.is-invalid .sf-text-field { border-color: rgba(224,90,60,.7) }

/* ═══════════════════════════════════════════════════════════════════════
   TextArea — منطقة نص برمز T
   ═══════════════════════════════════════════════════════════════════════ */
.sf-text-area {
  border-radius: 22px;
  border: 1px solid var(--sf-gold-border);
  background: var(--sf-bg-ta);
  padding: 14px 16px;
  transition: border-color .2s;
}
.sf-text-area:focus-within { border-color: var(--sf-gold-border-h) }
.sf-text-area__glyph {
  display: block;
  margin-bottom: 6px;
  font-family: 'Bodoni MT','Didot','Playfair Display',Georgia,serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-gold);
  line-height: 1;
  user-select: none;
}
.sf-text-area__input {
  display: block;
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--sf-text);
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}
.sf-text-area__input::placeholder { color: var(--sf-text-muted) }
.sf-block.is-invalid .sf-text-area { border-color: rgba(224,90,60,.7) }

/* ═══════════════════════════════════════════════════════════════════════
   خيارات الاختيار — نوعان حسب وجود الوصف
   ═══════════════════════════════════════════════════════════════════════ */

.sf-block__opts {
  display: flex;
  flex-direction: column;
  /* الفجوة الافتراضية — تُلغى بـ sf-opt--spread و sf-opt--inline */
}
.sf-block__opts--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

/* hidden input */
.sf-opt__box { position: absolute; opacity: 0; pointer-events: none }

/* ── SpreadOption — خيار بلا وصف ──────────────────────────────────
   مرجع: flex w-full items-center justify-between gap-4 py-[7px]
          label: right, checkbox: left (pinned)                       */
.sf-opt--spread {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  cursor: pointer;
  border-bottom: 2.5px solid rgba(111,100,64,.15);
}
.sf-opt--spread:last-child { border-bottom: none }

/* label يمين في RTL */
.sf-opt--spread .sf-opt__body {
  flex: 1;
  text-align: right;
  min-width: 0;
}
/* mark (checkbox) يسار في RTL (pinned) */
.sf-opt--spread .sf-opt__mark { flex: none; order: 1 }
/* في LTR: اعكس */
.start-ov__view--card[dir="ltr"] .sf-opt--spread .sf-opt__body { text-align: left }
.start-ov__view--card[dir="ltr"] .sf-opt--spread .sf-opt__mark { order: unset }

/* ── InlineOption — خيار مع وصف ───────────────────────────────────
   مرجع: block w-full text-right
          flex items-center gap-3 → mark + label (sf-opt__header)
          desc: mt-1.5 pr-[30px] text-[12.5px]                        */
.sf-opt--inline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  text-align: right;
  width: 100%;
}
.start-ov__view--card[dir="ltr"] .sf-opt--inline { text-align: left }
.sf-block--inline .sf-block__opts { gap: 24px }  /* gap-6 = 24px */

/* رأس الخيار: mark + label جنباً إلى جنب */
.sf-opt--inline .sf-opt__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* تسمية الخيار inline — نصّ عاديّ (بلا تدرّج) كباقي الخيارات */
.sf-opt--inline .sf-opt__label {
  font-size: 17px;
  font-weight: 500;
  color: var(--sf-text);
  line-height: 1.5;
  transition: color .2s;
}
.sf-opt--inline:hover .sf-opt__label { color: #fff }
.sf-opt--inline .sf-opt__box:checked ~ .sf-opt__header .sf-opt__label {
  color: tan;
}

/* ── مربّع الاختيار (CheckBox) ─────────────────────────────────────
   مرجع: 18×18px border-radius 4px
          unchecked: border #8a7a4e/70 bg transparent
          checked:   border+bg #d9b45f, dark checkmark               */
.sf-opt__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border:1.5px solid #82796e;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color .2s, background .2s;
}
.sf-opt__mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 8px;
  border-right: 2px solid #d1d3dc;
  border-bottom: 2px solid #d1d3dc;
  transform: translate(-50%,-60%) rotate(45deg) scale(0);
  transition: transform .18s cubic-bezier(.3,1.4,.5,1);
}
.sf-opt__box:checked ~ .sf-opt__mark {
  border-color: var(--sf-gold);
  /* background: var(--sf-gold); */
}
.sf-opt__box:checked ~ .sf-opt__mark::after { transform: translate(-50%,-60%) rotate(45deg) scale(1) }
/* Inline options: mark is nested inside header, so the sibling combinator can't reach it directly */
.sf-opt__box:checked ~ .sf-opt__header .sf-opt__mark {
  border-color: var(--sf-gold);
  /* background: var(--sf-gold); */
}
.sf-opt__box:checked ~ .sf-opt__header .sf-opt__mark::after { transform: translate(-50%,-60%) rotate(45deg) scale(1) }
.sf-opt__box:focus-visible ~ .sf-opt__mark  { outline: 1px solid rgba(217,180,95,.6); outline-offset: 2px }
.sf-block.is-invalid .sf-opt__mark          { border-color: rgba(224,90,60,.7) }

/* ── تسمية الخيار ─────────────────────────────────────────────────
   SpreadOption: text-[15px] text-[#d9cfb6] hover:text-gold-bright
   InlineOption: text-[17px] font-bold text-gold-grad               */
.sf-opt__label {
  display: block;
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  line-height: 1.5;
  transition: color .2s;
}
.start-ov__view--card.is-en .sf-opt__label {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* Spread label — نصّ عاديّ */
.sf-opt--spread .sf-opt__label {
  color: var(--sf-text);
}
.sf-opt--spread:hover .sf-opt__label { color: #fff }
.sf-opt--spread .sf-opt__box:checked ~ .sf-opt__mark ~ .sf-opt__body .sf-opt__label {
  color: tan;
}

/* ── وصف الخيار (InlineOption description) ────────────────────────
   مرجع: mt-1.5 block pr-[30px] text-[12.5px] text-[#b3934c]        */
.sf-opt__desc {
  display: block;
  margin-top: 6px;
  padding-inline-start: 28px;  /* pr-[30px] في LTR = padding-left في RTL = padding-inline-start */
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: 13px;
  font-weight: 100;
  line-height: 1.6;
  color: tan;
}
.start-ov__view--card.is-en .sf-opt__desc {
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}

/* ── حقل "أخرى" — يظهر فقط عند اختيار الخيار المرافق، ويأخذ سطراً كاملاً ── */
.sf-opt__other {
  display: none;
  width: 100%;
  min-width: 80px;
  background: var(--sf-bg-field);
  border: 1px solid var(--sf-gold-border);
  border-radius: 999px;
  color: var(--sf-text);
  padding: 8px 14px;
  font-size: 13px;
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  outline: none;
  transition: border-color .2s;
}
/* السطر الجديد: بالنسبة لـ SpreadOption، flex-basis:100% يدفعه لسطر مستقل.
   order أعلى من mark (الذي يأخذ order:1 في RTL) يضمن بقاء الصندوق فوق
   حقل "أخرى" دائماً — بالعربية والإنجليزية على حدّ سواء. */
.sf-opt--spread .sf-opt__other { flex-basis: 100%; order: 5 }
.sf-opt__box:checked ~ .sf-opt__other {
  display: block;
  margin-top: 6px;
}
.sf-opt__other:focus { border-color: var(--sf-gold-border-h) }
.sf-opt__other::placeholder { color: var(--sf-text-muted) }
.sf-block.is-invalid .sf-opt__other { border-color: rgba(224,90,60,.7) }

/* ── Inline label — handled above ─────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   بطاقة النهاية
   ═══════════════════════════════════════════════════════════════════════ */
.sf-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 40vh;
}
.sf-end__lead {
  color: rgba(217,207,182,.75);
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: clamp(14px,2vh,18px);
  text-align: center;
  max-width: 560px;
}
.sf-end__send {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 24px 40px;
  color: #fff;
}
.sf-end__word {
  position: relative;
  z-index: 1;
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 700;
  font-size: clamp(44px,8vh,76px);
  line-height: 1;
  background: var(--sf-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sf-end__tri {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-90%,-52%) rotate(90deg);
  border: 2px solid rgba(210,57,41,.9);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: transparent;
}
.sf-end__send:hover .sf-end__word { filter: brightness(1.15) }
.sf-end__send:disabled { cursor: default }
.sf-end__send.is-sent .sf-end__word {
  background: none;
  -webkit-text-fill-color: #7ce8a8;
  color: #7ce8a8;
}
.sf-end__line {
  width: min(320px,50%);
  height: 1px;
  background: rgba(255,255,255,.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   بطاقة المراجعة — عرض جميع الأسئلة والإجابات
   ═══════════════════════════════════════════════════════════════════════ */
.sf-review {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
/* حاوية النتائج القابلة للتمرير — بحدّ (border) وارتفاع محدود */
.sf-review__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 8px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sf-review__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sf-review__item:last-child {
  border-bottom: none;
}
.sf-review__q {
  flex: 1 1 50%;
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vh, 17px);
  color: rgba(242,237,228,.7);
  line-height: 1.4;
}
.start-ov__view--card.is-en .sf-review__q {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}
.sf-review__a {
  flex: 1 1 50%;
  text-align: left;
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
  font-size: clamp(15px, 2vh, 18px);
  color: tan;
  line-height: 1.5;
}
.start-ov__view--card.is-en .sf-review__a {
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}
.start-ov__view--card[dir="ltr"] .sf-review__a { text-align: right }
.sf-review--success {
  text-align: center;
  justify-content: center;
  min-height: 40vh;
}
/* نص التأكيد بعد الإرسال — لم يكن له قاعدة خط سابقاً (كان يرث الخطّ
   العامّ للموقع)؛ فقط font-family أُضيف هنا، لا شيء آخر تغيّر */
.sf-success-body {
  font-family: 'Tajawal','Traditional Arabic','Noto Naskh Arabic',serif;
}
.start-ov__view--card.is-en .sf-success-body {
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   البطاقة الأولى — معلومات العميل (client info)
   قائمة خيارات بلا خطوط فاصلة وبفجوة أكبر بين الخيارات، ومربّع اختيار
   أهدأ (بلا لون ذهبيّ في الحدّ)، مطابقةً للمرجع
   ═══════════════════════════════════════════════════════════════════════ */
/* إزاحة بسيطة لأسفل لكامل محتوى بطاقة العميل داخل الشاشة */
.sf-card-body--client {
  transform: translateY(30px);
}
.sf-card-body--client .sf-block__opts {
  gap: 22px;
}
.sf-card-body--client .sf-opt--spread {
  border-bottom: none;
  padding: 4px 0;
}
.sf-card-body--client .sf-opt__mark {
  width: 22px;
  height: 22px;
  border-radius: 1px;
  border: 1.5px solid rgba(255,255,255,.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   English (LTR) overrides
   ═══════════════════════════════════════════════════════════════════════ */
/* start-ov__next محميّ — زرّ تنقّل، لم يُلمس خطّه */
.start-ov__view--card.is-en .start-ov__next {
  font-family: 'Bodoni MT','Didot','Playfair Display',Georgia,serif;
}
/* .sf-page-title / .sf-block__heading / .sf-end__lead / .sf-end__word /
   .sf-review__q لهنّ قواعد is-en مستقلّة أعلاه (بها Tajawal أولاً) —
   حُذفت من هنا لتفادي التكرار. .sf-opt--inline .sf-opt__label الوحيد
   الذي لم يكن له قاعدة مستقلّة، فأُفرِد له سطر خاص: */
.start-ov__view--card.is-en .sf-opt--inline .sf-opt__label {
  font-family: 'Tajawal','Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   هواتف
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  .start-ov__panel { inset: 0 }
  .start-ov__card { 
    padding: clamp(40px,10vh,60px) clamp(20px,5vw,40px) 100px;
  }

  .sf-grid--two-col { grid-template-columns: 1fr }
  .sf-grid          { grid-template-columns: 1fr }
  .sf-grid > .sf-block:not(.sf-block--full):last-child:nth-child(odd) { max-width: none }
  .sf-block--center { max-width: none }
  .sf-col--fields   { order: 2 }
  .sf-col--choices  { order: 1 }

  .sf-field-row { flex-direction: column; align-items: stretch; gap: 6px }
  .sf-field-row__label { width: auto; text-align: right }

  .sf-block__opts--cols { grid-template-columns: 1fr }

  .start-ov__footer { padding: 14px 18px; gap: 10px }
  .start-ov__next   { padding: 9px 18px; font-size: 13px }

  .sf-review__item { flex-direction: column; align-items: flex-start; gap: 6px }
  .sf-review__a,
  .start-ov__view--card[dir="ltr"] .sf-review__a { text-align: inherit }
  .sf-review__list { max-height: 42vh; padding: 4px 16px }
}

/* ═══════════════════════════════════════════════════════════════════════
   نموذج الإرسال الحقيقي (native) المخفي + iframe الاستقبال — راجع