@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Customizzazione globale delle etichette dei form */
.form-label {
	font-size: 0.85rem;
	font-weight: 400;
	margin-bottom: 0.2rem;
	color: #495057;
}

/* Compattezza generale per gli input */
.form-control, .form-select {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 0.9rem;
	background-color: #ffffff; /* Sfondo bianco di default per i campi normali */
	transition: background-color 0.15s ease-in-out;
}

	/* --- CAMPI OBBLIGATORI (A RIPOSO) --- */
	.bg-required,
	.form-control.bg-required,
	.form-select.bg-required {
		background-color: #fffde7 !important; /* Giallo pallido quando NON è in focus */
		border-color: #ffe082;
	}

	/* --- STILE FOCUS (QUANDO CI SEI DENTRO) --- */
	/* Campi normali in focus */
	.form-control:focus,
	.form-select:focus {
		background-color: #e8f4f8 !important; /* Celeste */
		color: #212529;
		box-shadow: none !important;
	}

	/* Campi OBBLIGATORI in focus: sovrascrive il giallo finché l'utente scrive */
	.form-control.bg-required:focus,
	.form-select.bg-required:focus {
		background-color: #e8f4f8 !important; /* Diventa celeste solo durante la digitazione */
		color: #212529;
		box-shadow: none !important;
	}

/* Radio button focus */
.form-check-input:focus {
	box-shadow: none !important;
}

/* Bottone di invio */
.custom-dynamic-btn {
	color: var(--theme-color, #336699);
	border: 1px solid var(--theme-color, #336699);
	background-color: transparent;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
}

	.custom-dynamic-btn:hover {
		background-color: var(--theme-color, #336699);
		color: #ffffff;
		border-color: var(--theme-color, #336699);
	}

	.custom-dynamic-btn:focus,
	.custom-dynamic-btn:active {
		background-color: var(--theme-color, #336699);
		color: #ffffff;
		box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
	}

/* Password Rules */
#password-rules li {
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

	#password-rules li.valid {
		color: green;
	}

	#password-rules li.invalid {
		color: red;
	}

/* Sovrascrive l'icona del check sostituendola con una SVG nera */
.form-check-input:checked {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}