/**
 * Maraton — free-shipping club: slim linear progress bar above the cart.
 */

.mw-fs {
	--mw-fs-orange: #ff6414;
	--mw-fs-orange-2: #ff8b3d;
	--mw-fs-orange-3: #ffb347;
	--mw-fs-green: #16a34a;
	--mw-fs-green-2: #22c55e;
	--mw-fs-ink: #14110f;
	--mw-fs-muted: #5c5650;
	--mw-fs-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-bottom: 1rem;
	padding: 0.7rem 0.95rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 100, 20, 0.18);
	background:
		radial-gradient(90% 220% at 100% 50%, rgba(255, 139, 61, 0.16), transparent 62%),
		linear-gradient(120deg, rgba(255, 253, 250, 0.98) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(255, 246, 238, 0.97) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.98),
		0 14px 32px rgba(255, 100, 20, 0.09);
}

.mw-fs,
.mw-fs * {
	box-sizing: border-box;
}

.mw-fs__orb {
	position: absolute;
	inset-block-start: -90px;
	inset-inline-start: -30px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 100, 20, 0.16), transparent 68%);
	pointer-events: none;
	z-index: 0;
	animation: mw-fs-float 9s var(--mw-fs-ease) infinite;
}

@keyframes mw-fs-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(14px, -10px, 0) scale(1.08); }
}

/* ── Linear bar ── */
.mw-fs__bar {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.85rem;
}

.mw-fs__icon {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	color: var(--mw-fs-orange);
	background: linear-gradient(145deg, rgba(255, 100, 20, 0.18), rgba(255, 255, 255, 0.95));
	border: 1px solid rgba(255, 100, 20, 0.2);
	box-shadow: 0 10px 22px rgba(255, 100, 20, 0.16);
}

.mw-fs__icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mw-fs__icon::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 16px;
	border: 1px solid rgba(255, 100, 20, 0.3);
	animation: mw-fs-ring 2.6s var(--mw-fs-ease) infinite;
}

@keyframes mw-fs-ring {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50% { transform: scale(1.12); opacity: 0; }
}

.mw-fs__text {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.4rem;
	margin: 0;
	min-width: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--mw-fs-muted);
}

.mw-fs__text strong {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--mw-fs-ink);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.mw-fs__text span {
	white-space: nowrap;
}

/* ── Track ── */
.mw-fs__track {
	position: relative;
	flex: 1 1 170px;
	min-width: 130px;
	height: 14px;
}

.mw-fs__track-base {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(20, 17, 15, 0.09), rgba(20, 17, 15, 0.05));
	box-shadow: inset 0 2px 5px rgba(20, 17, 15, 0.1);
}

.mw-fs__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(270deg, var(--mw-fs-orange) 0%, var(--mw-fs-orange-2) 55%, var(--mw-fs-orange-3) 100%);
	box-shadow:
		0 6px 16px rgba(255, 100, 20, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: width 1.25s var(--mw-fs-ease);
}

.mw-fs.is-animated .mw-fs__fill {
	width: var(--mw-fs-pct, 0%);
}

.mw-fs__sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
}

.mw-fs__sheen::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
	transform: translateX(-140%);
	animation: mw-fs-sheen 2.8s var(--mw-fs-ease) infinite;
}

@keyframes mw-fs-sheen {
	0% { transform: translateX(-140%); }
	55%, 100% { transform: translateX(260%); }
}

.mw-fs__spark {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	width: 12px;
	height: 12px;
	margin-block-start: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, rgba(255, 179, 71, 0.95) 42%, transparent 72%);
	box-shadow: 0 0 16px 5px rgba(255, 140, 60, 0.5);
	opacity: 0;
	transition: inset-inline-end 1.25s var(--mw-fs-ease), opacity 0.5s ease;
}

.mw-fs.is-animated .mw-fs__spark {
	inset-inline-end: calc(var(--mw-fs-pct, 0%) - 6px);
	opacity: 1;
	animation: mw-fs-pulse 1.9s ease-in-out infinite;
}

@keyframes mw-fs-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.35); }
}

.mw-fs__tick {
	position: absolute;
	top: 50%;
	inset-inline-end: var(--mw-fs-tick, 0%);
	width: 2px;
	height: 7px;
	margin-block-start: -3.5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
}

/* ── Percent badge ── */
.mw-fs__percent {
	flex: 0 0 auto;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--mw-fs-orange), var(--mw-fs-orange-3));
	box-shadow: 0 8px 18px rgba(255, 100, 20, 0.26);
	white-space: nowrap;
}

/* ── Reached state ── */
.mw-fs.is-reached {
	border-color: rgba(34, 197, 94, 0.3);
	background:
		radial-gradient(90% 220% at 100% 50%, rgba(34, 197, 94, 0.16), transparent 62%),
		linear-gradient(120deg, rgba(248, 255, 250, 0.98) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(240, 253, 244, 0.97) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.98),
		0 14px 32px rgba(34, 197, 94, 0.14);
}

.mw-fs.is-reached .mw-fs__orb {
	background: radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 68%);
}

.mw-fs.is-reached .mw-fs__icon {
	color: var(--mw-fs-green);
	background: linear-gradient(145deg, rgba(34, 197, 94, 0.18), rgba(255, 255, 255, 0.95));
	border-color: rgba(34, 197, 94, 0.24);
	box-shadow: 0 10px 22px rgba(34, 197, 94, 0.18);
}

.mw-fs.is-reached .mw-fs__icon::after {
	border-color: rgba(34, 197, 94, 0.38);
}

.mw-fs.is-reached .mw-fs__text strong {
	color: #15803d;
}

.mw-fs.is-reached .mw-fs__text span {
	color: #166534;
}

.mw-fs.is-reached .mw-fs__percent {
	background: linear-gradient(135deg, var(--mw-fs-green), var(--mw-fs-green-2));
	box-shadow: 0 8px 18px rgba(34, 197, 94, 0.3);
}

.mw-fs.is-reached .mw-fs__fill {
	background: linear-gradient(270deg, var(--mw-fs-green) 0%, var(--mw-fs-green-2) 55%, #86efac 100%);
	box-shadow:
		0 6px 18px rgba(34, 197, 94, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mw-fs.is-reached .mw-fs__spark {
	background: radial-gradient(circle, #fff 0%, rgba(134, 239, 172, 0.95) 42%, transparent 72%);
	box-shadow: 0 0 16px 5px rgba(34, 197, 94, 0.5);
}

.mw-fs.is-reached .mw-fs__icon {
	animation: mw-fs-pop 0.55s var(--mw-fs-ease) both;
}

@keyframes mw-fs-pop {
	0% { transform: scale(0.86); }
	60% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* ── Celebration burst ── */
.mw-fs-confetti {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
}

.mw-fs-confetti__piece {
	position: absolute;
	top: -10vh;
	display: block;
	border-radius: 2px;
	opacity: 0.95;
	will-change: transform;
	animation-name: mw-fs-fall;
	animation-timing-function: cubic-bezier(0.25, 0.55, 0.4, 1);
	animation-fill-mode: both;
}

@keyframes mw-fs-fall {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translate3d(var(--mw-fs-drift, 0px), 112vh, 0) rotate(var(--mw-fs-spin, 360deg));
		opacity: 0.85;
	}
}

/* ── Responsive ── */
@media (max-width: 720px) {
	.mw-fs {
		padding: 0.65rem 0.75rem;
		border-radius: 16px;
	}

	.mw-fs__icon {
		width: 34px;
		height: 34px;
		border-radius: 11px;
	}

	.mw-fs__icon svg {
		width: 17px;
		height: 17px;
	}

	.mw-fs__text {
		flex: 1 1 auto;
		font-size: 0.76rem;
	}

	.mw-fs__text strong {
		font-size: 0.86rem;
	}

	.mw-fs__percent {
		margin-inline-start: auto;
		font-size: 0.7rem;
		padding: 0.24rem 0.55rem;
	}

	/* The bar takes its own line so the strip stays linear and readable. */
	.mw-fs__track {
		flex: 1 0 100%;
		order: 5;
		min-width: 0;
		height: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-fs__orb,
	.mw-fs__icon::after,
	.mw-fs__sheen::before,
	.mw-fs__spark,
	.mw-fs.is-reached .mw-fs__icon {
		animation: none !important;
	}

	.mw-fs__fill,
	.mw-fs__spark {
		transition: none !important;
	}

	.mw-fs-confetti {
		display: none !important;
	}
}