/*
 * Banner di completamento lezione — FM Framework PULSE.
 *
 * È l'avviso "Ottimo lavoro! Hai completato questa lezione" che LearnDash
 * mostra subito dopo aver segnato completato uno step, e solo in quel
 * caricamento: ai successivi non compare più.
 *
 * Come per la navigazione, il markup resta di LearnDash e qui c'è solo lo
 * strato di stile. Valgono le stesse note sulla specificità scritte in testa a
 * navigation.css: la classe `fm-ld-chrome` sul body più la catena dei selettori
 * servono a superare il <style> inline che LearnDash genera dalle sue
 * impostazioni tema, e gli !important stanno solo dove LearnDash li usa.
 *
 * Il pulsante interno è volutamente identico a "Lezione successiva" della
 * navigazione sotto: prima erano due bottoni di colore diverso per la stessa
 * identica azione, nella stessa pagina.
 *
 *   Accento ONLINE            #885FC9  --e-global-color-0ed7c7a
 *   Fondo Riquadro ONLINE+    #BDA2C5  --e-global-color-b0c5a7a
 *   Fondo Riquadro ONLINE-    #E7DDE8  --e-global-color-c121010
 *   Pulsanti SHOP Hover       #F8ED07  --e-global-color-163f986
 *   Testo Pulsanti SHOP Hover #2E2E2E  --e-global-color-96dc944
 */

.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed {
	--fmldch-accent: var(--e-global-color-0ed7c7a, #885fc9);
	--fmldch-soft: var(--e-global-color-b0c5a7a, #bda2c5);
	--fmldch-surface: var(--e-global-color-c121010, #e7dde8);
	--fmldch-on-accent: var(--e-global-color-fb91e95, #fff);
	--fmldch-on-soft: var(--e-global-color-96dc944, #2e2e2e);
	--fmldch-hover-bg: var(--e-global-color-163f986, #f8ed07);

	background-color: var(--fmldch-surface) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--e-global-color-text, #333749) !important;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	font-size: 13px;
	font-weight: 500;
}

/* Il riquadro dell'icona diventa quadrato come tutto il resto. */
.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed .ld-alert-icon {
	background-color: var(--fmldch-accent) !important;
	border-radius: 0 !important;
	color: var(--fmldch-on-accent) !important;
}

.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed .ld-alert-icon svg {
	color: inherit;
	fill: currentColor;
}

/* Stesso pulsante della navigazione, stessa azione. */
.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button:not(.ld-button-transparent) {
	background-color: var(--fmldch-soft) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
	color: var(--fmldch-on-soft) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	padding: 13px 22px;
	text-shadow: none;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button:not(.ld-button-transparent):hover,
.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button:not(.ld-button-transparent):focus-visible {
	background-color: var(--fmldch-hover-bg) !important;
	color: var(--fmldch-on-soft) !important;
}

.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button .ld-icon,
.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button:hover .ld-icon {
	color: inherit !important;
}

@media (max-width: 600px) {
	.fm-ld-chrome .learndash-wrapper .ld-alert.ld-alert--step-completed a.ld-button:not(.ld-button-transparent) {
		font-size: 11px;
		padding: 12px 16px;
	}
}