/*
 * Domande frequenti (/faq/), nuovo disegno: kit rilascio/faq-design-8-10 (CEO, 8/10/2026).
 * Prima: kit faq-2-10 (2/10, ricerca, argomenti, risposte apribili), Codex 3-4/10.
 * Si carica solo da page-domande-frequenti.php.
 *
 * Grammatica presa da Airbnb, Stripe, Apple, Notion (studio in collaudo/studio/): una ricerca grande in
 * cima, le domande più cercate subito sotto, gli argomenti come tessere grandi con l'icona, al computer
 * la colonna degli argomenti ferma a sinistra e le risposte a destra in una colonna di lettura (~65 caratteri).
 * Valori di linguaggio/02_STILE.md: spazi 4-8-12-16-24-32-48, raggi 12-16-22-24-pillola, una linea da 1 px,
 * niente ombre, niente bordi colorati di accento (riempimenti e titoli colorati), caratteri via
 * var(--tbp-font) e var(--tbp-font-titoli). Movimento: 160/240 ms, solo transform e opacity e colore,
 * niente con «riduci movimento».
 * Colori dei tre temi in fondo, nello strato tbp-appearance (il tema scuro forza il testo con !important lì).
 */

/* ── Gettoni ─────────────────────────────────────────────────────────── */
#tbp-faq {
	--fq-fondo: #FFFFFF;
	--fq-titolo: #084828;
	--fq-testo: #123326;
	--fq-tenue: #5D786B;
	--fq-nota: #35503F;      /* testo secondario sui riempimenti (avorio, salvia): 8,9:1 */
	--fq-linea: rgba(8, 72, 40, .14);
	--fq-campo: #F1F4F2;
	--fq-campo-linea: transparent;
	--fq-scheda: #F7F4ED;    /* tessere e riquadro finale */
	--fq-scheda-su: #FFFFFF; /* canali dentro il riquadro finale */
	--fq-pillola: #F4F7F5;
	--fq-scelto: #E4F1E8;    /* tessera o argomento scelto: tinta verde + anello */
	--fq-scelto-testo: #145E3F;
	--fq-anello: #084828;
	--fq-link: #084828;
	--fq-trovato: #FBF0D6;
	--fq-trovato-testo: #123326;
	--fq-fuoco: #084828;
	--fq-lato: 248px;
	--tbp-faq-cima: 0px;
	--tbp-faq-barra-h: 80px;

	display: block;
	color: var(--fq-testo);
	font-family: var(--tbp-font);
	font-size: 1rem;
	line-height: 1.5;
}

html[data-tbp-theme="tobepolo"] #tbp-faq {
	--fq-fondo: #FAF6EE;
	--fq-testo: #10261B;
	--fq-tenue: #557062;
	--fq-nota: #35503F;
	--fq-campo: #FFFFFF;
	--fq-campo-linea: rgba(8, 72, 40, .14);
	--fq-scheda: #FFFFFF;
	--fq-scheda-su: #FAF6EE;
	--fq-pillola: #FFFFFF;
}

html[data-tbp-theme="dark"] #tbp-faq {
	--fq-fondo: #0F0F0F;
	--fq-titolo: #EDEDED;
	--fq-testo: #EDEDED;
	--fq-tenue: #B5B5B5;
	--fq-nota: #B5B5B5;
	--fq-linea: #333333;
	--fq-campo: #1E1E1E;
	--fq-campo-linea: #333333;
	--fq-scheda: #1E1E1E;
	--fq-scheda-su: #262626;
	--fq-pillola: #1E1E1E;
	--fq-scelto: #1E3A2B;
	--fq-scelto-testo: #C8EBD5;
	--fq-anello: #9BDBB5;
	--fq-link: #9BDBB5;
	--fq-trovato: #4A3A08;
	--fq-trovato-testo: #FFF3C4;
	--fq-fuoco: #F1CE69;
}

#tbp-faq *,
#tbp-faq *::before,
#tbp-faq *::after {
	box-sizing: border-box;
}

/* Contenitore della pagina: largo come la testata sottile e le pagine nuove (1160). */
html body .tbp-info-page.tbp-faq-pagina {
	padding: 24px 16px 48px;
}
html body .tbp-info-page.tbp-faq-pagina > .container {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
}
@media (min-width: 850px) {
	html body .tbp-info-page.tbp-faq-pagina {
		padding: 48px 24px 48px;
	}
}

#tbp-faq p {
	margin: 0;
}
#tbp-faq ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#tbp-faq ul > li {
	margin: 0;
	list-style: none;
}

/* ── Apertura ────────────────────────────────────────────────────────── */
#tbp-faq .tbp-faq__eroe {
	max-width: 760px;
}
#tbp-faq p.tbp-faq__occhiello,
#tbp-faq h2.tbp-faq__etichetta {
	margin: 0 0 8px;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
}
#tbp-faq h1.tbp-faq__titolo {
	margin: 0;
	text-wrap: balance;
}
#tbp-faq p.tbp-faq__lead {
	max-width: 34em;
	margin-top: 12px;
	font-size: 1.125rem;
	line-height: 1.5;
}

/* ── Ricerca: grande in cima, poi ferma sotto la testata ─────────────── */
#tbp-faq .tbp-faq__barra {
	position: sticky;
	top: var(--tbp-faq-cima);
	z-index: 20;
	margin: 24px -16px 0;
	padding: 8px 16px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--tbp-moto-breve, 160ms) var(--tbp-moto-curva, ease);
}
#tbp-faq .tbp-faq__barra.is-ferma {
	border-bottom-color: var(--fq-linea);
}
#tbp-faq .tbp-faq__barra[hidden] {
	display: none !important;
}
#tbp-faq .tbp-faq__cerca {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 760px;
	margin: 0;
}
#tbp-faq .tbp-faq__lente {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
/* Il campo sta nello strato tbp-appearance (in fondo): le regole generiche dei campi del tema vincono altrimenti. */
html body #tbp-faq button.tbp-faq__svuota {
	position: absolute;
	right: 8px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	transform: translateY(-50%);
	cursor: pointer;
}
html body #tbp-faq button.tbp-faq__svuota[hidden] {
	display: none;
}

/* ── Domande più cercate ─────────────────────────────────────────────── */
#tbp-faq .tbp-faq__popolari {
	margin-top: 24px;
}
#tbp-faq ul.tbp-faq__pop-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#tbp-faq a.tbp-faq__pop {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--fq-linea);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--tbp-moto-breve, 160ms) var(--tbp-moto-curva, ease);
}

/* Computer: titolo e ricerca a sinistra, domande più cercate a destra in un riquadro avorio.
 * La ricerca qui non si ferma: scorrendo restano la colonna degli argomenti e la testata. */
#tbp-faq .tbp-faq__apertura {
	display: contents;
}
@media (min-width: 850px) {
	#tbp-faq .tbp-faq__apertura {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
		grid-template-rows: auto 1fr;
		column-gap: 48px;
		align-items: start;
	}
	#tbp-faq .tbp-faq__eroe {
		grid-column: 1;
		grid-row: 1;
	}
	#tbp-faq .tbp-faq__barra {
		grid-column: 1;
		grid-row: 2;
		position: static;
		margin: 32px 0 0;
		padding: 0;
		border: 0;
	}
	#tbp-faq .tbp-faq__popolari {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
		padding: 24px;
		border-radius: 24px;
	}
	#tbp-faq .tbp-faq__popolari ul.tbp-faq__pop-lista {
		flex-direction: column;
		gap: 0;
	}
	#tbp-faq .tbp-faq__popolari ul.tbp-faq__pop-lista > li + li {
		border-top: 1px solid var(--fq-linea);
	}
	#tbp-faq .tbp-faq__popolari a.tbp-faq__pop {
		display: flex;
		width: 100%;
		min-height: 48px;
		padding: 12px 0;
		border: 0;
		border-radius: 0;
		font-size: 1rem;
	}
}

/* ── Tessere per chi arriva ──────────────────────────────────────────── */
#tbp-faq .tbp-faq__tessere-nav {
	margin-top: 48px;
}
#tbp-faq h2.tbp-faq__etichetta {
	margin-bottom: 12px;
}
#tbp-faq ul.tbp-faq__tessere {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
#tbp-faq a.tbp-faq__tessera {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	min-height: 148px;
	padding: 16px;
	border-radius: 22px;
	text-decoration: none;
	transition: background-color var(--tbp-moto-breve, 160ms) var(--tbp-moto-curva, ease), transform var(--tbp-moto-tocco, 80ms) var(--tbp-moto-curva, ease);
}
#tbp-faq a.tbp-faq__tessera:active {
	transform: scale(.985);
}
#tbp-faq .tbp-faq__tessera-icona {
	--tbp-icon: 48px;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: contain;
}
#tbp-faq .tbp-faq__tessera-testo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
#tbp-faq .tbp-faq__tessera-nome {
	font-size: 1rem;
	line-height: 1.25;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
}
#tbp-faq .tbp-faq__tessera-desc {
	display: none;
	font-size: .875rem;
	line-height: 1.4;
}
#tbp-faq .tbp-faq__tessera-num {
	margin-top: auto;
	font-size: .875rem;
	font-weight: 600;
}
@media (min-width: 600px) {
	#tbp-faq ul.tbp-faq__tessere {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	#tbp-faq .tbp-faq__tessera-desc {
		display: block;
	}
}
@media (min-width: 850px) {
	#tbp-faq ul.tbp-faq__tessere {
		gap: 16px;
	}
	#tbp-faq a.tbp-faq__tessera {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		min-height: 136px;
		padding: 24px;
	}
	#tbp-faq .tbp-faq__tessera-icona {
		--tbp-icon: 64px;
		width: 64px;
		height: 64px;
	}
	#tbp-faq .tbp-faq__tessera-nome {
		font-size: 1.125rem;
	}
}

/* Mentre si cerca: i risultati subito sotto il campo. */
#tbp-faq.is-cercando .tbp-faq__tessere-nav {
	display: none;
}
#tbp-faq.is-cercando .tbp-faq__corpo {
	margin-top: 24px;
}
@media (max-width: 849px) {
	#tbp-faq.is-cercando .tbp-faq__popolari {
		display: none;
	}
	#tbp-faq.is-cercando .tbp-faq__corpo {
		margin-top: 8px;
	}
}

/* ── Corpo: telefono in colonna; computer con la colonna degli argomenti ferma ── */
#tbp-faq .tbp-faq__corpo {
	margin-top: 48px;
}
#tbp-faq .tbp-faq__argomenti {
	display: none;
}
@media (min-width: 850px) {
	#tbp-faq .tbp-faq__corpo {
		display: grid;
		grid-template-columns: var(--fq-lato) minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	#tbp-faq .tbp-faq__argomenti {
		display: block;
		position: sticky;
		top: calc(var(--tbp-faq-cima) + var(--tbp-faq-barra-h) + 16px);
		max-height: calc(100vh - var(--tbp-faq-cima) - var(--tbp-faq-barra-h) - 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding: 0 4px 16px 0;
	}
	#tbp-faq .tbp-faq__contenuto {
		min-width: 0;
	}
}
#tbp-faq .tbp-faq__chips > li + li {
	margin-top: 8px;
}
#tbp-faq a.tbp-faq__gruppo-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 4px 12px;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
#tbp-faq .tbp-faq__chips ul > li + li {
	margin-top: 2px;
}
#tbp-faq a.tbp-faq__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--tbp-moto-breve, 160ms) var(--tbp-moto-curva, ease);
}
#tbp-faq .tbp-faq__chip-num {
	flex: 0 0 auto;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
}
#tbp-faq a.tbp-faq__chip[aria-current="true"] {
	font-weight: 700;
}

/* ── Risultati ───────────────────────────────────────────────────────── */
#tbp-faq .tbp-faq__riga-stato {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 44px;
}
#tbp-faq p.tbp-faq__stato {
	font-size: .875rem;
	font-weight: 700;
}
html body #tbp-faq button.tbp-faq__mostra-tutte,
html body #tbp-faq button.tbp-faq__tutte,
html body #tbp-faq button.tbp-faq__copia,
html body #tbp-faq button.tbp-faq__parola {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 12px;
	font-family: var(--tbp-font);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
	flex: 0 0 auto;
	cursor: pointer;
}
html body #tbp-faq button[hidden] {
	display: none !important;
}

/* Sezioni e risposte */
#tbp-faq .tbp-faq__sezione {
	margin-top: 32px;
}
#tbp-faq .tbp-faq__sezione[hidden] {
	display: none;
}
#tbp-faq .tbp-faq__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-bottom: 8px;
}
#tbp-faq h2.tbp-faq__h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-wrap: balance;
}
#tbp-faq h2.tbp-faq__h2 .tbp-faq__icona {
	--tbp-icon: 40px;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}
#tbp-faq .tbp-faq__voci {
	border-top: 1px solid var(--fq-linea);
}
#tbp-faq details.tbp-faq__voce {
	border-bottom: 1px solid var(--fq-linea);
}
#tbp-faq details.tbp-faq__voce[hidden] {
	display: none;
}
#tbp-faq summary.tbp-faq__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 16px 4px;
	cursor: pointer;
	list-style: none;
}
#tbp-faq summary.tbp-faq__domanda::-webkit-details-marker {
	display: none;
}
#tbp-faq summary.tbp-faq__domanda::marker {
	content: '';
}
#tbp-faq .tbp-faq__q {
	max-width: 60ch;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}
#tbp-faq .tbp-faq__freccia {
	flex: 0 0 auto;
	transition: transform var(--tbp-moto-medio, 240ms) var(--tbp-moto-curva, ease);
}
#tbp-faq details[open] > summary .tbp-faq__freccia {
	transform: rotate(180deg);
}
#tbp-faq .tbp-faq__risposta {
	max-width: 65ch;
	padding: 0 4px 24px;
}
#tbp-faq details[open] > .tbp-faq__risposta {
	animation: tbp-faq-apri var(--tbp-moto-medio, 240ms) var(--tbp-moto-curva, ease) both;
}
@keyframes tbp-faq-apri {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
#tbp-faq .tbp-faq__a p {
	line-height: 1.6;
}
#tbp-faq .tbp-faq__a p + p {
	margin-top: 12px;
}
#tbp-faq .tbp-faq__a a,
#tbp-faq .tbp-faq__fonti a,
#tbp-faq .tbp-faq__nota a,
#tbp-faq dl.tbp-faq__recapiti a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
#tbp-faq p.tbp-faq__fonti,
#tbp-faq p.tbp-faq__solo-it {
	margin-top: 16px;
	font-size: .875rem;
	line-height: 1.5;
}
#tbp-faq p.tbp-faq__solo-it {
	margin: 0 0 12px;
}
#tbp-faq p.tbp-faq__fonti span {
	font-weight: 700;
}
#tbp-faq p.tbp-faq__azioni {
	margin-top: 8px;
}
#tbp-faq .tbp-faq__link-manuale {
	display: grid;
	gap: 4px;
	margin-top: 8px;
	font-size: .875rem;
}
#tbp-faq .tbp-faq__link-manuale input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: var(--fq-campo);
	color: var(--fq-testo);
	font-size: 16px;
}
#tbp-faq mark.tbp-faq__trovato {
	padding: 0 1px;
	border-radius: 4px;
}
#tbp-faq p.tbp-faq__nota {
	max-width: 65ch;
	margin-top: 32px;
	font-size: .875rem;
	line-height: 1.5;
}

/* Nessun risultato */
#tbp-faq .tbp-faq__vuoto {
	margin-top: 16px;
	padding: 24px;
	border-radius: 22px;
}
#tbp-faq .tbp-faq__vuoto[hidden] {
	display: none;
}
#tbp-faq p.tbp-faq__vuoto-titolo {
	margin-bottom: 8px;
	font-family: var(--tbp-font-titoli, var(--tbp-font));
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
#tbp-faq p.tbp-faq__prova {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	margin-top: 12px;
	font-size: .875rem;
}
#tbp-faq p.tbp-faq__prova > span {
	font-weight: 700;
}
#tbp-faq p.tbp-faq__vuoto-pop {
	margin: 16px 0 8px;
	font-size: .875rem;
	font-weight: 700;
}

/* ── Non trovi la risposta? ──────────────────────────────────────────── */
#tbp-faq .tbp-faq__fine {
	margin-top: 48px;
	padding: 24px 16px;
	border-radius: 24px;
}
#tbp-faq h2.tbp-faq__fine-titolo {
	margin: 0 0 8px;
}
#tbp-faq ul.tbp-faq__canali {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}
#tbp-faq a.tbp-faq__canale {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 80px;
	height: 100%;
	padding: 16px;
	border-radius: 16px;
	text-decoration: none;
	transition: transform var(--tbp-moto-tocco, 80ms) var(--tbp-moto-curva, ease);
}
#tbp-faq a.tbp-faq__canale:active {
	transform: scale(.985);
}
#tbp-faq .tbp-faq__canale-icona {
	--tbp-icon: 48px;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: contain;
}
#tbp-faq .tbp-faq__canale-testo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
#tbp-faq .tbp-faq__canale-nome {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
#tbp-faq .tbp-faq__canale-det {
	font-size: .875rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
#tbp-faq .tbp-faq__avanti {
	flex: 0 0 auto;
}
#tbp-faq dl.tbp-faq__recapiti {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 24px 0 0;
	padding: 0;
}
#tbp-faq dl.tbp-faq__recapiti > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
}
#tbp-faq dl.tbp-faq__recapiti dt {
	margin: 0;
	font-size: .875rem;
	font-weight: 700;
}
#tbp-faq dl.tbp-faq__recapiti dd {
	margin: 0;
	font-size: .875rem;
}
#tbp-faq dl.tbp-faq__recapiti dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
@media (min-width: 850px) {
	#tbp-faq .tbp-faq__fine {
		padding: 48px;
	}
	#tbp-faq ul.tbp-faq__canali {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ── Telefono ────────────────────────────────────────────────────────── */
@media (max-width: 849px) {
	/* Le domande più cercate in una fila che scorre di lato (non spingono giù le tessere). */
	#tbp-faq .tbp-faq__popolari {
		margin-right: -16px;
	}
	#tbp-faq .tbp-faq__popolari ul.tbp-faq__pop-lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0 16px 4px 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#tbp-faq .tbp-faq__popolari ul.tbp-faq__pop-lista::-webkit-scrollbar {
		display: none;
	}
	#tbp-faq .tbp-faq__popolari a.tbp-faq__pop {
		white-space: nowrap;
	}
	#tbp-faq .tbp-faq__tessere-nav {
		margin-top: 32px;
	}
	#tbp-faq .tbp-faq__corpo {
		margin-top: 32px;
	}
}

/* Fuoco da tastiera visibile su tutto quello che si tocca. */
#tbp-faq :is(a, button, summary):focus-visible {
	outline: 3px solid var(--fq-fuoco) !important;
	outline-offset: 3px;
}
#tbp-faq summary:focus-visible {
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	#tbp-faq .tbp-faq__freccia,
	#tbp-faq a.tbp-faq__chip,
	#tbp-faq a.tbp-faq__tessera,
	#tbp-faq a.tbp-faq__canale,
	#tbp-faq a.tbp-faq__pop,
	#tbp-faq .tbp-faq__barra {
		transition: none !important;
	}
	#tbp-faq details[open] > .tbp-faq__risposta {
		animation: none !important;
	}
	#tbp-faq a.tbp-faq__tessera:active,
	#tbp-faq a.tbp-faq__canale:active {
		transform: none;
	}
}

/* ── Caratteri: il foglio dei caratteri forza i titoli nello strato tbp-caratteri ── */
@layer tbp-caratteri {
	html body #tbp-faq h1.tbp-faq__titolo {
		font: 800 2.25rem/1.1 var(--tbp-font-titoli, var(--tbp-font)) !important;
		letter-spacing: -0.02em !important;
		text-align: left !important;
		text-transform: none !important;
	}
	html body #tbp-faq :is(h2.tbp-faq__h2, h2.tbp-faq__fine-titolo) {
		font: 700 1.375rem/1.25 var(--tbp-font-titoli, var(--tbp-font)) !important;
		letter-spacing: -0.01em !important;
		text-transform: none !important;
	}
	html body #tbp-faq h2.tbp-faq__h2 span {
		font: inherit !important;
	}
	html body #tbp-faq .tbp-faq__tessera-nome {
		font-family: var(--tbp-font-titoli, var(--tbp-font)) !important;
		font-weight: 700 !important;
	}
	html body #tbp-faq :is(p.tbp-faq__occhiello, h2.tbp-faq__etichetta) {
		font: 700 .875rem/1.3 var(--tbp-font) !important;
		letter-spacing: .04em !important;
		text-transform: uppercase !important;
	}
	@media (min-width: 850px) {
		html body #tbp-faq h1.tbp-faq__titolo {
			font-size: 3rem !important;
		}
		html body #tbp-faq :is(h2.tbp-faq__h2, h2.tbp-faq__fine-titolo) {
			font-size: 1.5rem !important;
		}
	}
}

/* ── Colori, nei tre temi ──────────────────────────────────────────────
 * Nello strato tbp-appearance: il tema scuro forza il testo chiaro con !important nello stesso
 * strato (tbp-appearance.css); queste regole vincono con un selettore più preciso.
 */
@layer tbp-appearance {
	html body #tbp-faq input.tbp-faq__campo {
		width: 100% !important;
		height: 60px !important;
		min-height: 60px !important;
		margin: 0 !important;
		padding: 0 56px 0 52px !important;
		border: 1px solid var(--fq-campo-linea) !important;
		border-radius: 16px !important;
		background: var(--fq-campo) !important;
		box-shadow: none !important;
		color: var(--fq-testo) !important;
		-webkit-text-fill-color: currentColor !important;
		font-family: var(--tbp-font);
		font-size: 1.0625rem !important;
		line-height: 1.2;
		-webkit-appearance: none;
		appearance: none;
	}
	html body #tbp-faq input.tbp-faq__campo::-webkit-search-cancel-button {
		-webkit-appearance: none;
		display: none;
	}
	html body #tbp-faq input.tbp-faq__campo::placeholder {
		color: var(--fq-tenue);
		-webkit-text-fill-color: var(--fq-tenue);
		opacity: 1;
	}
	html body #tbp-faq input.tbp-faq__campo:focus,
	html body #tbp-faq input.tbp-faq__campo:focus-visible {
		outline: none !important;
		box-shadow: inset 0 0 0 2px var(--fq-anello) !important;
	}
	@media (max-width: 849px) {
		html body #tbp-faq input.tbp-faq__campo {
			height: 56px !important;
			min-height: 56px !important;
			font-size: 16px !important; /* sotto i 16 px Safari ingrandisce */
		}
	}
	html body .tbp-info-page.tbp-faq-pagina,
	html body .tbp-info-page.tbp-faq-pagina > .container {
		background: transparent !important;
		box-shadow: none !important;
	}
	html body #tbp-faq .tbp-faq__barra {
		background: var(--tbp-faq-fondo-barra, var(--fq-fondo)) !important;
	}
	html body #tbp-faq :is(h1.tbp-faq__titolo, h2.tbp-faq__h2, h2.tbp-faq__h2 span, h2.tbp-faq__fine-titolo, p.tbp-faq__vuoto-titolo, .tbp-faq__tessera-nome, .tbp-faq__canale-nome) {
		color: var(--fq-titolo) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq summary.tbp-faq__domanda,
	html body #tbp-faq summary.tbp-faq__domanda .tbp-faq__q {
		color: var(--fq-titolo) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq :is(p.tbp-faq__lead, .tbp-faq__a p, .tbp-faq__vuoto p, .tbp-faq__fine-testa p, p.tbp-faq__stato, dl.tbp-faq__recapiti dt, dl.tbp-faq__recapiti dd, a.tbp-faq__chip, a.tbp-faq__chip .tbp-faq__chip-nome) {
		color: var(--fq-testo) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq :is(p.tbp-faq__occhiello, h2.tbp-faq__etichetta, p.tbp-faq__nota, p.tbp-faq__fonti, p.tbp-faq__fonti span, p.tbp-faq__solo-it, .tbp-faq__link-manuale span, .tbp-faq__chip-num, a.tbp-faq__gruppo-link) {
		color: var(--fq-tenue) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	/* Sui riempimenti il secondario è più scuro (il tenue sull'avorio è sotto AA). */
	html body #tbp-faq :is(.tbp-faq__tessera-desc, .tbp-faq__tessera-num, .tbp-faq__canale-det, .tbp-faq__vuoto p, .tbp-faq__fine-testa p, .tbp-faq__fine dt, .tbp-faq__fine dd) {
		color: var(--fq-nota) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq :is(.tbp-faq__a a, .tbp-faq__nota a, .tbp-faq__fonti a, .tbp-faq__recapiti a, a.tbp-faq__pop, button.tbp-faq__mostra-tutte, button.tbp-faq__tutte, button.tbp-faq__copia, button.tbp-faq__copia span, button.tbp-faq__parola) {
		color: var(--fq-link) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq :is(button.tbp-faq__mostra-tutte, button.tbp-faq__tutte, button.tbp-faq__copia, button.tbp-faq__parola, button.tbp-faq__svuota) {
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}
	html body #tbp-faq :is(.tbp-faq__freccia, .tbp-faq__lente, button.tbp-faq__svuota, .tbp-faq__avanti) {
		color: var(--fq-tenue) !important;
	}
	html body #tbp-faq mark.tbp-faq__trovato {
		background: var(--fq-trovato) !important;
		color: var(--fq-trovato-testo) !important;
		-webkit-text-fill-color: currentColor !important;
	}

	/* Pillole delle domande più cercate */
	html body #tbp-faq a.tbp-faq__pop {
		background: var(--fq-pillola) !important;
	}
	@media (min-width: 850px) {
		html body #tbp-faq .tbp-faq__popolari {
			background: var(--fq-scheda) !important;
		}
		html body #tbp-faq .tbp-faq__popolari a.tbp-faq__pop {
			background: transparent !important;
		}
		html body #tbp-faq .tbp-faq__popolari h2.tbp-faq__etichetta {
			color: var(--fq-nota) !important;
		}
	}

	/* Tessere */
	html body #tbp-faq a.tbp-faq__tessera {
		background: var(--fq-scheda) !important;
		box-shadow: none !important;
	}
	html body #tbp-faq a.tbp-faq__tessera[aria-current="true"] {
		background: var(--fq-scelto) !important;
		box-shadow: inset 0 0 0 2px var(--fq-anello) !important;
	}
	html body #tbp-faq a.tbp-faq__tessera[aria-current="true"] :is(.tbp-faq__tessera-nome, .tbp-faq__tessera-desc, .tbp-faq__tessera-num) {
		color: var(--fq-scelto-testo) !important;
	}

	/* Colonna degli argomenti */
	html body #tbp-faq a.tbp-faq__chip[aria-current="true"] {
		background: var(--fq-scelto) !important;
	}
	html body #tbp-faq a.tbp-faq__chip[aria-current="true"],
	html body #tbp-faq a.tbp-faq__chip[aria-current="true"] :is(.tbp-faq__chip-nome, .tbp-faq__chip-num) {
		color: var(--fq-scelto-testo) !important;
	}
	html body #tbp-faq a.tbp-faq__gruppo-link[aria-current="true"] {
		color: var(--fq-titolo) !important;
	}

	/* Nessun risultato e riquadro finale */
	html body #tbp-faq .tbp-faq__vuoto,
	html body #tbp-faq .tbp-faq__fine {
		background: var(--fq-scheda) !important;
	}
	html body #tbp-faq a.tbp-faq__canale {
		background: var(--fq-scheda-su) !important;
	}
	html body #tbp-faq dl.tbp-faq__recapiti :is(dt, dd, dd a) {
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	@media (hover: hover) {
		html body #tbp-faq a.tbp-faq__tessera:not([aria-current="true"]):hover,
		html body #tbp-faq a.tbp-faq__canale:hover {
			box-shadow: inset 0 0 0 1px var(--fq-anello) !important;
		}
		html body #tbp-faq a.tbp-faq__tessera:hover .tbp-faq__tessera-nome,
		html body #tbp-faq a.tbp-faq__canale:hover .tbp-faq__canale-nome,
		html body #tbp-faq summary.tbp-faq__domanda:hover .tbp-faq__q {
			text-decoration: underline;
			text-underline-offset: 4px;
		}
		html body #tbp-faq a.tbp-faq__chip:not([aria-current="true"]):hover,
		html body #tbp-faq .tbp-faq__vuoto a.tbp-faq__pop:hover {
			background: var(--fq-campo) !important;
		}
		html body #tbp-faq .tbp-faq__popolari a.tbp-faq__pop:hover {
			text-decoration: underline;
			text-underline-offset: 4px;
		}
		html body #tbp-faq a.tbp-faq__gruppo-link:hover {
			text-decoration: underline;
		}
	}
}

/* 13/10/2026 (CEO: «le sezioni falle di colore diverso, non si capisce»). Nella colonna degli argomenti i titoli delle
   sezioni erano grigi e piccoli, quasi uguali alle voci. Ora: rosso ToBePolo, maiuscolo, con una riga sopra ogni
   sezione. Le voci restano com'erano. Il colore sta nello strato delle apparenze, dove vive la regola di prima. */
#tbp-faq { --fq-sezione: #B5121B; }                               /* su bianco 6,6:1 */
html[data-tbp-theme="dark"] #tbp-faq { --fq-sezione: #FF9C96; }   /* su #0F0F0F 9,4:1 */
#tbp-faq .tbp-faq__chips > li.tbp-faq__chips-gruppo {
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--fq-linea);
}
#tbp-faq .tbp-faq__chips a.tbp-faq__gruppo-link {
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}
@layer tbp-appearance {
	/* Nel tema scuro una regola generale dei link (tbp-linguaggio.css, stesso strato, un id e quattro condizioni)
	   vinceva: qui l'id è scritto due volte per pesare di più. */
	html body #tbp-faq#tbp-faq .tbp-faq__chips a.tbp-faq__gruppo-link,
	html body #tbp-faq#tbp-faq .tbp-faq__chips a.tbp-faq__gruppo-link[aria-current="true"] {
		color: var(--fq-sezione) !important;
		-webkit-text-fill-color: currentColor !important;
	}
}

/* 13/10/2026 (CEO, dal computer: «quando faccio hover su queste domande non si illuminano e quindi non capisco»).
   Le domande («Le più chieste» e ogni riga delle risposte) al passaggio del mouse prendono un fondo tenue e la
   mano: si capisce che si aprono. Niente cambia di misura, quindi niente si sposta. Sta nello strato delle
   apparenze, con l'id scritto due volte, dove vivono le regole dei link che altrimenti vincono.
   Subito dopo (CEO: «togli l'underline, non è bello»): niente sottolineatura al passaggio, nemmeno quella che le
   righe delle risposte avevano già. */
#tbp-faq { --fq-sopra: rgba(11, 74, 42, .09); }
html[data-tbp-theme="dark"] #tbp-faq { --fq-sopra: rgba(255, 255, 255, .12); }
@layer tbp-appearance {
	@media (hover: hover) {
		html body #tbp-faq#tbp-faq .tbp-faq__popolari a.tbp-faq__pop:hover,
		html body #tbp-faq#tbp-faq summary.tbp-faq__domanda:hover {
			background: var(--fq-sopra) !important;
			box-shadow: 0 0 0 6px var(--fq-sopra) !important;
			border-radius: 6px !important;
			cursor: pointer !important;
		}
		html body #tbp-faq#tbp-faq .tbp-faq__popolari a.tbp-faq__pop:hover,
		html body #tbp-faq#tbp-faq summary.tbp-faq__domanda:hover .tbp-faq__q {
			text-decoration: none !important;
		}
	}
}

/* 13/10/2026, kit faq-calcolatore-13-10 (CEO, sulla sezione «Incassi e fatture per chi insegna»: «qua aggiungi il
   cost calculator»). Il calcolatore «Quanto ricevi», sotto il titolo della sezione e prima delle domande
   (inc/faq/calcolatore.php, js/tbp-faq-calcolatore.js). Stesse voci e stesso conto del calcolatore accanto al prezzo
   nel modulo di creazione (.tbp-price-simulation), con i gettoni di questa pagina: un riquadro pieno, senza ombre e
   senza bordi colorati d'accento.
   Telefono: una colonna, senza titolo; il risultato e i costi stanno subito sotto i campi (si vedono anche con la tastiera aperta)
   e il conto riga per riga si apre con «Vedi il conto», così il riquadro non spinge via la prima domanda. Quando il
   riquadro è largo almeno 620 px: campi e risultato a sinistra, il conto sempre aperto a destra. Senza JavaScript, o
   se lo script non si accende: l'esempio fermo del server, con il conto in vista.
   Niente cambia di misura mentre si scrive: i numeri sono a larghezza fissa e l'errore prende il posto
   dell'etichetta del risultato. */
#tbp-faq { --fq-errore: #B5121B; }                                /* su avorio 6,0:1, su bianco 6,6:1 */
html[data-tbp-theme="dark"] #tbp-faq { --fq-errore: #FF9C96; }    /* su #1E1E1E 8,2:1 */
/* Il contenitore misura lo spazio che c'è davvero (al computer la colonna delle risposte è più stretta della finestra). */
#tbp-faq .tbp-faq-calc-posto {
	container-type: inline-size;
	container-name: tbp-faq-calc;
	margin: 4px 0 16px;
}
#tbp-faq .tbp-faq-calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* una colonna: una riga per ogni pezzo che c'è (il conto chiuso non lascia spazi) */
	gap: 12px;
	padding: 12px 14px;
	border-radius: 22px;
	scroll-margin-top: 8px;
}
#tbp-faq .tbp-faq-calc__ingresso {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-content: start;
	min-width: 0;
}
/* A una colonna il titolo non si vede (il riquadro deve restare basso: sotto c'è subito la prima domanda) ma resta
   per chi usa un lettore di schermo, e dà il nome al gruppo. A due colonne si vede. */
#tbp-faq .tbp-faq-calc__ingresso {
	position: relative;
}
#tbp-faq h3.tbp-faq-calc__titolo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Dal server il riquadro arriva come esempio fermo: la frase al posto dei campi, il conto in vista. Quando lo
   script si accende (ha rifatto i conti di prova del server e tornano) mette --vivo: la frase lascia il posto ai
   campi, che occupano la stessa altezza. Se lo script non arriva o non si accende, resta l'esempio. */
#tbp-faq p.tbp-faq-calc__esempio {
	display: flex;
	align-items: center;
	min-height: 72px;
	font-size: 1rem;
	line-height: 1.4;
}
#tbp-faq .tbp-faq-calc--vivo p.tbp-faq-calc__esempio,
#tbp-faq .tbp-faq-calc:not(.tbp-faq-calc--vivo) .tbp-faq-calc__campi {
	display: none;
}
#tbp-faq .tbp-faq-calc__campi {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 12px;
	align-items: end;
}
#tbp-faq .tbp-faq-calc__campo {
	display: grid;
	gap: 4px;
	min-width: 0;
}
html body #tbp-faq label.tbp-faq-calc__etichetta {
	display: block;
	margin: 0;
	font-family: var(--tbp-font);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#tbp-faq .tbp-faq-calc__passi {
	display: flex;
	align-items: stretch;
	height: 48px;
	border-radius: 16px;
	overflow: hidden;
}
html body #tbp-faq button.tbp-faq-calc__passo {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation; /* tocchi ripetuti senza lo zoom del doppio tocco */
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--tbp-moto-breve, 160ms) var(--tbp-moto-curva, ease);
}
html body #tbp-faq button.tbp-faq-calc__passo:focus-visible {
	outline-offset: -3px;
}
#tbp-faq p.tbp-faq-calc__esito {
	display: grid;
	gap: 0;
	min-width: 0;
}
#tbp-faq .tbp-faq-calc__esito-nome {
	min-height: 1.4em;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
}
#tbp-faq .tbp-faq-calc__netto {
	font-family: var(--tbp-font-titoli, var(--tbp-font));
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* I costi in una riga, sotto il numero: servono quando il conto riga per riga è chiuso. */
#tbp-faq .tbp-faq-calc__costi {
	min-height: 1.4em;
	margin-top: 2px;
	font-size: .8125rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* «Vedi il conto»: solo a una colonna e solo con lo script acceso (regole più sotto). Scritto come «Apri tutte». */
html body #tbp-faq button.tbp-faq-calc__apri {
	display: none;
	align-items: center;
	justify-self: start;
	gap: 4px;
	min-height: 44px;
	margin: -6px 0 -10px;
	padding: 0 4px 0 0;
	border: 0;
	border-radius: 12px;
	font-family: var(--tbp-font);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
	cursor: pointer;
}
#tbp-faq .tbp-faq-calc__freccia {
	flex: 0 0 auto;
	transition: transform var(--tbp-moto-medio, 240ms) var(--tbp-moto-curva, ease);
}
#tbp-faq .tbp-faq-calc__apri[aria-expanded="true"] .tbp-faq-calc__freccia {
	transform: rotate(180deg);
}
html body #tbp-faq .tbp-faq-calc--vivo button.tbp-faq-calc__apri {
	display: inline-flex;
}
#tbp-faq .tbp-faq-calc--vivo:not(.is-aperto) :is(dl.tbp-faq-calc__conto, p.tbp-faq-calc__nota),
#tbp-faq .tbp-faq-calc:not(.tbp-faq-calc--vivo) .tbp-faq-calc__costi {
	display: none;
}
#tbp-faq dl.tbp-faq-calc__conto {
	margin: 0;
	padding: 0;
	min-width: 0;
}
/* Ogni riga: il nome e, sotto in piccolo, come si calcola; a destra l'importo. La colonna degli importi è larga
   quanto il numero più lungo che può capitare (100.000,00 €): così nessun nome va a capo mentre si scrive. */
#tbp-faq .tbp-faq-calc__riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(6.9em, auto);
	gap: 0 12px;
	align-items: start;
	padding: 6px 0;
	border-top: 1px solid var(--fq-linea);
}
html body #tbp-faq .tbp-faq-calc__riga dt,
html body #tbp-faq .tbp-faq-calc__riga dd {
	margin: 0;
	padding: 0;
	font-family: var(--tbp-font);
	font-size: .875rem;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}
html body #tbp-faq .tbp-faq-calc__riga dt {
	font-weight: 400;
	min-width: 0;
}
html body #tbp-faq .tbp-faq-calc__riga dd {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}
#tbp-faq .tbp-faq-calc__come {
	display: block;
	font-size: .8125rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}
#tbp-faq p.tbp-faq-calc__nota {
	font-size: .8125rem;
	line-height: 1.45;
}
#tbp-faq p.tbp-faq-calc__nota a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Due colonne quando il riquadro è largo almeno 620 px (telefono in orizzontale largo, tablet, computer): campi e
   risultato a sinistra, il conto a destra sempre aperto, la nota sotto per tutta la larghezza. «Vedi il conto» e la
   riga dei costi non servono. */
@container tbp-faq-calc (min-width: 620px) {
	#tbp-faq .tbp-faq-calc {
		grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
		grid-template-areas: "ingresso conto" "nota nota";
		gap: 16px 24px;
		padding: 20px;
	}
	#tbp-faq .tbp-faq-calc__ingresso {
		grid-area: ingresso;
		gap: 12px;
	}
	#tbp-faq h3.tbp-faq-calc__titolo {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		text-wrap: balance;
	}
	#tbp-faq dl.tbp-faq-calc__conto {
		grid-area: conto;
	}
	#tbp-faq p.tbp-faq-calc__nota {
		grid-area: nota;
	}
	#tbp-faq .tbp-faq-calc__campi {
		grid-template-columns: minmax(0, 1fr) 112px;
	}
	html body #tbp-faq .tbp-faq-calc--vivo button.tbp-faq-calc__apri,
	#tbp-faq .tbp-faq-calc .tbp-faq-calc__costi {
		display: none;
	}
	#tbp-faq .tbp-faq-calc--vivo:not(.is-aperto) :is(dl.tbp-faq-calc__conto, p.tbp-faq-calc__nota) {
		display: block;
	}
	#tbp-faq .tbp-faq-calc__netto {
		font-size: 2rem;
	}
	#tbp-faq .tbp-faq-calc__riga:first-child {
		padding-top: 0;
		border-top: 0;
	}
}
@container tbp-faq-calc (min-width: 800px) {
	#tbp-faq .tbp-faq-calc {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: 16px 40px;
		padding: 24px;
	}
	#tbp-faq .tbp-faq-calc__campi {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}
}
/* Mentre si cerca il calcolatore resta solo se fra i risultati c'è la sua domanda («Quanto ricevo…»). */
#tbp-faq.is-cercando .tbp-faq__sezione:has(#quanto-ricevo[hidden]) .tbp-faq-calc {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	html body #tbp-faq button.tbp-faq-calc__passo,
	#tbp-faq .tbp-faq-calc__freccia {
		transition: none !important;
	}
}
@layer tbp-caratteri {
	html body #tbp-faq h3.tbp-faq-calc__titolo {
		font: 700 1.125rem/1.25 var(--tbp-font-titoli, var(--tbp-font)) !important;
		letter-spacing: -0.01em !important;
		text-align: left !important;
		text-transform: none !important;
	}
}
@layer tbp-appearance {
	html body #tbp-faq .tbp-faq-calc {
		background: var(--fq-scheda) !important;
		box-shadow: none !important;
	}
	html body #tbp-faq#tbp-faq :is(h3.tbp-faq-calc__titolo, .tbp-faq-calc__netto) {
		color: var(--fq-titolo) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq#tbp-faq :is(p.tbp-faq-calc__esempio, .tbp-faq-calc__riga dt, .tbp-faq-calc__riga dd) {
		color: var(--fq-testo) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	/* Sul riempimento il secondario è quello scuro (--fq-nota), come nelle tessere. */
	html body #tbp-faq#tbp-faq :is(label.tbp-faq-calc__etichetta, .tbp-faq-calc__esito-nome, .tbp-faq-calc__costi, .tbp-faq-calc__come, p.tbp-faq-calc__nota, .tbp-faq-calc__regole) {
		color: var(--fq-nota) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq#tbp-faq :is(p.tbp-faq-calc__nota a, button.tbp-faq-calc__apri, button.tbp-faq-calc__apri span) {
		color: var(--fq-link) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq#tbp-faq .tbp-faq-calc__esito.is-errore .tbp-faq-calc__esito-nome {
		color: var(--fq-errore) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	html body #tbp-faq#tbp-faq .tbp-faq-calc.is-vuoto :is(.tbp-faq-calc__netto, .tbp-faq-calc__riga dd) {
		color: var(--fq-nota) !important;
		-webkit-text-fill-color: currentColor !important;
	}
	/* Campo con i due bottoni: un solo riquadro, del colore dei canali nel riquadro finale. */
	html body #tbp-faq .tbp-faq-calc__passi {
		background: var(--fq-scheda-su) !important;
		box-shadow: inset 0 0 0 1px var(--fq-linea) !important;
	}
	html body #tbp-faq .tbp-faq-calc__passi:has(input[aria-invalid="true"]) {
		box-shadow: inset 0 0 0 2px var(--fq-errore) !important;
	}
	html body #tbp-faq#tbp-faq button.tbp-faq-calc__passo,
	html body #tbp-faq#tbp-faq button.tbp-faq-calc__apri {
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}
	html body #tbp-faq#tbp-faq button.tbp-faq-calc__passo {
		color: var(--fq-titolo) !important;
	}
	html body #tbp-faq#tbp-faq input.tbp-faq-calc__valore {
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 48px !important;
		min-height: 48px !important;
		margin: 0 !important;
		padding: 0 2px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--fq-testo) !important;
		-webkit-text-fill-color: currentColor !important;
		font-family: var(--tbp-font) !important;
		font-size: 1.0625rem !important; /* mai sotto i 16 px: Safari ingrandirebbe la pagina */
		font-weight: 700 !important;
		font-variant-numeric: tabular-nums;
		line-height: 1.2 !important;
		text-align: center !important;
		-webkit-appearance: none;
		appearance: none;
	}
	html body #tbp-faq#tbp-faq input.tbp-faq-calc__valore:focus,
	html body #tbp-faq#tbp-faq input.tbp-faq-calc__valore:focus-visible {
		outline: none !important;
		box-shadow: inset 0 0 0 2px var(--fq-anello) !important;
	}
	@media (hover: hover) {
		html body #tbp-faq#tbp-faq button.tbp-faq-calc__passo:hover {
			background: var(--fq-sopra) !important;
		}
	}
	html body #tbp-faq#tbp-faq button.tbp-faq-calc__passo:active {
		background: var(--fq-sopra) !important;
	}
}