/* ==========================================================================
   dga-form-states.css
   حالات حقول النماذج + صندوق نجاح الإرسال
   الإصدار الحالي: 12

   ماذا يغطي هذا الملف؟
   - نموذج "تواصل معنا": ملاحظتا الهيئة 9 (حالات التفاعل) و10 (حالة الخطأ)
   - صندوق "تم الإرسال بنجاح" لنموذجي "تواصل معنا" و"انضم إلينا"
   - إصلاحان صغيران لنموذج "انضم إلينا" (باقي تنسيقه في dga-fixes.css، القسم 12)

   الملف المرافق: dga-form-validation.js (يضيف كلاسات error وdga-pressed
   ويبني صندوق النجاح). هذا الملف يرسم فقط، ولا يعمل وحده بالكامل.

   المرجع: السلوك مطابق لموقع هيئة الحكومة الرقمية، والقيم من Storybook
   كود المنصات (أسماء التوكنز مكتوبة بجانب كل متغير).

   الفهرس:
     0. متغيرات الألوان
     1. الحالة الافتراضية
     2. التركيز (Focused)           — ملاحظة 9
     3. الضغط (Pressed)             — ملاحظة 9
     4. التمرير (Hovered)           — ملاحظة 9
     5. حالة الخطأ                  — ملاحظة 10
     6. رسالة الخطأ أسفل الحقل      — ملاحظة 10
     7. زر "تقديم" — التمرير والتركيز
     8. صندوق نجاح الإرسال (تواصل معنا / انضم إلينا)
     9. "انضم إلينا" — مقاس أيقونة رسالة الخطأ
    10. "انضم إلينا" — سماكة حد الخيار المحدد في القائمة

   ⚠️ ترتيب الأقسام 1 ← 5 مقصود: الأساس ← التركيز ← الضغط ← التمرير ← الخطأ.
   عند تساوي الأولوية تغلب القاعدة الأخيرة، فتغيير الترتيب يكسر تداخل الحالات.

   سجل التغييرات:
   - 12: حد الخيار المحدد في قائمة "انضم إلينا" صار 1px (القسم 10)
   - 11: تثبيت أيقونة رسالة الخطأ في "انضم إلينا" على 16px (القسم 9)
   - 10: تثبيت خصائص الشريط بـ !important، لأن اختصار background في الثيم
         كان يمسح الشريط من منطقة النص + دلالة التمرير والتركيز لزر التقديم
   -  9: حالة الخطأ صارت تسلك سلوك الحالة العادية نفسه لكن بالأحمر،
         مع رفع أولويتها بـ :focus:not(:hover) (التفصيل في القسم 5)
   ========================================================================== */

/* ------------------------------------------------ 0) متغيرات الألوان
   محصورة داخل نموذج "تواصل معنا" فقط، فلا تؤثر على أي مكان آخر.   */
form.webform-submission-contact-form {
  --dga-border-default: #9da4ae;   /* form-field-border-default */
  --dga-border-hovered: #384250;   /* form-field-border-hovered */
  --dga-border-error:   #b42318;   /* form-field-border-error   */
  --dga-bar:            #0c111b;   /* form-field-border-pressed */
  --dga-bg-default:     #ffffff;   /* form-field-background-default */
  --dga-bg-pressed:     #f3f4f6;   /* form-field-background-pressed */
  --dga-text-default:   #161616;
  --dga-text-focused:   #384250;
  --dga-text-error:     #b42318;
  --dga-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06),
                   0 4px 8px -2px rgba(16, 24, 40, .1);
}

/* ================================================ 1) الحالة الافتراضية
   الشريط السفلي (الخط الأسود أسفل الحقل) مرسوم كخلفية متدرّجة على الحقل
   نفسه، عرضها 0 في الوضع العادي ويمتد عند التركيز.
   لماذا ليس ::after؟ لأن غلاف الحقل يحتوي رسالة الخطأ أيضًا، فلو ثبّتنا
   الشريط في أسفل الغلاف لظهر تحت رسالة الخطأ بدل الحقل.               */
form.webform-submission-contact-form .js-form-item input.form-text,
form.webform-submission-contact-form .js-form-item input.form-email,
form.webform-submission-contact-form .js-form-item input.form-tel,
form.webform-submission-contact-form .js-form-item .iti input,
form.webform-submission-contact-form .js-form-item textarea.form-textarea {
  border-color: var(--dga-border-default) !important;
  background-color: var(--dga-bg-default) !important;
  color: var(--dga-text-default);
  background-image: linear-gradient(var(--dga-bar), var(--dga-bar)) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-position: bottom center !important;
  background-size: 0 2px;
  box-shadow: none !important;
  transition: background-size .2s ease-in-out,
              border-color .2s ease-in-out,
              background-color .2s ease-in-out,
              box-shadow .2s ease-in-out;
}

/* منطقة النص (textarea) عنصر سطري افتراضيًا، فيبقى تحتها فراغ صغير.
   display:block يزيل هذا الفراغ ويضبط المسافة قبل رسالة الخطأ.       */
form.webform-submission-contact-form .js-form-item textarea.form-textarea {
  display: block;
  vertical-align: top;
}

/* إيقاف الحركة لمن فعّل خيار "تقليل الحركة" في نظامه (إمكانية الوصول) */
@media (prefers-reduced-motion: reduce) {
  form.webform-submission-contact-form .js-form-item input,
  form.webform-submission-contact-form .js-form-item textarea {
    transition: none;
  }
}

/* ======================================== 2) التركيز (Focused) — ملاحظة 9
   عند النقر داخل الحقل: الشريط السفلي يمتد بالكامل + ظل shadow-md.   */
form.webform-submission-contact-form .js-form-item input.form-text:focus,
form.webform-submission-contact-form .js-form-item input.form-email:focus,
form.webform-submission-contact-form .js-form-item input.form-tel:focus,
form.webform-submission-contact-form .js-form-item .iti input:focus,
form.webform-submission-contact-form .js-form-item textarea.form-textarea:focus {
  background-color: var(--dga-bg-default) !important;
  background-size: 100% 2px !important;
  color: var(--dga-text-focused);
  box-shadow: var(--dga-shadow-md) !important;
  outline: none !important;
}

/* أثناء التركيز يبقى لون الإطار هو الافتراضي...
   إلا إذا كان الماوس فوق الحقل، حتى لا نلغي تغميق الإطار في حالة التمرير. */
form.webform-submission-contact-form .js-form-item input.form-text:focus:not(:hover),
form.webform-submission-contact-form .js-form-item input.form-email:focus:not(:hover),
form.webform-submission-contact-form .js-form-item input.form-tel:focus:not(:hover),
form.webform-submission-contact-form .js-form-item .iti input:focus:not(:hover),
form.webform-submission-contact-form .js-form-item textarea.form-textarea:focus:not(:hover) {
  border-color: var(--dga-border-default) !important;
}

/* ========================================== 3) الضغط (Pressed) — ملاحظة 9
   الخلفية وحدها تصير رمادية فاتحة، والشريط لا يتغير (كما عند الهيئة).
   كلاس dga-pressed يضيفه الجافاسكربت ويبقيه لحظة بعد رفع الإصبع،
   حتى تُرى الومضة حتى مع النقرة السريعة.                            */
form.webform-submission-contact-form .js-form-item input.form-text:active,
form.webform-submission-contact-form .js-form-item input.form-email:active,
form.webform-submission-contact-form .js-form-item input.form-tel:active,
form.webform-submission-contact-form .js-form-item .iti input:active,
form.webform-submission-contact-form .js-form-item textarea.form-textarea:active,
form.webform-submission-contact-form .js-form-item .dga-pressed {
  background-color: var(--dga-bg-pressed) !important;
}

/* ================================== 4) التمرير بالماوس (Hovered) — ملاحظة 9
   الإطار يغمق. يأتي بعد التركيز والضغط عمدًا حتى يغلبهما في لون الإطار. */
form.webform-submission-contact-form .js-form-item input.form-text:hover,
form.webform-submission-contact-form .js-form-item input.form-email:hover,
form.webform-submission-contact-form .js-form-item input.form-tel:hover,
form.webform-submission-contact-form .js-form-item .iti input:hover,
form.webform-submission-contact-form .js-form-item textarea.form-textarea:hover {
  border-color: var(--dga-border-hovered) !important;
  color: var(--dga-text-default);
}

/* ==========================================================================
   5) حالة الخطأ — ملاحظة 10
   كلاس error يضيفه الجافاسكربت عندما يكون الحقل فارغًا أو غير صحيح.
   السلوك نفس الحالة العادية تمامًا لكن بالأحمر:
     - الإطار أحمر دائمًا (حتى مع التمرير والتركيز)
     - الشريط السفلي أحمر ويمتد عند التركيز
     - الخلفية تغمق عند الضغط

   لماذا القائمة طويلة؟ قاعدة التركيز في القسم 2 تستخدم :focus:not(:hover)،
   و:hover داخل :not يُحتسب في الأولوية. لذلك نكرر الصيغة نفسها هنا حتى
   تتساوى الأولوية، فتغلب قاعدة الخطأ لأنها أسفل الملف.
   ========================================================================== */
form.webform-submission-contact-form .js-form-item input.error,
form.webform-submission-contact-form .js-form-item textarea.error,
form.webform-submission-contact-form .js-form-item .iti input.error,
form.webform-submission-contact-form .js-form-item input.error:hover,
form.webform-submission-contact-form .js-form-item textarea.error:hover,
form.webform-submission-contact-form .js-form-item .iti input.error:hover,
form.webform-submission-contact-form .js-form-item input.error:focus,
form.webform-submission-contact-form .js-form-item textarea.error:focus,
form.webform-submission-contact-form .js-form-item .iti input.error:focus,
form.webform-submission-contact-form .js-form-item input.error:focus:not(:hover),
form.webform-submission-contact-form .js-form-item textarea.error:focus:not(:hover),
form.webform-submission-contact-form .js-form-item .iti input.error:focus:not(:hover),
form.webform-submission-contact-form .js-form-item input.error:active,
form.webform-submission-contact-form .js-form-item textarea.error:active,
form.webform-submission-contact-form .js-form-item .iti input.error:active,
form.webform-submission-contact-form .js-form-item .error.dga-pressed {
  border-color: var(--dga-border-error) !important;
  background-image: linear-gradient(var(--dga-border-error), var(--dga-border-error)) !important;
}

/* خطأ + تركيز: الشريط الأحمر يمتد بالكامل */
form.webform-submission-contact-form .js-form-item input.error:focus,
form.webform-submission-contact-form .js-form-item textarea.error:focus,
form.webform-submission-contact-form .js-form-item .iti input.error:focus {
  background-size: 100% 2px !important;
}

/* خطأ + ضغط: الخلفية تغمق كالمعتاد */
form.webform-submission-contact-form .js-form-item input.error:active,
form.webform-submission-contact-form .js-form-item textarea.error:active,
form.webform-submission-contact-form .js-form-item .iti input.error:active,
form.webform-submission-contact-form .js-form-item .error.dga-pressed {
  background-color: var(--dga-bg-pressed) !important;
}

/* --------------------------------------------------------------------------
   6) رسالة الخطأ أسفل الحقل — ملاحظة 10
   العنصر .dga-error-message ينشئه الجافاسكربت: أيقونة 16px + نص عربي.
   -------------------------------------------------------------------------- */
form.webform-submission-contact-form .dga-error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--dga-text-error);
  font: 400 14px/20px "IBM Plex Sans Arabic", sans-serif;
}

form.webform-submission-contact-form .dga-error-message svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* رسالة الخطأ الأصلية من دروبال (إنجليزية وغير منسّقة) — نخفيها لأن
   رسالتنا العربية تحل محلها */
form.webform-submission-contact-form .form-item--error-message {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7) زر "تقديم" — دلالة التمرير والتركيز
   #166a45 = primary-700 في كود المنصات (button-background-primary-hovered).
   المحدد محصور داخل .form-actions حتى لا يمس أي زر آخر في الصفحة.
   -------------------------------------------------------------------------- */
form.webform-submission-contact-form .form-actions input.form-submit:hover,
form.webform-submission-contact-form .form-actions input.form-submit:focus {
  background-color: #166a45 !important;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   8) صندوق نجاح الإرسال — "تواصل معنا" و"انضم إلينا"
   المرجع: مكوّن dga-notification-toast (حالة success) في Storybook.
   الصندوق ينشئه الجافاسكربت (dga-form-validation.js، الجزء 3) فقط عند
   نجاح الإرسال فعلًا، ويظهر عائمًا أعلى يسار الصفحة.
   يبدأ مخفيًا خارج الشاشة، وكلاس is-visible يُدخله بحركة انزلاق.
   -------------------------------------------------------------------------- */
.dga-success-toast {
  position: fixed;
  z-index: 1000;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, .14);
  padding: 16px;
  width: 400px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  font-family: "IBM Plex Sans Arabic", "Open Sans", sans-serif;
  transform: translateX(-120%);
  transition: transform .3s ease;
  direction: rtl;
}
.dga-success-toast.is-visible { transform: translateX(0); }
.dga-success-toast__header { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.dga-success-toast__icon {
  display: flex; justify-content: center; align-items: center;
  width: 48px; min-width: 48px; height: 48px; border-radius: 9999px;
  color: #067647; background-color: #ecfdf3;
}
.dga-success-toast__icon svg { width: 24px; height: 24px; display: block; }
.dga-success-toast__body { flex: 1; }
.dga-success-toast__title { font: 600 16px/24px "IBM Plex Sans Arabic", sans-serif; color: #222; margin: 0 0 4px 0; }
.dga-success-toast__content { font: 400 14px/20px "IBM Plex Sans Arabic", sans-serif; color: #222; margin: 0; }
.dga-success-toast__close { background: none; border: none; cursor: pointer; width: 20px; height: 20px; padding: 0; color: #222; flex-shrink: 0; }
.dga-success-toast__close svg { width: 20px; height: 20px; display: block; }
/* الجوال: الصندوق يأخذ عرض الشاشة مع هامش 8px */
@media (max-width: 480px) {
  .dga-success-toast { left: 8px; right: 8px; top: 8px; width: auto; max-width: none; }
}

/* --------------------------------------------------------------------------
   9) "انضم إلينا" — مقاس أيقونة رسالة الخطأ
   الأيقونة نفسها المستخدمة في "تواصل معنا"، لكنها هنا بلا مقاس فكانت
   تتمدد. نثبّتها على 16px.
   المحدد يلتقط هذه الأيقونة بالتحديد (الدائرة r="9.3" خاصة بها)، حتى
   لا يمس أي أيقونة أخرى في النموذج مثل أيقونة رفع الملفات.
   -------------------------------------------------------------------------- */
form.dga-career-form svg:has(> circle[r="9.3"]) {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
}


/* --------------------------------------------------------------------------
   10) "انضم إلينا" — حد الخيار المحدد في القائمة المنسدلة أنحف (1px)
   يغطي: قائمة المتصفح الأصلية + القائمة المخصصة ([role="option"])
   + مكتبتي Select2 وChoices لو استُخدمتا.
   -------------------------------------------------------------------------- */
form.dga-career-form select option,
form.dga-career-form select option:hover,
form.dga-career-form select option:focus,
form.dga-career-form select option:focus-visible,
form.dga-career-form select option:checked,
form.dga-career-form [role="option"],
form.dga-career-form [role="option"]:hover,
form.dga-career-form [role="option"]:focus,
form.dga-career-form [role="option"]:focus-visible,
form.dga-career-form [role="option"][aria-selected="true"],
.select2-container .select2-results__option,
.select2-container .select2-results__option--highlighted,
.choices__list--dropdown .choices__item,
.choices__list--dropdown .choices__item.is-highlighted {
  outline-width: 1px !important;
  border-width: 1px !important;
}