/* ==========================================================================
   Product filter sidebar (category.php / brand.php)
   ========================================================================== */

/* ---------- Active filter chips (shown above the product grid) ---------- */
.qf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--q-space-4); }
.qf-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 10px 6px 12px;
    background: var(--q-primary-tint); color: var(--q-primary-pressed);
    border-radius: var(--q-radius-pill);
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: all 180ms ease;
}
.qf-chip:hover { background: var(--q-primary); color: #fff; }
.qf-chip i { font-size: 10px; opacity: 0.8; }
.qf-chips-clear { font-size: 13px; color: var(--q-text-muted); text-decoration: none; font-weight: 600; }
.qf-chips-clear:hover { color: var(--q-danger); }

/* ---------- Sidebar shell ---------- */
.qf-sidebar {
    background: var(--q-surface); border: 1px solid var(--q-border);
    border-radius: var(--q-radius-lg); overflow: hidden;
    align-self: start; position: sticky;
    top: calc(var(--q-header-h) + 24px);
    box-shadow: var(--q-shadow-sm);
}
.qf-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--q-space-4) var(--q-space-5);
    border-bottom: 1px solid var(--q-border);
    background: linear-gradient(180deg, rgba(85,199,232,0.04), transparent);
}
.qf-sidebar-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--q-text); }
.qf-clear-all { font-size: 12.5px; color: var(--q-primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.qf-clear-all:hover { text-decoration: underline; }

.qf-body { max-height: calc(100vh - var(--q-header-h) - 140px); overflow-y: auto; }
.qf-body::-webkit-scrollbar { width: 4px; }
.qf-body::-webkit-scrollbar-thumb { background: rgba(85,199,232,0.2); border-radius: 4px; }

/* ---------- Collapsible groups ---------- */
.qf-group { border-bottom: 1px solid var(--q-border); }
.qf-group:last-child { border-bottom: none; }
.qf-group-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 14px var(--q-space-5);
    background: none; border: none; cursor: pointer;
    font-family: var(--q-font); font-size: 13.5px; font-weight: 600;
    color: var(--q-text); text-align: left;
    box-sizing: border-box;
    transition: background 150ms ease;
}
.qf-group-head:hover { background: var(--q-bg-secondary); }
.qf-group-head .qf-group-title { flex: 1; min-width: 0; }
.qf-group-head .qf-chevron { color: var(--q-text-faint); font-size: 11px; transition: transform var(--q-transition); flex-shrink: 0; }
.qf-group.open .qf-group-head .qf-chevron { transform: rotate(180deg); }
.qf-group-head .qf-count-badge {
    background: var(--q-primary); color: #fff;
    border-radius: var(--q-radius-pill);
    font-size: 11px; font-weight: 700; padding: 1px 7px;
    flex-shrink: 0;
}
.qf-group-body { display: none; padding: 0 var(--q-space-5) var(--q-space-4); box-sizing: border-box; }
.qf-group.open .qf-group-body { display: block; }

/* ---------- Options ---------- */
.qf-check {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; font-size: 13.5px; color: var(--q-text); cursor: pointer;
    transition: color 150ms ease;
}
.qf-check:hover { color: var(--q-primary-pressed); }
.qf-check input { accent-color: var(--q-primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; margin: 0; }
.qf-check .qf-opt-label { flex: 1; min-width: 0; }
.qf-check .qf-opt-count { color: var(--q-text-faint); font-size: 12px; flex-shrink: 0; }
.qf-check.qf-extra { display: none; }
.qf-check.qf-extra.show { display: flex; }

.qf-show-more {
    font-size: 12.5px; color: var(--q-primary); background: none; border: none;
    font-weight: 600; cursor: pointer; padding: 6px 0 0; font-family: var(--q-font);
    transition: opacity 150ms ease;
}
.qf-show-more:hover { text-decoration: underline; opacity: 0.8; }

.qf-price-row { display: flex; gap: 8px; align-items: center; }
.qf-price-row input, .qf-search-input, .qf-text-input {
    width: 100%; padding: 10px 12px; border-radius: var(--q-radius-sm);
    border: 1px solid var(--q-border-strong); background: var(--q-bg); color: var(--q-text);
    font-size: 13.5px; font-family: var(--q-font); outline: none;
    box-sizing: border-box;
    transition: border-color var(--q-transition), box-shadow var(--q-transition);
}
.qf-price-row input:focus, .qf-search-input:focus, .qf-text-input:focus {
    border-color: var(--q-primary); box-shadow: 0 0 0 3px var(--q-primary-tint);
}
.qf-price-go {
    flex-shrink: 0; padding: 10px 14px; border-radius: var(--q-radius-sm);
    border: 1px solid var(--q-border-strong); background: var(--q-bg-secondary);
    color: var(--q-text); font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--q-font);
    transition: all 150ms ease;
}
.qf-price-go:hover { background: var(--q-primary); color: #fff; border-color: var(--q-primary); }

/* ---------- Mobile ---------- */
.qf-mobile-bar { display: none; }
.qf-mobile-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px; box-sizing: border-box;
    background: var(--q-surface); border: 1px solid var(--q-border-strong);
    border-radius: var(--q-radius-pill);
    color: var(--q-text); font-family: var(--q-font); font-weight: 600; font-size: 14.5px;
    cursor: pointer;
    box-shadow: var(--q-shadow-sm);
    transition: all 150ms ease;
}
.qf-mobile-btn:hover { border-color: var(--q-primary); color: var(--q-primary); }
.qf-mobile-btn .qf-badge {
    background: var(--q-primary); color: #fff;
    border-radius: var(--q-radius-pill); font-size: 11.5px; font-weight: 700; padding: 1px 8px;
}

.qf-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(13,17,20,0.5); z-index: 1998; backdrop-filter: blur(2px); }
.qf-mobile-overlay.open { display: block; }
.qf-mobile-drawer {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 85vh;
    background: var(--q-surface); z-index: 1999;
    border-radius: var(--q-radius-lg) var(--q-radius-lg) 0 0;
    transform: translateY(100%); transition: transform 260ms cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: var(--q-shadow-lg);
}
.qf-mobile-drawer.open { transform: translateY(0); }
.qf-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--q-space-4) var(--q-space-5); border-bottom: 1px solid var(--q-border);
    flex-shrink: 0;
}
.qf-mobile-head h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--q-text); }
.qf-mobile-close { background: none; border: none; font-size: 20px; color: var(--q-text-muted); cursor: pointer; }
.qf-mobile-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.qf-mobile-footer {
    padding: var(--q-space-4) var(--q-space-5);
    border-top: 1px solid var(--q-border); flex-shrink: 0;
    display: flex; gap: 10px;
}
.qf-mobile-footer > * { flex: 1; }

@media (max-width: 1024px) {
    .qf-desktop-sidebar { display: none; }
    .qf-mobile-bar { display: block; margin-bottom: var(--q-space-4); }
}