/*
 * Meta Filter — aspetto.
 *
 * Quattro cose da sapere prima di toccare questo file.
 *
 * 1) .mfl-card NON HA sfondo, bordo, raggio né ombra, e non deve averli.
 *    Dentro ogni .mfl-card sta un Container di Elementor, ed è QUELLO che
 *    l'utente veste dalla sua scheda Stile. Dare un aspetto anche al riquadro
 *    esterno farebbe spuntare da sotto un bordo doppio o un angolo quadrato
 *    dietro uno arrotondato: un difetto che non si riesce nemmeno a descrivere.
 *
 * 2) C'È UNA SOLA FORMA DEI FILTRI, IN DUE VESTITI.
 *    Una barra con il totale a sinistra e il pulsante «Filtri» a destra. Il
 *    pannello che si apre è lo STESSO nodo del DOM in tutti e due i casi:
 *      schermo largo   → tendina ancorata sotto il pulsante (position:absolute)
 *      schermo stretto → foglio che sale dal basso (showModal, top layer)
 *    Prima i filtri stavano aperti in pagina su desktop; con 65 voci diventava
 *    un muro. Ora dentro la tendina ci sono TUTTI i gruppi, comuni compresi.
 *
 * 3) TUTTE LE VOCI SONO RIGHE, non più pillole.
 *    In una tendina larga ~420px le pillole andrebbero a capo in modo
 *    irregolare — è il disordine da cui siamo partiti. Una riga per voce si
 *    legge in colonna, si cerca con gli occhi e regge 65 voci senza sforzo.
 *
 * 4) OGNI <button> DI QUESTO PLUGIN SI SCRIVE «.mfl .mfl-qualcosa», MAI
 *    «.mfl-qualcosa» DA SOLO.
 *    Elementor stampa gli stili globali dei pulsanti come
 *    «.elementor-kit-6 button», che è UNA CLASSE PIÙ UN TIPO: più specifico di
 *    una nostra classe sola, quindi vinceva lui. Sul sito vero riempiva i
 *    nostri pulsanti di padding 10px 20px e ne cancellava lo sfondo — è la
 *    ragione per cui la «×» delle chip sembrava fuori centro (il padding
 *    asimmetrico spostava il cerchietto, non l'icona dentro di esso).
 *    La classe del contenitore davanti basta a riprendersi la precedenza, e
 *    resta comunque SOTTO i selettori che Elementor genera per le impostazioni
 *    del pannello Stile ({{WRAPPER}} .mfl-trigger), che devono continuare a
 *    vincere: sono le scelte dell'utente.
 *
 * 5) LE ICONE DENTRO I CERCHIETTI SONO CENTRATE CON grid + place-items.
 *    Non con line-height, non con transform a percentuali "aggiustate a
 *    occhio": erano proprio quelle a far sembrare storte la «×» e i numerini
 *    (il pulsante di chiusura aveva un translateY(-30%) invece di -50%).
 *    Ogni <svg> dentro un cerchietto ha display:block e misure esplicite,
 *    altrimenti resta un elemento in linea appoggiato alla base del testo e
 *    si porta dietro qualche pixel di discesa che lo scentra in basso.
 */

.mfl {
	--mfl-gap: 24px;
	--mfl-bar-gap: 24px;
	--mfl-divider: rgba(38, 40, 87, .10);
	--mfl-line: rgba(38, 40, 87, .16);
	--mfl-accent: #262857;
	--mfl-accent-ink: #fff;
	--mfl-trigger-line: #e2e3ec;
	--mfl-chip-bg: #f4f5fb;
	--mfl-focus: #402657;
	--mfl-ease: cubic-bezier(.4, 0, .2, 1);
	--mfl-t: 180ms;
	--mfl-pop-w: 420px;

	position: relative;
}

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

/* Avviso di sola redazione. Sul sito pubblicato non compare mai. */
.mfl-warn {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid #f0c36d;
	border-left-width: 4px;
	border-radius: 8px;
	background: #fff8e6;
	color: #6b4e00;
	font-size: 13px;
	line-height: 1.5;
}

.mfl-warn em { font-style: normal; font-weight: 700; }
.mfl-warn span { opacity: .7; }

/* ================================================================ la barra */

.mfl-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	position: relative; /* àncora della tendina */
	margin: 0 0 var(--mfl-bar-gap);
}

.mfl-results {
	margin: 0;
	color: #8a92a6;
	font-size: 14px;
	line-height: 1.4;
}

/* --------------------------------------------------- il pulsante «Filtri» */

.mfl .mfl-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid var(--mfl-trigger-line);
	border-radius: 100px;
	background: #fff;
	color: var(--mfl-accent);
	font: inherit;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--mfl-t) var(--mfl-ease), background-color var(--mfl-t) var(--mfl-ease);
	-webkit-tap-highlight-color: transparent;
}

.mfl .mfl-trigger:hover { border-color: #c3c5d4; background: #fafafd; }

/* L'icona prende il colore del testo — è la stessa impostazione «Testo e
   icona» del pannello Stile, e un grigio a parte la farebbe sbiadire su un
   pulsante bianco. */
.mfl-trigger__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: inherit;
}

.mfl-trigger__icon svg { display: block; }

.mfl-trigger__label { line-height: 1; }

/* Il numero dei filtri attivi. grid + place-items + line-height:1 e nessun
   ritocco a percentuale: è così che resta al centro del cerchio a qualunque
   corpo del testo. */
.mfl-trigger__badge {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 100px;
	background: var(--mfl-accent);
	color: var(--mfl-accent-ink);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
}

.mfl-trigger__badge[hidden] { display: none; }

/* =============================================== il pannello (due vestiti) */

.mfl-panel {
	display: block;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	z-index: 40;
	width: min(var(--mfl-pop-w), calc(100vw - 32px));
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mfl-divider);
	border-radius: 18px;
	background: #fff;
	color: inherit;
	box-shadow: 0 18px 50px rgba(38, 40, 87, .14);
	overflow: hidden;
}

/* Un <dialog> senza `open` è display:none: va ripetuto perché la regola sopra
   imposta display e vincerebbe. */
.mfl-panel:not([open]) { display: none; }

/* --- testata: solo nel foglio dal basso --- */
.mfl-panel__head {
	display: none;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 auto;
	padding: 20px 56px 16px;
	border-bottom: 1px solid var(--mfl-divider);
}

.mfl-panel__handle {
	position: absolute;
	top: 9px;
	left: 50%;
	width: 40px;
	height: 4px;
	border-radius: 100px;
	background: rgba(38, 40, 87, .18);
	transform: translateX(-50%);
}

.mfl-panel__title { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.2; }

/* translateY(-50%), non -30%: il -30% era un ritocco a occhio ed è la ragione
   per cui la «×» sembrava fuori centro nel suo cerchio. */
.mfl .mfl-panel__close {
	display: grid;
	place-items: center;
	position: absolute;
	top: 50%;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: #8a92a6;
	cursor: pointer;
	transform: translateY(-50%);
}

.mfl-panel__close svg { display: block; }
.mfl .mfl-panel__close:hover { background: rgba(38, 40, 87, .06); color: #262857; }

/* --- ricerca: una sola, per tutte le voci di tutti i gruppi --- */
.mfl-panel__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 13px 16px;
	border-bottom: 1px solid var(--mfl-divider);
	color: #8a92a6;
}

.mfl-panel__search > svg { display: block; flex: 0 0 auto; }

/* appearance:none toglie la crocetta nativa di <input type="search">, che in
   Safari si sovrappone al testo dentro un campo senza bordi come questo. */
.mfl-panel__search input {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: #262857;
	font: inherit;
	font-size: 14.5px;
	-webkit-appearance: none;
	appearance: none;
}

.mfl-panel__search input::-webkit-search-cancel-button { display: none; }

/*
 * 16px, non 14.5, appena il dito è il modo di puntare.
 *
 * Su iPhone Safari ingrandisce la pagina da solo quando si mette il cursore in
 * un campo scritto sotto i 16px, e da quell'ingrandimento non torna indietro:
 * si finiva a scrivere in un foglio dei filtri più larga dello schermo. Non si
 * risolve con maximum-scale nel <meta viewport> — che è del tema, non nostro, e
 * toglierebbe a tutti la possibilità di ingrandire la pagina a mano.
 * (pointer: coarse) è esattamente la condizione in cui il difetto esiste, e
 * lascia il campo a 14.5px dove si scrive col mouse.
 */
@media (pointer: coarse) {
	.mfl .mfl-panel__search input { font-size: 16px; }
}

.mfl-panel__body {
	flex: 1 1 auto;
	max-height: 360px;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Il magazzino dei <defs> dei loghi SVG (v. hoistSvgDefs in meta-filter.js).
 *
 * NON si nasconde con display:none, e non è una dimenticanza: da un
 * sottoalbero display:none maschere e ritagli SVG non dipingono più, che è
 * esattamente il difetto che questo elemento serve a evitare. Zero per zero
 * pixel e fuori dal flusso: non si vede e non sposta nulla, ma per il browser
 * è disegnato.
 */
.mfl-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ================================================================ i gruppi */

.mfl-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.mfl-group[hidden] { display: none; }

.mfl-group + .mfl-group {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--mfl-divider);
}

/* Volutamente un <div role="group"> con aria-labelledby e non un
   <fieldset><legend>: per un lettore di schermo sono la stessa cosa, ma il
   browser incastra il <legend> NEL bordo del fieldset e la riga di
   separazione finirebbe per attraversare l'etichetta. */
.mfl-group__label {
	display: block;
	margin: 0;
	padding: 10px 12px 6px;
	color: #8a92a6;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-transform: uppercase;
}

/* ============================================================== una voce */

.mfl .mfl-opt {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: #262857;
	font: inherit;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--mfl-t) var(--mfl-ease);
	-webkit-tap-highlight-color: transparent;
}

.mfl .mfl-opt:hover { background: #faf8ff; }
.mfl-opt[hidden] { display: none; }

/* La casella vera resta nel markup — dà il comportamento da spunta, il Tab e
   la barra spaziatrice — ma non si vede. Niente display:none: toglierebbe
   l'elemento dall'ordine di tabulazione. */
.mfl-opt__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.mfl-opt__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border: 1.5px solid var(--mfl-line);
	border-radius: 6px;
	color: var(--mfl-accent-ink);
	transition: background-color var(--mfl-t) var(--mfl-ease), border-color var(--mfl-t) var(--mfl-ease);
}

.mfl-opt__box svg { display: block; width: 11px; height: 11px; opacity: 0; transition: opacity var(--mfl-t) var(--mfl-ease); }

.mfl-opt.is-on .mfl-opt__box { border-color: var(--mfl-accent); background: var(--mfl-accent); }
.mfl-opt.is-on .mfl-opt__box svg { opacity: 1; }

.mfl-opt__label { flex: 1 1 auto; min-width: 0; }
.mfl-opt.is-on .mfl-opt__label { font-weight: 700; color: var(--mfl-accent); }

/* Voce che non porterebbe da nessuna parte: leggibile ma non invitante, e non
   si nasconde — sparire e ricomparire mentre si sceglie è peggio. */
.mfl-opt.is-empty { opacity: .34; cursor: not-allowed; }
.mfl-opt.is-empty:hover { background: none; }

/* «Tutti»: sceglie in un colpo tutte le voci del gruppo, e un secondo tocco le
   toglie. È un <button> e non una casella, perché non è una voce fra le altre
   ma un comando che agisce su di loro — con aria-pressed un lettore di schermo
   lo annuncia come pulsante a due stati. La casella tratteggiata dice, senza
   scriverlo, che sta su un piano diverso. */
.mfl-opt--all .mfl-opt__box { border-style: dashed; }
.mfl-opt--all.is-on .mfl-opt__box { border-style: solid; }
.mfl-opt--all .mfl-opt__label { font-weight: 600; }

.mfl-opt:has(.mfl-opt__input:focus-visible),
.mfl-opt--all:focus-visible,
.mfl-trigger:focus-visible,
.mfl-clear:focus-visible,
.mfl-apply:focus-visible,
.mfl-token__x:focus-visible,
.mfl-panel__close:focus-visible {
	outline: 2px solid var(--mfl-focus);
	outline-offset: -2px;
}

@supports not selector(:has(*)) {
	.mfl-opt__input:focus-visible {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		outline: 2px solid var(--mfl-focus);
		outline-offset: -2px;
	}
}

.mfl-empty-search {
	margin: 0;
	padding: 20px 16px 24px;
	color: #8a92a6;
	font-size: 13.5px;
	text-align: center;
}

.mfl-empty-search[hidden] { display: none; }

/* ============================================ le voci scelte, sotto la barra */

/*
 * Le chip stanno STACCATE dalla barra, non appiccicate sotto il pulsante.
 *
 * Prima c'era un margine negativo (-8px) che le tirava verso l'alto: con una
 * riga sola passava, ma appena le voci scelte vanno a capo — e su telefono
 * bastano tre voci — il gruppo di chip finiva a sfiorare il pulsante «Filtri» e
 * si leggeva come un pezzo dello stesso blocco.
 *
 * Il margine di sopra si scrive come «distanza della barra + 12px» e non come
 * 12px secchi perché fra due fratelli in colonna i margini si FONDONO: vale il
 * più grande dei due, non la somma. Con margin-top: 12px il risultato sarebbe
 * rimasto 24px — quello della barra — e la modifica non si sarebbe vista. (Il
 * -8px di prima si fondeva allo stesso modo, ma essendo negativo si sottraeva:
 * 24 − 8 = 16px, ed è da lì che veniva l'effetto «appiccicate».)
 */
.mfl-tokens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: calc(var(--mfl-bar-gap) + 12px) 0 var(--mfl-bar-gap);
}

.mfl-tokens[hidden] { display: none; }

.mfl-token {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 13px;
	border-radius: 100px;
	background: var(--mfl-chip-bg);
	color: var(--mfl-accent);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
}

/* Il cerchietto della «×»: stesse regole del numerino sul pulsante — grid,
   place-items, misure fisse e svg a display:block. */
.mfl .mfl-token__x {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: rgba(38, 40, 87, .08);
	color: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--mfl-t) var(--mfl-ease);
}

.mfl-token__x svg { display: block; }
.mfl .mfl-token__x:hover { background: rgba(38, 40, 87, .18); }

/* ================================================================= il fondo */

.mfl-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 12px 16px;
	border-top: 1px solid var(--mfl-divider);
	background: #fff;
}

.mfl .mfl-clear {
	padding: 6px 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #402657;
	font: inherit;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	white-space: nowrap;
}

.mfl-clear[hidden] { display: none; }
.mfl .mfl-clear:hover { color: #262857; }

.mfl .mfl-apply {
	flex: 1 1 auto;
	padding: 13px 22px;
	border: 0;
	border-radius: 100px;
	background: var(--mfl-accent);
	color: var(--mfl-accent-ink);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

/* ======================================================= griglia e risultati */

.mfl-grid {
	display: grid;
	grid-template-columns: repeat(var(--mfl-cols, 3), minmax(0, 1fr));
	column-gap: var(--mfl-gap-col, var(--mfl-gap, 24px));
	row-gap: var(--mfl-gap-row, var(--mfl-gap, 24px));
}

.mfl-card {
	min-width: 0;
	/* Nessuno sfondo, nessun bordo, nessun raggio: v. la nota (1) in cima. */
}

/* Ogni regola che tocca `display` esclude le card nascoste, così l'attributo
   [hidden] del browser non viene mai sovrascritto: è il modo più solido di
   nasconderle senza ricorrere a !important. */
.mfl--stretch .mfl-card:not([hidden]) { display: flex; flex-direction: column; }
.mfl--stretch .mfl-card:not([hidden]) > * { flex: 1 1 auto; }

/* Lo stato a riposo è «visibile e ferma»: l'animazione aggiunge soltanto, e il
   JS toglie comunque la classe dopo un attimo. Così, se il browser congela le
   animazioni — come fa in una scheda non in primo piano — non può restare una
   card invisibile. */
@keyframes mfl-card-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.mfl-card--in { animation: mfl-card-in .26s var(--mfl-ease); }

.mfl-empty {
	padding: 48px 24px;
	border: 1px dashed var(--mfl-divider);
	border-radius: 20px;
	text-align: center;
}

.mfl-empty[hidden] { display: none; }
.mfl-empty__title { margin: 0 0 8px; color: #262857; font-weight: 700; font-size: 20px; }
.mfl-empty__text { margin: 0; color: #8a92a6; font-size: 15px; }
.mfl-clear--empty { margin-top: 12px; }

/* ============================================ il foglio che sale dal basso */
/*
 * Vale solo quando il pannello è stato aperto con showModal(): su schermo largo
 * non succede mai, quindi niente media query — è lo stato dell'elemento a fare
 * da interruttore. .is-open è il ripiego per i browser senza showModal().
 */
.mfl-panel:modal,
.mfl-panel.is-open {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 88vh;
	max-height: 88dvh;
	border: 0;
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -12px 48px rgba(27, 29, 63, .22);
	animation: mfl-sheet-in .3s var(--mfl-ease);
}

/* Il ripiego non è nel top layer: gli serve un ordine di sovrapposizione
   esplicito, che al <dialog> modale non serve. */
.mfl-panel.is-open:not(:modal) { z-index: 99999; }

.mfl-panel:modal .mfl-panel__head,
.mfl-panel.is-open .mfl-panel__head { display: flex; }

.mfl-panel:modal .mfl-panel__body,
.mfl-panel.is-open .mfl-panel__body { max-height: none; }

.mfl-panel:modal .mfl-panel__foot,
.mfl-panel.is-open .mfl-panel__foot {
	/* Lo spazio della barra di sistema sui telefoni senza tasto. */
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.mfl-panel::backdrop {
	background: rgba(27, 29, 63, .55);
	backdrop-filter: blur(2px);
}

@keyframes mfl-sheet-in {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

/* Il velo del ripiego, che non ha ::backdrop. */
.mfl-scrim { position: fixed; inset: 0; z-index: 99998; background: rgba(27, 29, 63, .55); }
.mfl-scrim[hidden] { display: none; }

/* Con il corpo bloccato la pagina non scorre dietro al foglio aperto. */
html.mfl-locked, body.mfl-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mfl-panel:modal,
	.mfl-panel.is-open,
	.mfl-card--in { animation: none; }

	.mfl-opt, .mfl-opt__box, .mfl-opt__box svg,
	.mfl-trigger, .mfl-token__x { transition: none; }
}