.dedeho-quiz {
	margin: 0 0 1rem;
}

.dedeho-quiz__inner {
	display: block;
}

.dedeho-quiz__label {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-bottom: 0.25rem;
}

.dedeho-quiz__question {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.dedeho-quiz__input {
	width: 100%;
}

.dedeho-quiz__loading {
	font-size: 0.85em;
	opacity: 0.6;
}

/* Honeypot: fuori dalla viewport, non display:none (alcuni bot lo rilevano). */
.dedeho-quiz__trap {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Anteprima nell'editor Elementor */
.dedeho-quiz--preview {
	padding: 0.75rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
}

.dedeho-quiz--preview .dedeho-quiz__question {
	font-style: italic;
	opacity: 0.7;
}

/*
 * Messaggio di errore della verifica, mostrato accanto alla domanda.
 *
 * Colore di sfondo e di testo sono entrambi espliciti: il blocco vive dentro
 * form con temi qualsiasi, chiari o scuri, e ereditare il colore del testo
 * significa ritrovarsi testo rosa pallido su fondo rosa pallido.
 */
.dedeho-quiz__error:not( .forminator-error-message ):not( .elementor-message ) {
	margin-top: 0.4rem;
	padding: 0.55rem 0.75rem;
	border-left: 3px solid #d63638;
	border-radius: 3px;
	background: #fdecea;
	color: #7a1a1c;
	font-size: 0.9em;
	line-height: 1.4;
	text-shadow: none;
}

/*
 * Quando il messaggio porta le classi del form builder e' il tema a vestirlo,
 * come fa con gli errori degli altri campi: qui serve solo lo spazio sopra.
 */
.dedeho-quiz__error.forminator-error-message,
.dedeho-quiz__error.elementor-message {
	display: block;
	margin-top: 0.4rem;
}

/*
 * Atomic Form (e-form) di Elementor Pro.
 *
 * Il blocco e' figlio diretto del <form>, che e' un contenitore flex a capo
 * automatico: flex-basis al 100% lo mette su una riga propria, sopra il
 * pulsante di invio.
 *
 * Le variabili permettono al tema di adattare l'aspetto senza riscrivere le
 * regole, per esempio:
 *   .dedeho-quiz--atomic { --dedeho-quiz-radius: 9px; --dedeho-quiz-border: #ccc; }
 */
.dedeho-quiz--atomic {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.dedeho-quiz--atomic .dedeho-quiz__inner {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.dedeho-quiz--atomic .dedeho-quiz__label {
	margin-bottom: 0;
	font-size: var( --dedeho-quiz-label-size, 0.82rem );
	font-weight: 700;
	opacity: 1;
}

.dedeho-quiz--atomic .dedeho-quiz__question {
	margin-bottom: 0;
	font-weight: 400;
}

.dedeho-quiz--atomic .dedeho-quiz__input {
	box-sizing: border-box;
	width: 100%;
	padding: var( --dedeho-quiz-padding, 12px );
	border: 1px solid var( --dedeho-quiz-border, #cccccc );
	border-radius: var( --dedeho-quiz-radius, 9px );
	background: var( --dedeho-quiz-bg, #ffffff );
	color: var( --dedeho-quiz-color, #111111 );
	font: inherit;
}

.dedeho-quiz--atomic .dedeho-quiz__input[aria-invalid="true"] {
	border-color: #d63638;
}

/* Blocco inserito in un segnaposto (#dedeho-quiz-slot): lo spazio lo decide il contenitore. */
.dedeho-quiz-slot > .dedeho-quiz--atomic,
#dedeho-quiz-slot > .dedeho-quiz--atomic,
[data-dedeho-quiz-slot] > .dedeho-quiz--atomic {
	flex-basis: 100%;
}