/* ------------------------------------------------------------------
 * Aspetto filtro Marca/Modello — 31 stili selezionabili da
 * Impostazioni > Aspetto filtro Marca/Modello, più tema chiaro/scuro
 * e due colori di accento. Il markup reale (due <select> nascosti +
 * pannello a tendina custom, vedi createDropdown() in frontend.js)
 * resta sempre lo stesso: qui si applica solo la "skin" scelta in
 * admin, tramite le classi .svx-pp-filterstyle-01..31 e
 * .svx-pp-theme-dark / .svx-pp-theme-light sul contenitore
 * .svx-pp-filterbar, più le due custom property --svx-accent /
 * --svx-accent-2 impostate inline con i colori scelti in admin.
 * Gli stili 21-25 (5 temi scuri) e 26-30 (5 temi chiari) sono stati
 * aggiunti su richiesta, ignorano volutamente il tema chiaro/scuro
 * scelto in Impostazioni e restano fissi sulla propria estetica. Lo
 * stile 31 invece rispetta il tema chiaro/scuro (vedi commento sopra
 * la sua sezione) — è lo stile predefinito dalla v1.55.0, pensato per
 * riprendere l'identità grafica reale del tema del sito svetix.ch.
 *
 * NB: niente font esterni (Google Fonts) qui di proposito — solo
 * font di sistema, per non aggiungere una chiamata a un dominio
 * esterno su un sito svizzero.
 * ------------------------------------------------------------------ */

.svx-pp-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	flex: 1 1 auto;
}

.svx-pp-filterbar .svx-pp-field {
	flex: 1 1 220px;
}

.svx-pp-filterbar .svx-pp-field label {
	margin-bottom: 6px;
}

/* Reset dei valori base definiti più sopra in frontend.css per il
   pannello "vetro sfumato" di default: qui si riparte da zero così
   ogni stile numerato ha pieno controllo del proprio aspetto. */
.svx-pp-filterbar .svx-pp-dd-btn {
	background: none;
	padding: 0;
	border-radius: 0;
	position: relative;
}

.svx-pp-filterbar .svx-pp-dd-inner {
	backdrop-filter: none;
	background: none;
	padding: 12px 14px;
	border-radius: 11px;
	font-weight: 700;
	font-size: 14px;
	position: relative;
}

.svx-pp-filterbar .svx-pp-dd-chev {
	border-right-color: var(--svx-accent);
	border-bottom-color: var(--svx-accent);
}

.svx-pp-filterbar .svx-pp-dd-menu {
	background: none;
	padding: 0;
	border-radius: 12px;
}

.svx-pp-filterbar .svx-pp-dd-menu-inner {
	border-radius: 11px;
	padding: 6px;
}

.svx-pp-filterbar .svx-pp-dd-item.sel {
	background: linear-gradient( 120deg, var(--svx-accent), var(--svx-accent-2) );
	color: #0a0a0f;
	font-weight: 700;
}

/* --- Token di tema: superfici/testo neutri, non gli accenti -------- */

.svx-pp-filterbar.svx-pp-theme-dark {
	--fb-bg: #111319;
	--fb-bg-2: #161923;
	--fb-ink: #eef0f7;
	--fb-ink-muted: #9aa0b4;
	--fb-ink-faint: #565c72;
	--fb-line: #242838;
	--fb-glass: rgba(255, 255, 255, 0.03);
	--fb-glass-2: rgba(255, 255, 255, 0.04);
}

.svx-pp-filterbar.svx-pp-theme-light {
	--fb-bg: #ffffff;
	--fb-bg-2: #f3f5fb;
	--fb-ink: #12141c;
	--fb-ink-muted: #5b6178;
	--fb-ink-faint: #9198ac;
	--fb-line: #dde2ee;
	--fb-glass: rgba(255, 255, 255, 0.55);
	--fb-glass-2: rgba(255, 255, 255, 0.65);
}

/* Font monospazio di sistema, usato dagli stili "strumento" (08/18/20) e
   da qualche dettaglio (griglia, badge esagonale). */
.svx-pp-filterbar {
	--fb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
	.svx-pp-filterbar * {
		animation: none !important;
		transition: none !important;
	}
}

@keyframes svxfb-shine { 0% { transform: translateX(-40%); } 100% { transform: translateX(280%); } }
@keyframes svxfb-spin { to { transform: rotate(360deg); } }
@keyframes svxfb-blink { 50% { opacity: 0; } }
@keyframes svxfb-scan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes svxfb-rotate-angle { to { --svxfb-angle: 360deg; } }
@keyframes svxfb-pulse { 0%, 100% { opacity: 0.35; transform: translateY(-50%) scale(0.9); } 50% { opacity: 0.85; transform: translateY(-50%) scale(1.15); } }
@keyframes svxfb-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
@keyframes svxfb-circuit { to { stroke-dashoffset: -240; } }
@keyframes svxfb-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes svxfb-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* Rotazione di --svxfb-angle usata dagli stili 21/25/28 per un bordo
   sfumato "vivo" (registrata come <angle> così @property la anima davvero,
   invece di scattare da 0 a 360). */
@property --svxfb-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ===================================================================
 * 01 — Vetro con bordo neon
 * =================================================================== */
.svx-pp-filterstyle-01 .svx-pp-dd-inner {
	background: var(--fb-glass);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--svx-accent) 35%, transparent);
	border-radius: 11px;
	box-shadow: 0 0 22px -8px color-mix(in srgb, var(--svx-accent) 45%, transparent);
	color: var(--fb-ink);
}
.svx-pp-filterstyle-01 .svx-pp-field label {
	color: var(--svx-accent);
}
.svx-pp-filterstyle-01 .svx-pp-dd-menu-inner {
	background: var(--fb-bg);
	border: 1px solid color-mix(in srgb, var(--svx-accent) 35%, transparent);
}
.svx-pp-filterstyle-01 .svx-pp-dd-item { color: var(--fb-ink-muted); }
.svx-pp-filterstyle-01 .svx-pp-dd-item:hover { background: color-mix(in srgb, var(--svx-accent) 12%, transparent); }

/* ===================================================================
 * 02 — Pillole gradient
 * =================================================================== */
.svx-pp-filterstyle-02 .svx-pp-dd-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-radius: 999px;
	color: var(--fb-ink-muted);
	padding: 10px 18px;
}
.svx-pp-filterstyle-02 .svx-pp-dd.is-open .svx-pp-dd-inner,
.svx-pp-filterstyle-02 .svx-pp-dd-btn:hover .svx-pp-dd-inner {
	color: #0a0a0f;
	font-weight: 700;
	background: linear-gradient( 120deg, var(--svx-accent), var(--svx-accent-2) );
	border-color: transparent;
}
.svx-pp-filterstyle-02 .svx-pp-dd-menu-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
}
.svx-pp-filterstyle-02 .svx-pp-dd-item {
	border-radius: 999px;
	color: var(--fb-ink-muted);
}

/* ===================================================================
 * 03 — Card olografica (shimmer)
 * =================================================================== */
.svx-pp-filterstyle-03 .svx-pp-dd-inner {
	border-radius: 11px;
	background: linear-gradient( 135deg, color-mix(in srgb, var(--svx-accent) 14%, transparent), color-mix(in srgb, var(--svx-accent-2) 14%, transparent) );
	border: 1px solid var(--fb-line);
	color: var(--fb-ink);
	overflow: hidden;
}
.svx-pp-filterstyle-03 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -30%;
	width: 60%;
	height: 200%;
	background: linear-gradient( 75deg, transparent, color-mix(in srgb, var(--fb-ink) 55%, transparent), transparent );
	animation: svxfb-shine 3.5s ease-in-out infinite;
}
.svx-pp-filterstyle-03 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-03 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-03 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 04 — Sottolinea a bagliore
 * =================================================================== */
.svx-pp-filterstyle-04 .svx-pp-dd-inner {
	padding: 0 0 9px;
	border-bottom: 2px solid var(--svx-accent);
	box-shadow: 0 6px 14px -10px var(--svx-accent);
	color: var(--fb-ink);
}
.svx-pp-filterstyle-04 .svx-pp-field label {
	color: var(--fb-ink-faint);
}
.svx-pp-filterstyle-04 .svx-pp-dd-menu-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-bottom: 2px solid var(--svx-accent);
}
.svx-pp-filterstyle-04 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 05 — Griglia cyberpunk
 * =================================================================== */
.svx-pp-filterstyle-05 .svx-pp-dd-inner {
	border: 1px solid var(--fb-line);
	border-radius: 9px;
	color: var(--svx-accent);
	background:
		repeating-linear-gradient( 90deg, transparent, transparent 11px, color-mix(in srgb, var(--svx-accent) 6%, transparent) 11px, color-mix(in srgb, var(--svx-accent) 6%, transparent) 12px ),
		var(--fb-bg);
}
.svx-pp-filterstyle-05 .svx-pp-field label { color: var(--fb-ink-faint); font-family: var(--fb-mono); }
.svx-pp-filterstyle-05 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-05 .svx-pp-dd-item { color: var(--fb-ink-muted); font-family: var(--fb-mono); font-size: 13px; }

/* ===================================================================
 * 06 — Anello orbitale
 * =================================================================== */
.svx-pp-filterstyle-06 .svx-pp-dd-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-radius: 11px;
	color: var(--fb-ink);
	padding-left: 44px;
}
.svx-pp-filterstyle-06 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--svx-accent);
}
.svx-pp-filterstyle-06 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--svx-accent) 45%, transparent);
	transform: translateY(-50%) rotate(0deg);
	animation: svxfb-spin 8s linear infinite;
}
.svx-pp-filterstyle-06 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-06 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-06 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 07 — Selettore liquido
 * =================================================================== */
.svx-pp-filterstyle-07 .svx-pp-dd-inner {
	background: var(--fb-bg-2);
	border-radius: 12px;
	color: var(--fb-ink);
	border: 1px solid transparent;
}
.svx-pp-filterstyle-07 .svx-pp-dd-btn:hover .svx-pp-dd-inner,
.svx-pp-filterstyle-07 .svx-pp-dd.is-open .svx-pp-dd-inner {
	background: linear-gradient( 120deg, var(--svx-accent), var(--svx-accent-2) );
	color: #0a0a0f;
	box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--svx-accent) 50%, transparent);
}
.svx-pp-filterstyle-07 .svx-pp-dd-menu-inner {
	background: var(--fb-bg-2);
	border: 1px solid var(--fb-line);
}
.svx-pp-filterstyle-07 .svx-pp-dd-item {
	border-radius: 9px;
	color: var(--fb-ink-muted);
	text-align: center;
}
.svx-pp-filterstyle-07 .svx-pp-field label { color: var(--fb-ink-faint); }

/* ===================================================================
 * 08 — Lettura da terminale (resta sempre scuro, anche in tema chiaro)
 * =================================================================== */
.svx-pp-filterstyle-08 .svx-pp-dd-inner {
	background: #050608;
	border: 1px solid #1c2030;
	border-radius: 9px;
	font-family: var(--fb-mono);
	color: #6ee7ff;
	padding: 11px 13px 11px 13px;
}
.svx-pp-filterstyle-08 .svx-pp-dd-inner::before { content: "> "; color: #6ee7ff; }
.svx-pp-filterstyle-08 .svx-pp-dd-label::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 12px;
	margin-left: 4px;
	background: #6ee7ff;
	vertical-align: middle;
	animation: svxfb-blink 1s step-end infinite;
}
.svx-pp-filterstyle-08 .svx-pp-field label { color: #565c72; font-family: var(--fb-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.svx-pp-filterstyle-08 .svx-pp-dd-menu-inner { background: #050608; border: 1px solid #1c2030; }
.svx-pp-filterstyle-08 .svx-pp-dd-item { color: #9aa0b4; font-family: var(--fb-mono); font-size: 12.5px; }
.svx-pp-filterstyle-08 .svx-pp-dd-item.sel { background: rgba(110, 231, 255, 0.14); color: #6ee7ff; }
.svx-pp-filterstyle-08 .svx-pp-dd-chev { border-right-color: #6ee7ff; border-bottom-color: #6ee7ff; }

/* ===================================================================
 * 09 — Card inclinata 3D
 * =================================================================== */
.svx-pp-filterstyle-09 .svx-pp-dd-inner {
	border: 1px solid var(--fb-line);
	border-radius: 12px;
	background: linear-gradient( 160deg, var(--fb-bg-2), var(--fb-bg) );
	transform: perspective(500px) rotateX(3deg);
	box-shadow: 0 16px 26px -18px rgba(0, 0, 0, 0.5);
	color: var(--fb-ink);
}
.svx-pp-filterstyle-09 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-09 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-09 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 10 — Capsula con led
 * =================================================================== */
.svx-pp-filterstyle-10 .svx-pp-dd-inner {
	display: flex;
	align-items: center;
	border: 1px solid var(--fb-line);
	border-radius: 999px;
	background: var(--fb-bg);
	color: var(--fb-ink);
	padding-left: 30px;
}
.svx-pp-filterstyle-10 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--svx-accent);
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--svx-accent) 65%, transparent);
}
.svx-pp-filterstyle-10 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-10 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); border-radius: 16px; }
.svx-pp-filterstyle-10 .svx-pp-dd-item { border-radius: 999px; color: var(--fb-ink-muted); }

/* ===================================================================
 * 11 — Badge esagonale
 * =================================================================== */
.svx-pp-filterstyle-11 .svx-pp-dd-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-radius: 11px;
	color: var(--fb-ink);
	padding-left: 46px;
}
.svx-pp-filterstyle-11 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: linear-gradient( 135deg, var(--svx-accent), var(--svx-accent-2) );
	clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}
.svx-pp-filterstyle-11 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-11 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-11 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 12 — Barra di avanzamento (Marca -> Modello)
 * =================================================================== */
.svx-pp-filterbar.svx-pp-filterstyle-12 {
	position: relative;
	flex-direction: column;
	gap: 4px;
}
.svx-pp-filterstyle-12::before {
	content: "";
	order: -1;
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var(--fb-line);
	margin-bottom: 10px;
}
.svx-pp-filterstyle-12 .svx-pp-field {
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;
}
.svx-pp-filterstyle-12 .svx-pp-field label { order: 2; color: var(--fb-ink-faint); font-size: 10.5px; }
.svx-pp-filterstyle-12 .svx-pp-dd { order: 1; }
.svx-pp-filterstyle-12 .svx-pp-dd-inner { padding: 0; color: var(--fb-ink); font-weight: 700; background: none; }
.svx-pp-filterstyle-12 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-12 .svx-pp-dd-item { color: var(--fb-ink-muted); }
.svx-pp-filterstyle-12 .svx-pp-dd-chev { display: none; }

/* ===================================================================
 * 13 — Tendina smerigliata
 * =================================================================== */
.svx-pp-filterstyle-13 .svx-pp-dd-inner {
	background: var(--fb-glass);
	backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--fb-ink) 10%, transparent);
	border-radius: 10px;
	color: var(--fb-ink);
}
.svx-pp-filterstyle-13 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-13 .svx-pp-dd-menu-inner {
	background: var(--fb-glass-2);
	backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--fb-ink) 10%, transparent);
}
.svx-pp-filterstyle-13 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 14 — Pila di data-chip
 * =================================================================== */
.svx-pp-filterstyle-14 .svx-pp-dd-inner {
	background: var(--fb-bg-2);
	border-left: 2px solid var(--svx-accent);
	border-radius: 7px;
	color: var(--svx-accent);
	font-weight: 700;
	font-size: 11px;
	padding: 9px 10px;
}
.svx-pp-filterstyle-14 .svx-pp-field label {
	color: var(--fb-ink-faint);
	font-family: var(--fb-mono);
	font-size: 10px;
}
.svx-pp-filterstyle-14 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-14 .svx-pp-dd-item {
	color: var(--fb-ink-muted);
	font-family: var(--fb-mono);
	font-size: 11px;
	border-radius: 7px;
}

/* ===================================================================
 * 15 — Banner aurora (resta vivace anche in chiaro)
 * =================================================================== */
.svx-pp-filterstyle-15 .svx-pp-dd-inner {
	border-radius: 11px;
	color: #12141c;
	overflow: hidden;
}
.svx-pp-filterbar.svx-pp-filterstyle-15.svx-pp-theme-dark .svx-pp-dd-inner {
	background: linear-gradient( 120deg, #182a45, #2a1845, #183a3a );
	color: #eef0f7;
}
.svx-pp-filterbar.svx-pp-filterstyle-15.svx-pp-theme-light .svx-pp-dd-inner {
	background: linear-gradient( 120deg, #a7d8ea, #d3c4f7, #a9ece0 );
	color: #12141c;
}
.svx-pp-filterstyle-15 .svx-pp-field label { color: var(--fb-ink-faint); text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; }
.svx-pp-filterstyle-15 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-15 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 16 — Radar animato (resta sempre scuro, anche in tema chiaro)
 * =================================================================== */
.svx-pp-filterstyle-16 .svx-pp-dd-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-radius: 11px;
	color: var(--fb-ink);
	padding-left: 44px;
}
.svx-pp-filterstyle-16 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--svx-accent) 40%, transparent);
	background: #0a0d14;
	overflow: hidden;
}
.svx-pp-filterstyle-16 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: conic-gradient( from 0deg, color-mix(in srgb, var(--svx-accent) 60%, transparent), transparent 35% );
	animation: svxfb-spin 3s linear infinite;
}
.svx-pp-filterstyle-16 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-16 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-16 .svx-pp-dd-item { color: var(--fb-ink-muted); }

/* ===================================================================
 * 17 — Contorni al neon
 * =================================================================== */
.svx-pp-filterstyle-17 .svx-pp-dd-inner {
	background: none;
	border: 1px solid var(--fb-line);
	border-radius: 8px;
	color: var(--fb-ink-muted);
}
.svx-pp-filterstyle-17 .svx-pp-dd.is-open .svx-pp-dd-inner,
.svx-pp-filterstyle-17 .svx-pp-dd-btn:hover .svx-pp-dd-inner {
	border-color: var(--svx-accent);
	color: var(--svx-accent);
	box-shadow: inset 0 0 0 1px var(--svx-accent), 0 0 14px -4px color-mix(in srgb, var(--svx-accent) 60%, transparent);
}
.svx-pp-filterstyle-17 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-17 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-17 .svx-pp-dd-item {
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--fb-ink-muted);
}
.svx-pp-filterstyle-17 .svx-pp-dd-item.sel {
	background: none;
	border-color: var(--svx-accent);
	color: var(--svx-accent);
	box-shadow: inset 0 0 0 1px var(--svx-accent);
}

/* ===================================================================
 * 18 — Palette comandi (resta sempre scuro, anche in tema chiaro)
 * =================================================================== */
.svx-pp-filterstyle-18 .svx-pp-dd-inner {
	background: #0c0e14;
	border: 1px solid #232838;
	border-radius: 10px;
	color: #eef0f7;
	font-size: 12px;
}
.svx-pp-filterstyle-18 .svx-pp-dd-inner::before { content: "🔍  "; opacity: 0.55; }
.svx-pp-filterstyle-18 .svx-pp-field label { color: #565c72; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.svx-pp-filterstyle-18 .svx-pp-dd-menu-inner { background: #0c0e14; border: 1px solid #232838; }
.svx-pp-filterstyle-18 .svx-pp-dd-item {
	color: #9aa0b4;
	border-radius: 5px;
	font-size: 11px;
}
.svx-pp-filterstyle-18 .svx-pp-dd-item.sel {
	background: color-mix(in srgb, var(--svx-accent) 14%, transparent);
	color: var(--svx-accent);
	font-weight: 600;
}
.svx-pp-filterstyle-18 .svx-pp-dd-chev { border-right-color: #565c72; border-bottom-color: #565c72; }

/* ===================================================================
 * 19 — Token fluttuanti
 * =================================================================== */
.svx-pp-filterstyle-19 .svx-pp-dd-inner {
	background: var(--fb-bg-2);
	border: 1px solid var(--fb-line);
	border-radius: 8px;
	color: var(--fb-ink);
}
.svx-pp-filterstyle-19 .svx-pp-dd-btn:hover .svx-pp-dd-inner,
.svx-pp-filterstyle-19 .svx-pp-dd.is-open .svx-pp-dd-inner {
	background: radial-gradient( circle at 30% 20%, color-mix(in srgb, var(--svx-accent) 35%, transparent), color-mix(in srgb, var(--svx-accent-2) 20%, transparent) );
	border-color: color-mix(in srgb, var(--svx-accent) 50%, transparent);
	font-weight: 700;
}
.svx-pp-filterstyle-19 .svx-pp-field label { color: var(--fb-ink-faint); }
.svx-pp-filterstyle-19 .svx-pp-dd-menu-inner { background: var(--fb-bg); border: 1px solid var(--fb-line); }
.svx-pp-filterstyle-19 .svx-pp-dd-item {
	background: var(--fb-bg-2);
	border: 1px solid var(--fb-line);
	border-radius: 8px;
	color: var(--fb-ink-muted);
	margin: 3px;
}
.svx-pp-filterstyle-19 .svx-pp-dd-item.sel {
	background: radial-gradient( circle at 30% 20%, color-mix(in srgb, var(--svx-accent) 35%, transparent), color-mix(in srgb, var(--svx-accent-2) 20%, transparent) );
	border-color: color-mix(in srgb, var(--svx-accent) 50%, transparent);
	color: var(--fb-ink);
}

/* ===================================================================
 * 20 — Console a scansione (resta sempre scuro, anche in tema chiaro)
 * =================================================================== */
.svx-pp-filterstyle-20 .svx-pp-dd-inner {
	background: #050608;
	border: 1px solid #1c2030;
	border-radius: 9px;
	color: #eef0f7;
	font-family: var(--fb-mono);
	overflow: hidden;
}
.svx-pp-filterstyle-20 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	top: 0;
	background: color-mix(in srgb, var(--svx-accent) 60%, transparent);
	box-shadow: 0 0 10px 1px color-mix(in srgb, var(--svx-accent) 50%, transparent);
	animation: svxfb-scan 2.8s linear infinite;
}
.svx-pp-filterstyle-20 .svx-pp-field label {
	color: #565c72;
	font-family: var(--fb-mono);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.svx-pp-filterstyle-20 .svx-pp-dd-menu-inner { background: #050608; border: 1px solid #1c2030; }
.svx-pp-filterstyle-20 .svx-pp-dd-item { color: #9aa0b4; font-family: var(--fb-mono); }
.svx-pp-filterstyle-20 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent) 16%, transparent); color: var(--svx-accent); }
.svx-pp-filterstyle-20 .svx-pp-dd-chev { display: none; }

/* ===================================================================
 * 21 — Cristallo scuro (resta sempre scuro)
 * Sfaccettature scure con bordo conico animato che ruota piano.
 * =================================================================== */
.svx-pp-filterstyle-21 .svx-pp-dd-inner {
	--svxfb-angle: 0deg;
	background:
		linear-gradient( #0c0e16, #0c0e16 ) padding-box,
		conic-gradient( from var(--svxfb-angle), var(--svx-accent), var(--svx-accent-2), transparent 40%, var(--svx-accent) ) border-box;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #eef0f7;
	animation: svxfb-rotate-angle 6s linear infinite;
}
.svx-pp-filterstyle-21 .svx-pp-field label { color: #6b7188; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; }
.svx-pp-filterstyle-21 .svx-pp-dd-menu-inner { background: #0c0e16; border: 1px solid #232840; }
.svx-pp-filterstyle-21 .svx-pp-dd-item { color: #9aa0b4; }
.svx-pp-filterstyle-21 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent) 16%, transparent); color: var(--svx-accent); }

/* ===================================================================
 * 22 — Circuito luminoso (resta sempre scuro)
 * Bordo stile PCB con un impulso che scorre lungo il perimetro.
 * =================================================================== */
.svx-pp-filterstyle-22 .svx-pp-dd-inner {
	position: relative;
	background: #090b10;
	border: 1px solid #1d2233;
	border-radius: 6px;
	color: #d7ecff;
	font-family: var(--fb-mono);
	font-size: 13px;
}
.svx-pp-filterstyle-22 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 6px;
	padding: 1px;
	background: linear-gradient( 90deg, transparent, transparent 60%, var(--svx-accent), var(--svx-accent-2), transparent );
	background-size: 250% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: svxfb-drift 3.2s linear infinite;
}
.svx-pp-filterstyle-22 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--svx-accent);
	box-shadow: -14px 0 0 -2px color-mix(in srgb, var(--svx-accent) 40%, transparent), 0 0 8px 1px var(--svx-accent);
}
.svx-pp-filterstyle-22 .svx-pp-field label { color: #565c72; font-family: var(--fb-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; }
.svx-pp-filterstyle-22 .svx-pp-dd-menu-inner { background: #090b10; border: 1px solid #1d2233; }
.svx-pp-filterstyle-22 .svx-pp-dd-item { color: #9aa0b4; font-family: var(--fb-mono); font-size: 12.5px; }
.svx-pp-filterstyle-22 .svx-pp-dd-item.sel { background: rgba(110, 231, 255, 0.1); color: var(--svx-accent); }
.svx-pp-filterstyle-22 .svx-pp-dd-chev { border-right-color: var(--svx-accent); border-bottom-color: var(--svx-accent); }

/* ===================================================================
 * 23 — Plasma pulsante (resta sempre scuro)
 * Bagliore centrale che respira dietro al valore.
 * =================================================================== */
.svx-pp-filterstyle-23 .svx-pp-dd-inner {
	position: relative;
	background: #0a0a12;
	border: 1px solid #201f33;
	border-radius: 12px;
	color: #f0eefc;
	overflow: hidden;
	padding-left: 40px;
}
.svx-pp-filterstyle-23 .svx-pp-dd-inner::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient( circle, var(--svx-accent), var(--svx-accent-2) 70%, transparent 100% );
	filter: blur(2px);
	animation: svxfb-pulse 2.4s ease-in-out infinite;
}
.svx-pp-filterstyle-23 .svx-pp-field label { color: #6b6b8a; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.svx-pp-filterstyle-23 .svx-pp-dd-menu-inner { background: #0a0a12; border: 1px solid #201f33; }
.svx-pp-filterstyle-23 .svx-pp-dd-item { color: #a29fc2; }
.svx-pp-filterstyle-23 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent-2) 18%, transparent); color: var(--svx-accent-2); }

/* ===================================================================
 * 24 — Griglia stellare (resta sempre scuro)
 * Campo di puntini che scintillano piano sullo sfondo scuro.
 * =================================================================== */
.svx-pp-filterstyle-24 .svx-pp-dd-inner {
	position: relative;
	background:
		radial-gradient( circle at 15% 30%, color-mix(in srgb, var(--svx-accent) 70%, white) 1px, transparent 1.4px ) 0 0 / 26px 26px,
		radial-gradient( circle at 60% 70%, color-mix(in srgb, var(--svx-accent-2) 70%, white) 1px, transparent 1.4px ) 4px 10px / 34px 34px,
		#08090f;
	border: 1px solid #1b1e2c;
	border-radius: 10px;
	color: #eef0f7;
}
.svx-pp-filterstyle-24 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: radial-gradient( circle at 80% 20%, color-mix(in srgb, var(--svx-accent) 55%, white) 1px, transparent 1.4px ) 0 0 / 40px 40px;
	animation: svxfb-twinkle 2.6s ease-in-out infinite;
}
.svx-pp-filterstyle-24 .svx-pp-field label { color: #565c72; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; }
.svx-pp-filterstyle-24 .svx-pp-dd-menu-inner { background: #08090f; border: 1px solid #1b1e2c; }
.svx-pp-filterstyle-24 .svx-pp-dd-item { color: #9aa0b4; }
.svx-pp-filterstyle-24 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent) 16%, transparent); color: var(--svx-accent); }

/* ===================================================================
 * 25 — Prisma olografico scuro (resta sempre scuro)
 * Bordo iridescente in movimento su fondo quasi nero.
 * =================================================================== */
.svx-pp-filterstyle-25 .svx-pp-dd-inner {
	--svxfb-angle: 0deg;
	position: relative;
	background:
		linear-gradient( #06070b, #06070b ) padding-box,
		conic-gradient( from var(--svxfb-angle), #6ee7ff, #b18aff, #ff8ad4, #6ee7ff ) border-box;
	border: 1.5px solid transparent;
	border-radius: 11px;
	color: #f4f4fb;
	animation: svxfb-rotate-angle 5s linear infinite;
}
.svx-pp-filterstyle-25 .svx-pp-field label { color: #6b7188; font-size: 10.5px; letter-spacing: 0.05em; }
.svx-pp-filterstyle-25 .svx-pp-dd-menu-inner { background: #06070b; border: 1px solid #232840; }
.svx-pp-filterstyle-25 .svx-pp-dd-item { color: #a7abc4; }
.svx-pp-filterstyle-25 .svx-pp-dd-item.sel { background: linear-gradient( 120deg, var(--svx-accent), var(--svx-accent-2) ); color: #0a0a0f; font-weight: 700; }

/* ===================================================================
 * 26 — Vetro perlato (resta sempre chiaro)
 * Superficie madreperlata con riflesso soft in movimento.
 * =================================================================== */
.svx-pp-filterstyle-26 .svx-pp-dd-inner {
	position: relative;
	background: linear-gradient( 135deg, #ffffff, #f2f0fb 45%, #eef7f6 );
	border: 1px solid #e4e1f2;
	border-radius: 13px;
	color: #23223a;
	box-shadow: 0 10px 24px -18px rgba(90, 80, 150, 0.35);
	overflow: hidden;
}
.svx-pp-filterstyle-26 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -20%;
	width: 45%;
	height: 220%;
	background: linear-gradient( 75deg, transparent, rgba(255, 255, 255, 0.85), transparent );
	animation: svxfb-shine 4.5s ease-in-out infinite;
}
.svx-pp-filterstyle-26 .svx-pp-field label { color: #8a86a8; font-size: 10.5px; letter-spacing: 0.04em; }
.svx-pp-filterstyle-26 .svx-pp-dd-menu-inner { background: #ffffff; border: 1px solid #e4e1f2; }
.svx-pp-filterstyle-26 .svx-pp-dd-item { color: #56547a; }
.svx-pp-filterstyle-26 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent) 16%, white); color: color-mix(in srgb, var(--svx-accent) 65%, #23223a); font-weight: 700; }

/* ===================================================================
 * 27 — Carta soft (resta sempre chiaro)
 * Neumorfismo delicato: ombre chiare/scure a doppia direzione.
 * =================================================================== */
.svx-pp-filterstyle-27 .svx-pp-dd-inner {
	background: #eef0f6;
	border: 1px solid transparent;
	border-radius: 14px;
	color: #33344a;
	box-shadow: 6px 6px 12px rgba(170, 176, 200, 0.45), -6px -6px 12px rgba(255, 255, 255, 0.9);
}
.svx-pp-filterstyle-27 .svx-pp-dd.is-open .svx-pp-dd-inner,
.svx-pp-filterstyle-27 .svx-pp-dd-btn:hover .svx-pp-dd-inner {
	box-shadow: inset 4px 4px 8px rgba(170, 176, 200, 0.45), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}
.svx-pp-filterstyle-27 .svx-pp-field label { color: #8489a1; font-size: 10.5px; letter-spacing: 0.04em; }
.svx-pp-filterstyle-27 .svx-pp-dd-menu-inner { background: #eef0f6; border-radius: 14px; box-shadow: 6px 6px 12px rgba(170, 176, 200, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.9); }
.svx-pp-filterstyle-27 .svx-pp-dd-item { color: #565a72; border-radius: 9px; }
.svx-pp-filterstyle-27 .svx-pp-dd-item.sel { background: #eef0f6; color: color-mix(in srgb, var(--svx-accent) 60%, #33344a); box-shadow: inset 3px 3px 6px rgba(170, 176, 200, 0.45), inset -3px -3px 6px rgba(255, 255, 255, 0.9); }

/* ===================================================================
 * 28 — Prisma pastello (resta sempre chiaro)
 * Bordo sfumato pastello in movimento, luminoso e delicato.
 * =================================================================== */
.svx-pp-filterstyle-28 .svx-pp-dd-inner {
	--svxfb-angle: 0deg;
	background:
		linear-gradient( #ffffff, #ffffff ) padding-box,
		conic-gradient( from var(--svxfb-angle), var(--svx-accent), var(--svx-accent-2), #ffe3f3, var(--svx-accent) ) border-box;
	border: 1.5px solid transparent;
	border-radius: 12px;
	color: #22233a;
	animation: svxfb-rotate-angle 7s linear infinite;
}
.svx-pp-filterstyle-28 .svx-pp-field label { color: #9195af; font-size: 10.5px; letter-spacing: 0.04em; }
.svx-pp-filterstyle-28 .svx-pp-dd-menu-inner { background: #ffffff; border: 1px solid #e7e9f4; }
.svx-pp-filterstyle-28 .svx-pp-dd-item { color: #565a72; }
.svx-pp-filterstyle-28 .svx-pp-dd-item.sel { background: linear-gradient( 120deg, color-mix(in srgb, var(--svx-accent) 30%, white), color-mix(in srgb, var(--svx-accent-2) 30%, white) ); color: #22233a; font-weight: 700; }

/* ===================================================================
 * 29 — Onda frost (resta sempre chiaro)
 * Sottolineatura a onda smerigliata che scorre piano.
 * =================================================================== */
.svx-pp-filterstyle-29 .svx-pp-dd-inner {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(8px);
	border: none;
	border-radius: 10px 10px 4px 4px;
	color: #262640;
	padding-bottom: 12px;
	position: relative;
}
.svx-pp-filterstyle-29 .svx-pp-dd-inner::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient( 90deg, var(--svx-accent), var(--svx-accent-2) );
	animation: svxfb-wave 2.6s ease-in-out infinite;
}
.svx-pp-filterstyle-29 .svx-pp-field label { color: #8a8fa8; font-size: 10.5px; letter-spacing: 0.04em; }
.svx-pp-filterstyle-29 .svx-pp-dd-menu-inner { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 1px solid #e7e9f4; }
.svx-pp-filterstyle-29 .svx-pp-dd-item { color: #565a72; }
.svx-pp-filterstyle-29 .svx-pp-dd-item.sel { background: color-mix(in srgb, var(--svx-accent) 14%, white); color: color-mix(in srgb, var(--svx-accent) 65%, #262640); font-weight: 700; }

/* ===================================================================
 * 30 — Aurora chiara (resta sempre chiaro)
 * Sfondo sfumato pastello luminoso, tono chiaro e arioso.
 * =================================================================== */
.svx-pp-filterstyle-30 .svx-pp-dd-inner {
	background: linear-gradient( 120deg, #d7ecff, #efd9ff 45%, #d3fff0 );
	background-size: 200% 200%;
	border-radius: 12px;
	color: #1c1d2e;
	animation: svxfb-drift 8s ease-in-out infinite;
}
.svx-pp-filterstyle-30 .svx-pp-field label { color: #7d81a0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.svx-pp-filterstyle-30 .svx-pp-dd-menu-inner { background: #ffffff; border: 1px solid #e7e9f4; }
.svx-pp-filterstyle-30 .svx-pp-dd-item { color: #4c4f6b; }
.svx-pp-filterstyle-30 .svx-pp-dd-item.sel { background: linear-gradient( 120deg, #d7ecff, #efd9ff ); color: #1c1d2e; font-weight: 700; }

/* ===================================================================
 * 31 — SvetiX (colori del sito)
 * A differenza di 21-30, QUESTO stile segue il tema chiaro/scuro
 * scelto in Impostazioni (usa --fb-bg/--fb-ink ecc., non colori fissi)
 * — pensato per essere lo stile predefinito perché è l'unico dei 31
 * a riprendere esattamente l'identità grafica del tema del sito
 * svetix.ch: pillola con bordo a doppio anello sfumato quasi-nero →
 * bronzo (le stesse due tinte esatte del gradiente --sx-gradient del
 * tema, --sx-primary #2A2621 e --sx-accent #8A6A3B — impostate di
 * default come colori di accento 1 e 2 di questo stile, vedi
 * SVX_PP_Admin_Settings::DEFAULT_ACCENT_*), angoli molto arrotondati
 * (999px, come le pillole Marca/Modello e i bottoni del tema) e ombra
 * morbida coerente con quella usata nelle card del tema. In tema scuro
 * riusa i neutri quasi neri già definiti per .svx-pp-theme-dark (righe
 * iniziali di questo file) cosi la stessa identità cromatica
 * (quasi-nero/bronzo) resta riconoscibile anche se l'admin sceglie il
 * tema scuro per il filtro.
 *
 * v1.74.0 (corretto il 02.09.2026, Svetix: "non basta la tavolozza,
 * devono sembrare card del tuo sito"): il tema di svetix.ch è stato
 * completamente ridisegnato da allora — le due tinte qui sopra erano
 * rosso-corallo #f23131/petrolio #155E75 (la correzione precedente,
 * v1.70.0). Verificato di nuovo leggendo le vere variabili CSS del
 * tema (--sx-primary/--sx-accent) direttamente dalla pagina svetix.ch
 * il 02.09.2026: sono ora #2A2621 (quasi-nero) e #8A6A3B (bronzo).
 * =================================================================== */
.svx-pp-filterstyle-31 .svx-pp-dd-inner {
	background:
		linear-gradient( var(--fb-bg), var(--fb-bg) ) padding-box,
		linear-gradient( 135deg, var(--svx-accent), var(--svx-accent-2) ) border-box;
	border: 1.5px solid transparent;
	border-radius: 999px;
	color: var(--fb-ink);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px -6px rgba(15, 23, 42, 0.12);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.svx-pp-filterstyle-31 .svx-pp-dd-btn:hover .svx-pp-dd-inner,
.svx-pp-filterstyle-31 .svx-pp-dd.is-open .svx-pp-dd-inner {
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 14px 28px -8px color-mix(in srgb, var(--svx-accent) 35%, transparent);
	transform: translateY(-1px);
}
.svx-pp-filterstyle-31 .svx-pp-field label {
	color: var(--svx-accent);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.svx-pp-filterstyle-31 .svx-pp-dd-menu-inner {
	background: var(--fb-bg);
	border: 1px solid var(--fb-line);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), 0 28px 56px -16px rgba(15, 23, 42, 0.18);
}
.svx-pp-filterstyle-31 .svx-pp-dd-item {
	color: var(--fb-ink-muted);
	border-radius: 999px;
}
.svx-pp-filterstyle-31 .svx-pp-dd-item:hover {
	background: color-mix(in srgb, var(--svx-accent) 10%, transparent);
	color: var(--fb-ink);
}
.svx-pp-filterstyle-31 .svx-pp-dd-item.sel {
	background: linear-gradient( 135deg, var(--svx-accent), var(--svx-accent-2) );
	color: #ffffff;
	font-weight: 700;
}