/**
 * ManageCart — Free Shipping Progress (Side Cart footer add-on).
 *
 * Relies entirely on the `--manage-cart-*` custom properties the free
 * plugin's own assets/css/frontend.css already defines on
 * `.manage-cart-root` (this stylesheet is enqueued as a dependency of
 * that one), so it always matches the panel's current violet/purple
 * accent colors — including any Appearance-setting overrides — with no
 * hard-coded colors of its own. No external fonts, CDNs, images, or
 * libraries. Selectors use the manage-cart- prefix, matching the free
 * plugin's own convention.
 *
 * ## Mobile bottom-sheet containment
 *
 * On mobile the panel is a bottom sheet: `position: fixed`, capped at
 * `max-height: 85vh`, laid out as a flex column of header /
 * `.manage-cart-panel-body` (`flex: 1 1 auto; overflow-y: auto`) /
 * `.manage-cart-panel-footer` (`flex: 0 0 auto`). Anything added to the
 * footer grows a non-shrinking box inside a height-capped container, so
 * this block is written to stay strictly contained:
 *
 * - Every box is `border-box` and capped at `max-width: 100%`, so the
 *   footer's 18px horizontal padding can never be overrun and no
 *   horizontal scrollbar appears.
 * - The header row may wrap and its children may shrink (`min-width: 0`),
 *   so a long translated label wraps instead of forcing the panel wide.
 * - The message wraps on long words rather than overflowing.
 * - The track clips its own fill (`overflow: hidden`), so a 100% bar
 *   cannot bleed past its rounded ends.
 * - Vertical footprint is trimmed at narrow widths and trimmed further
 *   at short viewport heights (e.g. a landscape phone), where the
 *   85vh cap leaves the least room — this keeps the scrollable item
 *   list usable instead of squeezing it to nothing.
 */

.manage-cart-free-shipping {
	box-sizing: border-box;
	max-width: 100%;
	margin-bottom: 14px;
}

.manage-cart-free-shipping *,
.manage-cart-free-shipping *::before,
.manage-cart-free-shipping *::after {
	box-sizing: border-box;
}

.manage-cart-free-shipping-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 8px;
}

.manage-cart-free-shipping-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --manage-cart-accent );
}

.manage-cart-free-shipping-icon svg {
	display: block;
}

.manage-cart-free-shipping-label {
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var( --manage-cart-ink );
	overflow-wrap: break-word;
	word-break: break-word;
}

.manage-cart-free-shipping-track {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var( --manage-cart-border );
	overflow: hidden;
}

.manage-cart-free-shipping-fill {
	height: 100%;
	/* Width is set inline (0–100%) by the server render and by the
	   script. No min-width: at 0% the bar stays genuinely empty rather
	   than showing a nub that reads as progress already made. */
	width: 0;
	max-width: 100%;
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --manage-cart-accent ), var( --manage-cart-accent-2 ) );
	transition: width 0.25s ease;
}

.manage-cart-free-shipping-message {
	margin: 8px 0 0;
	max-width: 100%;
	font-size: 12px;
	line-height: 1.4;
	color: var( --manage-cart-muted );
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Once the threshold is reached, the message reads as a confirmation
   rather than a nudge — set in the accent color, same weight as the
   compact label above the bar, while the bar itself stays the same
   violet/purple fill (now simply shown full). */
.manage-cart-free-shipping--reached .manage-cart-free-shipping-message {
	color: var( --manage-cart-accent );
	font-weight: 600;
}

/* Narrow viewports: the mobile bottom sheet. Trim the block's vertical
   footprint so the scrollable item list keeps as much of the 85vh cap
   as possible. */
@media ( max-width: 768px ) {
	.manage-cart-free-shipping {
		margin-bottom: 12px;
	}

	.manage-cart-free-shipping-header {
		margin-bottom: 6px;
	}

	.manage-cart-free-shipping-message {
		margin-top: 6px;
	}
}

/* Short viewports (landscape phones, small split-screen windows): the
   height cap bites hardest here, so compact the block further. */
@media ( max-height: 560px ) {
	.manage-cart-free-shipping {
		margin-bottom: 10px;
	}

	.manage-cart-free-shipping-header {
		margin-bottom: 5px;
	}

	.manage-cart-free-shipping-track {
		height: 6px;
	}

	.manage-cart-free-shipping-message {
		margin-top: 5px;
		font-size: 11px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.manage-cart-free-shipping-fill {
		transition: none;
	}
}