.tdq-widget {
	--nq-verde: #3a6b52;
	--nq-verde-scuro: #2c5240;
	--nq-verde-chiaro: #e7f0ea;
	--nq-crema: #faf9f5;
	--nq-bordo: #e3e0d6;
	--nq-testo: #2b2f2c;
	--nq-testo-secondario: #6f736e;
	--nq-ombra: 0 2px 10px rgba(30, 40, 30, 0.07), 0 1px 2px rgba(30, 40, 30, 0.05);

	max-width: 560px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--nq-testo);
	box-sizing: border-box;
	background: var(--nq-crema);
	border: 1px solid var(--nq-bordo);
	border-radius: 16px;
	box-shadow: var(--nq-ombra);
	padding: 28px 30px 26px;
}
.tdq-widget * {
	box-sizing: border-box;
}
.tdq-widget .tdq-titolo {
	margin: 0 0 8px;
	font-size: 1.32em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--nq-testo) !important;
}
.tdq-widget h4 {
	color: var(--nq-testo) !important;
}
.tdq-sottotitolo {
	margin: 0 0 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--nq-bordo);
	color: var(--nq-testo-secondario);
	font-size: 0.95em;
	line-height: 1.5;
}
.tdq-campo {
	margin-bottom: 18px;
}
.tdq-etichetta {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 0.95em;
}
.tdq-faccine {
	display: flex;
	gap: 8px;
}
.tdq-faccina {
	flex: 1;
	text-align: center;
	border: 2px solid var(--nq-bordo);
	border-radius: 12px;
	padding: 11px 4px;
	cursor: pointer;
	font-size: 1.6em;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	user-select: none;
}
.tdq-faccina:hover {
	border-color: #b7cabf;
}
.tdq-faccina input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.tdq-faccina:has(input:focus-visible) {
	outline: 2px solid var(--nq-verde);
	outline-offset: 2px;
}
.tdq-faccina:has(input:checked) {
	border-color: var(--nq-verde);
	background: var(--nq-verde-chiaro);
	box-shadow: 0 0 0 1px var(--nq-verde) inset;
	transform: scale(1.05);
}
.tdq-stelle {
	display: flex;
	gap: 4px;
	font-size: 1.6em;
	direction: ltr;
}
.tdq-stella {
	cursor: pointer;
	color: #dcd6c8;
	line-height: 1;
	user-select: none;
	transition: color 0.1s ease;
}
.tdq-stella input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
/* riempie la stella corrente e tutte quelle precedenti nel gruppo */
.tdq-stella:has(~ .tdq-stella input:checked),
.tdq-stella:has(input:checked) {
	color: #e0a940;
}
.tdq-campo textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--nq-bordo);
	border-radius: 10px;
	font-family: inherit;
	font-size: 1em;
	background: #fff;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tdq-campo textarea:focus {
	outline: none;
	border-color: var(--nq-verde);
	box-shadow: 0 0 0 3px var(--nq-verde-chiaro);
}
.tdq-nascondi {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tdq-invia {
	background: var(--nq-verde);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.tdq-invia:hover {
	background: var(--nq-verde-scuro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.tdq-invia:active {
	transform: translateY(1px);
}
.tdq-invia:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}
.tdq-messaggio {
	margin: 12px 0 0;
	font-size: 0.9em;
	min-height: 1.2em;
}
.tdq-messaggio.tdq-errore {
	color: #b3261e;
}
.tdq-messaggio.tdq-successo {
	color: var(--nq-verde-scuro);
}

.tdq-risultati {
	text-align: center;
}
.tdq-nota-gia-risposto {
	background: var(--nq-verde-chiaro);
	border-radius: 10px;
	padding: 10px 14px;
	color: var(--nq-verde-scuro);
	font-size: 0.92em;
}
.tdq-conteggio {
	color: var(--nq-testo-secondario);
	font-size: 0.9em;
	margin-top: -4px;
}
.tdq-termometro {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 22px auto 4px;
}
.tdq-termometro-tubo {
	width: 34px;
	height: 160px;
	border-radius: 17px;
	background: #eceae2;
	border: 3px solid var(--nq-bordo);
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.tdq-termometro-liquido {
	width: 100%;
	background: linear-gradient(180deg, #f2c94c, #eb5757);
	border-radius: 0 0 14px 14px;
	transition: height 0.4s ease;
}
.tdq-termometro-bulbo {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #eb5757;
	border: 3px solid var(--nq-bordo);
	margin-top: -6px;
}
.tdq-valore-umore {
	font-weight: 700;
	font-size: 1.2em;
	margin: 8px 0 24px;
}
.tdq-barre {
	text-align: left;
	max-width: 420px;
	margin: 0 auto;
}
.tdq-barra-riga {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 11px;
}
.tdq-barra-etichetta {
	flex: 0 0 150px;
	font-size: 0.88em;
	color: var(--nq-testo-secondario);
}
.tdq-barra-sfondo {
	flex: 1 1 auto;
	height: 10px;
	background: #ece9e0;
	border-radius: 999px;
	overflow: hidden;
	display: block;
}
.tdq-barra-riempimento {
	display: block;
	height: 100%;
	background: var(--nq-verde);
	border-radius: 999px;
	transition: width 0.4s ease;
}
.tdq-barra-valore {
	flex: 0 0 30px;
	text-align: right;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--nq-testo);
}
.tdq-commenti {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--nq-bordo);
	text-align: left;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
.tdq-commenti h4 {
	margin: 0 0 10px;
	font-size: 1em;
}
.tdq-commenti ul {
	margin: 0;
	padding-left: 18px;
	color: var(--nq-testo-secondario);
	font-size: 0.92em;
}
.tdq-commenti li {
	margin-bottom: 7px;
}

@media (max-width: 480px) {
	.tdq-widget {
		padding: 22px 18px 20px;
		border-radius: 12px;
	}
	.tdq-barra-etichetta {
		flex-basis: 110px;
	}
}

/* Il tema del sito non ha una propria modalità scura: il widget resta
   sempre nella sua palette chiara (coerente col resto della pagina)
   invece di reagire da solo alla preferenza del dispositivo, cosa che
   creerebbe un riquadro scuro isolato su una pagina chiara. */