/*
 * F11 — sezione "Form contatti": riquadro form a sinistra (sfondo
 * var(--color-form-background), radius 30px) e colonna "Contatti e
 * recapiti" a destra. Colori/font confermati in Figma.
 */
.form-contatti {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
	max-width: 1594px;
	margin: 0 auto;
	padding: 4rem 2rem;
}

.form-contatti__form-wrapper {
	flex: 1 1 0;
	min-width: 0;
	max-width: 640px;
	padding: 2.5rem;
	background: var(--color-form-background);
	border-radius: 30px;
}

.form-contatti__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.form-contatti__campo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-contatti__campo label {
	font-family: var(--font-titles);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--color-footer-text);
}

.form-contatti__campo input[type="text"],
.form-contatti__campo input[type="email"],
.form-contatti__campo input[type="file"],
.form-contatti__campo textarea {
	padding: 0.75rem 1rem;
	font-family: var(--font-nav);
	font-size: 1rem;
	background: var(--color-white);
	border: 1px solid var(--color-footer-text);
	border-radius: 12px;
}

.form-contatti__campo textarea {
	resize: vertical;
}

.form-contatti__campo--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}

.form-contatti__campo--checkbox input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	background: transparent;
	border: 1px solid var(--color-footer-text);
	accent-color: var(--color-green);
}

.form-contatti__campo--checkbox label {
	font-family: var(--font-nav);
	font-size: 0.95rem;
	font-weight: 400;
	text-transform: none;
}

.form-contatti__submit {
	padding: 0.9rem 1.5rem;
	font-family: var(--font-titles);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-footer-text);
	background: transparent;
	border: 1px solid var(--color-footer-text);
	border-radius: 12px;
	cursor: pointer;
}

.form-contatti__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.form-contatti__esito {
	margin: 0;
	min-height: 1.5em;
	font-family: var(--font-nav);
	font-size: 0.95rem;
}

.form-contatti__esito[data-stato="successo"] {
	color: var(--color-green);
}

.form-contatti__esito[data-stato="errore"] {
	color: #c0392b;
}

.form-contatti__recapiti {
	flex: 1 1 0;
	min-width: 0;
	max-width: 600px;
}

.form-contatti__titolo,
.form-contatti__sottotitolo {
	margin: 0;
	font-family: var(--font-titles);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 900;
	color: var(--color-footer-text);
}

.form-contatti__titolo {
	margin-bottom: 2rem;
}

.form-contatti__sottotitolo {
	margin-bottom: 1.5rem;
}

.form-contatti__blocco-testo {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.form-contatti__icona {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.form-contatti__paragrafo {
	margin: 0;
	font-family: var(--font-nav);
	font-size: 1.5rem;
	color: var(--color-footer-text);
}

.form-contatti__paragrafo--verde {
	font-family: var(--font-titles);
	font-weight: 400;
	color: var(--color-green);
}

.form-contatti__evidenza {
	font-weight: 700;
	color: var(--color-green);
}

/*
 * Sopra i 1024px il riquadro form e la colonna "Contatti e recapiti"
 * restano affiancati, ridimensionandosi fluidamente (`flex: 1 1 0`,
 * nessuna larghezza fissa). Sotto i 1024px vengono impilati — stessa
 * soglia già usata nel resto del tema (box-servizi, cards-passaggi) —
 * con il form per primo, essendo l'azione principale della sezione.
 */
@media (width <= 1023px) {
	.form-contatti {
		flex-direction: column;
	}

	.form-contatti__form-wrapper,
	.form-contatti__recapiti {
		width: 100%;
		max-width: none;
	}
}

@media (width <= 767px) {
	.form-contatti {
		padding: 2.5rem 1.5rem;
	}

	.form-contatti__form-wrapper {
		padding: 1.5rem;
	}
}