/* =============================================================================
   Brixies Free Shipping Nudge
   Colors are driven by CSS custom properties set inline by PHP:
     --fsn-bg   background of the bar wrapper
     --fsn-fg   text color
     --fsn-bar  progress fill color
   Theme stylesheets can override any of these with a plain selector:
     #brixies-fsn-bar { --fsn-bar: hotpink; }
   ============================================================================= */

#brixies-fsn-bar {
	/* consume the vars with sensible fallbacks */
	background : var(--fsn-bg,   #fff8e1);
	color       : var(--fsn-fg,   #333333);

	padding       : 10px 14px 8px;
	border-radius : 6px;
	margin        : 10px 0 12px;
	font-size     : 13px;
	line-height   : 1.4;

	animation: brixies-fsn-fadein 0.25s ease both;
}

/* ── <li> wrapper reset (used when position is inside the <ul>) ────────────── */

li.brixies-fsn-li {
	list-style  : none !important;
	padding     : 0 !important;
	margin      : 0 !important;
	border      : none !important;
	background  : none !important;
	width       : 100%;
}

/* ── Text ──────────────────────────────────────────────────────────────────── */

#brixies-fsn-bar .brixies-fsn-text {
	margin-bottom : 6px;
	text-align    : center;
}

/* ── Progress track ────────────────────────────────────────────────────────── */

#brixies-fsn-bar .brixies-fsn-progress-wrap {
	background    : rgba(0, 0, 0, 0.10);
	border-radius : 999px;
	height        : 5px;
	overflow      : hidden;
}

/* ── Progress fill ─────────────────────────────────────────────────────────── */

#brixies-fsn-bar .brixies-fsn-progress-bar {
	height        : 100%;
	border-radius : 999px;
	background    : var(--fsn-bar, #1a73e8); /* own color, not currentColor */
	transition    : width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	min-width     : 2%;
}

/* ── Entrance animation ────────────────────────────────────────────────────── */

@keyframes brixies-fsn-fadein {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
