/* =============================================================================
   CREDITLINE — PREVENTIVATORE · stili del componente
   Nessun valore letterale: tutto viene da tokens.css.
   Se qui compare un #hex o un px non tokenizzato, è un bug.
   ============================================================================= */

.cl-preventivatore { font-family: var(--cl-font); color: var(--cl-testo); }
.cl-preventivatore *, .cl-preventivatore *::before, .cl-preventivatore *::after { box-sizing: border-box; }

/* --- Card contenitore ------------------------------------------------------ */
.cl-card {
	position: relative;
	background: var(--cl-bg);
	border-radius: var(--cl-r-xl);
	box-shadow: var(--cl-ombra-card);
	padding: var(--cl-sp-8) var(--cl-sp-6) var(--cl-sp-6);
	display: grid;
	gap: var(--cl-sp-5);
}
.cl-card__titolo { font-size: var(--cl-size-lg); font-weight: var(--cl-peso-forte); line-height: var(--cl-lh-stretta); letter-spacing: var(--cl-ls-titolo); margin: 0; }
.cl-card__sommario { color: var(--cl-testo-secondario); font-size: var(--cl-size-sm); margin: 0; }

/* --- Progress bar ---------------------------------------------------------- */
.cl-progress { display: flex; gap: var(--cl-sp-2); list-style: none; margin: 0; padding: 0; }
.cl-progress__passo {
	flex: 1; font-size: var(--cl-size-2xs); font-weight: var(--cl-peso-semi);
	color: var(--cl-testo-tenue); padding-top: var(--cl-sp-2);
	border-top: 3px solid var(--cl-bordo);
}
.cl-progress__passo.is-attivo { color: var(--cl-azione); border-top-color: var(--cl-azione); }
.cl-progress__passo.is-fatto { color: var(--cl-testo-secondario); border-top-color: var(--cl-verde-400); }

/* --- Badge recensioni (sempre visibile, in ogni step) ---------------------- */
.cl-badge-recensioni {
	position: absolute; top: var(--cl-sp-5); right: var(--cl-sp-6);
	display: inline-flex; align-items: center; gap: var(--cl-sp-2);
	font-size: var(--cl-size-2xs); color: var(--cl-testo-secondario);
	background: var(--cl-bg-brand-tenue); border-radius: var(--cl-r-pill);
	padding: var(--cl-sp-1) var(--cl-sp-3);
}
.cl-badge-recensioni__stelle { color: var(--cl-oro); letter-spacing: 1px; }

/* --- Selettore finalità -----------------------------------------------------
   Pillole in riga, non un elenco verticale: il colore di sfondo segue lo stato
   checked del radio nativo via :has(), zero JS per lo stile. */
.cl-finalita { display: grid; gap: var(--cl-sp-3); }
.cl-finalita__radio { display: flex; flex-wrap: wrap; gap: var(--cl-sp-2); }
.cl-finalita__voce {
	display: flex; align-items: center; gap: var(--cl-sp-2); min-height: 44px;
	padding: var(--cl-sp-2) var(--cl-sp-4); border: var(--cl-bordo-sottile); border-radius: var(--cl-r-pill);
	background: var(--cl-bg); cursor: pointer;
	transition: background-color var(--cl-durata-rapida) var(--cl-easing), border-color var(--cl-durata-rapida) var(--cl-easing), color var(--cl-durata-rapida) var(--cl-easing);
}
.cl-finalita__voce:has(input:checked) { background: var(--cl-azione); border-color: var(--cl-azione); color: var(--cl-azione-testo); }
.cl-finalita__voce label { font-size: var(--cl-size-base); cursor: pointer; }
.cl-finalita__voce:has(input:checked) .cl-tooltip__trigger { color: inherit; }
.cl-finalita__nota { font-size: var(--cl-size-sm); color: var(--cl-testo-secondario); margin: 0; }
.cl-finalita input[type="radio"] { width: 20px; height: 20px; accent-color: var(--cl-azione); }

/* --- Tooltip --------------------------------------------------------------- */
.cl-tooltip { position: relative; display: inline-flex; }
.cl-tooltip__trigger {
	width: 44px; height: 44px; margin: calc(var(--cl-sp-3) * -1);
	border: 0; background: none; color: var(--cl-testo-tenue);
	font-weight: var(--cl-peso-forte); font-style: italic; cursor: pointer;
}
.cl-tooltip__bolla {
	position: absolute; z-index: var(--cl-z-tooltip); top: 100%; left: 0; width: 260px;
	background: var(--cl-inchiostro); color: var(--cl-bianco);
	font-size: var(--cl-size-2xs); line-height: var(--cl-lh-media);
	padding: var(--cl-sp-3); border-radius: var(--cl-r-sm); box-shadow: var(--cl-ombra-alta);
}

/* --- Campi ----------------------------------------------------------------- */
.cl-campi { display: grid; gap: var(--cl-sp-4); }
.cl-campo { display: grid; gap: var(--cl-sp-2); }
.cl-campo__etichetta { display: flex; align-items: center; gap: var(--cl-sp-2); }
.cl-campo label { font-size: var(--cl-size-sm); font-weight: var(--cl-peso-medio); color: var(--cl-testo-secondario); }
.cl-campo input, .cl-select {
	width: 100%; min-height: 48px;
	padding: var(--cl-sp-3) var(--cl-sp-4);
	font-size: var(--cl-size-base); font-family: inherit; color: var(--cl-testo);
	background: var(--cl-bg-alt);
	border: var(--cl-bordo-sottile); border-radius: var(--cl-r-md);
	transition: border-color var(--cl-durata-rapida) var(--cl-easing);
}
.cl-campo input:focus, .cl-select:focus { border-color: var(--cl-azione); }
.cl-campo input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }
.cl-data { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--cl-sp-2); }
.cl-data input { text-align: center; }

/* --- Alert ----------------------------------------------------------------- */
.cl-alert {
	font-size: var(--cl-size-sm); line-height: var(--cl-lh-media);
	padding: var(--cl-sp-3) var(--cl-sp-4); border-radius: var(--cl-r-md);
	border-left: 4px solid;
}
.cl-alert--avviso { background: var(--cl-avviso-bg); border-color: var(--cl-avviso); color: var(--cl-avviso); }
.cl-alert--errore { background: var(--cl-errore-bg); border-color: var(--cl-errore); color: var(--cl-errore); }

/* --- Azioni ---------------------------------------------------------------- */
.cl-azione { display: grid; gap: var(--cl-sp-2); justify-items: center; }
.cl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; width: 100%;
	padding: var(--cl-sp-3) var(--cl-sp-6);
	font-size: var(--cl-size-md); font-weight: var(--cl-peso-semi); font-family: inherit;
	border: 0; border-radius: var(--cl-r-md); cursor: pointer; text-decoration: none;
	transition: background-color var(--cl-durata-rapida) var(--cl-easing);
}
.cl-btn--primario { background: var(--cl-azione); color: var(--cl-azione-testo); }
.cl-btn--primario:hover { background: var(--cl-azione-hover); }
.cl-btn--primario:active { background: var(--cl-azione-attiva); }
.cl-btn--primario[disabled] { opacity: .6; cursor: progress; }
.cl-btn--testo { background: none; color: var(--cl-testo-secondario); font-size: var(--cl-size-sm); min-height: 44px; }
.cl-microcopy { font-size: var(--cl-size-2xs); color: var(--cl-testo-secondario); margin: 0; }

/* --- Consensi -------------------------------------------------------------- */
.cl-consenso { display: flex; gap: var(--cl-sp-3); align-items: flex-start; }
.cl-consenso input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cl-azione); flex: none; }
.cl-consenso label { font-size: var(--cl-size-2xs); line-height: var(--cl-lh-media); color: var(--cl-testo-secondario); }

/* --- Blocco consulenza (immobili commerciali) ------------------------------ */
.cl-consulenza { display: grid; gap: var(--cl-sp-4); justify-items: center; text-align: center; }
.cl-consulenza__foto { width: 96px; height: 96px; border-radius: var(--cl-r-pill); object-fit: cover; }
.cl-consulenza h3 { font-size: var(--cl-size-lg); margin: 0; line-height: var(--cl-lh-stretta); }
.cl-consulenza p { font-size: var(--cl-size-sm); color: var(--cl-testo-secondario); margin: 0; }

/* --- Stati di servizio ------------------------------------------------------ */
.cl-errore, .cl-noscript {
	font-size: var(--cl-size-sm); color: var(--cl-testo-secondario);
	background: var(--cl-bg-sezione); padding: var(--cl-sp-5); border-radius: var(--cl-r-md);
}

/* --- Desktop --------------------------------------------------------------- */
@media (min-width: 900px) {
	.cl-card { padding: var(--cl-sp-10) var(--cl-sp-8) var(--cl-sp-8); }
	.cl-campi { grid-template-columns: 1fr 1fr; }
	.cl-campo--data, .cl-azione, .cl-alert { grid-column: 1 / -1; }
}