/*
 * Stili del widget di compatibilità veicoli (frontend).
 * Variabili CSS pensate per essere sovrascritte facilmente dal tema del sito.
 */

.m2-compat-widget {
	--m2-compat-colore-bordo: #d0d0d0;
	--m2-compat-colore-testo: #23282d;
	--m2-compat-colore-accento: #2271b1;
	--m2-compat-colore-sfondo-select: #ffffff;
	--m2-compat-colore-conferma-sfondo: #edf9f0;
	--m2-compat-colore-conferma-testo: #1d6b30;
	--m2-compat-colore-non-trovi-sfondo: #fff8e5;
	--m2-compat-colore-non-trovi-testo: #6b5100;
	--m2-compat-colore-errore-sfondo: #fdeeee;
	--m2-compat-colore-errore-testo: #a3241a;
	--m2-compat-raggio-bordo: 6px;
	--m2-compat-spaziatura: 12px;

	max-width: 640px;
	font-family: inherit;
	color: var(--m2-compat-colore-testo);
}

/* .titolo-seleziona-auto è una classe aggiuntiva "vuota" pensata per iniettare
   stili personalizzati (es. da CSS aggiuntivo del tema) senza modificare il plugin. */
.m2-compat-titolo {
	font-weight: 700;
	font-size: 1.2em;
	margin: 0 0 var(--m2-compat-spaziatura);
}

/* Specificità rafforzata con !important: alcuni temi/Elementor impongono display:block
   sui div dentro il widget "Shortcode" e altrimenti annullerebbero silenziosamente la griglia. */
.m2-compat-widget .m2-compat-griglia {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--m2-compat-spaziatura);
}

/* Da tablet in giù, le 4 tendine tornano una sotto l'altra. */
@media ( max-width: 640px ) {
	.m2-compat-widget .m2-compat-griglia {
		grid-template-columns: 1fr;
	}
}

.m2-compat-riga {
	margin-bottom: var(--m2-compat-spaziatura);
}

.m2-compat-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.m2-compat-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--m2-compat-colore-bordo);
	border-radius: var(--m2-compat-raggio-bordo);
	background-color: var(--m2-compat-colore-sfondo-select);
	color: var(--m2-compat-colore-testo);
	font-size: 1em;
}

.m2-compat-select:disabled {
	background-color: #f3f3f3;
	color: #999;
	cursor: not-allowed;
}

.m2-compat-conferma {
	padding: 10px 14px;
	border-radius: var(--m2-compat-raggio-bordo);
	background-color: var(--m2-compat-colore-conferma-sfondo);
	color: var(--m2-compat-colore-conferma-testo);
	font-weight: 600;
}

.m2-compat-non-trovi {
	padding: 10px 14px;
	border-radius: var(--m2-compat-raggio-bordo);
	background-color: var(--m2-compat-colore-non-trovi-sfondo);
	color: var(--m2-compat-colore-non-trovi-testo);
}

.m2-compat-non-trovi a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.m2-compat-errore {
	padding: 10px 14px;
	border-radius: var(--m2-compat-raggio-bordo);
	background-color: var(--m2-compat-colore-errore-sfondo);
	color: var(--m2-compat-colore-errore-testo);
}