/* ============================================================
   PANOUL DE FILTRE (filters.js) — tema dark a showroom-ului, prefix flt-
   Containerul e pozitionat de apelant; panoul e compact si de sine statator.
   ============================================================ */
.flt-panel {
    --flt-bg: rgba(10, 18, 28, 0.86);
    --flt-line: rgba(255, 255, 255, 0.12);
    --flt-text: #e8f4ff;
    --flt-muted: #7fa3c2;
    --flt-accent: #54c7f7;
    --flt-ink: #0a1420;

    width: 248px; max-width: 100%;
    background: var(--flt-bg); border: 1px solid var(--flt-line); border-radius: 12px;
    color: var(--flt-text); font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: 12px; line-height: 1.35;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    user-select: none;
}

/* header */
.flt-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; }
.flt-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
.flt-count { flex: 1; text-align: right; font-size: 11px; color: var(--flt-muted); white-space: nowrap; }
.flt-panel.flt-active .flt-count { color: var(--flt-accent); }
.flt-toggle {
    border: none; background: transparent; color: var(--flt-muted); cursor: pointer;
    width: 22px; height: 22px; border-radius: 11px; font-size: 13px; line-height: 22px; padding: 0;
    transition: transform 0.18s, background 0.15s, color 0.15s;
}
.flt-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--flt-text); }
.flt-panel.flt-collapsed .flt-toggle { transform: rotate(-90deg); }

/* corp */
.flt-body { border-top: 1px solid var(--flt-line); padding: 8px 12px 10px; }
.flt-panel.flt-collapsed .flt-body { display: none; }
.flt-group { margin-bottom: 9px; }
.flt-group:last-of-type { margin-bottom: 0; }
.flt-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; font-weight: 600; color: var(--flt-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
}
.flt-val { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--flt-text); font-size: 12px; }

/* chip-uri */
.flt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.flt-chip {
    border: 1px solid var(--flt-line); background: rgba(255, 255, 255, 0.06); color: var(--flt-text);
    padding: 4px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.flt-chip:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
.flt-chip:active { transform: scale(0.96); }
.flt-chip.flt-on { background: var(--flt-accent); border-color: var(--flt-accent); color: var(--flt-ink); }
.flt-chip:focus-visible { outline: 2px solid var(--flt-accent); outline-offset: 1px; }

/* slider latime */
.flt-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 18px; margin: 2px 0 0; background: transparent; cursor: pointer;
}
.flt-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.flt-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.flt-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--flt-accent); }
.flt-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
    background: var(--flt-accent); border: 2px solid var(--flt-ink);
    box-shadow: 0 0 0 1px var(--flt-accent);
}
.flt-range::-moz-range-thumb {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--flt-accent); border: 2px solid var(--flt-ink);
    box-shadow: 0 0 0 1px var(--flt-accent);
}
.flt-range:focus-visible { outline: none; }
.flt-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(84, 199, 247, 0.45); }
.flt-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--flt-muted); margin-top: -2px; }

/* reset */
.flt-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.flt-reset {
    border: 1px solid var(--flt-line); background: transparent; color: var(--flt-muted);
    padding: 4px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.flt-reset:hover { color: var(--flt-text); background: rgba(255, 255, 255, 0.08); }
.flt-panel.flt-active .flt-reset { color: var(--flt-accent); border-color: rgba(84, 199, 247, 0.5); }

@media (max-width: 480px) {
    .flt-panel { width: 220px; }
}