/* ============================================================
   store-filter.css — Product filter sidebar
   ============================================================ */

/* ── Sidebar wrapper ── */
.filter-sidebar {
    background:    #fff;
    border-radius: 14px;
    box-shadow:    0 2px 16px rgba(0,0,0,.07);
    padding:       20px 18px;
    position:      sticky;
    top:           90px;
}

/* ── Section header ── */
.filter-sidebar__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-bottom:  14px;
    border-bottom:   1.5px solid #eee;
    margin-bottom:   18px;
}
.filter-sidebar__title {
    font-size:   15px;
    font-weight: 800;
    color:       #1a1a2e;
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         7px;
}
.filter-sidebar__title i { color: var(--primary-color, #224229); font-size: 14px; }

.filter-clear {
    font-size:       12px;
    font-weight:     600;
    color:           var(--primary-color, #224229);
    text-decoration: none;
    background:      color-mix(in srgb, var(--primary-color, #224229) 10%, white);
    border-radius:   20px;
    padding:         3px 10px;
    transition:      background .2s;
    white-space:     nowrap;
}
.filter-clear:hover { background: color-mix(in srgb, var(--primary-color, #224229) 18%, white); color: var(--primary-color, #224229); }

/* ── Section block ── */
.filter-block { margin-bottom: 22px; }
.filter-block:last-child { margin-bottom: 0; }

.filter-block__label {
    font-size:     12px;
    font-weight:   800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:         #888;
    margin-bottom: 12px;
    display:       block;
}

/* ── Category list ── */
.filter-cat-list {
    list-style: none;
    margin:     0;
    padding:    0;
}
.filter-cat-list li { margin-bottom: 1px; }

/* Row wrapper for link + toggle button */
.filter-cat-item-row {
    display:     flex;
    align-items: center;
}
.filter-cat-item-row .flex-1 { flex: 1; min-width: 0; }

.filter-cat-item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       7px 8px;
    border-radius: 8px;
    transition:    background .15s;
    width:         100%;
    color:         #333;
}
.filter-cat-item:hover { background: #f7f8fa; }
.filter-cat-item--active { background: color-mix(in srgb, var(--primary-color, #224229) 8%, white); }
.filter-cat-item--active:hover { background: color-mix(in srgb, var(--primary-color, #224229) 13%, white); }

/* Radio-style dot indicator */
.filter-cat-dot {
    width:         10px;
    height:        10px;
    border:        2px solid #ccc;
    border-radius: 50%;
    flex-shrink:   0;
    transition:    border-color .15s, background .15s;
}
.filter-cat-dot.active {
    border-color: var(--primary-color, #224229);
    background:   var(--primary-color, #224229);
}

.filter-cat-name {
    font-size:   13px;
    font-weight: 500;
    color:       #333;
    flex:        1;
    line-height: 1.3;
}
.filter-cat-item--active .filter-cat-name { color: var(--primary-color, #224229); }

.filter-cat-toggle {
    background:  none;
    border:      none;
    padding:     0;
    width:       24px;
    height:      24px;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   11px;
    color:       #999;
    cursor:      pointer;
    border-radius: 4px;
    flex-shrink: 0;
    transition:  background .15s, color .15s;
}
.filter-cat-toggle:hover { background: #eee; color: #444; }

/* ── Subcategory list ── */
.filter-subcat-list {
    list-style:           none;
    margin:               2px 0 2px 18px;
    padding:              0;
    border-inline-start:  2px solid #eee;
    padding-inline-start: 10px;
}
[dir="rtl"] .filter-subcat-list { margin: 2px 18px 2px 0; }

/* ── Price range ── */
.price-range-wrap {
    padding: 4px 2px 8px;
}

.price-range-display {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   14px;
    font-size:       13px;
    font-weight:     700;
    color:           #1a1a2e;
}
.price-range-display span {
    background:    color-mix(in srgb, var(--primary-color, #224229) 10%, white);
    color:         var(--primary-color, #224229);
    border-radius: 20px;
    padding:       3px 10px;
    font-size:     12px;
}

/* dual range slider */
.dual-range {
    position: relative;
    height:   32px;
    margin-bottom: 6px;
}
.dual-range input[type="range"] {
    position:   absolute;
    width:      100%;
    height:     4px;
    top:        50%;
    transform:  translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
    margin: 0;
}
.dual-range .range-track {
    position:      absolute;
    height:        4px;
    top:           50%;
    transform:     translateY(-50%);
    width:         100%;
    border-radius: 2px;
    background:    #e0e0e0;
    z-index:       0;
}
.dual-range .range-fill {
    position:   absolute;
    height:     4px;
    top:        50%;
    transform:  translateY(-50%);
    background: var(--primary-color, #224229);
    border-radius: 2px;
    z-index:    1;
}

.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:  none;
    width:       20px;
    height:      20px;
    border-radius: 50%;
    background:  #fff;
    border:      2.5px solid var(--primary-color, #224229);
    cursor:      pointer;
    pointer-events: all;
    box-shadow:  0 2px 6px rgba(0,0,0,.15);
    position:    relative;
    z-index:     3;
}
.dual-range input[type="range"]::-moz-range-thumb {
    width:       20px;
    height:      20px;
    border-radius: 50%;
    background:  #fff;
    border:      2.5px solid var(--primary-color, #224229);
    cursor:      pointer;
    pointer-events: all;
    box-shadow:  0 2px 6px rgba(0,0,0,.15);
}

/* ── Apply button ── */
.filter-apply-btn {
    display:       block;
    width:         100%;
    background:    var(--primary-color, #224229);
    color:         #fff;
    border:        none;
    border-radius: 30px;
    padding:       10px 16px;
    font-size:     14px;
    font-weight:   700;
    text-align:    center;
    cursor:        pointer;
    transition:    all .25s;
    margin-top:    20px;
    box-shadow:    0 4px 12px rgba(34,66,41,.2);
}
.filter-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34,66,41,.28);
}

/* ── Active filters badge ── */
.filter-active-count {
    background:  var(--primary-color, #224229);
    color:       #fff;
    font-size:   10px;
    font-weight: 800;
    border-radius: 50%;
    width:       18px;
    height:      18px;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 4px;
}

/* ── Mobile filter button ── */
.filter-toggle-btn {
    background:    #fff;
    border:        1.5px solid var(--primary-color, #224229);
    color:         var(--primary-color, #224229);
    border-radius: 30px;
    padding:       7px 18px;
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    transition:    all .2s;
}
.filter-toggle-btn:hover,
.filter-toggle-btn.active {
    background: var(--primary-color, #224229);
    color:      #fff;
}

/* ── Offcanvas overrides ── */
.offcanvas-filter .offcanvas-header {
    border-bottom:    1px solid #eee;
    padding:          16px 18px;
}
.offcanvas-filter .offcanvas-title {
    font-size:   16px;
    font-weight: 800;
    color:       #1a1a2e;
}
.offcanvas-filter .offcanvas-body {
    padding: 20px 18px;
}
.offcanvas-filter .filter-sidebar {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    position: static;
}

/* ── Result count bar ── */
.results-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   20px;
    padding:         10px 14px;
    background:      #f8f9fa;
    border-radius:   10px;
    font-size:       13px;
    color:           #555;
}
.results-bar strong { color: var(--primary-color, #224229); }

/* ── Sort select ── */
.sort-select {
    border:        1.5px solid #e0e0e0;
    border-radius: 20px;
    padding:       5px 12px;
    font-size:     13px;
    font-weight:   600;
    color:         #333;
    background:    #fff;
    cursor:        pointer;
    outline:       none;
}