/* ==========================================================================
   header-search.css — لوحة بحث الهيدر
   المسار: web/modules/custom/custom_header_search/css/

   المرجع البصري — Figma «Nav Header Sub-Menu»
     العربي     176:10151   (داخل 176:9378 Home Page - Desktop AR)
     الإنجليزي  4:43855     (داخل 4:43415 Home Page - Desktop EN)

   ملاحظتان مهمتان عن بيئة الموقع:
   1) جذر الموقع يضبط html{font-size:60px} (style.css سطر 526)، لذلك كل
      المقاسات هنا px وليست rem.
   2) الثيم يضبط * { box-sizing: border-box } عالميًا، فالارتفاعات أدناه
      شاملة للحدّ والحشو.

   كل المحدِّدات مقيَّدة داخل ‎.header-search‎ عدا استثناءين موثَّقين في
   موضعهما: غلاف المنطقة، وزر البحث في الهيدر.
   ========================================================================== */

.header-search {
  /* ——— ألوان ومقاسات مستخرجة من Figma ——— */
  --hs-panel-bg:        #ffffff;   /* background/background-menu            */
  --hs-panel-radius:    16px;      /* radius/radius-lg                      */
  --hs-radius:          4px;       /* radius/radius-sm                      */

  --hs-primary:         #1b8354;   /* button/button-background-primary-default
                                      وأيضًا text/text-primary للعنوان      */
  --hs-primary-hover:   #166a45;   /* Tokens معتمدة من المشروع (ليست في العقدة) */
  --hs-primary-press:   #104631;   /* Tokens معتمدة من المشروع (ليست في العقدة) */

  --hs-field-border:    #9da4ae;   /* form/field-border-default             */
  --hs-field-text:      #384250;   /* form/field-text-focused               */
  --hs-text-default:    #161616;   /* text/text-default (نص الشريحة)        */
  --hs-text-oncolor:    #ffffff;   /* text/text-oncolor-primary             */
  --hs-chip-bg:         #f3f4f6;   /* chip/chip-background-neutral-default  */

  /* ليست في عقدة Figma — من Tokens المعتمدة في صفحة البحث */
  --hs-text-muted:      #6c737f;
  --hs-primary-50:      #f3fcf6;
  --hs-border-soft:     #e5e7eb;

  --hs-font: "IBM Plex Sans Arabic", sans-serif;

  /* Shadows/shadow-lg كما في Figma */
  --hs-shadow:
    0 12px 16px -4px rgba(16, 24, 40, .08),
    0 4px 6px -2px rgba(16, 24, 40, .03);

  /* ‼️ الملاحظة 1 — اللوحة Overlay لا جزء من التدفق.
     position: absolute يخرجها من التدفق فلا يتحرك الـHero ولا يزداد
     ارتفاع الصفحة. الإحداثي الرأسي ليس رقمًا ثابتًا: الجافاسكربت يقيس
     أسفل الهيدر الحقيقي ويكتبه في ‎--hs-top‎، فيصحّ مع شريط إدارة
     دروبال ومع أي ارتفاع هيدر. والمرجع هو الصندوق الابتدائي للمستند
     (‎body‎ بلا position في style.css) فتتمرّر اللوحة مع الصفحة.
     z-index: 100 فوق الـHero (3–5) وفوق 60 في dga-fixes، ودون 5000
     المحجوزة لرسائل الموقع. */
  position: absolute;
  inset-inline: 0;
  top: var(--hs-top, 0px);
  z-index: 100;
  /* مغلقة افتراضيًا — الإظهار بصنف على اللوحة نفسها لا على المنطقة،
     فلا تتأثر ‎.region--search‎ ولا صفحة البحث. */
  display: none;

  background: var(--hs-panel-bg);
  /* الزاويتان السفليتان فقط — Figma: rounded-bl/br = radius-lg 16 */
  border-end-start-radius: var(--hs-panel-radius);
  border-end-end-radius: var(--hs-panel-radius);
  box-shadow: var(--hs-shadow);
  font-family: var(--hs-font);
  /* الحشو الجانبي يأتي من عرض العمود أدناه لا من padding ثابت */
  padding: 0;
}

.header-search.is-open { display: block; }

/* عمود المحتوى — Figma 176:10152: عرض 1280 كحدّ أقصى، حشو رأسي 32،
   فجوة 40 بين الكتل الثلاث.
   القاعدة الواحدة أدناه تعطي قيمتي Figma معًا:
     عند 1440 ⇒ 1280 فيتبقّى 80 لكل جهة (حشو اللوحة في Figma)
     عند  430 ⇒  398 فيتبقّى 16 لكل جهة (عرض إطار الجوال في Figma)
   فلا نخترع رقمًا ولا نحتاج نقطة توقّف. */
.header-search__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;                      /* global/spacing-5xl */
  width: min(1280px, 100% - 32px);
  margin-inline: auto;
  padding-block: 32px;            /* spacing-4xl */
}


/* ==========================================================================
   زر الإغلاق — Figma 176:10153
   ========================================================================== */

.header-search__close {
  /* في Figma يقع في جهة النهاية: يسار الشاشة بالعربي، يمينها بالإنجليزي */
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--hs-text-default);
  background: none;
  border: 0;
  border-radius: var(--hs-radius);
  cursor: pointer;
  transition: background-color .15s ease;
}

.header-search__close:hover { background-color: var(--hs-chip-bg); }

.header-search__close:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: 2px;
}

/* علامة × — Figma: الأيقونة 20×20 ورسمها داخلها بإزاحة 23.99%
   أي 20 − (2 × 4.8) = 10.4px. نرسمها بشريطين فلا تعتمد على ملف خارجي
   وتتلوّن بلون النص. */
.header-search__close-glyph {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.header-search__close-glyph::before,
.header-search__close-glyph::after {
  content: "";
  position: absolute;
  /* التمركز متماثل، فنستعمل خصائص فيزيائية: الخاصية المنطقية مع
     translate الفيزيائي تعطي إزاحتين مختلفتين في RTL فينفصل الشريطان. */
  top: 50%;
  left: 50%;
  width: 10.4px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

.header-search__close-glyph::before { transform: translate(-50%, -50%) rotate(45deg); }
.header-search__close-glyph::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* ==========================================================================
   شريط البحث — Figma 176:10154: صف، فجوة 16، تمركز رأسي
   الحقل في جهة البداية والزر في جهة النهاية في الإطارين العربي والإنجليزي
   ========================================================================== */

.header-search__bar { width: 100%; }

.header-search .header-search__form {
  display: flex;
  align-items: center;             /* لا flex-end: يمنع إزاحة الزر */
  gap: 16px;                       /* global/spacing-xl */
  margin: 0;
}

/* غلاف الحقل: هو نفسه صندوق الحقل، يحمل الحدّ والخلفية.
   وبهذا لا يوجد صندوق سطر حول عنصر inline يُنزل الحدّ أو يزيح الأيقونة. */
.header-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;                        /* form/icon-enteredtext */
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;                    /* Figma: Input Field = 40 */
  /* form/input-container-padding-right:16 (جهة البداية بالعربي)
     form/input-container-padding-left:8  (جهة النهاية) */
  padding-inline: 16px 8px;
  background: #fff;                /* form/field-background-default */
  border: 1px solid var(--hs-field-border);
  border-radius: var(--hs-radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.header-search__field:hover { border-color: var(--hs-field-text); }

.header-search__field:focus-within {
  border-color: var(--hs-field-text);
  box-shadow: 0 2px 4px -2px rgba(16, 24, 40, .06),
              0 4px 8px -2px rgba(16, 24, 40, .1);
}

/* ‼️ الملاحظة 2B — خط الـfocus الأسود.
   القيم منقولة حرفيًا من ‎css/search-page.css‎ (‎.dga-field::after‎):
   يبدأ من المنتصف بعرض صفر ويتمدد للطرفين خلال ‎.2s ease-in-out‎،
   ويشغل آخر 2px داخل الحقل فيغطي حدّه السفلي، ولا ينقلب مع الاتجاه
   لأن المنتصف واحد. اللون ‎#0d121c‎ هو ‎--s-focus-bar‎ نفسه. */
.header-search__field::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #0d121c;
  transition: width .2s ease-in-out;
  pointer-events: none;
}

.header-search__field:focus-within::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .header-search__field,
  .header-search__field::after { transition: none; }
}

/* دروبال يلفّ الحقل بـ.js-form-item داخل غلافنا — نجعله حلقة شفافة.
   المحدِّد مقيَّد داخل ‎.header-search__field‎ فلا يمسّ أي نموذج آخر. */
.header-search__field .js-form-item,
.header-search__field .form-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.header-search .header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: 400 16px/24px var(--hs-font);   /* Text md/Regular */
  color: var(--hs-field-text);
  text-align: start;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.header-search .header-search__input::placeholder {
  color: var(--hs-text-muted);
  opacity: 1;
}

/* ‼️ الملاحظة 2A — دائرة الإكمال التلقائي.
   المنافس محدَّد بالاسم: core/misc/components/autocomplete-loading.module.css
     .js input.form-autocomplete { background-image: url(throbber-inactive.svg) }
   تخصيصه (0,2,1) بينما ‎.header-search .header-search__input‎ هي (0,2,0)
   فكانت تخسر. نرفع التخصيص إلى (0,3,1) بإضافة الوسم والصنف — فلا نحتاج
   ‎!important‎ إطلاقًا.
   نحيّد الصورة فقط: الصنف ‎form-autocomplete‎ باقٍ، و‎data-autocomplete-path‎
   باقٍ، ووظيفة Search API Autocomplete لا تتأثر لأنها لا تعتمد على الصورة. */
.header-search input.header-search__input.form-autocomplete,
.header-search input.header-search__input.form-autocomplete.ui-autocomplete-loading {
  background-image: none;
}

/* الحقل يُخفي زر المسح الأصلي للمتصفح فلا تظهر علامتا × */
.header-search .header-search__input::-webkit-search-cancel-button { display: none; }

/* التسمية مخفية بصريًا وتبقى لقارئ الشاشة (Figma لا يعرض تسمية) */
.header-search__field label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* العدسة — الأصل المعتمد نفسه المستخدم في صفحة البحث (viewBox 0 0 18 18)
   مضمَّنًا هنا كـdata URI: لا ملف يُرفع ولا مسار يُخطئ، والتلوين
   بـcurrentColor. المقاس 20×20 كما في Figma (Trailing Icon = 20).
   موضعها يتبع الاتجاه تلقائيًا لأنها أول عنصر في صفّ فلكس. */
.header-search__icon {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  color: var(--hs-text-default);
  -webkit-mask: center / 20px 20px no-repeat;
  mask: center / 20px 20px no-repeat;
  -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");
}

/* فيه نص ⇒ العدسة غير مرئية و× وحده الظاهر.
   visibility لا display: تبقى الخانة محجوزة فلا يزحف النص عند ظهور ×. */
.header-search__field.has-value > .header-search__icon { visibility: hidden; }

/* زر مسح النص — يمسح الحقل فقط ولا يغلق اللوحة */
.header-search__clear {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font: 400 20px/1 var(--hs-font);
  color: var(--hs-text-muted);
  background: none;
  border: 0;
  border-radius: var(--hs-radius);
  cursor: pointer;
}

.header-search__field.has-value > .header-search__clear { display: flex; }
.header-search__clear:hover { color: var(--hs-text-default); }

.header-search__clear:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: -2px;
}

/* ——— زر «بحث» — Figma 176:10155 ———
   غلاف الأزرار الذي يطبعه دروبال (.form-actions) صندوق block، ولو ترك
   كذلك لجلس الزر على صندوق سطر يرث html{font-size:60px} فيرتفع عن
   الحقل. نجعله فلكس فينتفي صندوق السطر من أصله — بلا margin سالب
   ولا translateY. */
.header-search .header-search__actions,
.header-search .form-actions {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.header-search .header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                        /* button/buttons-lg-gap */
  height: 40px;                    /* Figma: min-height = max-height = 40 */
  padding-block: 0;                /* button/… padding الرأسي = spacing-none */
  padding-inline: 16px;            /* button/buttons-lg-padding */
  font: 500 16px/24px var(--hs-font);   /* Text md/Medium */
  color: var(--hs-text-oncolor);
  white-space: nowrap;
  background-color: var(--hs-primary);
  border: 0;
  border-radius: var(--hs-radius);
  cursor: pointer;
  transition: background-color .15s ease;
}

.header-search .header-search__submit:hover  { background-color: var(--hs-primary-hover); }
.header-search .header-search__submit:active { background-color: var(--hs-primary-press); }

.header-search .header-search__submit:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: 2px;
}


/* ==========================================================================
   الاقتراحات الثابتة — Figma 176:10157 / 176:10158
   ========================================================================== */

.header-search__suggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;                       /* global/spacing-xl */
  align-items: flex-start;         /* الشرائح في جهة البداية بالإطارين */
}

.header-search__suggestions-title {
  margin: 0;
  width: 100%;
  font: 600 18px/28px var(--hs-font);   /* Text lg/Semibold */
  color: var(--hs-primary);              /* text/text-primary */
  text-align: start;
}

.header-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                        /* global/spacing-md */
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-search__chips-item { display: flex; }

/* شريحة — Figma 525:18650 */
.header-search__chip {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: 4px;                        /* global/spacing-xs */
  height: 32px;
  padding-block: 0;
  padding-inline: 12px;            /* global/spacing-lg */
  font: 500 16px/24px var(--hs-font);   /* Text md/Medium */
  color: var(--hs-text-default);
  white-space: nowrap;
  background-color: var(--hs-chip-bg);
  border: 1px solid transparent;   /* يحجز المكان فلا يتمدد عند الاختيار */
  border-radius: var(--hs-radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.header-search__chip:hover { background-color: var(--hs-border-soft); }

.header-search__chip:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .header-search__chip,
  .header-search__close,
  .header-search .header-search__submit { transition: none; }
}

/* ——— الحالة المحدَّدة ———
   ⚠️ Figma المعتمد يعطي الحالة العادية فقط؛ مكوّن Chip الرئيسي في مكتبة
   خارجية غير مقروءة من هذا الملف. فقيم الحالة المحدَّدة أدناه مأخوذة من
   Tokens الأساسية المعتمدة في المشروع (‎#1b8354‎ و‎#f3fcf6‎) ومعلَّمة
   NOT SPECIFIED في جدول المطابقة. تغييرها سطر واحد. */
.header-search__chip.is-selected {
  color: var(--hs-primary);
  background-color: var(--hs-primary-50);
  border-color: var(--hs-primary);
}

/* العلامة الزائدة + في الحالة العادية — Figma: أيقونة 18 ورسمها بإزاحة
   20.83% أي 18 − (2 × 3.75) = 10.5px */
.header-search__chip-mark {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.header-search__chip-mark::before,
.header-search__chip-mark::after {
  content: "";
  position: absolute;
  /* فيزيائية عمدًا — انظر التعليق في ‎.header-search__close-glyph‎ */
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}

/* + : شريط أفقي وآخر رأسي */
.header-search__chip-mark::before {
  width: 10.5px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.header-search__chip-mark::after {
  width: 1.5px;
  height: 10.5px;
  transform: translate(-50%, -50%);
}

/* × : الشريطان نفسهما مائلين — نفس المقاس فلا يتغيّر عرض الشريحة */
.header-search__chip.is-selected .header-search__chip-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.header-search__chip.is-selected .header-search__chip-mark::after {
  width: 10.5px;
  height: 1.5px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* علامة ✓ — لا تظهر إلا عند الاختيار، وتحجز مكانها دائمًا فلا يقفز النص */
.header-search__chip-check {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  /* مخفية في الحالة العادية مع بقاء الخانة */
  display: none;
}

.header-search__chip.is-selected .header-search__chip-check { display: block; }

.header-search__chip-check::after {
  content: "";
  /* الصح شكل واحد لا يتبع الاتجاه، فكل شيء فيه فيزيائي */
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9.5px;
  border-top: 0;
  border-left: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ==========================================================================
   قائمة الإكمال التلقائي
   jQuery UI يُلحق القائمة بـ<body> خارج اللوحة، فلا يمكن حصرها بمحدِّد
   نسب. لذلك يضع الجافاسكربت الصنف ‎.header-search__ac‎ على القائمة
   الخاصة بحقلنا وحده عند فتحها — فلا تتأثر أي قائمة إكمال أخرى بالموقع.
   لا نغيّر بنية القائمة ولا أدوار ARIA ولا سلوك Search API.
   ========================================================================== */

.ui-autocomplete.header-search__ac {
  /* ‼️ القائمة خارج ‎.header-search‎ في شجرة DOM (jQuery UI يُلحقها
     بـ<body>)، فهي لا ترث متغيّرات المكوّن. لذلك نعيد تعريف ما تحتاجه
     هنا بالقيم نفسها — وإلا سقطت الزاوية والظل والخط بصمت. */
  --hs-radius: 4px;
  --hs-font: "IBM Plex Sans Arabic", sans-serif;
  --hs-primary: #1b8354;
  --hs-text-default: #161616;
  --hs-chip-bg: #f3f4f6;
  --hs-shadow:
    0 12px 16px -4px rgba(16, 24, 40, .08),
    0 4px 6px -2px rgba(16, 24, 40, .03);

  box-sizing: border-box;
  padding: 4px 0;
  font-family: var(--hs-font);
  list-style: none;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow);
  /* فوق الهيدر واللوحة فلا تُقَصّ */
  z-index: 1200;
  max-height: 320px;
  overflow-y: auto;
}

.ui-autocomplete.header-search__ac .ui-menu-item {
  list-style: none;
  margin: 0;
}

.ui-autocomplete.header-search__ac .ui-menu-item-wrapper,
.ui-autocomplete.header-search__ac .ui-menu-item > a {
  display: block;
  padding: 8px 16px;
  font: 400 16px/24px var(--hs-font);
  color: var(--hs-text-default);
  text-align: start;
  text-decoration: none;
  /* نص طويل: يلتفّ بدل أن يتجاوز */
  overflow-wrap: anywhere;
  cursor: pointer;
  border: 0;
  background: none;
}

/* التمرير بالفأرة والعنصر النشط بلوحة المفاتيح لهما نفس المعالجة */
.ui-autocomplete.header-search__ac .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.header-search__ac .ui-menu-item-wrapper:hover,
.ui-autocomplete.header-search__ac .ui-menu-item > a.ui-state-active,
.ui-autocomplete.header-search__ac .ui-menu-item > a:hover {
  margin: 0;
  color: var(--hs-primary);
  background-color: var(--hs-chip-bg);
  border: 0;
}


/* ==========================================================================
   استثناءان خارج ‎.header-search‎ — مقصودان وموثّقان
   ========================================================================== */

/* 1) زر البحث في الهيدر يبقى كما هو في الثيم: تحويله إلى <button> كان
      سيكسر طباعة نصّه (‎<p>‎ يأخذ مجموعة ‎.body1‎ في style.css) وينتج
      HTML غير صالح (‎<p>‎ داخل ‎<button>‎). فبدلًا من ذلك يرفع
      الجافاسكربت إتاحته: role="button" وtabindex وaria-expanded
      وaria-controls ومفتاحا Enter/Space. يبقى أن نعطيه حلقة تركيز
      مرئية لأنه صار عنصرًا يمكن الوصول إليه بالتبويب.
      المحدِّد مقيَّد بـ[role="button"] فلا يمسّ العنصر قبل الترقية. */
.search_wrapper[role="button"]:focus-visible {
  outline: 2px solid #1b8354;
  outline-offset: 2px;
  border-radius: 4px;
}