/* ===========================================================================
   FirOn — هندسة نموذج التطوّع داخل بطاقة التصميم (صفحة 11607 حصراً).

   خلاصة القياسات (2026-08-06):
   البنية الفعلية = card ← .fjfg-public-form ← .jetpack-contact-form-container.is-multistep
   ← form.contact-form ← .jetpack-form-step ← أغلفة الحقول. وحاويات ووردبريس تحمل
   تخطيط flex عمودياً بـ align-items:flex-start مُحقَناً من دعم التخطيط، فتنكمش
   الحقول إلى عرض محتواها (167px داخل 738px). ومحاولة فرض شبكة عمودين تسبّبت
   بشبكتين متداخلتين فانكمشت الحقول أكثر.

   القرار الهندسي (بمنطق UX لا ترقيع): نموذج طلب طويل (46 حقلاً · متعدّد الخطوات)
   يُعرض بعمود واحد كامل العرض — أعلى معدّل إتمام، وقراءة أسهل بالعربية، ويلغي
   الاعتماد على بنية أغلفة الإضافة أصلاً. الضبط هنا محاذاةٌ وعرضٌ فقط:
   stretch على الحاويات و100% على الحقول، فلا يتأثر أي مكوّن وظيفي.

   كل القواعد مقيّدة بـ body.page-id-11607 — لا تمسّ أي نموذج آخر بالموقع،
   ولا يُلمس ماركب الإضافة ولا ملفاتها.
   =========================================================================== */

/* ---------- ١) الحاويات: كتلة واحدة كاملة العرض بمحاذاة تمدُّد ---------- */
body.page-id-11607 .vol-form-card .fjfg-public-form,
body.page-id-11607 .vol-form-card .jetpack-contact-form-container,
body.page-id-11607 .vol-form-card form.contact-form,
body.page-id-11607 .vol-form-card .jetpack-form-step{
  display:flex !important;flex-direction:column !important;align-items:stretch !important;
  gap:var(--space-6) !important;inline-size:100% !important;max-inline-size:100% !important;
  box-sizing:border-box;
}
/* أي غلاف وسيط بين النموذج والحقول يتمدّد كذلك (بلا مساس بمكوّنات الحقل الداخلية) */
body.page-id-11607 .vol-form-card form.contact-form > *,
body.page-id-11607 .vol-form-card .jetpack-form-step > *{
  align-self:stretch !important;inline-size:100% !important;max-inline-size:100% !important;
  flex:0 0 auto !important;margin-inline:0 !important;
}

/* ---------- ٢) أغلفة الحقول: صفٌّ كامل دائماً ---------- */
body.page-id-11607 .vol-form-card [class*="wp-block-jetpack-field"],
body.page-id-11607 .vol-form-card [class*="grunion-field-"]{
  inline-size:100% !important;max-inline-size:100% !important;min-inline-size:0 !important;
  align-self:stretch !important;flex:0 0 auto !important;box-sizing:border-box;
}

/* ---------- ٣) المدخلات: عرض كامل وارتفاع لمس موحّد ---------- */
body.page-id-11607 .vol-form-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
body.page-id-11607 .vol-form-card select,
body.page-id-11607 .vol-form-card textarea{
  inline-size:100% !important;max-inline-size:100% !important;box-sizing:border-box;
  min-block-size:50px;
}
body.page-id-11607 .vol-form-card textarea{min-block-size:132px;line-height:1.9}
/* أغلفة المدخلات في جيتباك عناصر inline (span) فلا تتمدّد، فيبقى الحقل بعرض نصّه —
   وهذا سبب ظهور القوائم كنصّ بلا صندوق (قياس: عرض القائمة 150px داخل 738px).
   نجعل كل غلاف داخلي كتلةً كاملة العرض فتستقيم القوائم كبقية الحقول. */
body.page-id-11607 .vol-form-card [class*="wp-block-jetpack-field"] > span,
body.page-id-11607 .vol-form-card .contact-form__select-wrapper,
body.page-id-11607 .vol-form-card .contact-form__select-element-wrapper,
body.page-id-11607 .vol-form-card .wp-block-jetpack-input,
body.page-id-11607 .vol-form-card .jetpack-field__input-wrapper{
  display:block !important;inline-size:100% !important;max-inline-size:100% !important;position:relative;
}
/* القائمة المنسدلة: صندوق حقل كامل بسهم واضح بالطرف */
body.page-id-11607 .vol-form-card select{
  padding-block:12px !important;padding-inline:var(--space-4) 44px !important;
  background:var(--white) !important;border:var(--border-width) solid var(--border-default) !important;
  border-radius:var(--radius-sm) !important;font-family:var(--font-core);font-size:var(--fs-small);
  color:var(--text-body);appearance:none;cursor:pointer;
}
body.page-id-11607 .vol-form-card .jetpack-field-dropdown__icon{
  position:absolute;inset-inline-start:16px;inset-block-start:50%;transform:translateY(-50%);
  inline-size:16px;block-size:16px;pointer-events:none;
}
/* حالات التركيز — وضوح لوحة المفاتيح وإمكانية الوصول */
body.page-id-11607 .vol-form-card input:focus,
body.page-id-11607 .vol-form-card select:focus,
body.page-id-11607 .vol-form-card textarea:focus{
  border-color:var(--color-action) !important;outline:2px solid var(--color-action);outline-offset:1px;
}
/* حقل الهاتف يبقى صفاً أفقياً (المقدمة الدولية + الرقم) */
body.page-id-11607 .vol-form-card .jetpack-field__input-phone-wrapper{
  display:flex !important;flex-direction:row !important;align-items:stretch !important;inline-size:100% !important;
}
body.page-id-11607 .vol-form-card .jetpack-field__input-phone-wrapper input{min-block-size:48px}

/* ---------- ٤) الملصقات: سطر واضح فوق الحقل وشارة «مطلوب» بجانبه ---------- */
body.page-id-11607 .vol-form-card [class*="wp-block-jetpack-field"] > label{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  inline-size:100%;margin-block-end:8px;
  font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--text-heading);line-height:1.7;
}
/* ملصقات الاختيار المتعدّد والراديو تبقى ملاصقة لمربعها */
body.page-id-11607 .vol-form-card .grunion-radio-label,
body.page-id-11607 .vol-form-card .grunion-checkbox-label,
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox label,
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-radio label{
  display:inline-flex !important;inline-size:auto !important;margin-block-end:0;
}

/* ---------- ٥) شبكة المهارات/الأدوات: كبسولات مريحة بلا كسر كلمات ---------- */
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple .grunion-checkbox-multiple-options,
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple > div:has(> label),
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-radio .grunion-radio-options{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:var(--space-3) !important;inline-size:100% !important;
}
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple label,
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-radio label{
  display:flex !important;align-items:center !important;gap:var(--space-2);
  min-block-size:52px;padding:10px var(--space-4);
  background:var(--white);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);
  font-size:var(--fs-small);line-height:1.6;text-align:start;
  word-break:normal !important;overflow-wrap:normal !important;hyphens:none !important;
}
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple label:hover,
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-radio label:hover{border-color:var(--color-action)}

/* ---------- ٦) الإقرارات: بطاقة هادئة بمربع أول السطر ---------- */
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox label{
  gap:var(--space-3);align-items:flex-start !important;line-height:1.9;flex-wrap:nowrap !important;
}
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox input[type=checkbox],
body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple input[type=checkbox],
body.page-id-11607 .vol-form-card input[type=radio]{
  flex:0 0 auto !important;inline-size:20px !important;block-size:20px;min-block-size:0 !important;
  margin-block-start:2px;accent-color:var(--color-action);cursor:pointer;
}
/* شارة «مطلوب» لا تنكسر لسطر وحدها ولا تُزاح لطرف السطر */
body.page-id-11607 .vol-form-card .grunion-label-required{flex:0 0 auto;margin-inline-start:var(--space-2)}

/* ---------- ٧) الإرسال: زر أساسي كامل العرض ---------- */
body.page-id-11607 .vol-form-card .wp-block-buttons,
body.page-id-11607 .vol-form-card .wp-block-button{inline-size:100% !important}
body.page-id-11607 .vol-form-card .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:100%;min-block-size:56px;
  background:var(--color-action);border:0;border-radius:var(--radius-sm);
  color:var(--white);font-family:var(--font-core);font-size:var(--fs-body);font-weight:var(--fw-semibold);
}

/* ---------- ٨) الجوال ---------- */
@media (max-width:640px){
  body.page-id-11607 .vol-form-card{padding:var(--space-6) !important}
  body.page-id-11607 .vol-form-card .wp-block-jetpack-field-checkbox-multiple .grunion-checkbox-multiple-options,
  body.page-id-11607 .vol-form-card .wp-block-jetpack-field-radio .grunion-radio-options{grid-template-columns:1fr !important}
}

/* ---------- ٩) ISS-031 (2026-09-25): احترام خطوات النموذج متعدّد المراحل ----------
   القاعدة ١ أعلاه تفرض display:flex !important على كل .jetpack-form-step، فكانت المراحل
   الثلاث تظهر معاً (قياس Staging: الثلاث display:flex وارتفاعاتها 703/1381/927px)،
   فيبدو زر «التالي» كأنه لا ينقل. جيتباك يبدّل الصنف is-current-step بين المراحل —
   نُظهر الحالية فقط ونُبقي هندسة العمود الكامل كما هي. */
body.page-id-11607 .vol-form-card .jetpack-form-step:not(.is-current-step){display:none !important}