/* Conținutul (grupurile de filtre) e identic Desktop/Tabletă/Mobil — un singur
   partial (_Groups.cshtml) randat din DOUĂ contexte: `<aside>` static pe Desktop
   (`offcanvas=false`) și offcanvas (`offcanvas=true`) sub lg, deschis din butonul
   "Filtrează" (categorie nivel 2/3). IdSuffix (Sidebar/Offcanvas) ține id-urile
   collapse-urilor unice între cele două randări simultane din pagină. */
.filters-sidebar {
    width: 100%;
}

.filters-offcanvas {
    --bs-offcanvas-width: var(--offcanvas-panel-width);
}

/* Tabletă (768-991.98px — singurul interval unde acest offcanvas chiar se
   deschide pe ecran larg, Desktop folosește sidebar-ul static): tratament
   identic cu MiniCart (`.mini-cart-offcanvas`) — panou plutitor, margini de
   10px, colțuri rotunjite, umbră. */
@media (min-width: 768px) {
    .filters-offcanvas {
        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(16, 24, 40, 0.15);
    }
}

/* Mobil (<768px): panou de jos în sus — la fel ca AccountMenu/FavoriteMenu
   offcanvas (`top:auto`, nu `30vh` — conținutul e lung, se adaptează până la
   max-height și scrolează intern, fără spațiu mort). */
@media (max-width: 767.98px) {
    .filters-offcanvas {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 80vh;
        transform: translateY(100%) !important;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
        overflow: hidden;
    }

    .filters-offcanvas.show:not(.hiding) {
        transform: translateY(0) !important;
    }
}

.filters-offcanvas-title {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--heading-xs-size);
    color: var(--color-content-primary);
}

.filters-offcanvas-close {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-bg-secondary);
    border: none;
}

.filters-offcanvas-footer {
    border-top: 1px solid var(--color-border-primary);
}

.filters-offcanvas-apply {
    background-color: var(--color-bg-button-primary);
    color: var(--color-content-button-primary);
    font-weight: var(--font-weight-semibold);
    padding: 0.875rem 1rem;
}

.filters-offcanvas-apply:hover {
    background-color: var(--color-bg-button-primary-hover);
    color: var(--color-content-button-primary);
}

.filters-offcanvas-clear {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-content-brand);
    font-weight: var(--font-weight-semibold);
    padding: 0.875rem 1rem;
}

.filters-group-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-m-size);
    color: var(--color-content-primary);
}

.filters-group-toggle {
    color: inherit;
}

/* rotește minus.svg -> vizual de "plus" implicit prin schimbarea sursei nu e nevoie:
   grupurile pornesc toate expandate (ca-n design); collapse-ul e funcțional, dar
   nicio interacțiune de-aici nu refiltrează grila de produse (fără backend încă) */
.filters-pill {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-pill);
    color: var(--color-content-primary);
    font-size: var(--text-s-size);
    padding: 0.625rem 1rem;
    white-space: nowrap;
}

.filters-pill:hover {
    background-color: var(--color-bg-secondary);
}

.filters-pill-active,
.filters-pill-active:hover {
    background-color: var(--color-bg-button-secondary-active);
    border-color: var(--color-bg-button-secondary-active);
    color: var(--color-content-button-secondary-active);
}

.filters-pill-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.filters-check {
    color: var(--color-content-primary);
    font-size: var(--text-s-size);
    cursor: pointer;
}

.filters-check-label {
    font-weight: var(--font-weight-medium);
}

.filters-check-count {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--color-content-tertiary);
    font-size: var(--text-xs-size);
    padding: 0.125rem 0.5rem;
}

.filters-swatch {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
}

.filters-more {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-content-primary);
    padding: 0.75rem 1rem;
    font-size: var(--text-s-size);
}

.filters-price-panel {
    background-color: var(--color-bg-secondary);
}

.filters-price-panel-title {
    color: var(--color-content-primary);
    font-size: var(--text-s-size);
}

/* Slider de preț cu DOUĂ mânere — două <input type="range"> suprapuse (aceeași
   track vizuală), fiecare cu pointer-events doar pe propriul thumb (::-webkit-slider-thumb/
   ::-moz-range-thumb), ca să poți trage independent minim/maxim. Se pot trage complet
   (nativ, accesibil, tastatură inclusă), dar NU refiltrează grila de produse — nu există
   încă backend/date reale de filtrat (cerut explicit: doar interacțiunea, fără efect pe grid). */
.price-range {
    position: relative;
    height: 1.25rem;
}

.price-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background-color: var(--color-border-secondary);
    border-radius: var(--radius-pill);
}

.price-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--color-bg-brand);
    border-radius: var(--radius-pill);
}

.price-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.price-range-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
    border: 2px solid var(--color-bg-brand);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.price-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
    border: 2px solid var(--color-bg-brand);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

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

.price-range-field-label {
    font-size: var(--text-xs-size);
    color: var(--color-content-tertiary);
}

.price-range-field-input {
    width: 5rem;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: var(--color-content-primary);
    font-size: var(--text-s-size);
    font-weight: var(--font-weight-medium);
    padding: 0.375rem 0.5rem;
    text-align: center;
}