/**
 * Altus — gratis verzending-voortgangsbalk (mu-plugin altus-gratis-verzending-balk.php)
 * Opmaak naar het voorbeeld van het oude XStore-widget: stippellijn-kader in
 * Altus-oranje, icoontje + tekst, grijze voortgangsbalk die in Altus-oranje vult.
 */

.altus-verzendbalk {
	border: 1px dashed var(--altus-oranje);
	border-radius: 6px;
	padding: 14px 16px;
}

.altus-verzendbalk__tekst {
	align-items: center;
	color: var(--altus-navy);
	display: flex;
	font-size: 14px;
	gap: 10px;
	line-height: 1.4;
	margin-bottom: 10px;
}

.altus-verzendbalk__icoon {
	color: var(--altus-oranje);
	flex-shrink: 0;
	font-size: 16px;
}

.altus-verzendbalk__balk {
	background: var(--altus-grijs);
	border-radius: 20px;
	height: 8px;
	overflow: hidden;
	width: 100%;
}

.altus-verzendbalk__vulling {
	background: var(--altus-oranje);
	border-radius: 20px;
	height: 100%;
	transition: width 0.3s ease;
}

/* Gratis verzending behaald (of: dit product wordt al gratis geleverd) = vakje met
   groene achtergrond, tekst en icoon; rand en laadbalk blijven Altus-oranje. */
.altus-verzendbalk--behaald {
	background: #eaf7ee;
	border-style: solid;
}

.altus-verzendbalk--behaald .altus-verzendbalk__tekst {
	color: #14803a;
	font-weight: 600;
}

.altus-verzendbalk--behaald .altus-verzendbalk__icoon {
	color: #1fa84a;
}