/*
 * Componente: form richiesta informazioni.
 */

.sh-lead-form {
	padding: var(--sh-space-md);
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
	color: var(--sh-ink);
}

.sh-lead-form__title {
	margin-block: 0 var(--sh-space-md);
}

.sh-lead-form__intro,
.sh-lead-form__note {
	color: var(--sh-muted);
	font-size: 0.875rem;
}

.sh-lead-form__note {
	margin-block-start: var(--sh-space-sm);
}

.sh-form__field {
	margin-block: 0 var(--sh-space-2xs);
}

.sh-form__label {
	display: block;
	margin-block-end: var(--sh-space-3xs);
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

.sh-form__control {
	display: block;
	width: 100%;
	padding: 0.875rem var(--sh-space-sm);
	background-color: var(--sh-bg);
	/*
	 * Bordo dei campi con contrasto ≥ 3:1 (WCAG 1.4.11): --sh-line è una linea
	 * decorativa e su chiaro il campo non si distingueva dallo sfondo. Il
	 * ripiego su --sh-line vale solo finché il token non è disponibile.
	 */
	border: 1px solid var(--sh-control-border, var(--sh-line));
	border-radius: var(--sh-radius-none);
	color: var(--sh-ink);
	font-size: 0.9375rem;
	transition: border-color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-form__control::placeholder {
	color: var(--sh-muted);
	opacity: 1;
}

.sh-form__control:focus-visible {
	border-color: var(--sh-red);
}

.sh-form__control[aria-invalid="true"] {
	border-color: var(--sh-red);
}

/* Honeypot: fuori dallo schermo, non display:none — alcuni bot ignorano i campi nascosti. */
.sh-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sh-form__selected {
	margin-block-end: var(--sh-space-sm);
	padding: var(--sh-space-sm);
	background-color: var(--sh-bg);
	border: 1px solid var(--sh-line);
}

.sh-form__selected-label {
	display: block;
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

.sh-form__selected-value {
	display: block;
	color: var(--sh-red-text);
	font-family: var(--sh-font-display);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-form__selected-price {
	display: block;
	color: var(--sh-muted);
	font-size: 0.875rem;
}

.sh-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sh-space-2xs);
	align-items: start;
	margin-block: var(--sh-space-sm);
	font-size: 0.875rem;
}

.sh-form__consent .sh-form__error {
	grid-column: 1 / -1;
}

.sh-form__checkbox {
	width: 18px;
	height: 18px;
	margin-block-start: 2px;
	accent-color: var(--sh-red);
}

.sh-form__consent a {
	color: var(--sh-red-text);
}

.sh-form__error {
	display: block;
	margin-block-start: var(--sh-space-3xs);
	color: var(--sh-red-text);
	font-size: 0.8125rem;
}

.sh-form__submit {
	margin-block: var(--sh-space-sm) 0;
}

.sh-form__button {
	justify-content: center;
	width: 100%;
}

.sh-form__button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.sh-form__status:empty {
	display: none;
}

.sh-form__status {
	margin-block-start: var(--sh-space-2xs);
	font-size: 0.875rem;
}

.sh-form__status[data-tipo="ok"]     { color: var(--sh-ink); }
.sh-form__status[data-tipo="errore"] { color: var(--sh-red-text); }

.sh-lead-form__reassurance {
	margin-block-start: var(--sh-space-md);
	font-size: 0.875rem;
}

/* ==== Form contatti (pagina Contatti) ==== */

/* Riquadro grigio con i campi bianchi, senza filetto sotto il titolo, come nel mockup. */
.sh-lead-form--contatto {
	padding: var(--sh-space-lg) var(--sh-space-md);
	background-color: var(--sh-bg-alt);
	border-color: transparent;
}

.sh-lead-form--contatto .sh-lead-form__title {
	margin-block-end: var(--sh-space-3xs);
}

.sh-lead-form--contatto .sh-lead-form__title::after {
	content: none;
}

.sh-lead-form--contatto .sh-lead-form__intro {
	margin-block: 0 var(--sh-space-md);
	color: var(--sh-ink);
	font-size: 0.9375rem;
}

.sh-lead-form--contatto .sh-form__field {
	margin-block-end: var(--sh-space-xs);
}

/* ==== Newsletter (pagina News) ==== */

/*
 * Una riga su desktop: titolo, filo, testo, email con il bottone accanto e
 * consenso sotto. Su mobile tutto in colonna.
 */
.sh-lead-form--newsletter {
	display: grid;
	gap: var(--sh-space-sm) var(--sh-space-lg);
	align-items: center;
	padding: 0;
	background-color: transparent;
	border: 0;
}

.sh-lead-form--newsletter .sh-lead-form__title {
	margin: 0;
}

.sh-lead-form--newsletter .sh-lead-form__title::after {
	content: none;
}

.sh-lead-form--newsletter .sh-lead-form__intro {
	margin: 0;
	color: var(--sh-ink);
	font-size: 0.9375rem;
}

.sh-lead-form--newsletter .sh-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
}

.sh-lead-form--newsletter .sh-form__field--email {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.sh-lead-form--newsletter .sh-form__submit {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.sh-lead-form--newsletter .sh-form__button {
	width: auto;
	min-height: 100%;
}

.sh-lead-form--newsletter .sh-form__consent,
.sh-lead-form--newsletter .sh-form__status {
	grid-column: 1 / -1;
}

.sh-lead-form--newsletter .sh-form__consent {
	margin-block: var(--sh-space-xs) 0;
	font-size: 0.8125rem;
}

@media (min-width: 1024px) {
	.sh-lead-form--newsletter {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 28rem);
	}

	/* Due righe brevi come nel mockup: «Vuoi ricevere / tutte le news?». */
	.sh-lead-form--newsletter .sh-lead-form__title {
		max-width: calc(14ch + var(--sh-space-lg));
		padding-inline-end: var(--sh-space-lg);
		border-inline-end: 1px solid var(--sh-line);
	}
}