/**
 * Free-shipping progress bar. Scoped to qdwc-free-ship-*, no !important. Colours
 * come from the design tokens. RTL-safe (logical properties; the fill grows from
 * the inline-start edge).
 *
 * --qdwc-ship-progress : fill progress 0–1 (set by free-shipping-bar.js from the
 *                        data attr); drives the fill's inline-size so it grows from
 *                        the inline-start edge without distorting decoration layers.
 */
.qdwc-free-ship-bar {
	margin-block: 1.5rem;
	margin-inline: 0;
}

/* Wrapper stays in the DOM as the fragment anchor, but takes no space when no
   amount-based free-shipping method applies. */
.qdwc-free-ship-bar.is-hidden {
	display: none;
}

.qdwc-free-ship-msg {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: var( --qdwc-ink, #1f2937 );
}

/* The message is rich-editor HTML (wrapped in <p>); flatten the block margins so
   the bar stays compact. */
.qdwc-free-ship-msg > :first-child {
	margin-block-start: 0;
}

.qdwc-free-ship-msg > :last-child {
	margin-block-end: 0;
}

.qdwc-free-ship-track {
	block-size: 8px;
	border-radius: 4px;
	background: var( --qdwc-border, #ececec );
	overflow: hidden;
}

.qdwc-free-ship-fill {
	position: relative;
	display: block;
	inline-size: calc( var( --qdwc-ship-progress, 0 ) * 100% );
	block-size: 100%;
	background: var( --qdwc-primary, #5b21b6 );
	transition: inline-size 0.4s ease;
}

.qdwc-free-ship-bar.is-reached .qdwc-free-ship-fill {
	background: var( --qdwc-secondary, #2ea2cc );
}

/* ---------------------------------------------------------------------------
 * Fill animations. The width growth above is the shared base; each modifier
 * only adds a looping decoration over the fill. Scoped to qdwc-fsb-anim--*,
 * logical properties throughout, decoration clipped by the track's overflow.
 * ------------------------------------------------------------------------- */

/* Striped — static diagonal candy stripes layered over the fill colour. */
.qdwc-fsb-anim--stripes .qdwc-free-ship-fill,
.qdwc-fsb-anim--stripes_move .qdwc-free-ship-fill {
	background-image: repeating-linear-gradient(
		45deg,
		rgba( 255, 255, 255, 0.35 ) 0,
		rgba( 255, 255, 255, 0.35 ) 6px,
		transparent 6px,
		transparent 12px
	);
	background-size: 17px 100%;
}

/* Marching Stripes — the same stripes scroll along the inline axis. */
.qdwc-fsb-anim--stripes_move .qdwc-free-ship-fill {
	animation: qdwc-fsb-stripes 0.7s linear infinite;
}

@keyframes qdwc-fsb-stripes {
	to {
		background-position: 17px 0;
	}
}

/* Shimmer — a translucent highlight band sweeps inline-start → end. */
.qdwc-fsb-anim--shimmer .qdwc-free-ship-fill::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 40%;
	inset-inline-start: -40%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba( 255, 255, 255, 0.55 ),
		transparent
	);
	animation: qdwc-fsb-shimmer 1.6s ease-in-out infinite;
}

@keyframes qdwc-fsb-shimmer {
	to {
		inset-inline-start: 100%;
	}
}

/* Pulse — the whole fill brightens and dims. */
.qdwc-fsb-anim--pulse .qdwc-free-ship-fill {
	animation: qdwc-fsb-pulse 1.3s ease-in-out infinite;
}

@keyframes qdwc-fsb-pulse {
	50% {
		filter: brightness( 1.35 );
	}
}

/* Gradient Flow — a two-tone gradient drifts along the inline axis. */
.qdwc-fsb-anim--gradient .qdwc-free-ship-fill {
	background-image: linear-gradient(
		90deg,
		var( --qdwc-primary, #5b21b6 ),
		var( --qdwc-secondary, #2ea2cc ),
		var( --qdwc-primary, #5b21b6 )
	);
	background-size: 200% 100%;
	animation: qdwc-fsb-gradient 2s linear infinite;
}

@keyframes qdwc-fsb-gradient {
	to {
		background-position: 200% 0;
	}
}

/* Neon Glow — an inset highlight pulses at the leading edge, plus a brightness
   pulse; the glow stays inside the clipped track. */
.qdwc-fsb-anim--glow .qdwc-free-ship-fill {
	animation: qdwc-fsb-glow-bright 1.2s ease-in-out infinite;
}

.qdwc-fsb-anim--glow .qdwc-free-ship-fill::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 14px;
	inset-inline-end: 0;
	background: radial-gradient( circle at center, rgba( 255, 255, 255, 0.9 ), transparent 70% );
	animation: qdwc-fsb-glow 1.2s ease-in-out infinite;
}

@keyframes qdwc-fsb-glow-bright {
	50% {
		filter: brightness( 1.3 );
	}
}

@keyframes qdwc-fsb-glow {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
}

/* Liquid Wave — a wavy highlight layer ripples across the fill. */
.qdwc-fsb-anim--wave .qdwc-free-ship-fill::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	background: radial-gradient( circle at 25% 120%, rgba( 255, 255, 255, 0.4 ) 18%, transparent 40% ),
		radial-gradient( circle at 75% 120%, rgba( 255, 255, 255, 0.4 ) 18%, transparent 40% );
	background-size: 24px 100%;
	animation: qdwc-fsb-wave 1.1s linear infinite;
}

@keyframes qdwc-fsb-wave {
	to {
		background-position: 24px 0;
	}
}

/* Rainbow — a multi-hue gradient scrolls along the inline axis. */
.qdwc-fsb-anim--rainbow .qdwc-free-ship-fill {
	background-image: linear-gradient(
		90deg,
		#ef4444,
		#f59e0b,
		#10b981,
		#3b82f6,
		#8b5cf6,
		#ef4444
	);
	background-size: 200% 100%;
	animation: qdwc-fsb-rainbow 2.2s linear infinite;
}

@keyframes qdwc-fsb-rainbow {
	to {
		background-position: 200% 0;
	}
}

/* Running Dashes — dashed segments run inline-start → end (a runway). */
.qdwc-fsb-anim--dashes .qdwc-free-ship-fill::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0.55 ) 0,
		rgba( 255, 255, 255, 0.55 ) 6px,
		transparent 6px,
		transparent 12px
	);
	background-size: 12px 100%;
	animation: qdwc-fsb-dashes 0.6s linear infinite;
}

@keyframes qdwc-fsb-dashes {
	to {
		background-position: 12px 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.qdwc-free-ship-fill {
		transition: none;
	}

	/* Stop every looping decoration; the bar settles to a static fill. */
	.qdwc-free-ship-fill,
	.qdwc-free-ship-fill::after {
		animation: none;
	}

	.qdwc-fsb-anim--shimmer .qdwc-free-ship-fill::after,
	.qdwc-fsb-anim--glow .qdwc-free-ship-fill::after,
	.qdwc-fsb-anim--wave .qdwc-free-ship-fill::after,
	.qdwc-fsb-anim--dashes .qdwc-free-ship-fill::after {
		content: none;
	}
}