/* DirectTech — Shop filter redesign (2026-05-14)
   Loaded after shop.min.css so these rules win.
   Scope: only inside .shop-sidebar / .shop-content header area. */

/* ---------- Sidebar shell ---------- */
.shop-sidebar {
    width: 320px;
    min-width: 320px;
    background: #fff;
    border-radius: 14px;
    padding: 22px 18px;
    box-shadow: 0 4px 18px rgba(0, 40, 80, 0.06);
    align-self: start;
    position: sticky;
    top: 88px;
    /* No overflow:auto — would clip the flyout. The sidebar grows with its content;
       the BRAND list caps itself with its own scroll (see .filter-list:has(label) rule). */
    overflow: visible;
}
.shop-sidebar::-webkit-scrollbar { width: 8px; }
.shop-sidebar::-webkit-scrollbar-thumb { background: #d0d8e0; border-radius: 4px; }

.shop-sidebar .filter-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid #eef2f6; margin-bottom: 14px;
}
.shop-sidebar .filter-header h3 {
    font-size: 1.05rem; margin: 0; color: #0e1a2b; display: flex; align-items: center; gap: 8px;
}
.shop-sidebar .filter-header h3 i { color: #1473e6; }
.shop-sidebar .clear-filters {
    color: #1473e6; font-size: 0.85rem; font-weight: 600; text-decoration: none;
    padding: 6px 12px; border-radius: 6px; transition: background 0.15s ease;
}
.shop-sidebar .clear-filters:hover { background: #eef5ff; }

/* ---------- Active filter chips ---------- */
.shop-sidebar .active-filters {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.shop-sidebar .active-filter-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef5ff; color: #1473e6;
    padding: 6px 10px 6px 12px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; line-height: 1;
}
.shop-sidebar .active-filter-tag a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; background: rgba(20, 115, 230, 0.18); color: #1473e6;
    border-radius: 50%; text-decoration: none; transition: all 0.15s ease;
}
.shop-sidebar .active-filter-tag a:hover { background: #1473e6; color: #fff; }
.shop-sidebar .active-filter-tag a i { font-size: 0.6rem; }

/* ---------- Filter cards ---------- */
.shop-sidebar .filter-card {
    border-bottom: 1px solid #eef2f6;
    padding: 4px 0;
    margin-bottom: 0;
}
.shop-sidebar .filter-card:last-of-type { border-bottom: none; }
.shop-sidebar .filter-title {
    font-size: 0.95rem; font-weight: 700; color: #0e1a2b;
    padding: 14px 4px; margin: 0; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.shop-sidebar .filter-title > i.fa-chevron-down { transition: transform 0.2s ease; font-size: 0.7rem; color: #8392a6; }
.shop-sidebar .filter-card.collapsed .filter-title > i.fa-chevron-down { transform: rotate(-90deg); }
.shop-sidebar .filter-content { padding: 0 4px 16px; }
.shop-sidebar .filter-card.collapsed .filter-content { display: none; }

/* ---------- Filter list (categories, brands, specs) ---------- */
.shop-sidebar .filter-list {
    /* Cap long lists (e.g. brands with 30+) but only when they actually overflow.
       Categories are short and stay un-capped because the cap is applied per .filter-card. */
    display: flex; flex-direction: column; gap: 2px;
}
/* Brand lists tend to be long — give them an internal scrollbar at a reasonable height
   instead of the old cramped 200px box, and rely on the in-card search to make scrolling rare. */
.shop-sidebar .filter-card .filter-list:has(label) {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}
.shop-sidebar .filter-card .filter-list:has(label)::-webkit-scrollbar { width: 6px; }
.shop-sidebar .filter-card .filter-list:has(label)::-webkit-scrollbar-thumb { background: #d0d8e0; border-radius: 3px; }
.shop-sidebar .filter-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 0.92rem; color: #2d3b53; text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    cursor: pointer; line-height: 1.3;
    position: relative;
}
.shop-sidebar .filter-item:hover { background: #f4f7fb; color: #1473e6; }
.shop-sidebar .filter-item.active,
.shop-sidebar .filter-item.has-active { background: #eaf2ff; color: #1473e6; font-weight: 600; }
.shop-sidebar .filter-item i.fas { width: 18px; text-align: center; color: #6b7a90; }
.shop-sidebar .filter-item.active i.fas { color: #1473e6; }
.shop-sidebar .filter-item input[type=checkbox] {
    width: 16px; height: 16px; accent-color: #1473e6; cursor: pointer;
}

/* ---------- Category items with subcategories — chevron + flyout ---------- */
.shop-sidebar .filter-item.has-subs {
    padding-right: 28px;
}
.shop-sidebar .filter-item.has-subs::after {
    content: '\f054';       /* fa-chevron-right */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.65rem; color: #b0bcd0;
    transition: color 0.15s ease;
}
.shop-sidebar .filter-item.has-subs:hover::after { color: #1473e6; }

.shop-sidebar .filter-flyout-wrap { position: relative; }
.shop-sidebar .filter-flyout {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    z-index: 60;
    background: #fff;
    min-width: 240px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15, 40, 80, 0.14);
    padding: 10px;
    opacity: 0; visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.shop-sidebar .filter-flyout::before {
    content: '';
    position: absolute; left: -12px; top: 12px;
    width: 12px; height: 100%;
}
.shop-sidebar .filter-flyout-wrap:hover .filter-flyout,
.shop-sidebar .filter-flyout-wrap:focus-within .filter-flyout {
    opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
}
.shop-sidebar .filter-flyout-title {
    font-size: 0.7rem; font-weight: 700; color: #8392a6; text-transform: uppercase;
    padding: 6px 10px 8px; letter-spacing: 0.5px;
}
.shop-sidebar .filter-flyout .filter-item { font-size: 0.9rem; padding: 8px 10px; }

/* ---------- Filter search-in-list (brands) ---------- */
.shop-sidebar .filter-search {
    position: relative; margin-bottom: 10px;
}
.shop-sidebar .filter-search input {
    width: 100%; padding: 8px 12px 8px 32px;
    border: 1px solid #d6dde6; border-radius: 8px;
    font-size: 0.85rem; background: #f8fafd;
    color: #0e1a2b; transition: border-color 0.15s, background 0.15s;
}
.shop-sidebar .filter-search input:focus {
    outline: none; border-color: #1473e6; background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 115, 230, 0.12);
}
.shop-sidebar .filter-search i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: #8392a6; font-size: 0.8rem;
}
.shop-sidebar .filter-list .filter-item.is-hidden { display: none; }
.shop-sidebar .filter-list .no-results-msg {
    padding: 12px; font-size: 0.85rem; color: #8392a6; text-align: center; font-style: italic;
}

/* ---------- Price range ---------- */
.shop-sidebar .price-inputs {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
.shop-sidebar .price-inputs input {
    width: 100%; padding: 9px 12px; border: 1px solid #d6dde6; border-radius: 8px;
    font-size: 0.88rem; background: #f8fafd;
}
.shop-sidebar .price-inputs input:focus { outline: none; border-color: #1473e6; background: #fff; }
.shop-sidebar .price-inputs span { color: #8392a6; font-size: 0.85rem; }

/* ---------- Apply Filters button ---------- */
.shop-sidebar .filter-actions {
    position: sticky; bottom: -22px; background: #fff; padding: 12px 0 4px;
    margin-top: 12px; border-top: 1px solid #eef2f6;
}
.shop-sidebar .filter-actions .btn {
    width: 100%; padding: 11px 16px; font-size: 0.95rem; font-weight: 700;
    border-radius: 9px;
}

/* ---------- Responsive: tablet stays as wider sidebar; phone goes overlay (Phase 2) ---------- */
@media (max-width: 1024px) {
    .shop-sidebar { width: 280px; min-width: 280px; position: static; max-height: none; }
}
@media (max-width: 768px) {
    .shop-sidebar { width: 100%; min-width: 0; }
    .shop-sidebar .filter-flyout {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding: 0; margin: 4px 0 8px 18px;
        background: transparent; min-width: 0;
    }
    .shop-sidebar .filter-flyout-title { display: none; }
    .shop-sidebar .filter-item.has-subs::after { display: none; }
}