/*
 * Il form di Elementor con l'aspetto del form del sito.
 *
 * Il markup di Elementor non e' quello del prototipo (classi .elementor-field
 * invece di .form-input e via cosi'), quindi le stesse proprieta' vanno
 * riportate sulle sue classi. I valori sono copiati da components.css: font,
 * corpo, colori e spaziature restano quelli del progetto.
 *
 * Si applica solo dentro .mc-form-elementor, cosi' un eventuale altro form
 * aggiunto in futuro resta con lo stile predefinito di Elementor.
 */

.mc-form-elementor .elementor-form {
	display: flex;
	flex-direction: column;
}

/* ── Etichette: serif grande, come .form-label ─────────────── */
/*
 * La distanza dal campo (24px) e' gia' impostata nel widget, che la applica
 * come spazio interno all'etichetta: aggiungerne altra qui la raddoppiava, ed
 * era il motivo per cui fra la domanda e la riga da compilare c'era un buco.
 */
.mc-form-elementor .elementor-field-group > label {
	display: block;
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 0;
	color: var(--ink);
}

/* ── Campi: filo sotto, niente cornice ─────────────────────── */
.mc-form-elementor .elementor-field-textual {
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(26, 23, 18, 0.3);
	border-radius: 0;
	background: transparent;
	padding: 12px 0;
	font-family: var(--sans);
	font-size: 18px;
	color: var(--ink);
	box-shadow: none;
	transition: border-color 0.3s var(--ease-out);
}

.mc-form-elementor .elementor-field-textual::placeholder {
	color: var(--ink);
	opacity: 0.4;
}

.mc-form-elementor .elementor-field-textual:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: none;
}

.mc-form-elementor textarea.elementor-field-textual {
	resize: vertical;
	min-height: 120px;
}

/*
 * Tendine: freccia disegnata con i bordi, non con un'immagine.
 * Elementor ha un'ottimizzazione che azzera `background-image` con !important
 * su tutto cio' che sta nei container oltre il terzo, finche' il JS non li
 * marca come caricati: una freccia fatta di immagine sparirebbe a intermittenza.
 */
.mc-form-elementor .elementor-select-wrapper {
	position: relative;
}

.mc-form-elementor .elementor-select-wrapper::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.2px solid var(--ink);
	border-bottom: 1.2px solid var(--ink);
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
	opacity: 0.7;
}

.mc-form-elementor select.elementor-field-textual {
	appearance: none;
	padding-right: 24px;
	cursor: pointer;
}

/* ── Spaziatura fra i gruppi ───────────────────────────────── */
/*
 * Il widget separa tutti i campi con la stessa distanza (10px), che non
 * distingue fra due righe della stessa domanda e l'inizio di una domanda
 * nuova. Qui lo spazio si azzera e si riparte da sopra: 16px fra due campi
 * che rispondono alla stessa domanda, 40px prima di una domanda nuova, come
 * nel disegno del sito. Il !important serve perche' il valore del widget
 * arriva da un foglio piu' specifico di questo.
 */
.mc-form-elementor .elementor-form-fields-wrapper {
	margin-bottom: 0 !important;
}

.mc-form-elementor .elementor-field-group {
	margin-bottom: 0 !important;
}

.mc-form-elementor .elementor-field-group + .elementor-field-group {
	margin-top: 16px;
}

.mc-form-elementor .elementor-field-group + .elementor-field-group:has(> .elementor-field-label) {
	margin-top: 40px;
}

/* ── Consensi: casella piccola accanto al testo ────────────── */
.mc-form-elementor .elementor-field-type-acceptance .elementor-field-group,
.mc-form-elementor .elementor-field-type-acceptance {
	margin-bottom: 16px;
}

.mc-form-elementor .elementor-field-option label,
.mc-form-elementor .elementor-field-subgroup label {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0;
	color: var(--ink);
}

.mc-form-elementor .elementor-field-type-acceptance input[type='checkbox'] {
	margin-top: 4px;
	margin-right: 12px;
	accent-color: var(--accent);
}

/* ── Barra di avanzamento dei passi ────────────────────────── */
.mc-form-elementor .e-form__indicators {
	margin-bottom: 30px;
}

.mc-form-elementor .e-form__indicators__indicator__progress {
	height: 2px;
	background: rgba(26, 23, 18, 0.15);
	border-radius: 0;
}

.mc-form-elementor .e-form__indicators__indicator__progress__meter {
	background: var(--accent);
	border-radius: 0;
	font-size: 0; /* la percentuale non fa parte del disegno */
}

.mc-form-elementor .e-form__indicators__indicator__label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0.6;
}

.mc-form-elementor .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
	opacity: 1;
}

/* ── Pulsanti: avanti, indietro, invio ─────────────────────── */
/*
 * Lo stacco e' piu' largo della distanza fra due campi: il filo sopra i
 * pulsanti chiude il passo, e troppo vicino all'ultimo campo sembrava una
 * seconda riga del campo stesso.
 */
.mc-form-elementor .elementor-field-type-submit,
.mc-form-elementor .e-form__buttons {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid rgba(26, 23, 18, 0.15);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.mc-form-elementor .elementor-button {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--bone);
	border: none;
	border-radius: 40px;
	transition: background 0.3s, transform 0.3s;
}

.mc-form-elementor .elementor-button:hover {
	background: #D68531;
	transform: translateX(4px);
}

/* Il "precedente" e' secondario, come .form-back */
.mc-form-elementor .e-form__buttons__wrapper__button-previous {
	background: transparent;
	color: var(--ink);
	opacity: 0.6;
}

.mc-form-elementor .e-form__buttons__wrapper__button-previous:hover {
	background: transparent;
	opacity: 1;
	transform: translateX(-4px);
}

/* ── Messaggi dopo l'invio ─────────────────────────────────── */
.mc-form-elementor .elementor-message {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 20px;
}

.mc-form-elementor .elementor-message-success {
	color: var(--accent);
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.mc-form-elementor .elementor-field-group > label {
		font-size: 22px;
		margin-bottom: 16px;
	}

	.mc-form-elementor .elementor-field-textual {
		font-size: 16px;
	}
}