/* ------------------------------------------------------------------
   ew-forms.css — form nativi del sito (ex embed Odoo / HubSpot)
   creato 2026-09-10
   Tutto è confinato sotto .ewf per non toccare il tema (skel usa .row / .Nu).
   Impaginazione replicata dai form Odoo (Bootstrap 5 + tema Odoo):
   label a sinistra 200px, input a destra, bottone arancione.
   Variante .ewf--stack = label sopra l'input (form landing).
------------------------------------------------------------------ */

.ewf, .ewf * { box-sizing: border-box; }
.ewf {
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;   /* centra il form quando il container è più largo di 820px (es. prenota-chiamata) */
}
.ewf a { color: #5fbcae; }

/* --- campo --- */
.ewf-field { margin-bottom: 1rem; }
.ewf-field > label {
	display: block;
	font-weight: 500;
	color: #333;               /* label colore normale, non rosso */
	margin-bottom: .35rem;
}
.ewf-field .req { color: #e05a2b; }

/* layout label a sinistra (form Odoo) da 576px in su */
@media (min-width: 576px) {
	.ewf--odoo .ewf-field {
		display: flex;
		align-items: flex-start;
	}
	.ewf--odoo .ewf-field > label {
		flex: 0 0 200px;
		max-width: 200px;
		padding-top: .5rem;
		margin-bottom: 0;
		padding-right: 12px;
	}
	.ewf--odoo .ewf-field > .ewf-control { flex: 1 1 auto; min-width: 0; }
}

/* --- controlli --- */
.ewf input[type="text"],
.ewf input[type="email"],
.ewf input[type="tel"],
.ewf input[type="url"],
.ewf input[type="datetime-local"],
.ewf select,
.ewf textarea {
	display: block;
	width: 100%;
	padding: .5rem .75rem;
	font-size: 15px;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.5;
	color: #1d1d1f;
	background-color: #f2f7fb;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ewf textarea { min-height: 90px; resize: vertical; }
.ewf select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: 14px;
	padding-right: 2rem;
}
.ewf input:focus,
.ewf select:focus,
.ewf textarea:focus {
	outline: 0;
	border-color: #5fbcae;
	box-shadow: 0 0 0 3px rgba(95, 188, 174, .18);
}
.ewf input:-moz-ui-invalid,
.ewf textarea:-moz-ui-invalid { box-shadow: none; }

/* autofill del browser: forza il proprio sfondo/testo (poco leggibile) se non
   sovrascritto — manteniamo colore testo e sfondo dei campi normali */
.ewf input:-webkit-autofill,
.ewf input:-webkit-autofill:hover,
.ewf input:-webkit-autofill:focus,
.ewf textarea:-webkit-autofill,
.ewf select:-webkit-autofill {
	-webkit-text-fill-color: #1d1d1f;
	-webkit-box-shadow: 0 0 0 1000px #f2f7fb inset;
	box-shadow: 0 0 0 1000px #f2f7fb inset;
	caret-color: #1d1d1f;
	font-weight: 500;
	transition: background-color 5000s ease-in-out 0s;
}
.ewf input:autofill,
.ewf textarea:autofill,
.ewf select:autofill {
	color: #1d1d1f;
	background-color: #f2f7fb;
	font-weight: 500;
}

/* --- riga a 2 colonne (prenota chiamata) --- */
.ewf-2col { display: flex; flex-wrap: wrap; }
.ewf-2col > .ewf-field { width: 100%; }
@media (min-width: 860px) {
	.ewf-2col { margin: 0 -14px; }
	.ewf-2col > .ewf-field { width: 50%; padding: 0 14px; }
	/* in 2 colonne la label torna sopra per non stringere troppo l'input */
	.ewf--odoo .ewf-2col .ewf-field { display: block; }
	.ewf--odoo .ewf-2col .ewf-field > label {
		flex: none; max-width: none; padding-top: 0; margin-bottom: .35rem;
	}
}

/* --- privacy --- */
.ewf-privacy .ewf-check {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.ewf-privacy input[type="checkbox"] {
	width: 18px; height: 18px;
	margin: 0;
	accent-color: #5fbcae;
	flex: 0 0 18px;
}
.ewf-privacy-text {
	font-size: 13px;
	line-height: 1.45;
	color: #6c757d;
	margin: .5rem 0 0;
}
.ewf-privacy-text a { color: #6c757d; }

/* --- submit --- */
.ewf-submit { margin-top: 1.2rem; }
.ewf--odoo .ewf-submit { text-align: right; }
.ewf--stack .ewf-submit { text-align: left; }
@media (min-width: 576px) {
	.ewf--odoo .ewf-submit { padding-left: 200px; }
}
.ewf-submit button {
	display: inline-block;
	padding: .6rem 1.5rem;
	font-size: 15px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background-color: #ed7e06;
	border: 1px solid #ed7e06;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.ewf-submit button:hover { background-color: #d86f00; border-color: #d86f00; }
.ewf-submit button:disabled { opacity: .6; cursor: default; }

.ewf-result {
	display: block;
	margin-bottom: .5rem;
	color: #e05a2b;
	font-size: 14px;
	font-weight: 500;
}
.ewf-grecaptcha-note {
	margin: .6rem 0 0;
	font-size: 12px;
	color: #9aa4ad;
}
.ewf-grecaptcha-note a { color: #9aa4ad; text-decoration: underline; }

/* badge reCAPTCHA v3 invisibile */
.grecaptcha-badge { visibility: hidden; }

/* --- messaggio di esito (sostituisce il form, come Odoo) --- */
.ewf-success {
	max-width: 820px;
	padding: 28px 24px;
	text-align: center;
	background: #f4faf9;
	border: 1px solid #d6ede9;
	border-radius: 6px;
}
.ewf-success::before {
	content: "\f1d8";                 /* fa-paper-plane */
	font-family: FontAwesome;
	display: inline-block;
	width: 54px; height: 54px; line-height: 54px;
	margin-bottom: 12px;
	font-size: 24px;
	color: #fff;
	background: #5fbcae;
	border-radius: 50%;
}
.ewf-success h4 { margin: 0 0 6px; font-weight: 700; color: #333; }
.ewf-success p { margin: 0; color: #555; }