/* ==========================================================================
   filter-sidebar.css — شريط الفلاتر الجانبي (Filter sidebar)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   جوال: درج جانبي ينزلق من اليمين (--z-drawer + overlay).
   سطح المكتب (≥1024px): لوحة ثابتة (280px، ظل ناعم، حدّ + زوايا).
   مجموعات الفلاتر = أكورديون (طيّ) عبر .filter-group--collapsed (JS في main.js).
   عناصر قابلة لإعادة الاستخدام في صفحات لاحقة:
     .filter-group  — قسم أكورديون بعنوان قابل للطيّ
     .filter-chip   — حبّة رمادية (نطاق سعر / ضمان / سنة صنع / مقاس)
     .filter-range  — سطر الحد الأدنى/الأقصى للسعر
   يستضيف نسخة الفلاتر من .checkbox (مربّع مخصّص 20px بدل الأصلي).
   WC-NOTE: تُولّد المجموعات من سمات المنتج عبر إضافة فلترة (FacetWP)
   ========================================================================== */

/* الدرج على الجوال — مثبّت على حافة البداية (يمين RTL)، مخفي خارج الشاشة */
.filter-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: 85%;
  max-width: var(--bp-xs);
  padding: var(--space-24);
  background-color: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.filter-sidebar--open {
  transform: translateX(0);
}

/* طبقة التعتيم (Overlay) — جوال فقط */
.filter-sidebar__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
  background-color: var(--overlay-scrim);
}

.filter-sidebar__overlay.is-open {
  display: block;
}

/* رأس الفلاتر (Header) — العنوان يمينًا، زر الإغلاق يسارًا (جوال فقط) */
.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}

.filter-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--color-dark);
}

.filter-sidebar__close {
  display: inline-flex;
}

/* ---- مجموعة فلتر (Filter group) — أكورديون ---- */
.filter-group {
  padding-block: var(--space-20);
  border-block-end: var(--border-width) solid var(--color-divider);
}

.filter-group:last-of-type {
  border-block-end: none;
}

.filter-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  cursor: pointer;
}

.filter-group__chevron {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.filter-group--collapsed .filter-group__chevron {
  transform: rotate(180deg);
}

.filter-group__body {
  margin-top: var(--space-16);
}

.filter-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* مطويّ (Collapsed) — يخفي الجسم */
.filter-group--collapsed .filter-group__body {
  display: none;
}

/* ---- خانة اختيار الفلتر (مربّع مخصّص 20px، بدل الأصلي) ---- */
.filter-sidebar .checkbox {
  gap: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.filter-sidebar .checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: var(--space-20);
  height: var(--space-20);
  margin: 0;
  background-color: var(--color-surface);
  border: var(--border-width-active) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filter-sidebar .checkbox__input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ponytail: هندسة علامة الصح ثابتة (رسم الشكل، ليست مسافة تصميم) */
.filter-sidebar .checkbox__input:checked::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--color-text-invert);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filter-sidebar .checkbox__input:focus-visible {
  outline: var(--border-width-active) solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- حبّة فلتر رمادية (Filter chip) ----
   تُستخدم لنطاق السعر (radio) والضمان (checkbox) ومنتقيات السنة/المقاس (أزرار) */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.filter-chip {
  flex: 1 1 0;
  min-width: max-content;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12);
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.filter-chip:hover {
  border-color: var(--color-border-strong);
}

/* زر الراديو/الاختيار داخل الحبّة مخفي لكنه متاح */
.filter-chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* الحالة المختارة (عبر :has — بلا JS) */
.filter-chip:has(.filter-chip__input:checked) {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* حقل إدخال بهيئة الحبّة (سنة الصنع / المقاس) — يكتب فيه المستخدم قيمة */
.filter-chip--input {
  display: block;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  color: var(--color-text);
}

.filter-chip--input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.filter-chip--input:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}

/* إخفاء أسهم الزيادة/النقصان في حقول الأرقام */
.filter-chip--input::-webkit-inner-spin-button,
.filter-chip--input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-chip--input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* رقم الضمان الكبير + وحدته الصغيرة */
.filter-chip__num {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

.filter-chip__unit {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

/* ---- سطر حدّي السعر (Min/Max) ---- */
.filter-range {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-12);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* ---- شريط نطاق السعر (Price range slider) ----
   مقبضان أصليان <input type="range"> فوق بعض (بلا مكتبة) — يُزامنهما
   assets/js/components/price-range-slider.js مع حقلي الأدنى/الأعلى الرقميين
   أسفلهما وأيضًا مع بعضهما (بلا JS: يبقى حقلا الأدنى/الأعلى وحدهما، تصفية
   حقيقية بلا سلايدر — تدهور صادق لا ميزة معطوبة).
   استخدام inset-inline-* بدل left/right للتعبئة اللونية بين المقبضين لأن
   المتصفح نفسه يعكس اتجاه القيمة/المقبض تلقائيًا حسب dir، فتتبعه القيم
   المنطقية بلا أي حساب JS منفصل للعربي/الإنجليزي. */
.price-slider {
  position: relative;
  height: 20px;
  margin-block: var(--space-12) var(--space-16);
}

.price-slider__track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.price-slider__range {
  position: absolute;
  inset-block: 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
}

.price-slider__handle {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-slider__handle::-webkit-slider-runnable-track {
  background: transparent;
}
.price-slider__handle::-moz-range-track {
  background: transparent;
}

.price-slider__handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-card-soft);
  cursor: pointer;
}

.price-slider__handle::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-card-soft);
  cursor: pointer;
}

/* ---- أزرار التذييل (تطبيق + إلغاء التصفية) ---- */
.filter-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

/* ---- سطح المكتب: لوحة ثابتة ---- */
@media (min-width: 1024px) {
  .filter-sidebar {
    /* ملتصق أثناء التمرير — يبقى مع الشبكة الأطول منه؛
       align-self:start ضروري كي لا يتمدّد عنصر الشبكة لكامل الصف */
    position: static;
    align-self: start;
    /* يتجاوز ارتفاع الهيدر الملتصق (~80px = لوجو + حشوة) بفجوة صغيرة */
    inset-block-start: var(--space-24);
    width: auto;
    max-width: none;
    transform: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: visible;
  }

  .filter-sidebar__overlay,
  .filter-sidebar__close {
    display: none;
  }
}