/**
 * ESCA — stile.
 * Tutto è dentro .esca per non toccare il resto del tema.
 * I colori arrivano da variabili impostate dal pannello.
 */

.esca {
	--esca-blu: #1f5fa9;
	--esca-carta: #fff;
	--esca-bordo: #e2e5ea;
	--esca-testo2: #5a6270;
	--esca-verde: #0f7b47;
	--esca-verde-bg: #e7f5ed;
	--esca-giallo: #9a5b00;
	--esca-giallo-bg: #fdf2df;
	--esca-arancio: #b64c00;
	--esca-arancio-bg: #fdeade;
	--esca-rosso: #b3261e;
	--esca-rosso-bg: #fdeceb;
	--esca-r: 12px;

	line-height: 1.55;
	max-width: 860px;
	margin: 0 auto;
}

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

.esca .esca-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- schede --- */
.esca-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.esca-tabs button {
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
	background: var(--esca-carta);
	border: 1px solid var(--esca-bordo);
	color: var(--esca-testo2);
	padding: 9px 16px;
	border-radius: 999px;
	line-height: 1.3;
}

.esca-tabs button:hover {
	border-color: #c3c9d2;
}

.esca-tabs button[aria-selected="true"] {
	background: var(--esca-blu);
	border-color: var(--esca-blu);
	color: #fff;
}

/* --- riquadri --- */
.esca-card {
	background: var(--esca-carta);
	border: 1px solid var(--esca-bordo);
	border-radius: var(--esca-r);
	padding: 20px;
	margin-bottom: 16px;
}

.esca .esca-h {
	margin: 0 0 6px;
	font-size: 1.25em;
	line-height: 1.3;
}

.esca .esca-h4 {
	margin: 0 0 12px;
	font-size: 1.1em;
	line-height: 1.3;
}

.esca .esca-aiuto {
	color: var(--esca-testo2);
	font-size: .95em;
	margin: 0 0 14px;
}

.esca .esca-privacy {
	color: var(--esca-verde);
	background: var(--esca-verde-bg);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: .85em;
	margin: 14px 0 0;
	display: inline-block;
}

.esca textarea {
	width: 100%;
	min-height: 210px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85em;
	line-height: 1.5;
	padding: 13px;
	border: 1px solid var(--esca-bordo);
	border-radius: 10px;
	resize: vertical;
	background: #fcfcfd;
	color: inherit;
}

.esca textarea:focus,
.esca input:focus {
	outline: 2px solid var(--esca-blu);
	outline-offset: 1px;
}

.esca-azioni {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
	align-items: center;
}

.esca .esca-btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: 10px;
	line-height: 1.3;
	text-decoration: none;
	display: inline-block;
	border: 1px solid transparent;
}

.esca .esca-btn-p {
	background: var(--esca-blu);
	color: #fff;
	padding: 12px 24px;
	font-weight: 700;
}

.esca .esca-btn-p:hover {
	filter: brightness(.9);
	color: #fff;
}

.esca .esca-btn-p[disabled] {
	opacity: .6;
	cursor: default;
}

.esca .esca-btn-s {
	background: var(--esca-carta);
	color: var(--esca-testo2);
	border-color: var(--esca-bordo);
	padding: 11px 18px;
}

.esca .esca-btn-s:hover {
	border-color: #c3c9d2;
}

.esca .esca-btn-t {
	background: none;
	color: var(--esca-testo2);
	padding: 11px 6px;
	text-decoration: underline;
	font-weight: 500;
}

/* --- verdetto --- */
.esca-verdetto {
	border-radius: var(--esca-r);
	padding: 20px;
	border: 1px solid;
	margin-bottom: 16px;
}

.esca-verdetto .esca-etichetta {
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	opacity: .85;
}

.esca-verdetto h3 {
	font-size: 1.4em;
	margin: 6px 0 8px;
	color: inherit;
	line-height: 1.25;
}

.esca-verdetto p {
	margin: 0;
	color: inherit;
}

.esca-v-alto { background: var(--esca-rosso-bg); border-color: #f2c5c1; color: var(--esca-rosso); }
.esca-v-medio { background: var(--esca-arancio-bg); border-color: #f6cfae; color: var(--esca-arancio); }
.esca-v-basso { background: var(--esca-giallo-bg); border-color: #f2ddb4; color: var(--esca-giallo); }
.esca-v-nessuno { background: var(--esca-verde-bg); border-color: #bfe3ce; color: var(--esca-verde); }

.esca-barra {
	height: 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .09);
	margin: 15px 0 6px;
	overflow: hidden;
}

.esca-barra > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: currentColor;
	transition: width .5s ease;
}

.esca-legenda {
	font-size: .8em;
	opacity: .85;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* --- segnali --- */
.esca-segnale {
	border: 1px solid var(--esca-bordo);
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 9px;
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.esca-pallino {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin-top: 7px;
}

.esca-forte { background: var(--esca-rosso); }
.esca-medio { background: var(--esca-arancio); }
.esca-lieve { background: var(--esca-giallo); }

.esca-segnale strong {
	display: block;
	margin-bottom: 3px;
}

.esca-segnale .esca-desc {
	color: var(--esca-testo2);
	font-size: .95em;
}

.esca-segnale details {
	margin-top: 8px;
}

.esca-segnale summary {
	cursor: pointer;
	font-size: .82em;
	color: var(--esca-blu);
	font-weight: 600;
}

.esca-segnale details p {
	margin: 7px 0 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .82em;
	background: #f4f6f8;
	padding: 9px 11px;
	border-radius: 7px;
	word-break: break-all;
	color: var(--esca-testo2);
}

.esca-ok {
	background: var(--esca-verde-bg);
	border: 1px solid #bfe3ce;
	border-radius: 10px;
	padding: 15px;
	color: var(--esca-verde);
	font-size: .95em;
}

/* --- blocchi informativi --- */
.esca-dafare,
.esca-cta,
.esca-lead {
	/* Ripiego per i browser senza color-mix. */
	background: #eef3fa;
	border: 1px solid #ccdff5;
	background: color-mix(in srgb, var(--esca-blu) 7%, #fff);
	border: 1px solid color-mix(in srgb, var(--esca-blu) 22%, #fff);
	border-radius: var(--esca-r);
	padding: 17px 19px;
	margin-top: 18px;
}

.esca-dafare h4,
.esca-cta h4,
.esca-lead h4 {
	margin: 0 0 10px;
	font-size: 1.05em;
	color: var(--esca-blu);
	line-height: 1.3;
}

.esca-dafare ol,
.esca-dafare ul {
	margin: 0;
	padding-left: 20px;
}

.esca-dafare li {
	margin-bottom: 6px;
	font-size: .95em;
}

.esca-cta p,
.esca-lead p {
	margin: 0 0 12px;
	font-size: .95em;
}

.esca-riepilogo {
	font-size: .85em;
	color: var(--esca-testo2);
	margin-top: 16px;
	border-top: 1px solid var(--esca-bordo);
	padding-top: 13px;
}

.esca-riepilogo code {
	background: #f0f2f5;
	padding: 2px 6px;
	border-radius: 5px;
	word-break: break-all;
}

/* --- modulo contatto --- */
.esca-lead-campi {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.esca-lead input[type="text"],
.esca-lead input[type="email"] {
	flex: 1 1 220px;
	font: inherit;
	padding: 11px 13px;
	border: 1px solid var(--esca-bordo);
	border-radius: 9px;
	background: #fff;
	color: inherit;
}

.esca-consenso {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .88em;
	color: var(--esca-testo2);
	cursor: pointer;
}

.esca-consenso input {
	margin-top: 4px;
	flex: 0 0 auto;
}

.esca-trappola {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.esca-lead-msg {
	margin: 10px 0 0 !important;
	font-size: .88em;
	min-height: 1em;
}

.esca-lead-errore { color: var(--esca-rosso); }
.esca-lead-attesa { color: var(--esca-testo2); }

.esca-lead-ok {
	margin: 0;
	color: var(--esca-verde);
	font-weight: 600;
}

/* --- quiz --- */
.esca-mail {
	border: 1px solid var(--esca-bordo);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.esca-mail-h {
	background: #f4f6f8;
	padding: 12px 15px;
	border-bottom: 1px solid var(--esca-bordo);
	font-size: .88em;
}

.esca-mail-h b {
	color: var(--esca-testo2);
	display: inline-block;
	min-width: 66px;
}

.esca-mail-c {
	padding: 16px 17px;
	white-space: pre-wrap;
	font-size: .95em;
}

.esca-progresso {
	font-size: .85em;
	color: var(--esca-testo2);
	margin: 0 0 10px;
	font-weight: 600;
}

.esca-scelte {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
}

.esca-scelte button {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 13px 24px;
	border-radius: 10px;
	border: 2px solid;
	flex: 1 1 180px;
}

.esca-b-sicura { background: var(--esca-verde-bg); border-color: #bfe3ce; color: var(--esca-verde); }
.esca-b-truffa { background: var(--esca-rosso-bg); border-color: #f2c5c1; color: var(--esca-rosso); }

.esca-esito {
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 15px;
	border: 1px solid;
}

.esca-ok-e { background: var(--esca-verde-bg); border-color: #bfe3ce; }
.esca-no-e { background: var(--esca-rosso-bg); border-color: #f2c5c1; }
.esca-ok-e strong { color: var(--esca-verde); }
.esca-no-e strong { color: var(--esca-rosso); }

.esca-esito strong {
	display: block;
	margin-bottom: 7px;
}

.esca-esito ul {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: .95em;
}

.esca-esito li {
	margin-bottom: 5px;
}

.esca-finale {
	text-align: center;
	padding: 24px 18px;
}

.esca-finale .esca-numero {
	font-size: 2.6em;
	font-weight: 800;
	letter-spacing: -1.5px;
	color: var(--esca-blu);
	line-height: 1.1;
}

.esca-finale p {
	max-width: 520px;
	margin: 12px auto 20px;
}

/* --- domande guidate --- */
.esca-domanda {
	border-bottom: 1px solid var(--esca-bordo);
	padding: 15px 0;
}

.esca-domanda:last-of-type {
	border-bottom: none;
}

.esca .esca-dt {
	margin: 0 0 4px;
	font-weight: 600;
}

.esca .esca-dn {
	margin: 0 0 10px;
	color: var(--esca-testo2);
	font-size: .9em;
}

.esca-opzioni {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.esca-opzioni label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: .95em;
	font-weight: 600;
	border: 1px solid var(--esca-bordo);
	border-radius: 999px;
	padding: 7px 16px;
	background: var(--esca-carta);
	color: var(--esca-testo2);
}

.esca-opzioni label:hover {
	border-color: #c3c9d2;
}

.esca-opzioni input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.esca-opzioni input:checked + span {
	color: var(--esca-blu);
}

/* --- FAQ e firma --- */
.esca-faq {
	border: 1px solid var(--esca-bordo);
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 9px;
}

.esca-faq summary {
	cursor: pointer;
	font-weight: 600;
}

.esca-faq div {
	padding-top: 10px;
	color: var(--esca-testo2);
	font-size: .95em;
}

.esca-faq div p {
	margin: 0;
}

.esca-credito {
	text-align: center;
	font-size: .82em;
	opacity: .7;
	margin: 4px 0 0;
}

@media (max-width: 560px) {
	.esca-card { padding: 16px; }
	.esca-verdetto { padding: 16px; }
	.esca-verdetto h3 { font-size: 1.25em; }
	.esca-scelte button { flex: 1 1 100%; }
	.esca .esca-btn-p,
	.esca .esca-btn-s { width: 100%; text-align: center; }
}

/* --- controllo di un solo link --- */
.esca .esca-input-link {
	width: 100%;
	font: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	padding: 13px;
	border: 1px solid var(--esca-bordo);
	border-radius: 10px;
	background: #fcfcfd;
	color: inherit;
}

/* --- stampa: resta solo il risultato --- */
@media print {
	.esca-tabs,
	.esca textarea,
	.esca .esca-input-link,
	.esca-azioni,
	.esca-lead,
	.esca-cta,
	.esca-scelte,
	.esca-privacy { display: none !important; }

	.esca [data-esca-pannello][hidden] { display: none !important; }

	.esca-card,
	.esca-verdetto,
	.esca-segnale { break-inside: avoid; border-color: #999; }

	.esca details { display: block; }
	.esca details > summary { display: none; }
	.esca details > p { display: block; }
}

.esca-buono { background: var(--esca-verde); }