/* =========================================================================
   AGL Directory — filters.css
   ========================================================================= */

.agl-sidebar { position: sticky; top: 96px; align-self: start; }
@media (max-width: 1200px) {
    .agl-sidebar { position: static; top: auto; margin-bottom: 24px; }
}

.agl-filters {
    background: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.agl-filters-title {
    font-size: 12px;
    letter-spacing: 0.25em;
    color: var(--text-secondary);
    margin: 0 0 4px;
    font-weight: 600;
}

.agl-filter-group { border: 0; padding: 0; margin: 0; }
.agl-filter-group legend {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-weight: 600;
}

.agl-check, .agl-radio, .agl-switch {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}
.agl-check input, .agl-radio input { accent-color: var(--accent-green); width: 16px; height: 16px; }
.agl-check:hover, .agl-radio:hover { color: var(--text-primary); }

.agl-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(13, 13, 26, 0.6);
    border: 1px solid rgba(123, 47, 255, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}

/* Range slider — dual-thumb stacking trick */
.agl-range-wrap { position: relative; padding-top: 12px; }
.agl-range-wrap input[type="range"] {
    width: 100%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    pointer-events: none;
}
.agl-range-wrap input[type="range"]:nth-of-type(2) { position: absolute; top: 12px; left: 0; }
.agl-range-wrap input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(123, 47, 255, 0.3); border-radius: 999px; }
.agl-range-wrap input[type="range"]::-moz-range-track { height: 4px; background: rgba(123, 47, 255, 0.3); border-radius: 999px; }
.agl-range-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    border: 2px solid var(--bg-primary);
    margin-top: -6px;
    cursor: pointer;
    pointer-events: auto;
}
.agl-range-wrap input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    border: 2px solid var(--bg-primary);
    cursor: pointer;
    pointer-events: auto;
}
.agl-range-readout {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
.agl-range-readout span { color: var(--text-primary); font-weight: 600; }

/* Toggle switch */
.agl-switch { user-select: none; }
.agl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.agl-switch-track {
    width: 36px; height: 20px;
    background: rgba(123, 47, 255, 0.25);
    border-radius: 999px;
    position: relative;
    transition: background .18s ease;
}
.agl-switch-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease;
}
.agl-switch input:checked + .agl-switch-track { background: var(--accent-green); }
.agl-switch input:checked + .agl-switch-track .agl-switch-thumb { transform: translateX(16px); background: #000; }

.agl-filters-reset { align-self: flex-start; }