/* ── G7 Free Shipping Progress Bar ──────────────────────────────────
   Evidence Mint aesthetic. Sits at the top of the cart sidebar,
   above the totals. Dark ink track, mint fill, clean typography.
   Matches the cart sidebar's light panel (rgba #f2f8f5 background). */

.g7-free-shipping-bar {
	margin: 0 0 20px;
	padding: 16px 18px 14px;
	border: 1px solid rgba(7, 25, 21, 0.12);
	border-radius: 8px;
	background: rgba(99, 228, 203, 0.06);
}

/* Message row */
.g7-fsb-message {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font: 500 12px/1.4 var(--studio-mono, 'DM Mono', monospace);
	letter-spacing: 0.04em;
	color: #071915;
}

.g7-fsb-message--progress .g7-fsb-text {
	color: rgba(7, 25, 21, 0.82);
}

.g7-fsb-message--unlocked {
	flex-direction: row;
	align-items: center;
}

.g7-fsb-message--unlocked .g7-fsb-text {
	color: #0C5A4F;
	font-weight: 600;
}

.g7-fsb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #2E8C84;
}

.g7-fsb-remaining {
	font-weight: 700;
	color: #071915;
}

/* Progress track */
.g7-fsb-track {
	position: relative;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: rgba(7, 25, 21, 0.1);
	overflow: hidden;
}

.g7-fsb-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #3FB8AF 0%, #63E4CB 100%);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When free shipping is unlocked, the fill is solid mint */
.g7-free-shipping-bar.is-unlocked .g7-fsb-fill {
	width: 100% !important;
	background: #2E8C84;
}

.g7-free-shipping-bar.is-unlocked .g7-fsb-track {
	background: rgba(46, 140, 132, 0.2);
}

/* Footer label */
.g7-fsb-footer {
	margin-top: 8px;
}

.g7-fsb-label {
	font: 400 10px/1.2 var(--studio-mono, 'DM Mono', monospace);
	letter-spacing: 0.06em;
	color: rgba(7, 25, 21, 0.48);
}

/* ── Dark cart canvas integration ───────────────────────────────────
   The cart page body has a dark ink background (#071915) but the
   sidebar panel is light (#f2f8f5). The progress bar lives inside
   the sidebar panel, so it uses the light-mode palette. */

body.woocommerce-cart .wc-block-components-sidebar .g7-free-shipping-bar {
	margin: 0 0 18px;
}

/* When the bar is inside the Woo Blocks sidebar, ensure it doesn't
   get clipped by the sidebar's padding/border. */
body.woocommerce-cart .wc-block-components-sidebar .g7-free-shipping-bar:first-child {
	margin-top: 0;
}

/* ── Classic WooCommerce cart (non-blocks) ──────────────────────────
   If the cart uses the classic template, the bar sits above
   the cart-collaterals cross-sell and shipping calculator. */

.woocommerce-cart .g7-free-shipping-bar {
	margin-bottom: 24px;
}

/* ── Checkout shipping section ──────────────────────────────────────
   The bar sits above the shipping rate list on the checkout order review. */

.g7-fsb-checkout-wrap {
	margin-bottom: 16px;
}

body.woocommerce-checkout .g7-free-shipping-bar {
	margin: 0 0 12px;
}

/* ── Mobile ───────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.g7-free-shipping-bar {
		padding: 14px 14px 12px;
	}
	.g7-fsb-message {
		font-size: 11px;
		margin-bottom: 8px;
	}
	.g7-fsb-label {
		font-size: 9px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.g7-fsb-fill {
		transition: none;
	}
}