/* ==========================================================================
   search-page.css — صفحة البحث /search-content
   المسار: web/themes/custom/sass_theme_msd/css/
   تُحمّل عبر مكتبة sass_theme_msd/search-page على هذه الصفحة فقط.

   المرجع البصري: Figma — Desktop AR 32:3638 · Desktop EN 30:16904
                        Mobile AR 39:22548 · Mobile EN 39:44008
   ملاحظة مهمة: جذر الموقع html{font-size:60px} لذلك كل المقاسات px وليست rem.
   ========================================================================== */

/* المتغيرات — قيم مستخرجة من Figma.
   على :root لأن نموذج البحث قد يُطبع خارج حاوية .dga-search
   (كبلوك في منطقة الهيدر)، وهذا الملف لا يُحمّل إلا على صفحة البحث. */
:root {
  --s-primary:        #1b8354;
  --s-primary-hover:  #166a45;
  --s-primary-press:  #104631;
  --s-primary-50:     #f3fcf6;
  --s-black:          #0d121c;
  --s-neutral-bg:     #f3f4f6;

  --s-text:           #161616;
  --s-text-display:   #1f2a37;
  --s-text-muted:     #6c737f;
  --s-text-oncolor:   #ffffff;

  --s-border:         #d2d6db;
  --s-border-soft:    #e5e7eb;
  --s-field-border:   #9da4ae;
  --s-field-hover:    #384250;
  --s-focus-bar:      #0d121c;   /* Figma 28:1989 Focused — «Thin underline» */
  --s-tag-bg:         #f9fafb;

  --s-radius:         4px;
  --s-font:           "IBM Plex Sans Arabic", sans-serif;

  /* سطح القوائم المنسدلة — عائلة واحدة للوحة التصفية وقائمة الترتيب.
     القيم من Tokens المعتمدة في الملاحظة #3. */
  --dropdown-bg:         #ffffff;
  --dropdown-ring:       rgba(17, 24, 39, .10);
  --menu-border:         rgba(17, 24, 39, .12);
  --menu-shadow:         0 14px 30px rgba(0, 0, 0, .10);
  --menu-hover-bg:       rgba(0, 0, 0, .03);
  --menu-active:         #1b8354;
  --dropdown-item-hover: rgba(27, 131, 84, .08);
  --dropdown-item-text:  #1b8354;
}

/* تصحيح: الثيم يضبط box-sizing عالميًا فعلًا (style.css سطر 526:
   * { margin:0; padding:0; box-sizing:border-box }).
   نُبقي التصريح هنا دفاعيًا فقط، فهو مطابق لا مخالف. */
#views-exposed-form-search-content-page-1,
#views-exposed-form-search-content-page-1 *,
.dga-search,
.dga-search * { box-sizing: border-box; }


/* ==========================================================================
   شريط البحث
   ========================================================================== */

/* إبقاء الشريط ظاهرًا دائمًا هنا.
   المحدِّد عام عمدًا لأن هذا الملف لا يُحمّل إلا على صفحة البحث،
   فلا يحتاج إلى كلاس يضيفه الجافاسكربت ويعمل حتى لو تعطّل. */
.region--search { display: block !important; }

#views-exposed-form-search-content-page-1 {
  display: flex;
  /* ‼️ كان flex-end فكان الزر يرتفع ~8px عن الحقل:
     غلاف .form-actions كان block يحتوي زرًا inline-flex، فكان الزر
     يجلس على «صندوق سطر» يورث html{font-size:60px}، ويتركب أسفله
     فراغ الحروف النازلة. ومع flex-end كان قاع الغلاف (بما فيه ذلك
     الفراغ) يحاذي قاع الحقل فيعلو الزر بمقدار الفراغ.
     center + جعل .form-actions فلكس يزيلان السبب نفسه،
     بلا margin سالب ولا translateY. */
  align-items: center;
  gap: 16px;
  /* عمود المحتوى: 1280 عند 1440 (هامش 80 كما في Figma)، وبحدّ أدنى
     32 من كل جهة دونها. لا نضيف حشوًا داخل حاوية الثيم فيضيق مرتين. */
  width: min(1280px, 100% - 64px);
  margin-inline: auto;
  padding: 0;
  font-family: var(--s-font);
}

/* الحقل يأخذ المساحة المتبقية — يلغي width:90% القديم */
#views-exposed-form-search-content-page-1 .js-form-item,
#views-exposed-form-search-content-page-1 .form-item {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
}

/* الحقل نفسه بلا حدّ ولا خلفية ولا أيقونة: كلها على .dga-field.
   background-image: none يحيّد أي أيقونة موروثة — ومنها throbber
   الإكمال التلقائي — داخل صفحة البحث وحدها، بلا تعطيل الإكمال نفسه. */
#views-exposed-form-search-content-page-1 input.form-text,
.dga-filter__search {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text);
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

#views-exposed-form-search-content-page-1 input.form-text::placeholder,
.dga-filter__search::placeholder {
  color: var(--s-text-muted);
  opacity: 1;
}

/* زر البحث */
#views-exposed-form-search-content-page-1 .form-actions {
  /* فلكس يُلغي سياق التنسيق السطري داخل الغلاف، فلا صندوق سطر
     ولا محاذاة خط قاعدة — ارتفاع الغلاف = ارتفاع الزر بالضبط */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  /* الغلاف لا يحمل نصًا، ونُسقط الخط الموروث احتياطًا */
  font-size: 0;
  line-height: 0;
}

#views-exposed-form-search-content-page-1 .form-actions input.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  /* ‼️ style.css (مجموعة .green-btn) يفرض على هذا الزر بالذات
     padding-block: 0.133rem ومع html{font-size:60px} = 7.98px ≈ 7px،
     وهي الإزاحة المقيسة. نُصفّرها من المصدر بدل تعويضها. */
  padding-block: 0;
  padding-inline: 16px;
  font: 500 16px/24px var(--s-font);
  color: var(--s-text-oncolor);
  background-color: var(--s-primary);
  border: 0;
  border-radius: var(--s-radius);
  cursor: pointer;
  transition: background-color .15s ease;
}

#views-exposed-form-search-content-page-1 .form-actions input.form-submit:hover,
#views-exposed-form-search-content-page-1 .form-actions input.form-submit:focus-visible {
  background-color: var(--s-primary-hover);
}

#views-exposed-form-search-content-page-1 .form-actions input.form-submit:active {
  background-color: var(--s-primary-press);
}

/* التسمية مخفية بصريًا: Figma يعرض نصًا تلميحيًا فقط،
   وتبقى موجودة في الشيفرة لقارئ الشاشة */
/* محدّد الابن المباشر كان يفشل على Dev لأن دروبال يلفّ عناصر النموذج
   بغلاف إضافي، فتبقى التسمية في التدفق وتدفع الحقل 40px لأسفل.
   نستهدف أي تسمية داخل النموذج — وFigma لا يعرض تسميات هنا أصلًا. */
#views-exposed-form-search-content-page-1 label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   غلاف الحقل — نظام واحد للحقل الرئيسي ولحقل لوحة التصفية
   صندوقه = صندوق الـinput تمامًا، فهو المرجع الدقيق للعدسة
   ولزر المسح وللخط السفلي المتحرك.
   ========================================================================== */

/* صفّ أفقي كما يبنيه Figma تمامًا (Input Field ← Icon-Text-stack):
   الإطار يحمل الحدّ والخلفية، والأيقونة والنص وزر المسح عناصر بداخله.
   وبهذا:
   • ارتفاع الغلاف = ارتفاع الحقل بالضبط — لا صندوق سطر حول الـinput
     الـinline-block يضيف فراغًا أسفله، وهو ما كان يُنزل الخط السفلي
   • موضع الأيقونة يتبع اتجاه الصفحة تلقائيًا بلا تموضع مطلق
   • التمركز الرأسي من align-items لا من حساب 50% */
.dga-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;                      /* Figma: form/icon-enteredtext */
  flex: 0 0 auto;                /* لا ينمو رأسيًا داخل أعمدة مرنة */
  min-width: 0;
  height: 40px;
  padding-inline: 16px 8px;      /* Figma 32:5347 */
  background: #fff;
  border: 1px solid var(--s-field-border);
  border-radius: var(--s-radius);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.dga-field:hover { border-color: var(--s-field-hover); }

.dga-field:focus-within {
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, .06),
              0 4px 8px -2px rgba(16, 24, 40, .1);
}

.dga-field:hover:focus-within { border-color: var(--s-field-hover); }
.dga-field:has(input:active) { background-color: var(--s-neutral-bg); }

@media (prefers-reduced-motion: reduce) {
  .dga-field { transition: none; }
}

/* داخل صفّ النموذج وحده يملأ الحقل المساحة المتبقية */
#views-exposed-form-search-content-page-1 .dga-field { flex: 1 1 auto; }

/* عند وجود نص: العدسة غير مرئية و× وحده الظاهر — لا يجتمعان.
   ‼️ كانت display:none فتُفرَّغ خانة العدسة في بداية الصف ويزحف
   النص 32px كلما ظهر ×. وهذا يناقض شرط «ظهور × لا يحرك النص».
   visibility:hidden يُخفي الرسم ويُبقي الخانة، فيثبت عمود النص
   في الحالتين بلا لمس ارتفاع الحقل ولا حشوه الداخلي. */
.dga-field.has-value > .dga-icon--search { visibility: hidden; }

/* العدسة عنصر في الصف — الأصل المعتمد نفسه (viewBox 0 0 18 18)
   معروضًا بمقاس Figma 20×20 في جهة البداية (inline-start تلقائيًا
   لأنها أول عنصر في صفّ فلكس، فتتبع اتجاه الصفحة بلا left/right).

   ‼️ سبب اختفائها على Dev: مجلد icons في الثيم لا يحتوي
   search-18.svg، وقناع CSS بملف مفقود يُرسم فارغًا تمامًا بلا خطأ
   في Console وبلا صورة مكسورة. فنضمّن الأصل نفسه هنا كـdata URI:
   لا ملف لتحميله ولا مسار ليُخطئ، ويبقى التلوين بـcurrentColor.
   الملف icons/search-18.svg يبقى في الحزمة كمصدر مرجعي. */
.dga-field > .dga-icon--search {
  width: 20px;
  height: 20px;
  --glyph: 20px 20px;
  color: var(--s-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23000' d='M8.12565 0C3.63834 0 0.000652313 3.63769 0.000652313 8.125C0.000652313 12.6123 3.63834 16.25 8.12565 16.25C10.1443 16.25 11.9911 15.5138 13.412 14.2953L16.8504 17.7336C17.0945 17.9777 17.4902 17.9777 17.7343 17.7336C17.9783 17.4895 17.9783 17.0938 17.7343 16.8497L14.2959 13.4114C15.5145 11.9904 16.2507 10.1437 16.2507 8.125C16.2507 3.63769 12.613 0 8.12565 0ZM1.25065 8.125C1.25065 4.32804 4.3287 1.25 8.12565 1.25C11.9226 1.25 15.0007 4.32804 15.0007 8.125C15.0007 11.922 11.9226 15 8.12565 15C4.3287 15 1.25065 11.922 1.25065 8.125Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23000' d='M8.12565 0C3.63834 0 0.000652313 3.63769 0.000652313 8.125C0.000652313 12.6123 3.63834 16.25 8.12565 16.25C10.1443 16.25 11.9911 15.5138 13.412 14.2953L16.8504 17.7336C17.0945 17.9777 17.4902 17.9777 17.7343 17.7336C17.9783 17.4895 17.9783 17.0938 17.7343 16.8497L14.2959 13.4114C15.5145 11.9904 16.2507 10.1437 16.2507 8.125C16.2507 3.63769 12.613 0 8.12565 0ZM1.25065 8.125C1.25065 4.32804 4.3287 1.25 8.12565 1.25C11.9226 1.25 15.0007 4.32804 15.0007 8.125C15.0007 11.922 11.9226 15 8.12565 15C4.3287 15 1.25065 11.922 1.25065 8.125Z'/%3E%3C/svg%3E");
}

/* الخط السفلي: يبدأ من المنتصف بعرض صفر ويتمدد للطرفين.
   القرار النهائي للمالكة — ولا ينقلب مع الاتجاه لأن المنتصف واحد. */
.dga-field::after {
  content: "";
  position: absolute;
  /* Figma 28:1989 Focused: الخط يشغل آخر 2px داخل الحقل فيغطي حدّه السفلي */
  inset-block-end: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--s-focus-bar);
  transition: width .2s ease-in-out;
  pointer-events: none;
}

.dga-field:focus-within::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dga-field::after { transition: none; }
}


/* زر المسح × داخل الحقل */
/* زر المسح عنصر في الصف — لا تموضع مطلق ولا حساب تمركز */
.dga-search-clear {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  padding-inline: 0;
  /* الخلفية تُرسم على صندوق المحتوى فقط فتظهر مربعة 24×24 */
  background-clip: content-box;
  font: 400 22px/1 var(--s-font);
  color: var(--s-text-muted);
  background: none;
  border: 0;
  border-radius: var(--s-radius);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.dga-search-clear.is-visible { display: inline-flex; }
.dga-search-clear:hover { color: var(--s-text); background: var(--s-neutral-bg); }
/* الإرشاد 1 يشترط وصولها بلوحة المفاتيح، فتحتاج مؤشر تركيز ظاهرًا */
.dga-search-clear:focus-visible {
  outline: 2px solid var(--s-primary);
  outline-offset: 2px;
}

/* الغلاف الخارجي لم يعد مرجع تموضع — .dga-field هو المرجع */

/* إخفاء زر الإرسال تحت 768 — مطابق لكود المنصات والإطارات */
@media (max-width: 767px) {
  #views-exposed-form-search-content-page-1 .form-actions { display: none; }
}


/* قائمة اقتراحات دروبال (jQuery UI) تُلحق بـbody وترث من جذر الموقع
   60px فتتضخم. نضبط مقاسها هنا وحدها — والملف لا يُحمّل إلا على صفحة
   البحث — بلا تعطيل الإكمال نفسه. عرضها يضبطه jQuery من الحقل. */
.ui-autocomplete {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  font: 400 16px/24px var(--s-font);
  background: #fff;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1);
  z-index: 30;
}

.ui-autocomplete .ui-menu-item-wrapper {
  display: block;
  margin: 0;
  padding: 8px 16px;
  font: inherit;
  line-height: 24px;
  border: 0;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  color: var(--s-primary);
  background: var(--s-neutral-bg);
}


/* ==========================================================================
   جسم الصفحة
   ========================================================================== */

/* قياس Dev أثبت أن .region--search تعطي 40/40 وأن نموذجنا يعطي 40/40
   أيضًا = 80 بينما Figma يعطي 40 فقط. فنُسقط حشو نموذجنا ونُبقي
   مصدرًا رأسيًا واحدًا هو .region--search. */
#views-exposed-form-search-content-page-1 { padding-block: 0; }

/* ‼️ مصدر الفراغ: css/faq-fix.css السطر 1 يكتب بلا أي نطاق:
     .views-element-container{max-width:1280px!important;
       margin:70px auto!important;padding:0 32px!important}
   والملف في مكتبة global فيصيب كل عرض Views في الموقع، ومنه عرضنا.
   ومع box-sizing: border-box (style.css سطر 526) يصبح المحتوى الفعلي
   1216 لا 1280، ويبدأ عند 112 لا 80.

   نحيّد الحاوية الحاملة لعرضنا وحدها عبر :has — فلا يتأثر عرض الأسئلة
   الشائعة ولا عرض التذييل ولا أي عرض آخر — ونترك تعريف العمود في
   مكان واحد هو .dga-search و#views-exposed-form.
   الـ!important هنا ضروري لأن المنافس يستخدمه، وقد تأكّد مصدره.
   ملاحظة توافق: :has() مدعوم في Chrome/Edge 105+ وSafari 15.4+
   وFirefox 121+. */
.views-element-container:has(> .dga-search) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* أغلفة البلوكين تضيف حشوًا جانبيًا مختلفًا (قياس Dev: 25px على بلوك
   النموذج) فينزاح عمود البحث عن عمود النتائج. نُصفّرها هنا وحدها
   ليبدأ العمودان من الحافة نفسها ويتطابق عرضهما. */
.region--search > [id^="block-"],
.region--search > .views-exposed-form { padding-inline: 0; }

.dga-search {
  width: min(1280px, 100% - 64px);
  margin-inline: auto;
  padding-block: 40px;
  padding-inline: 0;
  font-family: var(--s-font);
}

/* الجوال: لا فجوة إضافية بين كتلة البحث والمحتوى — كتلة البحث تحمل
   حشوًا سفليًا 40 (إطارا الجوال 39:22548 و39:44008 متفقان على ذلك).
   الهامش 32 كما في الإطار الإنجليزي 39:44008 وفي شريط البحث بالإطارين؛
   الإطار العربي 39:22548 يعطي 16 للمحتوى وحده وهو الشاذ بين الأربعة. */
@media (max-width: 767px) {
  .dga-search { padding-block: 0 40px; }
}

.dga-search__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}


/* ==========================================================================
   سطر تفاصيل البحث — العنوان والعدد والأزرار
   ========================================================================== */

.dga-search__details {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dga-search__summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dga-search__title {
  margin: 0;
  font: 700 30px/38px var(--s-font);
  color: var(--s-text);
}

.dga-search__count {
  margin: 0;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text-muted);
}

.dga-search__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* إطار Figma العربي يضع «تصفية» في أقصى اليسار ثم «ترتيب حسب»،
   وهو عكس الانعكاس التلقائي، فنثبّته بـrow-reverse في RTL.
   أما الإنجليزي فترتيبه الطبيعي: Filter ثم Sort. */
html[dir="rtl"] .dga-search__actions { flex-direction: row-reverse; }

/* على الجوال: العنوان فوق وصف الأزرار تحته */
/* إطار الجوال 39:22548: الأزرار أسفل كتلة العنوان بفجوة 16،
   بحجمها الطبيعي (276 = 123+16+137) محاذاة لجهة البداية — لا بعرض كامل */
@media (max-width: 767px) {
  .dga-search__details {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dga-search__actions { width: auto; }
}


/* ==========================================================================
   زرّا التصفية والترتيب
   ========================================================================== */

.dga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding-inline: 16px;
  font: 500 16px/24px var(--s-font);
  border: 0;
  border-radius: var(--s-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}

.dga-btn__icon { flex: 0 0 auto; display: block; }

/* تصفية — primary-neutral أسود */
.dga-btn--filter {
  color: var(--s-text-oncolor);
  background-color: var(--s-black);
}
.dga-btn--filter:hover { background-color: #000; }

/* ترتيب حسب — secondary-outline */
.dga-btn--sort {
  color: var(--s-text);
  background-color: transparent;
  border: 1px solid var(--s-border);
}
.dga-btn--sort:hover { background-color: var(--s-neutral-bg); }

/* الحقول مستثناة: لها خط سفلي وظلّ مصمَّمان كمؤشر تركيز */
.dga-btn:focus-visible,
.dga-search a:focus-visible,
.dga-search button:focus-visible,
#views-exposed-form-search-content-page-1 button:focus-visible,
#views-exposed-form-search-content-page-1 .form-submit:focus-visible {
  outline: 2px solid var(--s-primary);
  outline-offset: 2px;
}


/* ==========================================================================
   لوحة التصفية
   ========================================================================== */

/* الغلافان صندوقان مرنان: الزر داخلهما عنصر كتلي لا سطري، فلا دعامة
   سطر ترفع أحدهما عن الآخر — وجذر الموقع html{font-size:60px} يجعل
   أي دعامة سطر موروثة ضخمة. */
.dga-filter,
.dga-sort {
  position: relative;
  display: flex;
}

/* القائمة الأصلية تبقى داخل النموذج وتُخفى بصريًا فقط بعد عمل الجافاسكربت،
   فتظل صالحة للاستخدام إذا تعطّل الجافاسكربت */
/* نُسبِق المحدد بالمُعرّف لأن قواعد النموذج تستخدم #views-exposed-form…
   فتتغلّب على كلاس مفرد في التخصيص */
#views-exposed-form-search-content-page-1 .dga-filter-native-hidden,
.dga-filter-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* أساس اللوحة المنسدلة — صنف سطح واحد تشترك فيه لوحة التصفية
   وقائمة الترتيب، فلا يُكتب الـCSS مرتين ولا يتفرّق الشكل بينهما.
   تُحاذى نهاية اللوحة مع نهاية الزر فتنفتح للداخل في الاتجاهين،
   مانعةً أي تجاوز أفقي في RTL وLTR. */
.dga-filter__panel,
.dga-sort__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 20;
  flex-direction: column;
  max-width: calc(100vw - 32px);
  background: var(--dropdown-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--s-radius);
  /* الحلقة الرقيقة ثم الظل — كانت قائمة الترتيب بلا ظل إطلاقًا */
  box-shadow: 0 0 0 1px var(--dropdown-ring), var(--menu-shadow);
  overflow: hidden;
}

.dga-filter__panel {
  display: none;
  gap: 8px;
  width: 320px;
}

.dga-filter__panel.is-open { display: flex; }

.dga-filter__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 8px;
}

.dga-filter__label {
  font: 500 14px/20px var(--s-font);
  color: var(--s-text);
}

/* البحث داخل الخيارات */
.dga-filter__search { font: 400 14px/20px var(--s-font); }
/* مقاس اللوحة — غير موصّف في Figma، متناسب مع ارتفاع 32 */
.dga-field--sm {
  height: 32px;
  padding-inline: 12px 8px;
}
.dga-field--sm > .dga-icon--search { width: 16px; height: 16px; --glyph: 16px 16px; }

.dga-filter__options {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.dga-filter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--s-radius);
  cursor: pointer;
  font: 400 14px/20px var(--s-font);
  color: var(--s-text);
}
.dga-filter__option:hover { background: var(--s-neutral-bg); }
.dga-filter__option.is-hidden { display: none; }

.dga-filter__option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--s-primary);
  cursor: pointer;
}

/* لا توجد بيانات */
.dga-filter__empty {
  display: none;
  padding: 8px;
  font: 400 14px/20px var(--s-font);
  color: var(--s-text-muted);
}
.dga-filter__empty.is-visible { display: block; }

/* عرض المزيد */
.dga-filter__more {
  align-self: flex-start;
  padding: 0;
  font: 500 14px/20px var(--s-font);
  color: var(--s-primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.dga-filter__more[hidden] { display: none; }

.dga-filter__divider {
  height: 1px;
  margin-inline: 8px;
  background: var(--s-border);
}

.dga-filter__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
}

/* المرجع البصري الذي أرسلته المالكة يُظهر الزرّين بمقاس lg لا sm،
   فعُدنا إلى 40/16/24 مع حشو 12 ليبقيا في سطر واحد داخل اللوحة.
   اللوحة غير موصّفة في Figma — NOT SPECIFIED. */
.dga-filter__footer .dga-btn {
  flex: 0 1 auto;
  min-width: 0;
  height: 40px;
  padding-inline: 12px;
  font: 500 16px/24px var(--s-font);
  white-space: nowrap;
}

.dga-btn--apply {
  color: var(--s-text-oncolor);
  background-color: var(--s-primary);
}
.dga-btn--apply:hover  { background-color: var(--s-primary-hover); }
.dga-btn--apply:active { background-color: var(--s-primary-press); }

.dga-btn--reset {
  color: var(--s-text);
  background-color: var(--s-neutral-bg);
}
.dga-btn--reset:hover  { background-color: #e5e7eb; }
.dga-btn--reset:active { background-color: var(--s-border); }


/* ==========================================================================
   قائمة الترتيب — الأحدث / الأقدم
   ========================================================================== */

.dga-sort__menu {
  display: flex;
  gap: 0;
  min-width: 100%;
  width: max-content;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.dga-sort__menu[hidden] { display: none; }

.dga-sort__option {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text);
  text-align: start;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.dga-sort__option:hover { background: var(--menu-hover-bg); }

/* الخيار المطبّق حاليًا: خلفية رمادية فاتحة ممتدة على الصف ونص أخضر
   — نفس معالجة الصف المحدَّد في لوحة التصفية (المرجع في الملاحظة #3) */
.dga-sort__option.is-selected {
  color: var(--dropdown-item-text);
  background: var(--s-neutral-bg);
  font-weight: 500;
}

.dga-sort__option.is-selected:hover {
  background: var(--dropdown-item-hover);
}

.dga-sort__option:focus-visible {
  outline: 2px solid var(--s-primary);
  outline-offset: -2px;
}


/* ==========================================================================
   شرائح التصنيفات المطبّقة
   ========================================================================== */

/* لا شرائح ⇒ لا صف: تبقى الفجوة بين صف التفاصيل والنتائج 32 كما في Figma.
   ومع وجود شرائح تكون 16 تحت الأزرار (32 من الشبكة − 16) مطابقةً لإطار Figma. */
.dga-search__chips:empty { display: none; }
.dga-search__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* أسفل الأزرار كما في إطار Figma */
  gap: 8px;
  /* الشبكة تعطي 32؛ و−16 تجعلها 16 تحت الأزرار كما في إطار Figma */
  margin: -16px 0 0;
  padding: 0;
  list-style: none;
}
/* لا شرائح ⇒ لا صف، فتبقى الفجوة 32 كما في إطار Figma الخالي من التصفية */
.dga-search__chips:empty { display: none; }

.dga-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding-inline: 12px;
  font: 500 12px/18px var(--s-font);
  color: var(--s-primary);
  background: var(--s-primary-50);
  border-radius: 9999px;
}

.dga-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 1;
}
.dga-chip__remove:hover { background: rgba(27, 131, 84, .12); }


/* ==========================================================================
   قائمة النتائج
   ========================================================================== */

.dga-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dga-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* الفاصل: 32 فوق و32 تحت */
.dga-result + .dga-result {
  padding-block-start: 32px;
  border-block-start: 1px solid var(--s-border);
}

.dga-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dga-search .dga-tag,
.dga-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 24px;
  padding-inline: 8px;
  font: 500 12px/18px var(--s-font);
  color: var(--s-text-display);
  background: var(--s-tag-bg);
  border: 1px solid var(--s-border-soft);
  border-radius: var(--s-radius);
}

/* الحقل فارغ ⇒ لا وسم — سلوك مدفوع بالبيانات بلا استثناءات */
.dga-result__tags:empty { display: none; }

.dga-result__title {
  margin: 0;
  font: 400 16px/24px var(--s-font);
}

/* ‼️ المنافس الحقيقي الذي كان يُبقي العنوان أسود — محدَّد بالاسم
   والسطر: css/faq-fix.css السطر 1 يكتب بلا أي نطاق:
       .views-element-container a {
         color: inherit !important;
         text-decoration: none !important;
       }
   وعرضنا داخل .views-element-container، فكان كل رابط يورث لون أبيه
   (الأسود). ولأن المنافس يستخدم !important فلا تهزمه أي درجة تخصيص
   بدونه — ولهذا وحده نستخدمه هنا، بعد تحديد المصدر لا قبله.
   المحدِّد أضيق من المنافس (ثلاث درجات مقابل درجتين) ومحصور في
   .dga-search، فلا يمسّ أي رابط آخر داخل أي عرض Views في الموقع.
   العنوان رابط يولّده Views أصلًا (Link this field to its item)
   فلا ننشئ <a> جديدًا ولا روابط متداخلة. */
.dga-search .dga-result__title a,
.dga-search .dga-result__title a:any-link {
  font: inherit;
  color: var(--s-primary) !important;
  text-decoration: none !important;
}
.dga-search .dga-result__title a:hover {
  color: #54c08a !important;
  text-decoration: underline !important;
}
.dga-search .dga-result__title a:active  { color: #88d8ad !important; }
.dga-search .dga-result__title a:visited { color: #14573a !important; }

/* الوصف: سطران ثم اقتطاع */
.dga-result__excerpt {
  margin: 0;
  font: 400 14px/20px var(--s-font);
  color: var(--s-text-display);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dga-result__excerpt:empty { display: none; }

/* إبراز كلمات البحث داخل المقتطف */
.dga-result__excerpt strong { font-weight: 700; color: var(--s-text); }

.dga-result__date {
  margin: 0;
  font: 400 12px/18px var(--s-font);
  color: var(--s-text-muted);
}
.dga-result__date:empty { display: none; }


/* ==========================================================================
   الحالات الفارغة
   ========================================================================== */

/* لا يحدد Figma ولا الإرشادات موضع هذه الحالة، فتُحاذى لجهة البداية:
   يمين في العربي ويسار في الإنجليزي — لا توسيط. */
.dga-search__empty {
  padding-block: 40px;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text-muted);
  text-align: start;
}

.dga-search__empty h4,
.dga-search__empty p {
  margin: 0;
  font: inherit;
  color: inherit;
}


/* أيقونات الأزرار — أصول مصدَّرة من Figma، تُلوَّن بلون النص عبر mask
   فتصير بيضاء على زر التصفية الأسود وداكنة على زر الترتيب */
/* صندوق الأيقونة من Figma، وحجم الرسم داخله من الأصل نفسه.
   أصول DGA مقصوصة على حدود الرسم، فالرسم 19.5 داخل صندوق 24
   (قياس مؤكد: elements = 19.5×19.5 داخل instance 24×24).
   الـchevron يملأ صندوقه 20 بلا إزاحة. */
.dga-icon {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: center / var(--glyph, contain) no-repeat;
  mask: center / var(--glyph, contain) no-repeat;
}

.dga-icon--chevron-down {            /* Figma 17:6399 — old-chevron-down */
  --glyph: 20px 20px;      /* يملأ صندوقه */
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("../icons/old-chevron-down.svg");
  mask-image: url("../icons/old-chevron-down.svg");
}

.dga-icon--filter {                  /* Figma 1:15376 — filter */
  --glyph: 19.5px 19.5px;  /* Figma: 19.5 داخل 24 */
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("../icons/filter.svg");
  mask-image: url("../icons/filter.svg");
}

.dga-icon--sort {
  /* أيقونة ثابتة واحدة: الاتجاه ظاهر من القائمة نفسها (الأحدث/الأقدم)
     فلا نبدّل الأيقونة ولا نحتاج sort-by-down-02 / sort-by-up-02.
     الأصل 20×20 يُعرض 20×20 بلا تكبير إلى 24. */
  --glyph: 20px 20px;
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("../icons/sorting-05.svg");
  mask-image: url("../icons/sorting-05.svg");
}

/* الزر مخفي حتى يتأكد الجافاسكربت أن الترتيب معروض وأن قيمتي
   الاتجاه موجودتان، فلا يومض ظاهرًا ثم يختفي */
.dga-btn--sort[hidden] { display: none; }


/* ==========================================================================
   الترقيم
   ========================================================================== */

.dga-search .pager { margin: 0; }

.dga-search .pager__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dga-search .pager__item { margin: 0; }

/* الإخفاء هنا يخص عنصري «الأول/الأخير» غير الموجودين في التصميم */
.dga-search .pager__item--first,
.dga-search .pager__item--last { display: none; }

.dga-search .pager__item a,
.dga-search .pager__item.is-active > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;   /* Figma: الأرقام تحتضن محتواها (26 لرقم و45 لـ999) */
  height: 40px;
  padding: 8px;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text);
  text-decoration: none;
  border-radius: var(--s-radius);
}

.dga-search .pager__item a:hover { background: var(--s-neutral-bg); }

/* الصفحة الحالية: شريط أخضر 24×3 أسفل الرقم */
.dga-search .pager__item.is-active {
  position: relative;
}
.dga-search .pager__item.is-active::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  /* left فيزيائي عمدًا: inset-inline-start مع translateX ينزاح في RTL */
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--s-primary);
  border-radius: 9999px;
}

/* نقاط الاختصار */
.dga-search .pager__item--ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font: 400 16px/24px var(--s-font);
  color: var(--s-text);
  border: 1px solid var(--s-text);
  border-radius: var(--s-radius);
}

/* أسهم السابق والتالي */
.dga-search .pager__item--previous a,
.dga-search .pager__item--next a {
  width: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 0;
}

.dga-search .pager__item--previous a::before,
.dga-search .pager__item--next a::before {
  content: "";
  /* مساحة اللمس 24 والرسم بداخلها 7.5×13.5 — قياس Figma الفعلي للسهم.
     إن ظهر السهم صغيرًا جدًا فملفك مصدَّر بصندوق 24 لا مقصوصًا على
     الرسم، وعندها تصير القيمة contain. */
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--s-arrow) center / 7.5px 13.5px no-repeat;
  mask: var(--s-arrow) center / 7.5px 13.5px no-repeat;
}

.dga-search .pager__item--previous a {
  --s-arrow: url("../icons/arrow-left-01.svg");    /* Figma 1:18700 */
}
.dga-search .pager__item--next a {
  --s-arrow: url("../icons/arrow-right-01.svg");   /* Figma 1:18983 */
}

/* في RTL يُقلب اتجاه السهمين */
html[dir="rtl"] .dga-search .pager__item--previous a::before,
html[dir="rtl"] .dga-search .pager__item--next a::before {
  transform: scaleX(-1);
}


/* ==========================================================================
   الجوال
   ========================================================================== */

@media (max-width: 767px) {
  .dga-search__title { font-size: 24px; line-height: 32px; }

  .dga-filter__panel {
    width: min(320px, calc(100vw - 64px));
  }

  .dga-search .pager__items { flex-wrap: wrap; }
}