/*! Smart Finance Simulator — file generato da `npm run build`. Non modificare direttamente: modificare il sorgente in assets/src/. */
/*
 * Smart Finance Simulator — stili del simulatore frontend.
 * Tutte le regole sono scoperte sotto .sfs-simulator: nessuna dipendenza dal
 * tema, nessuna modifica a elementi globali (body, input, button, range al
 * di fuori del contenitore del plugin). Tutte le classi hanno prefisso sfs-.
 */

.sfs-simulator {
	--sfs-bg: #f8fafc;
	--sfs-card: #ffffff;
	--sfs-text: #0f172a;
	--sfs-muted: #64748b;
	--sfs-border: #e2e8f0;
	--sfs-primary: #3b82f6;
	--sfs-primary-contrast: #ffffff;
	--sfs-radius: 12px;
	--sfs-gap: 1.25rem;

	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 1.5rem;
	background: var( --sfs-card );
	color: var( --sfs-text );
	border: 1px solid var( --sfs-border );
	border-radius: var( --sfs-radius );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
}

.sfs-simulator *,
.sfs-simulator *::before,
.sfs-simulator *::after {
	box-sizing: inherit;
}

.sfs-simulator .sfs-title {
	margin: 0 0 1.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var( --sfs-text );
}

/*
 * Fase 5 — selettore modalità (standard / maxi-rata) e controllo maxi-rata.
 * .sfs-balloon-only marca gli elementi da mostrare solo in modalità
 * "balloon": un'unica regola, guidata dall'attributo data-sfs-mode sul
 * contenitore (impostato lato server e aggiornato via JS al cambio tab),
 * evita di duplicare selettori per ciascun elemento.
 */
.sfs-simulator[data-sfs-mode="standard"] .sfs-balloon-only {
	display: none;
}

.sfs-simulator .sfs-mode-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var( --sfs-border );
}

.sfs-simulator .sfs-mode-tab {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	padding: 0.65rem 0.5rem;
	font: inherit;
	font-weight: 600;
	font-size: 0.85rem;
	color: var( --sfs-muted );
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.sfs-simulator .sfs-mode-tab[aria-selected="true"] {
	color: var( --sfs-primary );
	border-bottom-color: var( --sfs-primary );
}

.sfs-simulator .sfs-mode-tab:focus-visible {
	outline: 2px solid var( --sfs-primary );
	outline-offset: 2px;
}

.sfs-simulator .sfs-balloon-error {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	color: #7a2e0e;
	background: #fdf1ec;
	border: 1px solid #f3c8b3;
	border-radius: 8px;
}

.sfs-simulator .sfs-hidden {
	display: none;
}

.sfs-simulator .sfs-payment-balloon {
	font-size: 0.8rem;
	font-weight: 500;
	color: var( --sfs-primary-contrast );
	opacity: 0.85;
}

.sfs-simulator .sfs-field {
	margin-bottom: var( --sfs-gap );
	padding-bottom: var( --sfs-gap );
	border-bottom: 1px solid var( --sfs-border );
}

.sfs-simulator .sfs-field:last-of-type {
	border-bottom: none;
}

.sfs-simulator .sfs-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.sfs-simulator .sfs-label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --sfs-muted );
}

.sfs-simulator .sfs-field-value {
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --sfs-text );
	white-space: nowrap;
}

.sfs-simulator .sfs-slider-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sfs-simulator .sfs-range {
	flex: 1 1 auto;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var( --sfs-border );
	outline: none;
}

.sfs-simulator .sfs-range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --sfs-primary );
	border: 2px solid var( --sfs-card );
	box-shadow: 0 0 0 1px var( --sfs-primary );
	cursor: pointer;
}

.sfs-simulator .sfs-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --sfs-primary );
	border: 2px solid var( --sfs-card );
	box-shadow: 0 0 0 1px var( --sfs-primary );
	cursor: pointer;
}

.sfs-simulator .sfs-range:focus-visible {
	outline: 2px solid var( --sfs-primary );
	outline-offset: 3px;
}

.sfs-simulator .sfs-number {
	flex: 0 0 auto;
	width: 7rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.95rem;
	color: var( --sfs-text );
	background: var( --sfs-bg );
	border: 1px solid var( --sfs-border );
	border-radius: 6px;
}

.sfs-simulator .sfs-number:focus-visible {
	outline: 2px solid var( --sfs-primary );
	outline-offset: 1px;
}

.sfs-simulator .sfs-hint {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	color: var( --sfs-muted );
}

.sfs-simulator .sfs-term-ticks {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.72rem;
	color: var( --sfs-muted );
}

.sfs-simulator .sfs-summary {
	margin: var( --sfs-gap ) 0;
	padding: 1rem;
	background: var( --sfs-bg );
	border: 1px solid var( --sfs-border );
	border-radius: var( --sfs-radius );
}

.sfs-simulator .sfs-summary-title {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --sfs-text );
}

.sfs-simulator .sfs-summary-list,
.sfs-simulator .sfs-totals {
	margin: 0;
}

.sfs-simulator .sfs-summary-row,
.sfs-simulator .sfs-totals-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	font-size: 0.88rem;
}

.sfs-simulator .sfs-summary-row dt,
.sfs-simulator .sfs-totals-row dt {
	color: var( --sfs-muted );
	font-weight: 400;
}

.sfs-simulator .sfs-summary-row dd,
.sfs-simulator .sfs-totals-row dd {
	margin: 0;
	font-weight: 600;
	color: var( --sfs-text );
	text-align: right;
}

.sfs-simulator .sfs-payment {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: var( --sfs-gap ) 0;
	padding: 1.25rem;
	text-align: center;
	background: var( --sfs-primary );
	border-radius: var( --sfs-radius );
}

.sfs-simulator .sfs-payment-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var( --sfs-primary-contrast );
	opacity: 0.85;
}

.sfs-simulator .sfs-payment-value {
	font-size: 2rem;
	font-weight: 700;
	color: var( --sfs-primary-contrast );
}

.sfs-simulator .sfs-totals {
	margin-bottom: var( --sfs-gap );
}

.sfs-simulator .sfs-totals-row--emphasis dd {
	color: var( --sfs-primary );
	font-size: 1rem;
}

.sfs-simulator .sfs-disclaimer {
	margin: 0;
	font-size: 0.72rem;
	color: var( --sfs-muted );
	line-height: 1.5;
}

/*
 * Fase 7 — modulo "Richiedi informazioni".
 */
.sfs-simulator .sfs-lead-form-wrap {
	margin-top: var( --sfs-gap );
	padding-top: var( --sfs-gap );
	border-top: 1px solid var( --sfs-border );
}

.sfs-simulator .sfs-lead-form-title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --sfs-text );
}

.sfs-simulator .sfs-lead-field {
	margin-bottom: 0.9rem;
}

.sfs-simulator .sfs-lead-field input[type="text"],
.sfs-simulator .sfs-lead-field input[type="email"],
.sfs-simulator .sfs-lead-field input[type="tel"],
.sfs-simulator .sfs-lead-field textarea {
	display: block;
	width: 100%;
	padding: 0.5rem 0.6rem;
	font: inherit;
	color: var( --sfs-text );
	background: var( --sfs-bg );
	border: 1px solid var( --sfs-border );
	border-radius: 6px;
}

.sfs-simulator .sfs-lead-field input[aria-invalid="true"],
.sfs-simulator .sfs-lead-field textarea[aria-invalid="true"] {
	border-color: #c0392b;
}

.sfs-simulator .sfs-lead-field textarea {
	resize: vertical;
}

.sfs-simulator .sfs-lead-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var( --sfs-muted );
}

.sfs-simulator .sfs-lead-error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	color: #c0392b;
}

/*
 * Honeypot: fuori schermo ma presente nel DOM e raggiungibile dal parser
 * HTML di un bot — a differenza di display:none/type=hidden, che alcuni bot
 * sanno riconoscere ed evitare. aria-hidden + tabindex="-1" lo escludono
 * dalla navigazione assistiva/da tastiera per un utente reale.
 */
.sfs-simulator .sfs-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sfs-simulator .sfs-lead-submit {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.7rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: var( --sfs-primary-contrast );
	background: var( --sfs-primary );
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.sfs-simulator .sfs-lead-submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.sfs-simulator .sfs-lead-message {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
}

.sfs-simulator .sfs-lead-message--success {
	color: #1e7e34;
}

.sfs-simulator .sfs-lead-message--error {
	color: #c0392b;
}

@media ( min-width: 560px ) {
	.sfs-simulator {
		padding: 2rem;
	}

	.sfs-simulator .sfs-field-head {
		align-items: center;
	}

	.sfs-simulator .sfs-field-value {
		font-size: 1.15rem;
	}

	.sfs-simulator .sfs-payment-value {
		font-size: 2.5rem;
	}
}