/* ── Filters Drawer Overlay ─────────────────────────────── */
#filters-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(var(--yalo-overlay-blur));
    -webkit-backdrop-filter: blur(var(--yalo-overlay-blur));
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
#filters-drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* ── Filters Drawer Panel ───────────────────────────────── */
/* Direction-dependent geometry lives in ONE place, as tokens.
   The drawer slides in from the inline-end edge, which is the left
   in Arabic and the right in French/English; `transform` and the
   shadow offset are physical by specification and have no logical
   equivalent, so they read the token instead of a PHP branch. */
:root      { --fdrawer-hidden-x:  100%; --fdrawer-shadow-x: -6px; }
[dir="rtl"]{ --fdrawer-hidden-x: -100%; --fdrawer-shadow-x:  6px; }

#filters-drawer {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
        transform: translateX(var(--fdrawer-hidden-x));
    /* v5.82 — unified with the Mobile Nav Drawer / Mini-Cart Drawer:
       same width, same backdrop blur, same open/close motion. Was
       min(360px,92vw) — covering ~95% of the screen on mobile and
       feeling like a full page instead of a dismissible side panel. */
    width: var(--yalo-drawer-w);
    /* v5.80 fix: 100vh was declared LAST, so it overrode 100dvh and won.
       On mobile, 100vh includes the area hidden behind the browser's
       address bar; while it is visible (e.g. drawer opened at the top
       of the page before scrolling) the drawer became taller than the
       visible viewport, pushing the footer (مسح/تطبيق) off-screen.
       100dvh now wins on supporting browsers, with 100vh as a fallback
       for older browsers that don't know "dvh". */
    height: 100vh;
    height: 100dvh;
    background: var(--clr-surface);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    box-shadow: var(--fdrawer-shadow-x) 0 40px rgba(0,0,0,.18);
    transition: var(--yalo-drawer-transition);
    will-change: transform;
}
#filters-drawer.open {
    transform: translateX(0) !important;
}

/* ── Drawer Header ──────────────────────────────────────── */
.fdrawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1.5px solid var(--clr-border);
    flex-shrink: 0;
    gap: 10px;
}
.fdrawer-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--clr-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.fdrawer-title i {
    color: var(--clr-primary);
    font-size: 14px;
}
.fdrawer-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--clr-border);
    background: var(--clr-surface-2);
    color: var(--clr-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .18s;
    font-size: 14px;
    flex-shrink: 0;
}
.fdrawer-close-btn:hover {
    background: var(--clr-border);
    color: var(--clr-text);
}

/* ── Drawer Scrollable Body ─────────────────────────────── */
.fdrawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) transparent;
}
.fdrawer-body::-webkit-scrollbar { width: 4px; }
.fdrawer-body::-webkit-scrollbar-track { background: transparent; }
.fdrawer-body::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }

/* ── Drawer Section ─────────────────────────────────────── */
.fdrawer-section {
    padding: 18px 0 0;
    border-top: 1.5px solid var(--clr-border);
    margin-top: 18px;
}
.fdrawer-section:first-child {
    border-top: none;
    margin-top: 8px;
}
.fdrawer-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--clr-text-3);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.fdrawer-section-title i { font-size: 10px; color: var(--clr-primary); opacity: .8; }

/* ── Sort Options ───────────────────────────────────────── */
.fdrawer-sort-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fdrawer-sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s;
    border: 1.5px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text-2);
    background: transparent;
    width: 100%;
    text-align: start;
}
.fdrawer-sort-item:hover { background: var(--clr-surface-2); }
.fdrawer-sort-item.active {
    background: rgba(239,68,68,.07);
    border-color: rgba(239,68,68,.3);
    color: #dc2626;
}
.fdrawer-sort-item .fds-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--clr-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: .15s;
    font-size: 9px;
    color: transparent;
}
.fdrawer-sort-item.active .fds-check {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
}
.fdrawer-sort-item .fds-icon {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: .7;
}
.fdrawer-sort-item.active .fds-icon { opacity: 1; color: #dc2626; }

/* ── Price Range ────────────────────────────────────────── */
.fdrawer-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fdrawer-price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fdrawer-price-inputs label {
    font-size: 11px;
    color: var(--clr-text-3);
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}
.fdrawer-price-inputs input {
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
}

/* ── Range Slider ───────────────────────────────────────── */
.fdrawer-range-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    margin: 4px 0;
}
.fdrawer-range-track {
    position: absolute;
    left: 0; right: 0;
    height: 5px;
    background: var(--clr-border);
    border-radius: 3px;
}
.fdrawer-range-fill {
    position: absolute;
    height: 5px;
    background: linear-gradient(90deg, var(--clr-primary), #ef4444);
    border-radius: 3px;
    pointer-events: none;
    /* left & right are set directly by JS — no direction dependency */
    transition: left .08s, right .08s;
}
.fdrawer-range-input {
    position: absolute;
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
    direction: ltr; /* Force LTR so value=min is always left thumb, max is right thumb */
}
.fdrawer-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--clr-primary);
    border: 3px solid var(--clr-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    cursor: pointer;
    pointer-events: all;
    transition: box-shadow .18s, transform .12s;
}
.fdrawer-range-input::-webkit-slider-thumb:hover,
.fdrawer-range-input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--clr-primary) 18%, transparent);
    transform: scale(1.08);
}
.fdrawer-range-input::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--clr-primary);
    border: 3px solid var(--clr-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    cursor: pointer;
    pointer-events: all;
    direction: ltr;
}
.fdrawer-price-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: var(--clr-text-2);
    direction: ltr;
}
.fdrawer-price-display span {
    background: var(--clr-surface-2);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    direction: ltr;
    min-width: 90px;
    text-align: center;
}

/* ── Checkboxes ─────────────────────────────────────────── */
.fdrawer-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fdrawer-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s;
    border: 1.5px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text-2);
}
.fdrawer-check-item:hover { background: var(--clr-surface-2); }
.fdrawer-check-item.checked {
    background: rgba(239,68,68,.07);
    border-color: rgba(239,68,68,.28);
    color: #dc2626;
}
.fdrawer-check-box {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 2px solid var(--clr-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: .15s;
    font-size: 9px; color: transparent;
    background: transparent;
}
.fdrawer-check-item.checked .fdrawer-check-box {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
}

/* ── Brands Filter Section ──────────────────────────────── */
.fdrawer-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* ── Brand Chip (base) ──────────────────────────────────── */
.fdrawer-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--clr-surface-2);
    border: 1.5px solid var(--clr-border);
    color: var(--clr-text-2);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    user-select: none;
    position: relative;
}

/* "All Brands" chip — no avatar, symmetric padding */
.fdrawer-brand-chip--all {
    padding: 7px 14px;
    font-size: 12.5px;
}

.fdrawer-brand-chip:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface-2));
}
.fdrawer-brand-chip:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}
/* "All brands" chip active → primary color */
.fdrawer-brand-chip--all.active {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--clr-primary) 35%, transparent);
}
/* Individual brand chip active → RED (selected state) */
.fdrawer-brand-chip.active:not(.fdrawer-brand-chip--all) {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 2px 10px rgba(239,68,68,.35);
}

/* Featured brand — subtle highlight border */
.fdrawer-brand-chip--featured {
    border-color: color-mix(in srgb, var(--clr-primary) 40%, transparent);
}
.fdrawer-brand-chip--featured:not(.active)::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--clr-primary) 15%, transparent),
        transparent 60%);
    pointer-events: none;
}

/* ── Avatar inside chip ─────────────────────────────────── */
.fdrawer-brand-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    flex-shrink: 0;
    transition: border-color .15s;
}
.fdrawer-brand-chip.active .fdrawer-brand-avatar {
    border-color: rgba(255,255,255,.35);
}
.fdrawer-brand-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}
.fdrawer-brand-avatar--initials {
    background: color-mix(in srgb, var(--clr-primary) 15%, var(--clr-surface-2));
    color: var(--clr-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
    border: none;
}
.fdrawer-brand-chip.active .fdrawer-brand-avatar--initials {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Product count badge */
.fdrawer-brand-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--clr-text-3);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    padding: 1px 5px;
    margin-inline-start: 1px;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}
.fdrawer-brand-chip.active .fdrawer-brand-count {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.25);
    color: rgba(255,255,255,.9);
}
.fdrawer-brand-chip:hover:not(.active) .fdrawer-brand-count {
    border-color: color-mix(in srgb, var(--clr-primary) 30%, transparent);
    color: var(--clr-primary);
}

/* Separator between featured and normal brands */
.fdrawer-brands-sep {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--clr-text-3);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.fdrawer-brands-sep::before,
.fdrawer-brands-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-border);
}


/* ── Drawer Footer ──────────────────────────────────────── */
.fdrawer-footer {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1.5px solid var(--clr-border);
    display: flex;
    gap: 10px;
    background: var(--clr-surface);
}
.fdrawer-footer .btn {
    flex: 1;
    justify-content: center;
}
/* Clear button — red */
.fdrawer-footer .btn-clear-filters {
    background: transparent;
    border: 1.5px solid #dc2626;
    color: #dc2626;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.fdrawer-footer .btn-clear-filters:hover {
    background: rgba(220,38,38,.08);
    border-color: #b91c1c;
    box-shadow: 0 2px 8px rgba(220,38,38,.18);
}
/* Apply button — green */
.fdrawer-footer .btn-apply-filters {
    background: #16a34a;
    border: 1.5px solid #16a34a;
    color: #fff;
    font-weight: 700;
    transition: background .15s, box-shadow .15s, transform .12s;
}
.fdrawer-footer .btn-apply-filters:hover {
    background: #15803d;
    border-color: #15803d;
    box-shadow: 0 3px 12px rgba(22,163,74,.35);
    transform: translateY(-1px);
}

/* Lock body scroll when drawer open */
body.fdrawer-open {
    overflow: hidden;
    touch-action: none;
}

/* ── Dark mode: red active states in drawer ──────────── */
body.dark-mode .fdrawer-sort-item.active {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.35);
    color: #f87171;
}
body.dark-mode .fdrawer-sort-item.active .fds-check {
    background: #ef4444;
    border-color: #dc2626;
}
body.dark-mode .fdrawer-sort-item.active .fds-icon { color: #f87171; }
body.dark-mode .fdrawer-check-item.checked {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.32);
    color: #f87171;
}
body.dark-mode .fdrawer-check-item.checked .fdrawer-check-box {
    background: #ef4444;
    border-color: #dc2626;
}
body.dark-mode .fdrawer-brand-chip.active:not(.fdrawer-brand-chip--all) {
    background: #dc2626;
    border-color: #b91c1c;
    box-shadow: 0 2px 10px rgba(220,38,38,.4);
}
body.dark-mode .fdrawer-footer .btn-clear-filters {
    border-color: #ef4444;
    color: #f87171;
}
body.dark-mode .fdrawer-footer .btn-clear-filters:hover {
    background: rgba(239,68,68,.12);
}
body.dark-mode .fdrawer-footer .btn-apply-filters {
    background: #15803d;
    border-color: #15803d;
}
body.dark-mode .fdrawer-footer .btn-apply-filters:hover {
    background: #166534;
}