/**
 * Free Shipping Bar — styles
 *
 * Refined, minimal aesthetic. Dark bar pinned to the bottom with a
 * smooth fill track. Transitions on progress width and background color.
 * Avoids z-index conflicts with Themify Ultra's mobile nav (which sits
 * at z-index 9998 by default) by using 9999.
 */

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

#fsb-wrap {
	background    : #111;
    color         : #f0f0f0;
    padding       : 12px 16px 14px;
    font-size     : 13px;
    letter-spacing: 0.01em;
    line-height   : 1.4;
    border-bottom : 1px solid rgba(255,255,255,0.08);
    display: none;
}

#fsb-wrap.fsb-achieved {
	background  : #0f2a10;
	border-color: rgba( 100, 200, 80, 0.25 );
}

/* ------------------------------------------------------------------ */
/* 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      : wrap;
}

.fsb-icon {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 18px;
	height         : 18px;
	border-radius  : 50%;
	background     : rgba( 255, 255, 255, 0.1 );
	font-size      : 10px;
	flex-shrink    : 0;
	transition     : background 0.4s ease;
}

.fsb-achieved .fsb-icon {
	background : rgba( 100, 200, 80, 0.3 );
	color      : #8ee87a;
}

.fsb-message strong {
	color          : #fff;
	font-weight    : 600;
}

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

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

.fsb-track {
	position      : relative;
	background    : rgba( 255, 255, 255, 0.1 );
	border-radius : 100px;
	height        : 4px;
	overflow      : visible; /* allow glow to bleed */
}

/* Solid fill */
.fsb-fill {
	position      : absolute;
	top           : 0;
	left          : 0;
	height        : 100%;
	border-radius : 100px;
	background    : rgba( 255, 255, 255, 0.75 );
	transition    : width 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.fsb-achieved .fsb-fill {
	background : #6fcf5a;
}

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

.fsb-achieved .fsb-fill-glow {
	background : rgba( 111, 207, 90, 0.35 );
}

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

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

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

/* ------------------------------------------------------------------ */
/* Themify Ultra bottom-nav collision guard                            */
/* Themify's mobile nav bar uses position:fixed; bottom:0 on small    */
/* screens. Shift the bar up when the nav is present.                 */
/* ------------------------------------------------------------------ */

@media ( max-width: 782px ) {
	body.has-mobile-menu-open #fsb-wrap,
	body.themify-mobile-menu-active #fsb-wrap {
		bottom : 60px; /* adjust to match your theme's nav height */
	}
}