/**
 * ftm/cart-progress — front-end styles.
 *
 * Ported from the wc-cart-notices mu-plugin (assets/css/cart-notices.css), itself
 * consolidated from the annalee-dolls theme. Classnames are preserved so the
 * threshold notice renders identically in every cart context.
 *
 * Neutral-defaults contract (EXTENDING.md §0): the plugin ships no brand values.
 * Themeable values are exposed as --ftps-cart-progress-* tokens whose defaults
 * (declared in @layer ftps-defaults) reference the active theme's tokens with a
 * generic neutral fallback. The theme's unlayered page-sections-tokens.css — or
 * its :root color/cart token definitions — wins over these layered defaults.
 *
 * NOTE: classnames use the universal ftps- prefix. The root element also carries a
 * legacy .ftps-free-gift-notice alias (dual-emitted in markup) for external JS that
 * still queries it (annalee-site-notices, theme header-cart view.js); that alias is
 * dropped once those consumers no longer reference it — see ADR 0002.
 *
 * Dropped during the port (handled elsewhere now):
 *   - .remove-al-notice button styles — dismissal is owned by the Global Sections
 *     wrapper (_gs_type=dismissable), not a per-notice button.
 *   - legacy .woocommerce-info / .woocommerce-cart-notice shortcode-output rules
 *     and hard-coded #woocommerce-cart-notice-* hide rules — the external plugin
 *     no longer renders.
 */

/* ── Token defaults (theme-overridable) ───────────────────────────────────── */

@layer ftps-defaults {

	.ftps-free-gift-notice {
		--ftps-cart-progress-surface: var(--color-white, #fff);
		--ftps-cart-progress-border: 1px solid var(--color-neutral-200, #e5e5e5);
		--ftps-cart-progress-radius: var(--cart-notice-border-radius, 8px);
		--ftps-cart-progress-padding: var(--space-normal, 1rem);
		--ftps-cart-progress-gap: var(--space-normal, 1rem);
		--ftps-cart-progress-max-width: var(--max-width-text, 45em);
		--ftps-cart-progress-image-basis: var(--cart-gift-image-ratio, 25%);
		--ftps-cart-progress-image-max: var(--cart-image-size-lg, 100px);
		--ftps-cart-progress-title-font: var(--body-large, inherit);
		--ftps-cart-progress-title-gap: var(--space-xsmall, 0.5rem);
		--ftps-cart-progress-actions-gap: var(--space-small, 0.75rem);
		--ftps-cart-progress-bar-track: var(--color-surface-subtle, #f2f2f2);
		--ftps-cart-progress-bar-fill: var(--color-form-success, #2e7d32);
		--ftps-cart-progress-bar-height: 8px;
		--ftps-cart-progress-bar-radius: 2px;
	}
}

/* ── Page Section wrapper ─────────────────────────────────────────────────── */

/*
 * The Cart Threshold Notice is authored as an ftm/page-section layout, so the
 * notice renders inside <section class="page-section page-section-cart-notice">.
 * The notice provides its own surface, padding, and spacing, so strip the page
 * chrome (gutter padding + section margins) the framework applies to every
 * .page-section. Unlayered here, so it overrides the @layer ftps-defaults rule.
 */
.page-section-cart-notice {
	margin: 0;
	padding: 0;
}

.page-section-cart-notice + .page-section-cart-notice {
	margin-top: var(--space-normal, 1rem);
}

/* ── Base notice layout ───────────────────────────────────────────────────── */

.ftps-free-gift-notice {
	border: var(--ftps-cart-progress-border);
	border-radius: var(--ftps-cart-progress-radius);
	background-color: var(--ftps-cart-progress-surface);
	line-height: 1.5;
	padding: var(--ftps-cart-progress-padding);
}

.ftps-free-gift-notice + .ftps-free-gift-notice {
	margin-top: var(--ftps-cart-progress-gap);
}

.ftps-free-gift-notice-inner {
	display: flex;
	margin: 0 auto;
	max-width: var(--ftps-cart-progress-max-width);
	position: relative;
}

.ftps-free-gift-notice-progress-bar,
.ftps-free-gift-notice-text {
	padding-right: 0;
}

.ftps-free-gift-notice-progress-bar {
	align-items: center;
	line-height: 1;
	margin-top: 10px;
	display: flex;
	margin-bottom: 0;
	padding-right: 32px;
}

/* ── Image & title ────────────────────────────────────────────────────────── */

.ftps-free-gift-notice-image {
	flex-basis: var(--ftps-cart-progress-image-basis);
	margin-right: var(--ftps-cart-progress-gap);
	max-width: var(--ftps-cart-progress-image-max);
	min-width: max(80px, var(--ftps-cart-progress-image-basis));
}

.ftps-free-gift-notice-image img {
	height: auto;
	max-width: 100%;
}

.ftps-free-gift-notice-title {
	font: var(--ftps-cart-progress-title-font);
	margin-bottom: var(--ftps-cart-progress-title-gap);
}

.ftps-free-gift-notice-actions {
	margin-top: var(--ftps-cart-progress-actions-gap);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */

.notice-progress-bar {
	height: var(--ftps-cart-progress-bar-height);
	margin-top: 2px;
	background-color: var(--ftps-cart-progress-bar-track);
	border-radius: var(--ftps-cart-progress-bar-radius);
	flex-grow: 1;
	margin-right: 8px;
}

.notice-progress-bar-fill {
	background-color: var(--ftps-cart-progress-bar-fill);
	border-radius: var(--ftps-cart-progress-bar-radius);
	height: 100%;
}

.notice-progress-bar-goal {
	background-color: var(--ftps-cart-progress-bar-track);
	border-radius: var(--ftps-cart-progress-bar-radius);
	padding: 0 8px;
}

/* ── Header-cart (cart drawer) context overrides ──────────────────────────── */

.header-cart {

	.ftps-free-gift-notice {
		border: var(--cart-border-width, 1px) var(--cart-border-style, solid) var(--cart-border-color, #e5e5e5);
		border-radius: var(--cart-notice-border-radius, 8px);
		padding: var(--space-normal, 1rem);

		& + & {
			margin-top: var(--space-normal, 1rem);
		}
	}

	.ftps-free-gift-notice-inner {
		display: flex;
	}

	.ftps-free-gift-notice-progress-bar,
	.ftps-free-gift-notice-text {
		padding-right: 0;
	}

	.ftps-free-gift-notice-progress-bar {
		align-items: center;
		line-height: 1;
		margin-bottom: 0;
		margin-top: var(--cart-progress-bar-offset, 10px);
	}

	.notice-progress-bar {
		height: var(--cart-progress-bar-height, 8px);
		margin-top: var(--space-xxxsmall, 0.125rem);
	}

	.notice-progress-bar-goal {
		background-color: transparent;
		border-radius: 0;
		font: var(--body-small, inherit);
		padding: 0;
	}
}