/**
 * Vehicle Filter Builder — stile frontend, mobile-first.
 * Tutte le classi sono namespaced con "vf-" per evitare conflitti col
 * tema/builder in uso (Oxygen incluso), come richiesto dal documento.
 *
 * Nota tecnica sugli accordion/drawer: usiamo <details>/<summary> nativi
 * (niente JS necessario per apri/chiudi). Su desktop "forziamo" il
 * contenuto del drawer sempre visibile con la tecnica CSS
 * `details:not([open]) > *` per farlo diventare una sidebar statica,
 * indipendentemente dallo stato "open" dell'elemento — è lo stesso
 * markup/dati di base richiesto dal documento, solo un layout diverso
 * pilotato da breakpoint.
 */

:root {
	--vf-color-primary: #2563eb;
	--vf-color-primary-dark: #1d4ed8;
	/* Bottoni "Cerca"/"Applica": quasi-nero, distinto dal blu usato per gli
	   accenti (tab attiva, traccia slider, focus) — combinazione presa
	   dallo screenshot di riferimento condiviso, applicata sia
	   all'archivio che al widget home. */
	--vf-color-cta: #111827;
	--vf-color-cta-dark: #030712;
	--vf-color-accent: #e8672c;
	--vf-color-text: #1c1c1c;
	--vf-color-text-muted: #6b6b6b;
	--vf-color-border: #e0e0e0;
	--vf-color-surface: #ffffff;
	--vf-color-surface-alt: #f6f6f4;
	--vf-radius: 10px;
	--vf-radius-lg: 16px;
	--vf-touch-target: 44px;
	--vf-space-xs: 6px;
	--vf-space-sm: 10px;
	--vf-space-md: 16px;
	--vf-space-lg: 24px;
	--vf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.vf-archive {
	font-family: var(--vf-font);
	color: var(--vf-color-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--vf-space-md);
	box-sizing: border-box;
}

.vf-archive *,
.vf-archive *::before,
.vf-archive *::after {
	box-sizing: border-box;
}

.vf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/**
 * Checkbox "trigger" per popup/drawer, nascosta ma volutamente NON con
 * `display: none`: deve restare focalizzabile e attivabile da tastiera
 * (Tab + Spazio), a differenza di .vf-visually-hidden generico usato per
 * le label testuali. Il click sulla <label> associata la attiva/disattiva
 * esattamente come un bottone toggle, senza una riga di JavaScript.
 */
.vf-visually-hidden-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vf-visually-hidden-checkbox:focus-visible ~ .vf-chip__button {
	outline: 2px solid var(--vf-color-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Barra di ricerca
--------------------------------------------------------------------- */

.vf-search-row {
	margin-bottom: var(--vf-space-sm);
}

.vf-searchbar {
	width: 100%;
}

.vf-searchbar__input {
	width: 100%;
	min-height: var(--vf-touch-target);
	padding: 0 var(--vf-space-md);
	font-size: 16px;
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius-lg);
	background: var(--vf-color-surface);
}

.vf-searchbar__input:focus {
	outline: 2px solid var(--vf-color-primary);
	outline-offset: 1px;
}

/* Bottone "Visualizza filtri": mostra/nasconde il pannello filtri, solo
   su mobile (su desktop resta nascosto, le chip restano sempre visibili
   — vedi il breakpoint sotto). Sotto la barra di ricerca, a tutta
   larghezza — prima era un'icona hamburger di fianco alla ricerca,
   risultava poco chiara; testo esplicito invece dell'icona da sola.
   Stesso schema checkbox+label già usato ovunque nel plugin, nessun JS
   necessario. */
.vf-mobile-filters-toggle {
	display: none; /* sovrascritto sotto i 992px */
	align-items: center;
	justify-content: center;
	gap: var(--vf-space-xs);
	width: 100%;
	min-height: var(--vf-touch-target);
	margin-bottom: var(--vf-space-md);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius-lg);
	background: var(--vf-color-surface);
	color: var(--vf-color-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 991px) {
	.vf-mobile-filters-toggle {
		display: flex;
	}
}

/* Dicitura dinamica: "Visualizza filtri" quando il pannello è chiuso,
   "Nascondi filtri" quando è aperto — stesso schema :checked già usato
   per il drawer stesso (nessun JS, puro CSS). Di default (chiuso) mostra
   il testo "closed" e nasconde "open"; quando il checkbox è selezionato,
   inverte i due. */
.vf-mobile-filters-toggle__label-open {
	display: none;
}

#vf-drawer-toggle:checked ~ .vf-mobile-filters-toggle .vf-mobile-filters-toggle__label-closed {
	display: none;
}

#vf-drawer-toggle:checked ~ .vf-mobile-filters-toggle .vf-mobile-filters-toggle__label-open {
	display: inline;
}

/* ---------------------------------------------------------------------
   Riga di chip rapide (scrollabile orizzontalmente su mobile)
--------------------------------------------------------------------- */

.vf-quickchips {
	display: flex;
	gap: var(--vf-space-sm);
	overflow-x: auto;
	padding-bottom: var(--vf-space-sm);
	margin-bottom: var(--vf-space-sm);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	/* Sticky in alto durante lo scroll: la barra dei filtri rapidi resta
	   sempre a portata di mano invece di dover risalire alla ricerca ogni
	   volta. Il background è necessario perché altrimenti il contenuto
	   sottostante (risultati) sarebbe visibile "attraverso" durante lo
	   scroll. */
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--vf-color-surface);
	padding-top: var(--vf-space-xs);
}

/* Su mobile, la riga di chip rapide non serve più per i filtri veri e
   propri (i loro controlli vengono spostati dentro il drawer via JS —
   vedi vf-frontend.js e il commento su .vf-drawer__quick-section) né per
   "Altri filtri" (l'hamburger apre lo stesso drawer). Resta visibile
   solo "Ordina per", che non è un filtro e non ha un posto naturale nel
   drawer. Su desktop (992px+) tutto resta come prima. */
@media (max-width: 991px) {
	.vf-quickchips .vf-chip:not(.vf-chip--sort) {
		display: none;
	}
}

.vf-chip {
	position: relative;
	flex: 0 0 auto;
}

.vf-chip__button {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--vf-touch-target);
	padding: 0 var(--vf-space-md);
	background: var(--vf-color-surface);
	border: 1px solid var(--vf-color-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.vf-chip__button::-webkit-details-marker {
	display: none;
}

.vf-chip__toggle:checked ~ .vf-chip__button {
	background: var(--vf-color-primary);
	color: #fff;
	border-color: var(--vf-color-primary);
}

/* Backdrop dietro il popup, mostrato solo quando la checkbox è selezionata.
   Cliccarci sopra chiude il popup: essendo una <label> per la stessa
   checkbox, il click la deseleziona, senza bisogno di JavaScript.
   Usiamo opacity/visibility (non display:none/block) apposta: sono
   proprietà animabili, così apertura e chiusura possono avere una
   transizione fluida invece di scattare di colpo. */
.vf-chip__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 999;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.vf-chip__toggle:checked ~ .vf-chip__backdrop {
	opacity: 1;
	visibility: visible;
}

.vf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--vf-color-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

/**
 * Popup della singola chip: mini-pannello dedicato solo a quel filtro.
 *
 * Visibilità pilotata dalla checkbox associata (.vf-chip__toggle:checked),
 * non da <details>: questo ci permette di avere un pulsante "×" DENTRO il
 * popup che lo chiude (una <label> in più puntata alla stessa checkbox —
 * cliccarla la deseleziona), cosa che <details> non permette (si può
 * chiudere solo cliccando di nuovo il <summary> originale).
 *
 * `position: fixed` (bottom sheet su mobile, pannello centrato su desktop)
 * invece di `position: absolute` ancorato sotto la chip: la riga di chip
 * (.vf-quickchips) ha `overflow-x: auto` per lo scroll orizzontale, e
 * impostare l'overflow su un solo asse costringe il browser ad applicare
 * il clipping anche sull'altro asse — un popup absolute che debordi in
 * verticale verrebbe tagliato e reso invisibile.
 *
 * Stato chiuso con opacity/visibility (non display:none) + pointer-events:
 * none, per poter animare l'apertura (slide-up su mobile) con una
 * transizione invece di uno scatto istantaneo.
 */
.vf-chip__popup {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(16px);
	z-index: 1000;
	width: min(92vw, 420px);
	max-height: 75vh;
	overflow-y: auto;
	background: var(--vf-color-surface);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius-lg) var(--vf-radius-lg) 0 0;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
	padding: var(--vf-space-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.vf-chip__toggle:checked ~ .vf-chip__popup {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.vf-chip__popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--vf-space-sm);
	padding-bottom: var(--vf-space-sm);
	border-bottom: 1px solid var(--vf-color-border);
}

.vf-chip__popup-title {
	font-weight: 700;
	font-size: 15px;
}

/* Pulsante "×" di chiusura: una <label> puntata alla stessa checkbox del
   popup (o del drawer). Cliccarla la deseleziona esattamente come
   cliccare di nuovo il bottone che l'ha apert — è il modo per "uscire
   senza selezionare nulla" richiesto. */
.vf-chip__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vf-touch-target);
	height: var(--vf-touch-target);
	color: var(--vf-color-text-muted);
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
}

.vf-chip__close svg {
	display: block;
}

.vf-chip__close:hover {
	background: var(--vf-color-surface-alt);
}

.vf-chip__actions {
	display: flex;
	justify-content: space-between;
	gap: var(--vf-space-sm);
	margin-top: var(--vf-space-md);
}

/* ---------------------------------------------------------------------
   Bottoni
--------------------------------------------------------------------- */

.vf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--vf-touch-target);
	padding: 0 var(--vf-space-md);
	border-radius: var(--vf-radius);
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1;
}

.vf-btn--primary {
	background: var(--vf-color-cta);
	color: #fff;
}

.vf-btn--primary:hover {
	background: var(--vf-color-cta-dark);
}

.vf-btn--ghost {
	background: transparent;
	color: var(--vf-color-text);
	border-color: var(--vf-color-border);
}

.vf-btn--block {
	width: 100%;
}

/* ---------------------------------------------------------------------
   Chip dei filtri attivi (sopra la lista risultati)
--------------------------------------------------------------------- */

.vf-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vf-space-xs);
	min-height: 0;
	margin-bottom: var(--vf-space-md);
}

.vf-active-filters:empty {
	margin-bottom: 0;
}

.vf-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px var(--vf-space-sm);
	background: var(--vf-color-surface-alt);
	border-radius: 999px;
	font-size: 13px;
	animation: vf-fade-in 0.2s ease;
}

.vf-active-filter-chip button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: var(--vf-color-border);
	color: var(--vf-color-text);
	cursor: pointer;
	flex-shrink: 0;
}

.vf-active-filter-chip button svg {
	display: block;
}

/* ---------------------------------------------------------------------
   Layout principale: drawer + risultati (mobile: impilati)
--------------------------------------------------------------------- */

.vf-layout {
	display: flex;
	flex-direction: column;
	gap: var(--vf-space-lg);
}

/**
 * Drawer "Altri filtri": su mobile è un overlay a schermo intero, pilotato
 * dalla checkbox #vf-drawer-toggle (vedi in testa al form) — non da
 * <details>, perché il trigger (la chip "Altri filtri" nella quickchips
 * row) e il contenuto del drawer vivono in punti diversi della pagina, e
 * <details> può essere aperto/chiuso solo dal proprio <summary>. La
 * checkbox permette di collegarli tramite CSS (selettore di fratello
 * generale ~) e di avere comunque un pulsante "×" dentro il drawer stesso
 * per chiuderlo senza applicare nulla.
 */
.vf-drawer-wrapper {
	position: relative;
}

/**
 * Il drawer ora NON usa più display:none per lo stato chiuso: resta sempre
 * "grid" + "fixed" (fuori dal flusso, quindi non occupa spazio quando
 * invisibile), e passa da chiuso ad aperto animando opacity/visibility/
 * transform — proprietà animabili, a differenza di "display", che non
 * transiziona mai (passa da none a block/grid istantaneamente).
 */
.vf-drawer {
	/* Non più un overlay a schermo intero: su mobile vive nel flusso
	   normale della pagina, si apre "spingendo giù" il contenuto sotto
	   invece di sovrapporsi con uno sfondo scurito — richiesto perché un
	   popup risultava troppo invasivo su schermi piccoli. Chiuso di
	   default (display:none, non occupa spazio), l'hamburger lo apre
	   selezionando il checkbox qui sotto. */
	display: none;
	grid-template-rows: auto 1fr auto;
	background: var(--vf-color-surface);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius-lg);
	margin-bottom: var(--vf-space-md);
	overflow: hidden;
}

#vf-drawer-toggle:checked ~ .vf-layout .vf-drawer {
	display: grid;
}

.vf-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--vf-space-md) var(--vf-space-md) var(--vf-space-sm);
	border-bottom: 1px solid var(--vf-color-border);
}

.vf-drawer__title {
	font-weight: 700;
	font-size: 17px;
}

.vf-drawer__header-reset {
	/* Nascosto su desktop via il breakpoint più sotto — lì il Reset
	   resta solo in fondo, accanto ad Applica, come sempre. */
	display: inline-flex;
}

.vf-drawer__footer-reset {
	/* Nascosto su mobile: lo stesso Reset vive nell'header come "Azzera"
	   — evitare due bottoni Reset visibili contemporaneamente. */
	display: none;
}

.vf-drawer__body {
	min-height: 0; /* necessario nelle righe grid "1fr" per far funzionare lo scroll interno, esattamente come in flex */
	padding: 0 var(--vf-space-md);
}

/* Contenitore dei controlli spostati dalle chip rapide (solo mobile, via
   JS — vedi vf-frontend.js). Vuoto (e quindi invisibile, nessun margine
   sprecato) quando non contiene nulla, cioè su desktop dove i controlli
   restano nelle chip in alto. */
.vf-drawer__quick-section {
	display: flex;
	flex-direction: column;
	gap: var(--vf-space-lg);
}

.vf-drawer__quick-section:not(:empty) {
	padding: var(--vf-space-md) 0;
	margin-bottom: var(--vf-space-sm);
	border-bottom: 1px solid var(--vf-color-border);
}

.vf-drawer__footer {
	/* Sempre visibile in fondo, come richiesto dal documento ("bottone
	   fisso in fondo al drawer con conteggio live"): non scorre via col
	   contenuto perché è una riga grid a sé, fuori da .vf-drawer__body
	   (la sola riga scrollabile). */
	display: flex;
	gap: var(--vf-space-sm);
	padding: var(--vf-space-sm) var(--vf-space-md) var(--vf-space-md);
	border-top: 1px solid var(--vf-color-border);
}

/* Accordion per gruppo, dentro il drawer. */
.vf-accordion {
	border-bottom: 1px solid var(--vf-color-border);
	padding: var(--vf-space-sm) 0;
}

.vf-accordion__summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 17px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
}

.vf-accordion__summary::after {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-left: var(--vf-space-sm);
	border-right: 2px solid var(--vf-color-text-muted);
	border-bottom: 2px solid var(--vf-color-text-muted);
	transform: rotate(45deg); /* freccia verso il basso: gruppo chiuso */
	transition: transform 0.2s ease;
}

.vf-accordion[open] > .vf-accordion__summary::after {
	transform: rotate(-135deg); /* freccia verso l'alto: gruppo aperto */
}

.vf-accordion__summary::-webkit-details-marker {
	display: none;
}

.vf-accordion__body {
	padding-top: var(--vf-space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--vf-space-md);
}

/* ---------------------------------------------------------------------
   Controlli filtro (checkbox / range)
--------------------------------------------------------------------- */

/* Filtro bloccato (pagine-marca, es. /audi/ — vedi l'attributo
   shortcode `marca` e VF_Renderer::set_locked_filter): renderizzato
   normalmente nel markup (serve alla cascata Marca→Modello, che legge il
   valore dal form), ma mai visibile né interagibile dall'utente. Vale
   ovunque questo attributo compaia — chip rapide, "Altri filtri" — un
   solo punto invece di dover coprire ogni possibile posizione. */
[data-vf-locked-filter] {
	display: none !important;
}

.vf-filter {
	border: none;
	padding: 0;
	margin: 0;
}

.vf-filter__label {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: var(--vf-space-xs);
	padding: 0;
	display: block;
}

.vf-filter--select .vf-filter__select,
.vf-filter--boolean .vf-filter__select {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--vf-space-sm);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius);
	background: var(--vf-color-surface);
	font-size: 16px;
}

.vf-filter--multiselect .vf-filter__select--multiple {
	width: 100%;
	padding: var(--vf-space-xs);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius);
	background: var(--vf-color-surface);
	font-size: 15px;
}

.vf-filter--multiselect .vf-filter__select--multiple option {
	padding: 6px var(--vf-space-xs);
	border-radius: 4px;
}

.vf-filter--multiselect .vf-filter__select--multiple option:checked {
	background: var(--vf-color-primary);
	color: #fff;
}

.vf-filter--multiselect .vf-filter__hint {
	font-size: 11px;
	color: var(--vf-color-text-muted);
	margin-top: 4px;
}

.vf-filter__number-input {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--vf-space-sm);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius);
	background: var(--vf-color-surface);
	font-size: 16px;
	-moz-appearance: textfield;
}

/* Nasconde le freccette incremento/decremento del browser sugli input
   numerici: con placeholder come "Min"/"Max" risultano solo rumore visivo. */
.vf-filter__number-input::-webkit-outer-spin-button,
.vf-filter__number-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vf-filter--number-range .vf-filter__number-range-inputs {
	display: flex;
	align-items: center;
	gap: var(--vf-space-xs);
}

.vf-filter__number-range-sep {
	color: var(--vf-color-text-muted);
	flex-shrink: 0;
}

.vf-filter__search-input {
	width: 100%;
	min-height: 40px;
	padding: 0 var(--vf-space-sm);
	margin-bottom: var(--vf-space-xs);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius);
	background: var(--vf-color-surface);
	font-size: 14px;
}

.vf-filter__search-input:focus {
	outline: 2px solid var(--vf-color-primary);
	outline-offset: 1px;
}

.vf-filter__options {
	display: flex;
	flex-direction: column;
	gap: var(--vf-space-xs);
	max-height: 260px;
	overflow-y: auto;
}

.vf-filter__option {
	display: flex;
	align-items: flex-start;
	gap: var(--vf-space-sm);
	min-height: 48px;
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
	/* Senza questo, Flexbox può comprimere ogni opzione oltre la sua
	   altezza naturale di contenuto quando la somma di tutte le opzioni
	   supera il max-height del contenitore (.vf-filter__options) — il
	   contenuto compresso poi trabocca visivamente, sovrapponendosi alle
	   righe vicine. flex-shrink:0 impedisce la compressione: il
	   contenitore semplicemente scorre (overflow-y:auto) invece di
	   schiacciare i suoi elementi. */
	flex-shrink: 0;
}

.vf-filter__option input {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	margin-top: 2px; /* allinea il checkbox alla prima riga del testo, non al centro del blocco intero */
}

.vf-filter__option span {
	flex: 1 1 auto;
	min-width: 0; /* essenziale per far andare a capo correttamente un testo lungo in un figlio flex — senza, il testo può sbordare invece di wrappare, sovrapponendosi alle righe/opzioni sotto */
	padding: 6px 0; /* respiro verticale quando il testo occupa più righe */
}

.vf-filter__option--no-match {
	display: none;
}

.vf-filter__option--hidden {
	display: none;
}

.vf-filter__toggle-more {
	margin-top: var(--vf-space-xs);
	background: none;
	border: none;
	color: var(--vf-color-primary);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
}

.vf-filter__empty-message {
	font-size: 13px;
	color: var(--vf-color-text-muted);
}

.vf-filter__range-values {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: var(--vf-space-xs);
}

.vf-filter__sliders {
	position: relative;
	height: 32px;
}

.vf-filter__track {
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--vf-color-border);
	border-radius: 999px;
	pointer-events: none;
}

/* Fascia "disponibile" (Fase 4): il range in cui si trovano realmente i
   veicoli, nel contesto degli ALTRI filtri attivi — solo un'anteprima,
   non sposta mai i cursori (vedi commento in class-vf-shortcode-archive.php
   su perché farlo aveva causato un bug). Più chiara della selezione. */
.vf-filter__track-available {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #b9d4cc; /* fallback per browser senza color-mix() */
	background: color-mix(in srgb, var(--vf-color-primary) 25%, transparent);
	border-radius: 999px;
}

.vf-filter__track-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: transparent; /* visibile solo con .is-active: senza selezione attiva coprirebbe per intero la fascia "disponibile" sottostante, rendendola invisibile — esattamente il problema riscontrato in test */
	border-radius: 999px;
}

.vf-filter--range.is-active .vf-filter__track-fill {
	background: var(--vf-color-primary);
}

.vf-filter__slider {
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: var(--vf-touch-target);
	appearance: none;
	background: transparent;
	pointer-events: none;
}

.vf-filter__slider::-webkit-slider-thumb {
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vf-color-primary);
	cursor: pointer;
	pointer-events: auto;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vf-filter__slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vf-color-primary);
	cursor: pointer;
	pointer-events: auto;
	border: 2px solid #fff;
}

.vf-filter__hint {
	font-size: 12px;
	color: var(--vf-color-text-muted);
	margin-top: var(--vf-space-xs);
}

/* ---------------------------------------------------------------------
   Sheet "Ordina per" (separato dal pannello filtri)
--------------------------------------------------------------------- */

.vf-sort-option {
	display: flex;
	align-items: center;
	gap: var(--vf-space-xs);
	min-height: 40px;
	font-size: 14px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Risultati
--------------------------------------------------------------------- */

.vf-results__grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--vf-space-md);
	/* Quando applyFilters() sposta la vista qui (vedi vf-frontend.js,
	   scrollToResults), questo margine evita che la griglia finisca
	   nascosta sotto la barra sticky in alto (ricerca/hamburger/chip). Un
	   valore approssimativo, non calcolato dinamicamente — sufficiente a
	   evitare la sovrapposizione più fastidiosa. */
	scroll-margin-top: 70px;
}

.vf-result-card {
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius);
	overflow: hidden;
	background: var(--vf-color-surface);
	/* Un'animazione con questo nome si riattiva ogni volta che l'elemento
	   entra nel DOM (anche via innerHTML da AJAX) — non serve JS per far
	   apparire le card con un fade invece che di colpo. */
	animation: vf-fade-in 0.25s ease;
}

@keyframes vf-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.vf-result-card__thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.vf-result-card__thumb-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--vf-color-surface-alt);
}

.vf-result-card__title {
	font-size: 14px;
	font-weight: 600;
	margin: var(--vf-space-sm) var(--vf-space-sm) 4px;
}

.vf-result-card__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--vf-color-primary-dark);
	margin: 0 var(--vf-space-sm) var(--vf-space-sm);
}

.vf-load-more {
	display: block;
	width: 100%;
	min-height: var(--vf-touch-target);
	margin-top: var(--vf-space-lg);
	padding: 0 var(--vf-space-md);
	background: var(--vf-color-surface);
	border: 1px solid var(--vf-color-primary);
	color: var(--vf-color-primary);
	border-radius: var(--vf-radius);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.vf-load-more:hover {
	background: var(--vf-color-surface-alt);
}

.vf-load-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

.vf-results__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--vf-space-lg) var(--vf-space-md);
	background: var(--vf-color-surface-alt);
	border: 1px dashed var(--vf-color-border);
	border-radius: var(--vf-radius-lg);
	animation: vf-fade-in 0.25s ease;
}

.vf-results__empty-title {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 6px;
	color: var(--vf-color-text);
}

.vf-results__empty-hint {
	margin: 0;
	color: var(--vf-color-text-muted);
	font-size: 14px;
}

/* Skeleton (nascosto in questa fase, pronto per la Fase 3). */
.vf-result-card--skeleton {
	height: 180px;
	background: linear-gradient(90deg, var(--vf-color-surface-alt) 25%, #eeeeee 37%, var(--vf-color-surface-alt) 63%);
	background-size: 400% 100%;
	animation: vf-skeleton-shimmer 1.4s ease infinite;
}

@keyframes vf-skeleton-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.vf-result-card--skeleton {
		animation: none;
	}

	.vf-chip__backdrop,
	.vf-chip__popup,
	.vf-drawer,
	.vf-result-card {
		transition: none !important;
		animation: none !important;
	}
}

/* =======================================================================
   Breakpoint desktop
======================================================================= */

@media (min-width: 992px) {

	.vf-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	/* Il drawer diventa una sidebar statica sempre visibile, invece di un
	   overlay: stesso markup/dati, layout pilotato da breakpoint. Mostriamo
	   sempre il contenuto, indipendentemente dallo stato della checkbox. */
	.vf-drawer-wrapper {
		flex: 0 0 300px;
	}

	.vf-drawer,
	#vf-drawer-toggle:checked ~ .vf-layout .vf-drawer {
		/* IMPORTANTE: qui è l'intero drawer a essere sticky (non solo il
		   body). Prima era sticky solo .vf-drawer__body: quando la pagina
		   scorre, un elemento sticky resta visivamente ancorato al
		   viewport, ma un fratello NON sticky (il footer) continua a
		   seguire il flusso normale della pagina — i due finiscono per
		   sovrapporsi sullo schermo, perché "sticky" non li tiene
		   sincronizzati tra loro. Rendendo sticky il contenitore intero
		   (con grid a righe auto/1fr/auto, stesso schema del mobile),
		   header/body/footer si muovono sempre insieme come un unico
		   blocco, e solo la riga centrale scrolla al suo interno. */
		display: grid;
		grid-template-rows: auto 1fr auto;
		position: sticky;
		top: var(--vf-space-md);
		max-height: calc(100vh - var(--vf-space-lg) * 2);
		inset: auto;
		height: auto; /* sovrascrive esplicitamente il 100dvh della regola mobile, altrimenti resterebbe attivo anche qui */
		background: var(--vf-color-surface);
		border: 1px solid var(--vf-color-border);
		border-radius: var(--vf-radius-lg);
		padding: var(--vf-space-md);
		z-index: auto;
		overflow: hidden; /* lo scroll vive solo nella riga centrale, .vf-drawer__body */
		/* Reset esplicito dell'animazione apri/chiudi mobile: su desktop la
		   sidebar è sempre visibile, indipendentemente dallo stato della
		   checkbox (niente fade/slide, niente pointer-events:none). */
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.vf-drawer__body {
		min-height: 0; /* necessario nelle righe grid "1fr" perché lo scroll interno funzioni */
		max-height: none; /* qui l'altezza la governa il contenitore sticky sopra (calc(100vh - ...)), non un tetto fisso sul body */
		overflow-y: auto;
	}

	/* Su desktop torna la disposizione originale: Reset in fondo accanto
	   ad Applica (mai stato un problema di spazio lì, la sidebar è
	   sempre visibile), niente "Azzera" nell'header. */
	.vf-drawer__header-reset {
		display: none;
	}

	.vf-drawer__footer-reset {
		display: inline-flex;
	}

	.vf-results {
		flex: 1 1 auto;
	}

	.vf-results__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Su desktop la chip "Altri filtri" nella quickchips row non serve più
	   (la sidebar è sempre visibile): la nascondiamo per evitare un
	   controllo ridondante. */
	.vf-chip--more {
		display: none;
	}

	/* Su desktop il popup della chip diventa una piccola modale centrata
	   che si apre con un leggero effetto scala, invece del bottom sheet
	   mobile (stesso markup, animazione diversa). Definiamo qui anche lo
	   stato CHIUSO (non solo quello aperto): senza, l'animazione partirebbe
	   dalla posizione "bottom sheet" ereditata dalle regole mobile invece
	   che da un fade+scala centrato, dando uno strappo visivo indesiderato. */
	.vf-chip__popup {
		left: 50%;
		bottom: auto;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.96);
		border-radius: var(--vf-radius-lg);
		max-height: 60vh;
	}

	.vf-chip__toggle:checked ~ .vf-chip__popup {
		left: 50%;
		bottom: auto;
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
		border-radius: var(--vf-radius-lg);
		max-height: 60vh;
	}
}

@media (min-width: 1200px) {
	.vf-results__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Breakpoint intermedio "tablet": tra il layout mobile a colonna unica e
   la sidebar desktop (992px) il passaggio da 2 a 3 colonne dei risultati
   avviene solo a 992px insieme al cambio di layout — su tablet (schermi
   tra ~700 e 992px, ancora in modalità drawer/overlay) tre colonne stanno
   comodamente e sarebbe uno spreco di spazio restare a due. */
@media (min-width: 700px) and (max-width: 991px) {
	.vf-results__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Focus-visible coerente su tutti i controlli interattivi (solo da
   tastiera: :focus-visible non si attiva sul click del mouse, evitando il
   contorno "sempre visibile" che infastidisce con l'interazione touch). */
.vf-archive button:focus-visible,
.vf-archive input:focus-visible,
.vf-archive select:focus-visible,
.vf-archive a:focus-visible,
.vf-archive label:focus-visible {
	outline: 2px solid var(--vf-color-primary);
	outline-offset: 2px;
}

/* =======================================================================
   Widget Home (Fase 7) — [filtro_veicoli_home]
   Riusa le variabili e le classi vf-filter / vf-btn già definite sopra
   per i singoli controlli (checkbox, select, range), qui solo il layout
   proprio del widget: tab categoria, tab condizione, form.
======================================================================= */

.vf-home-widget {
	font-family: var(--vf-font);
	max-width: 900px;
	margin: 0 auto;
}

.vf-home-cat-tabs,
.vf-home-cond-tabs {
	display: flex;
	gap: var(--vf-space-lg);
	margin-bottom: var(--vf-space-lg);
	flex-wrap: wrap;
	border-bottom: 1px solid var(--vf-color-border);
}

/* Le tab sono radio nativi nascosti + label stilizzate come testo con
   sottolineatura: unico modo per avere sia "solo una selezionata alla
   volta" sia zero JS. */
.vf-home-cat-radio,
.vf-home-cond-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vf-home-cat-label,
.vf-home-cond-label {
	display: inline-flex;
	align-items: center;
	min-height: var(--vf-touch-target);
	padding: 0 0 var(--vf-space-sm) 0;
	margin-bottom: -1px; /* la sottolineatura attiva si sovrappone al border-bottom della riga */
	border: none;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: 14px;
	color: var(--vf-color-text-muted);
	cursor: pointer;
	background: none;
}

.vf-home-cat-label {
	font-size: 16px;
}

.vf-home-cat-radio:checked + .vf-home-cat-label,
.vf-home-cond-radio:checked + .vf-home-cond-label {
	background: none;
	color: var(--vf-color-primary);
	border-bottom-color: var(--vf-color-primary);
}

.vf-home-cat-label:hover,
.vf-home-cond-label:hover {
	color: var(--vf-color-text);
}

.vf-home-cat-radio:focus-visible + .vf-home-cat-label,
.vf-home-cond-radio:focus-visible + .vf-home-cond-label {
	outline: 2px solid var(--vf-color-primary);
	outline-offset: 2px;
}

.vf-home-cat-block {
	background: var(--vf-color-surface);
	border: 1px solid var(--vf-color-border);
	border-radius: var(--vf-radius-lg);
	padding: var(--vf-space-lg);
}

.vf-home-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vf-space-md);
	margin: var(--vf-space-md) 0;
}

.vf-home-field .vf-filter__options {
	max-height: 180px;
}

/**
 * Stile "ghost" dei campi — SOLO nel widget home (selettori scoped con
 * .vf-home-widget come antenato): niente riquadro, solo una sottile
 * sottolineatura, etichetta piccola maiuscola sopra. Lo stile dell'
 * archivio (stesse classi .vf-filter__select/.vf-filter__number-input)
 * resta quello con il riquadro pieno, invariato.
 */
.vf-home-widget .vf-filter__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--vf-color-text-muted);
	margin-bottom: 6px;
}

.vf-home-widget .vf-filter__select,
.vf-home-widget .vf-filter__number-input {
	border: none;
	border-bottom: 1px solid var(--vf-color-border);
	border-radius: 0;
	padding: 4px 0;
	background: transparent;
	font-size: 16px;
	color: var(--vf-color-text);
}

.vf-home-widget .vf-filter__select:focus,
.vf-home-widget .vf-filter__number-input:focus {
	outline: none;
	border-bottom-color: var(--vf-color-primary);
}

.vf-home-widget .vf-filter__number-input::placeholder {
	color: var(--vf-color-text-muted);
}

.vf-home-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vf-space-xs);
}

.vf-home-submit svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.vf-home-warning {
	margin-top: var(--vf-space-sm);
	font-size: 13px;
	color: var(--vf-color-accent);
}

@media (min-width: 700px) {
	.vf-home-fields {
		/* Numero di colonne configurabile per categoria (Filtri Veicoli →
		   Widget Home → "Colonne"), scritto come variabile inline da
		   VF_Shortcode_Home. Fallback a 2 se non impostata. */
		grid-template-columns: repeat(var(--vf-home-columns, 2), 1fr);
	}

	.vf-home-submit {
		width: auto;
		padding: 0 var(--vf-space-lg);
	}
}