/* ==========================================================================
   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;
}
/* البحث داخل القائمة يخفي الخيارات غير المطابقة بخاصية hidden، لكن
   display:flex أعلاه يتغلّب على قاعدة المتصفح الافتراضية [hidden]{display:none}
   — فكان الفلتر يعمل فعلًا دون أن يختفي أي خيار على الشاشة، أي "بحث لا يبحث".
   لا بد من إعادة الإخفاء صراحةً. يصلح هذا كل قائمة بحث في الموقع لا منتقي
   الدول وحده. */
.custom-select__option[hidden] {
  display: none;
}

.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);
}

/* ---- منسدل معطَّل ----
   تستخدمه الفلترة المتتابعة للمقاس (tire-cascade.js) حين لا يكون للعرض
   المختار أي نسبة ارتفاع — الإطارات التجارية مثل 700R16. القائمة الفارغة
   وحدها تُقرأ كعطل، فيظهر المنسدل معطَّلًا صراحةً: لا ينطبق، لا معطوب. */
.custom-select.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.custom-select.is-disabled .custom-select__trigger {
  cursor: not-allowed;
}