/**
 * Free Shipping Bar — styles
 */

/* ------------------------------------------------------------------ */
/* Keyframes                                                            */
/* ------------------------------------------------------------------ */

@keyframes fsb-slide-in {
	from {
		opacity  : 0;
		transform: translateY(-6px);
	}
	to {
		opacity  : 1;
		transform: translateY(0);
	}
}

@keyframes fsb-fill-grow {
	from { width: 0; }
	/* to is set inline via the style attribute */
}

@keyframes fsb-achieved-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12); }
	60%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ------------------------------------------------------------------ */
/* Bar wrapper                                                          */
/* ------------------------------------------------------------------ */

#fsb-mount {
	display: contents;
}

#fsb-mount:empty {
	display: none;
}

#fsb-wrap {
	background    : rgb(235, 213, 163);
	color         : #111;
	padding       : 12px 14px 14px;
	font-size     : 13px;
	letter-spacing: 0.01em;
	line-height   : 1.4;
	border-radius : 10px;
	margin        : 0 0 20px;
	display       : block;
	font-family   : 'Comfortaa', sans-serif;
	animation     : fsb-slide-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
}

#fsb-wrap.fsb-achieved {
	background: rgb(225, 208, 158);
	animation : fsb-slide-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) both,
	            fsb-achieved-pulse 0.6s 0.35s ease-out both;
}

/* ------------------------------------------------------------------ */
/* Inner layout                                                         */
/* ------------------------------------------------------------------ */

.fsb-inner {
	max-width: 540px;
	margin   : 0 auto;
}

/* ------------------------------------------------------------------ */
/* Message line                                                         */
/* ------------------------------------------------------------------ */

.fsb-message {
	margin     : 0 0 8px;
	display    : flex;
	align-items: center;
	gap        : 7px;
	flex-wrap  : nowrap;
	white-space: nowrap;
}

.fsb-message > span:last-child {
	white-space: normal;
}

.fsb-icon {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 18px;
	height         : 18px;
	border-radius  : 50%;
	background     : rgba(0, 0, 0, 0.12);
	color          : #111;
	font-size      : 10px;
	flex-shrink    : 0;
	transition     : background 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fsb-achieved .fsb-icon {
	background: rgba(0, 0, 0, 0.15);
	transform : scale(1.15);
}

.fsb-message strong {
	color      : #111;
	font-weight: 700;
}

/* Small note indicating default zone is being used */
.fsb-zone-note {
	font-size  : 11px;
	opacity    : 0.45;
	font-style : italic;
}

/* ------------------------------------------------------------------ */
/* Progress track                                                       */
/* ------------------------------------------------------------------ */

.fsb-track {
	position     : relative;
	background   : rgba(0, 0, 0, 0.12);
	border-radius: 100px;
	height       : 4px;
	overflow     : visible;
}

/* Solid fill — animates width from 0 on entry */
.fsb-fill {
	position      : absolute;
	top           : 0;
	left          : 0;
	height        : 100%;
	border-radius : 100px;
	background    : #111;
	animation     : fsb-fill-grow 0.7s 0.2s cubic-bezier(0.25, 1, 0.5, 1) both;
	transition    : width 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Soft glow layer */
.fsb-fill-glow {
	position      : absolute;
	top           : -3px;
	left          : 0;
	height        : 10px;
	border-radius : 100px;
	background    : rgba(0, 0, 0, 0.15);
	filter        : blur(4px);
	animation     : fsb-fill-grow 0.7s 0.2s cubic-bezier(0.25, 1, 0.5, 1) both;
	transition    : width 0.55s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#fsb-wrap,
	.fsb-fill,
	.fsb-fill-glow {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	#fsb-wrap {
		padding  : 9px 12px 11px;
		font-size: 12px;
		margin   : 0 0 12px;
	}

	.fsb-message {
		gap          : 5px;
		margin-bottom: 6px;
	}
}