/* ==========================================================================
   select.css — قائمة منسدلة مخصّصة (Custom Select)
   شركة السرعة المطلقة | RTL.

   تحسين تدريجي (Progressive enhancement): يبقى <select> الأصلي مصدر البيانات
   الحقيقي (مخفي بصريًا) ويُبنى فوقه واجهة .custom-select عبر select.js.
   لو تعطّل JS يظهر الـ <select> الأصلي عاديًا (fallback).

   WC-NOTE: في WooCommerce يُشغَّل نفس التحسين على selects التي يولّدها ووكومرس
            (الترتيب .orderby، المتغيّرات .variations select) عبر data-custom-select.
            يُستثنى ما يزوّقه ووكومرس بنفسه (.country_select / select2) — انظر select.js.
   ========================================================================== */

/* الغلاف — يحمل الـ <select> الأصلي المخفي + الواجهة المخصّصة */
.custom-select {
  position: relative;
  width: 100%;
}

/* إخفاء الـ <select> الأصلي بصريًا مع إبقائه في الـ DOM (يُرسل مع الفورم) */
.custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* الزرّ الظاهر (Trigger) — يطابق شكل .input/.select في forms.css */
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  padding-block: var(--space-12);
  padding-inline: var(--space-16);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.custom-select__trigger:hover {
  border-color: var(--color-border-strong);
}
.custom-select__trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(125, 24, 34, 0.12);
}

/* النص الظاهر — قيمة العنصر المختار، أو placeholder باهت */
.custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__trigger[data-placeholder] .custom-select__value {
  color: var(--color-text-muted);
}

/* السهم — يدور عند الفتح */
.custom-select__arrow {
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}
.custom-select.is-open .custom-select__arrow {
  transform: rotate(180deg);
}

/* حالة الخطأ — تتّسق مع .field--invalid في forms.css */
.field--invalid .custom-select__trigger {
  border-color: var(--color-error);
}

/* حالة المفتوح — يبرز الحدّ */
.custom-select.is-open .custom-select__trigger {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(125, 24, 34, 0.12);
}

/* ------------------------------------------------------------------------
   القائمة المنسدلة (Dropdown panel)
   ------------------------------------------------------------------------ */
.custom-select__panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-4));
  z-index: var(--z-dropdown);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-4);
  /* مخفي كليًا عند الإغلاق (display:none) حتى لا يُضيف ارتفاعًا لمنطقة
     التمرير داخل النوافذ ذات overflow-y:auto — كان يسبب فراغًا أبيض وتمريرًا. */
  display: none;
}
.custom-select.is-open .custom-select__panel {
  display: block;
  animation: cs-panel-drop 0.16s ease;
}

/* حركة فتح ناعمة عبر keyframes (تعمل مع display:block بعكس transition) */
@keyframes cs-panel-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* الفتح لأعلى عند عدم توفّر مساحة أسفل (يُضبط عبر JS) */
.custom-select--drop-up .custom-select__panel {
  top: auto;
  bottom: calc(100% + var(--space-4));
}

/* حقل البحث داخل القائمة (اختياري — للقوائم الطويلة) */
.custom-select__search-wrap {
  padding: var(--space-4) var(--space-4) var(--space-8);
}
.custom-select__search {
  width: 100%;
  padding-block: var(--space-8);
  padding-inline: var(--space-12);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: var(--fs-xs);
}
.custom-select__search:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* قائمة الخيارات */
.custom-select__options {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* عنصر الخيار */
.custom-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-8);
  padding-inline: var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.custom-select__option:hover,
.custom-select__option.is-active {
  background-color: var(--color-bg-alt);
}
.custom-select__option[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}
.custom-select__option[aria-disabled="true"] {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* علامة الاختيار ✓ — تظهر فقط للعنصر المختار */
.custom-select__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  opacity: 0;
}
.custom-select__option[aria-selected="true"] .custom-select__check {
  opacity: 1;
}

/* رسالة "لا توجد نتائج" عند البحث */
.custom-select__empty {
  padding: var(--space-12);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* النسخة الداكنة (Dark glass) — تتّسق مع .select--dark في forms.css */
.custom-select--dark .custom-select__trigger {
  background-color: var(--color-glass-fill);
  color: var(--color-text-invert);
  border-color: var(--color-glass-border);
}
.custom-select--dark .custom-select__arrow {
  color: var(--color-text-invert);
}