/* ── FILTRI BAR ─────────────────────────────────────── */
.filtri-bar {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 60px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.filtri-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* Chips categorie */
.filtri-cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.filtri-cats::-webkit-scrollbar { display: none; }

.cat-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #555;
    background: #f5f6fa;
    border: 2px solid transparent;
    transition: .15s;
    white-space: nowrap;
}
.cat-chip:hover { border-color: #ff6b4a; color: #ff6b4a; }
.cat-chip.active {
    background: #ff6b4a;
    color: #fff;
    border-color: #ff6b4a;
}

/* Filtri row */
.filtri-row {
    display: flex;
    gap: 10px;
    padding: 8px 0 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filtro-group { display: flex; align-items: center; gap: 6px; }

.filtro-select {
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    outline: none;
    color: #333;
    transition: .15s;
}
.filtro-select:focus, .filtro-select:hover { border-color: #ff6b4a; }

/* Raggio slider */
.filtro-raggio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}
.filtro-raggio label { white-space: nowrap; min-width: 160px; }
.filtro-raggio input[type=range] {
    width: 100px;
    accent-color: #ff6b4a;
}

/* Reset link */
.filtro-reset {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    transition: .15s;
}
.filtro-reset:hover { color: #ff4757; border-color: #ff4757; }

/* Pulsante segnalazione sulle card */
.segnala-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color .15s;
}
.segnala-btn:hover { color: #ff4757; }

@media (max-width: 600px) {
    .filtro-raggio label { min-width: 120px; }
    .filtro-raggio input[type=range] { width: 70px; }
}
/* ── SCROLL CATEGORIE — aggiungere in fondo a assets/css/filtri.css ── */

/* Wrapper con frecce */
.filtri-cats-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Frecce desktop */
.filtri-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: .15s;
    user-select: none;
}
.filtri-arrow:hover { background:#ff6b4a; color:#fff; border-color:#ff6b4a; }
.filtri-arrow.left  { left: 0; }
.filtri-arrow.right { right: 0; }
.filtri-arrow.hidden { opacity:0; pointer-events:none; }

/* Su mobile nascondi le frecce */
@media (max-width: 768px) {
    .filtri-arrow { display: none; }
    .filtri-cats-wrap { position: static; }
}

/* Padding laterale per non coprire le chip con le frecce (desktop) */
@media (min-width: 769px) {
    .filtri-cats {
        padding-left: 40px;
        padding-right: 40px;
    }
}