/* ==========================================================================
   Free shipping threshold indicator

   One component, two variants. It is deliberately the quietest thing in the
   summary card: an eyebrow the same size as the store's other small labels, a
   3px rule, and one line of type. The checkout button stays the only element in
   the card with weight — the indicator explains, it does not sell.

   Colour carries the state and nothing else does: gold while there is still
   something to spend, forest once the rate is unlocked. No animation beyond the
   bar's own width, which is the only thing that actually changes.
   ========================================================================== */

.nahl-freeship {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-ui);
}

.nahl-freeship[hidden] {
	display: none;
}

.nahl-freeship__title {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	/* Gold as text on cream only ever reaches 2.3:1 — this is the darkened cut
	   the token comment reserves for exactly this case. */
	color: var(--color-honey-deep);
}

/* The tick is the whole of the completed state's decoration: no badge, no
   colour block, no second line. It appears only once the rate is unlocked. */
.nahl-freeship__check {
	display: none;
	flex: none;
	width: 13px;
	height: 13px;
	stroke-width: 2.5;
}

.nahl-freeship[data-state="qualified"] .nahl-freeship__title {
	color: var(--color-primary);
}

.nahl-freeship[data-state="qualified"] .nahl-freeship__check {
	display: block;
}

.nahl-freeship__track {
	height: 3px;
	margin-top: 9px;
	border-radius: 999px;
	background: var(--color-bg-muted);
	overflow: hidden;
}

.nahl-freeship__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--color-honey);
	transition: width var(--dur-menu) var(--ease-out),
		background-color var(--dur-hover) var(--ease-out);
}

/* A bar is a progress device, and once there is no progress left it has no job
   — a full-width forest rule above the checkout button reads as a second
   divider, or worse, as a banner. The completed state is one quiet line with a
   tick, which is also the shortest the card ever gets: crossing the threshold
   moves the checkout button up rather than down. */
.nahl-freeship[data-state="qualified"] .nahl-freeship__track {
	display: none;
}

.nahl-freeship__note {
	margin: 8px 0 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* The completed state has no note in the full variant — the heading says it.
   Collapsing the empty paragraph is what lets the card get shorter, and the
   checkout button move up, at the moment the customer qualifies. */
.nahl-freeship__note:empty {
	display: none;
}

/* wc_price() wraps the figure; it is the only part of the sentence that should
   read as a number rather than as prose. */
.nahl-freeship__note .woocommerce-Price-amount {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Compact — mini cart.

   A drawer has no room for a heading, a bar and a line, and anything taller
   pushes the checkout button below the fold on a phone. One sentence, sitting
   directly under the subtotal it refers to.
   -------------------------------------------------------------------------- */

.nahl-freeship--compact {
	margin-top: 10px;
	padding-top: 10px;
}

.nahl-freeship--compact .nahl-freeship__title,
.nahl-freeship--compact .nahl-freeship__track {
	display: none;
}

.nahl-freeship--compact .nahl-freeship__note {
	margin-top: 0;
}

.nahl-freeship--compact[data-state="qualified"] .nahl-freeship__note {
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	font-size: var(--fs-2xs);
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Cart page — the one thing the component has to know about its host.

   WooCommerce rules off the bottom of the order summary, and the indicator
   lands directly under it: two lines 16px apart read as a mistake. The
   indicator's own rule is the one that belongs to it, so WooCommerce's goes —
   but only while the indicator is actually there, or a cart whose script never
   ran would lose the separator above its checkout button.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar:has(.nahl-freeship) .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nahl-freeship__fill {
		transition: none;
	}
}