/*
 * Il modulo eredita font e colori dal tema; l'accento segue il colore primario di Elementor.
 * Una sola colonna: tutti i campi hanno la stessa larghezza e la stessa altezza,
 * allineati a sinistra e a destra, uguali su telefono, tablet e computer.
 */
.evp-form {
	--evp-accento: var(--e-global-color-primary, #1f2937);
	--evp-bordo: rgba(128, 128, 128, 0.45);
	--evp-altezza: 48px;
	--evp-raggio: 6px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}

.evp-form,
.evp-form *,
.evp-form *::before,
.evp-form *::after {
	box-sizing: border-box;
}

/* Le righe non affiancano più i campi: restano solo come contenitori. */
.evp-form .evp-riga {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.evp-form .evp-campo,
.evp-form .evp-azioni {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* La riga della privacy è esclusa: resta con lo stile del tema. */
.evp-form .evp-campo:not(.evp-privacy) label {
	display: block;
	width: 100%;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.evp-form input[type="text"],
.evp-form input[type="email"],
.evp-form input[type="tel"],
.evp-form select,
.evp-form textarea {
	display: block;
	width: 100%;
	max-width: none;
	height: var(--evp-altezza);
	min-height: var(--evp-altezza);
	margin: 6px 0 0;
	padding: 0 14px;
	border: 1px solid var(--evp-bordo);
	border-radius: var(--evp-raggio);
	background-color: #fff;
	color: #1f2937;
	font: inherit;
	/* 16px: sotto questa misura l'iPhone ingrandisce la pagina quando si tocca il campo. */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	box-shadow: none;
}

.evp-form textarea {
	height: auto;
	min-height: 110px;
	padding: 12px 14px;
	resize: vertical;
}

/*
 * Stesso colore di testo in tutti i campi, menu a tendina compresi: scuro su bianco.
 * Gli !important servono perché i colori del tema per select e option non lo coprano
 * (su un tema scuro le voci del menu uscivano chiare su fondo chiaro).
 */
.evp-form input[type="text"],
.evp-form input[type="email"],
.evp-form input[type="tel"],
.evp-form select,
.evp-form textarea,
.evp-form select option,
.evp-form select optgroup {
	background-color: #fff !important;
	color: #1f2937 !important;
	-webkit-text-fill-color: #1f2937;
}

.evp-form select,
.evp-form select option {
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
}

/* La scritta "Seleziona la data" ha lo stesso colore delle scritte dei menu. */
.evp-form input::placeholder,
.evp-form textarea::placeholder {
	color: #1f2937;
	opacity: 1;
}

/* Menu spento (prima della data): stesso colore degli altri, cambia solo il cursore. */
.evp-form select:disabled {
	opacity: 1;
	cursor: not-allowed;
}

.evp-form input[type="text"]:focus,
.evp-form input[type="email"]:focus,
.evp-form input[type="tel"]:focus,
.evp-form select:focus,
.evp-form textarea:focus,
.evp-form input.evp-data-testo[aria-expanded="true"] {
	border-color: var(--evp-accento);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.35), inset 0 0 0 1px var(--evp-accento);
}

.evp-form small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.75;
}

/* Data e calendario */
.evp-form .evp-campo-data {
	position: relative;
}

.evp-form .evp-data-testo {
	cursor: pointer;
}

.evp-form .evp-calendario {
	position: absolute;
	z-index: 50;
	top: 100%;
	left: 0;
	width: 100%;
	max-width: 340px;
	margin-top: 4px;
	padding: 12px;
	border: 1px solid var(--evp-bordo);
	border-radius: var(--evp-raggio);
	background: #fff;
	color: #1f2937;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.evp-form .evp-calendario[hidden] {
	display: none;
}

.evp-form .evp-cal-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	text-transform: capitalize;
}

.evp-form .evp-cal-griglia {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
	text-align: center;
}

.evp-form .evp-cal-nome {
	padding: 4px 0;
	font-size: 13px;
	opacity: 0.7;
}

.evp-form .evp-calendario button {
	width: 100%;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

.evp-form .evp-cal-testa button {
	width: 38px;
	font-size: 22px;
}

.evp-form .evp-calendario button.evp-oggi {
	box-shadow: inset 0 0 0 1px var(--evp-accento);
}

.evp-form .evp-calendario button:hover:not(:disabled),
.evp-form .evp-calendario button.evp-scelto {
	background: var(--evp-accento);
	color: #fff;
}

.evp-form .evp-calendario button:focus-visible {
	outline: 2px solid var(--evp-accento);
	outline-offset: 1px;
}

.evp-form .evp-calendario button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Orario: un menu a tendina come il campo Persone. */
.evp-form .evp-orari {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.evp-form .evp-orari legend {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.evp-form .evp-avviso:empty {
	display: none;
}

.evp-form .evp-avviso {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-left: 4px solid #b45309;
	border-radius: 0 var(--evp-raggio) var(--evp-raggio) 0;
	background: rgba(180, 83, 9, 0.1);
	font-size: 15px;
}

.evp-form .evp-trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Pulsante largo quanto i campi. Colori e font restano quelli dei pulsanti del tema. */
.evp-form .evp-invia {
	display: block;
	width: 100%;
	min-height: var(--evp-altezza);
	margin: 0;
	font-size: 16px;
	cursor: pointer;
}

.evp-form .evp-invia:disabled {
	opacity: 0.6;
	cursor: wait;
}

.evp-form .evp-esito:empty {
	display: none;
}

.evp-form .evp-esito.evp-errore {
	padding: 10px 12px;
	border-left: 4px solid #b91c1c;
	border-radius: 0 var(--evp-raggio) var(--evp-raggio) 0;
	background: rgba(185, 28, 28, 0.08);
}

.evp-conferma {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 16px 18px;
	border-left: 4px solid #15803d;
	border-radius: 0 6px 6px 0;
	background: rgba(21, 128, 61, 0.08);
}