/**
 * WGE Free Shipping Bar.
 *
 * Colours come from the theme: --gbl-primary-color is printed into :root by best-shop
 * (best_shop_custom_css()). Never hardcode a brand red here — override
 * --wge-fsb-accent instead.
 */

.wge-fsb {
	--wge-fsb-accent: var( --gbl-primary-color, #a12324 );
	--wge-fsb-done: #1e7a3c;
	--wge-fsb-track: rgba( 0, 0, 0, 0.09 );
	--wge-fsb-height: 8px;

	margin: 0 0 1.5em;
	max-width: 100%;
}

/* Themes that set `display` on divs would otherwise defeat the hidden attribute,
   and the bar is hidden until the JS has real numbers. */
.wge-fsb[hidden] {
	display: none !important;
}

.wge-fsb__text {
	margin: 0 0 0.5em;
	font-size: 0.95em;
	line-height: 1.4;
}

.wge-fsb__track {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var( --wge-fsb-height );
	border-radius: calc( var( --wge-fsb-height ) / 2 );
	background: var( --wge-fsb-track );
}

.wge-fsb__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var( --wge-fsb-accent );
	transition: width 0.4s ease;
}

.wge-fsb.is-complete .wge-fsb__fill {
	background: var( --wge-fsb-done );
}

.wge-fsb.is-complete .wge-fsb__text {
	font-weight: 600;
	color: var( --wge-fsb-done );
}

/* Order-summary placement sits inside the totals card, which supplies its own
   padding — pull the bar in line with the rows below it. */
.wp-block-woocommerce-cart-order-summary-block > .wge-fsb {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var( --wge-fsb-track );
}

@media ( prefers-reduced-motion: reduce ) {
	.wge-fsb__fill {
		transition: none;
	}
}