/* Form: campi, errori di validazione, pulsante di invio con spinner, passo PEC dell'iscrizione.
   Caricato in ordine dopo gli altri file override (site, forms, content, customer, order-request, extras):
   la cascata è quella di un unico foglio. */

.contact-form {
	max-width: 600px;
}

.contact-form label {
	display: inline-block;
	width: 130px;
	margin-bottom: 2.5px;
	vertical-align: top;
}

/* Label più lunga di 130px (es. recupero password): su una riga sola invece di andare a capo. */
.contact-form label.label-auto {
	width: auto;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	margin-bottom: 3px;
}

/* Il tema (base.css) imposta color #aaa su input/textarea: troppo chiaro per il testo digitato.
   Il placeholder resta più chiaro (#777) per distinguerlo dal valore inserito. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
textarea,
select {
	color: var(--input-text-color) !important;
}

input::placeholder,
textarea::placeholder {
	color: #777;
}


/* .error (base.css, tema): pensata per banner di messaggio con icona su
   sfondo colorato — troppo invasiva per i messaggi di validazione inline
   (usata sia dal contatore errori in app-core.js sia, di default, da
   jQuery Validate per i form senza un errorClass dedicato come .field-error
   qui sotto). Via tutto tranne il colore rosso già impostato dal tema. */
.error {
	background: none;
	border: 0;
	margin: 0;
	margin-top: 2px !important;
	padding: 0;
	font-size: 12px;
}

/* Contenitore del conteggio errori (invalidHandler/showErrors in
   app-core.js cercano ".errors-counter" dentro al form, vicino al bottone
   di invio). invalidHandler scrive già uno <span class="error"> colorato,
   ma showErrors scrive testo semplice: il colore va messo qui sul
   contenitore per coprire entrambi i casi.
   vertical-align: middle centra il testo rispetto al bottone di invio, che
   sta alla sua sinistra sulla stessa riga (in contacts.cfm il centraggio è
   già dato dal flex del .btn-contact-wrapper, ma qui non costa nulla averlo
   comunque). */
.errors-counter {
	display: inline-block;
	color: var(--error-color);
	margin-left: 10px;
	padding: 8px 0;
	font-size: 12px;
	vertical-align: middle;
	margin-top: 5px;
}

/* Riga PEC + "Continua" al primo passo di /iscriviti: il pulsante sta in basso, all'altezza del campo (il suo errore di
   validazione è sotto la riga, in #pec-error, quindi non sposta niente). */
.subscribe-pec-row {
	display: flex;
	align-items: flex-end;
}

.subscribe-pec-row .columns {
	float: none;
}

.subscribe-pec-row .btn-contact-wrapper {
	margin-top: 0;
}

/* Campo e pulsante alti uguale: la stessa altezza esplicita su entrambi (con box-sizing: border-box), così non
   dipende dal line-height del browser né dal padding del pulsante. */
.subscribe-pec-row {
	--subscribe-pec-height: 40px;
}

.subscribe-pec-row .form-input {
	height: var(--subscribe-pec-height);
}

.subscribe-pec-row .btn-primary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: var(--subscribe-pec-height);
	padding-top: 0;
	padding-bottom: 0;
}

/* Esito del controllo PEC al primo passo di /iscriviti. Non usa ".errors-counter": gli invalidHandler/
   showErrors di app-core.js scrivono "C'è un errore." in ogni ".errors-counter" del form. */
.subscribe-pec-message {
	margin: 0;
	font-size: 14px;
}

/* Stati dei messaggi di esito (contatore errori, form contatti, preventivo, richiesta prove) */
.errors-counter.is-success,
.subscribe-pec-message.is-success,
.contact-form-message.is-success,
.estimate-request-message.is-success,
.order-request-message.is-success {
	color: var(--success-color);
}

.errors-counter.is-error,
.subscribe-pec-message.is-error,
.contact-form-message.is-error,
.estimate-request-message.is-error,
.order-request-message.is-error,
.order-request-panel-message.is-error {
	color: var(--error-color);
}

/* Form di iscrizione: stile per input coerente */
.form-input {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: 2px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}

/* Riga della label con a destra il pulsante "Mostra/Nascondi" della password (login). */
.password-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Solo testo, come un link: nessun bordo né sfondo del button. */
.password-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--main-color);
	font-size: 12px;
	cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus {
	text-decoration: underline;
}

.form-input::placeholder {
	color: var(--gray-700);
}

/* Autofill color */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	-webkit-text-fill-color: var(--input-text-color) !important;
}

.form-input:focus {
	outline: none;
	border-color: var(--main-color);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1), 0 0 3px rgba(85, 72, 128, 0.3);
}

input.field-error,
textarea.field-error,
select.field-error {
	border-color: var(--error-color);
}

/* Hint visibile per i requisiti password */
.password-hint {
	display: block;
	font-size: 12px;
	color: var(--gray-500);
	margin-bottom: 10px;
}

/* Messaggio di errore di validazione */
.field-error {
	color: var(--error-color);
	font-size: 12px;
}

/* Stile aggiuntivo per label/div con errore */
label.field-error,
div.field-error {
	display: block;
	width: auto;
	margin: -5px 0 10px 0;
	background: none;
	border: 0;
	padding: 0;
}

/* Form "Richiesta prove": div.field-error ha margin-top -5px (riga sopra), qui serve spazio di
   5px fra il campo e il messaggio. */
#order-request-form div.field-error {
	margin-top: 5px;
}

/* Input con errore mantiene dimensione corretta */
input.field-error {
	width: 100%;
}

/* Checkbox/radio con errore: evita width:100% e mostra outline rosso */
input[type="checkbox"].field-error,
input[type="radio"].field-error {
	width: auto;
	outline: 2px solid var(--error-color);
	outline-offset: 1px;
}

/* Placeholder per messaggio di errore della privacy */
#privacy-error {
	display: block;
	margin-top: 2px;
}

.btn-contact-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.btn-contact-submit {
	display: inline-block;
	font-size: 16px;
}

.btn-contact-wrapper.is-loading .btn-contact-submit {
	opacity: 0.7;
	cursor: default;
}

.btn-contact-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--gray-200);
	border-top-color: var(--main-color);
	border-radius: 50%;
	flex-shrink: 0;
}

.btn-contact-wrapper.is-loading .btn-contact-spinner,
.order-request-submit-wrapper.is-loading .btn-contact-spinner {
	display: inline-block;
	animation: btn-contact-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.btn-contact-wrapper.is-loading .btn-contact-spinner,
	.order-request-submit-wrapper.is-loading .btn-contact-spinner {
		animation: none;
	}
}

@keyframes btn-contact-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.contact-form-message {
	margin-top: 12px;
	font-size: 16px;
}