/**
 * WCE Theme - Plugin Bridge Styles
 *
 * Maps theme.json design tokens to WC-Enhanced Pro plugin CSS custom properties
 * and provides styling adjustments for plugin components within this theme.
 *
 * The :root bridge (--wce-* variables) is output via inline CSS in functions.php.
 * This file handles visual refinements specific to this theme.
 *
 * @package WCE_Theme
 */

/* ========================================
   Shipping Progress Bar
   ======================================== */

.wce-shipping-progress {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wce-shipping-progress-bar {
	border-radius: var(--wp--custom--wce--border-radius);
	overflow: hidden;
}

.wce-shipping-progress-bar .progress-fill {
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact variant (used on single product) */
.wce-shipping-progress[data-style="compact"] {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--wce--border-radius);
	font-size: var(--wp--preset--font-size--small);
}

/* Checkout variant */
.wce-shipping-progress[data-style="checkout"] {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--wce--border-radius);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Celebration variant (order confirmation) */
.wce-shipping-progress[data-style="celebration"] {
	text-align: center;
	padding: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0;
}

/* Mini variant (header) */
.wce-shipping-progress[data-style="mini"] {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

/* ========================================
   Delivery Countdown Timer
   ======================================== */

.wce-countdown-timer {
	margin: var(--wp--preset--spacing--10) 0;
}

/* Product page context */
.wce-countdown-timer[data-context="product"] {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: 0 var(--wp--custom--wce--border-radius) var(--wp--custom--wce--border-radius) 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Cart page context */
.wce-countdown-timer[data-context="cart"] {
	text-align: center;
	padding: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

/* Banner context */
.wce-countdown-timer[data-context="banner"] {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-weight: 600;
}

/* ========================================
   Social Proof Notifications
   ======================================== */

.wce-social-proof-notification {
	position: fixed;
	bottom: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 1000;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	box-shadow: var(--wp--custom--wce--box-shadow-hover);
	padding: var(--wp--preset--spacing--20);
	max-width: 350px;
	animation: wce-slide-up 0.4s ease-out;
}

@keyframes wce-slide-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 599px) {
	.wce-social-proof-notification {
		left: var(--wp--preset--spacing--10);
		right: var(--wp--preset--spacing--10);
		max-width: none;
	}

	.wce-tiered-discount__tiers {
		flex-direction: column;
	}

	.wce-discount-tier {
		min-width: 0;
	}
}

/* ========================================
   Cross-sell Modal
   ======================================== */

.wce-cross-sell-modal {
	border-radius: var(--wp--custom--wce--border-radius);
	box-shadow: var(--wp--custom--wce--box-shadow-hover);
}

/* ========================================
   A/B Testing Variants
   ======================================== */

/* Hide A/B test variants that aren't active */
.wce-ab-variant[data-active="false"] {
	display: none;
}

/* ========================================
   Theme-specific Overrides
   ======================================== */

/* Remove Flatsome-specific selectors that no longer apply */
body.wce-theme-native .wce-shipping-progress {
	/* Reset any Flatsome-specific positioning */
	position: relative;
	z-index: auto;
}

/* Ensure plugin components respect theme typography */
.wce-shipping-progress,
.wce-countdown-timer,
.wce-social-proof-notification,
.wce-threshold-message,
.wce-tiered-discount {
	font-family: var(--wp--preset--font-family--system);
}

/* ========================================
   Threshold Discount Messages
   ======================================== */

.wce-threshold-message {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--wce--border-radius);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.wce-threshold-message:empty {
	display: none;
}

.wce-threshold-message .wce-threshold-amount {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.wce-threshold-message .wce-threshold-reward {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

/* ========================================
   Tiered Discount Display
   ======================================== */

.wce-tiered-discount {
	margin: var(--wp--preset--spacing--20) 0;
}

.wce-tiered-discount__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--10);
}

.wce-tiered-discount__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.wce-discount-tier {
	flex: 1 1 auto;
	min-width: 120px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	padding: var(--wp--preset--spacing--10);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	transition: var(--wp--custom--wce--transition);
}

.wce-discount-tier.active {
	border-color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, var(--wp--preset--color--background));
}

.wce-discount-tier .tier-value {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
}

.wce-discount-tier .tier-threshold {
	color: var(--wp--preset--color--muted);
}

/* ========================================
   Campaign Mode Banner
   ======================================== */

.wce-campaign-banner {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-dark) 100%);
	color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wce-campaign-banner a {
	color: inherit;
	text-decoration: underline;
}

.wce-campaign-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--foreground);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* MPL (Modern Product Loop) styling lives in assets/css/wce-mpl.css —
 * loaded conditionally when the plugin is active, after this file so
 * its rules win for any overlapping selectors. */

/* ========================================
   Optimal Margin Discounts Bridge
   ======================================== */

.omdm-collection-grid {
	font-family: var(--wp--preset--font-family--system);
}

.omdm-collection-grid .omdm-product-card {
	border-radius: var(--wp--custom--wce--border-radius);
	transition: var(--wp--custom--wce--transition);
}

.omdm-collection-grid .omdm-product-card:hover {
	box-shadow: var(--wp--custom--wce--box-shadow-hover);
}

/* ========================================
   BBT Delivery Message plugin
   ----------------------------------------
   The plugin outputs <p>Order within <span style="color:#XXX...">...
   </span> ...</p>. The inline colour is whatever the admin saved in
   Settings → BBT Delivery Message (default near-black #101010). We
   neutralise it and repaint against the oxblood surface regardless
   of admin choice — legibility comes first. The wrapper is styled
   as a subtle card so it shares edges with the sibling ATC card
   below, fixing the right-column alignment.
   ======================================== */

.wce-delivery-message {
	padding: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	font-family: var(--wp--preset--font-family--system);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
}

.wce-delivery-message p {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-size: 1rem;
}

/* Plugin emits inline color + font-size on spans (e.g.
 * color:#101010; font-size:18px). Force them to the palette and
 * neutralise the size override so the whole sentence reads at a
 * consistent scale — otherwise the date/time are 18px but
 * "Express Delivery" is the base size, making it look broken.
 * !important is required because inline styles outrank classes. */
.wce-delivery-message span,
.wce-delivery-message span[style] {
	color: var(--wp--preset--color--primary) !important;
	font-size: inherit !important;
}

.wce-delivery-message b,
.wce-delivery-message strong {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: inherit;
}

/* ========================================
   Free Delivery Indicator plugin
   ----------------------------------------
   Canonical output:
   <div class="fdi-indicator fdi-unified fdi-style-modern
     fdi-scheme-green wce-shipping-progress__inner">
     <div class="fdi-threshold-block fdi-unified-block">
       <div class="fdi-message"><span class="fdi-text">
         Add <span class="fdi-amount">£50.00</span> more…</span></div>
       <div class="fdi-progress-bar">
         <div class="fdi-progress-fill" style="width:0%"></div></div>
       <div class="fdi-secondary-message">…</div>
     </div></div>
   The `fdi-style-modern` and `fdi-scheme-green` classes carry the
   plugin's white-card + green defaults; we override at that
   specificity so the widget matches the oxblood/chartreuse palette.
   ======================================== */

.fdi-indicator,
.fdi-indicator.fdi-style-modern,
.fdi-indicator.fdi-style-modern.fdi-scheme-green {
	color: var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	padding: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.9375rem;
	line-height: 1.5;
	box-shadow: none;
}

/* The plugin can be wrapped by `.wce-shipping-progress` (which is also a
 * styled card in frontend.css). Strip that wrapper card when it contains FDI,
 * otherwise we end up with a card-inside-card visual stack. */
.wce-shipping-progress:has(.fdi-indicator),
.wp-block-wce-pro-shipping-progress:has(.fdi-indicator) {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.fdi-indicator .fdi-threshold-block,
.fdi-indicator .fdi-unified-block,
.fdi-indicator .fdi-message,
.fdi-indicator .fdi-secondary-message {
	background: transparent;
	background-image: none;
	color: var(--wp--preset--color--foreground);
	border: 0;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Plugin applies .fdi-qualified when a tier is met and paints a mint
 * gradient. Kill the gradient + border but KEEP the plugin's padding
 * so the qualified state has the same rhythm as the pending state. */
.fdi-indicator .fdi-threshold-block.fdi-qualified,
.fdi-indicator .fdi-unified-block.fdi-qualified,
.fdi-indicator.fdi-unified .fdi-unified-block.fdi-qualified {
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--foreground) !important;
	border-color: transparent !important;
}

/* The qualified message itself (tick + "You qualify for FREE…") —
 * repaint text to cream with chartreuse accents. */
.fdi-indicator .fdi-threshold-block.fdi-qualified .fdi-text,
.fdi-indicator .fdi-unified-block.fdi-qualified .fdi-text,
.fdi-indicator .fdi-qualified,
.fdi-indicator .fdi-qualified * {
	color: var(--wp--preset--color--foreground) !important;
}

.fdi-indicator .fdi-threshold-block.fdi-qualified strong,
.fdi-indicator .fdi-unified-block.fdi-qualified strong,
.fdi-indicator .fdi-qualified strong {
	color: var(--wp--preset--color--primary) !important;
}

.fdi-indicator .fdi-text,
.fdi-indicator .fdi-text-secondary {
	color: var(--wp--preset--color--foreground);
}

.fdi-indicator .fdi-amount,
.fdi-indicator .fdi-amount-secondary,
.fdi-indicator .fdi-qualified,
.fdi-indicator strong,
.fdi-indicator b {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.fdi-indicator .fdi-secondary-message,
.fdi-indicator .fdi-text-secondary {
	color: var(--wp--preset--color--foreground-muted);
	font-size: 0.8125rem;
}

.fdi-indicator .fdi-secondary-message {
	margin-top: var(--wp--preset--spacing--10);
}

/* Progress bar — override green scheme with chartreuse. */
.fdi-indicator .fdi-progress-bar,
.fdi-indicator.fdi-scheme-green .fdi-progress-bar {
	background: var(--wp--preset--color--surface-alt) !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius-pill);
	overflow: hidden;
	height: 8px;
	margin: var(--wp--preset--spacing--10) 0;
}

.fdi-indicator .fdi-progress-fill,
.fdi-indicator.fdi-scheme-green .fdi-progress-fill,
.fdi-indicator .fdi-progress-fill--standard,
.fdi-indicator .fdi-progress-fill--express {
	background: var(--wp--preset--color--primary) !important;
	background-image: none !important;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fdi-indicator .fdi-icon {
	color: var(--wp--preset--color--primary);
}

.fdi-indicator .fdi-threshold-block + .fdi-threshold-block {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Clean up stray <br> and empty </p> the plugin injects inside
 * divs — they leave visible blank lines. */
.fdi-indicator .fdi-text br,
.fdi-indicator .fdi-text-secondary br {
	display: none;
}

/* Mini-cart auto-injection — keep its own lighter surface. */
.wc-block-mini-cart .fdi-indicator,
.widget_shopping_cart .fdi-indicator,
.woocommerce-mini-cart .fdi-indicator {
	margin: var(--wp--preset--spacing--20) 0;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--wce--border-radius-small);
}

/* ========================================
   Pass Z — FDI qualified-primary + pending-secondary disambiguation
   (2026-04-19)
   ======================================== */

/* Qualified primary row: tick + message sit on a flex row so the ✓
   aligns with the message text even when the message wraps. */
.fdi-indicator .fdi-unified-block.fdi-qualified .fdi-message,
.fdi-indicator .fdi-threshold-block.fdi-qualified .fdi-message {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.fdi-indicator .fdi-qualified .fdi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-weight: 800;
	font-size: 0.875em;
	line-height: 1;
}

.fdi-indicator .fdi-qualified .fdi-text {
	font-weight: 600;
}

/* Pending Express secondary WHEN the primary is qualified — clearly
   mark it as "still to go" with its own border-top lane + muted text,
   so the card doesn't read as "both met". */
.fdi-indicator .fdi-unified-block.fdi-qualified .fdi-secondary-message,
.fdi-indicator .fdi-threshold-block.fdi-qualified .fdi-secondary-message {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground-muted);
	font-size: 0.8125rem;
}

.fdi-indicator .fdi-unified-block.fdi-qualified .fdi-text-secondary,
.fdi-indicator .fdi-threshold-block.fdi-qualified .fdi-text-secondary {
	color: var(--wp--preset--color--foreground-muted);
}

.fdi-indicator .fdi-unified-block.fdi-qualified .fdi-amount-secondary,
.fdi-indicator .fdi-threshold-block.fdi-qualified .fdi-amount-secondary {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Defensive for type="both": when express is qualified, the plugin
   still renders the redundant standard card. Hide it via :has()
   (Baseline 2023; no-op for the unified type we actually use). */
.fdi-indicator:has(.fdi-threshold-block.fdi-express.fdi-qualified) .fdi-threshold-block.fdi-standard {
	display: none;
}

/* =========================================================
   Phase 6 Pass A.1 — FDI scoping
   The new mini-cart block in the header renders a static snapshot of the
   widget panel (which the FDI plugin auto-injects into via WC hooks)
   before WC Blocks hydrates. That snapshot leaks the FDI capsule into
   the page. Hide FDI anywhere inside the site header; only show it
   inside the actual WC mini-cart slide-out drawer.
   ========================================================= */
.wce-site-header .fdi-indicator,
.wce-site-header .fdi-threshold-block,
.wce-site-header .fdi-unified-block,
.wp-block-woocommerce-mini-cart-contents .fdi-indicator,
.wp-block-woocommerce-mini-cart-contents .fdi-threshold-block,
.wp-block-woocommerce-mini-cart-contents .fdi-unified-block {
	display: none !important;
}
.wc-block-mini-cart__drawer .fdi-indicator,
.wc-block-mini-cart__drawer .fdi-threshold-block,
.wc-block-mini-cart__drawer .fdi-unified-block,
.wce-mini-cart-panel .fdi-indicator,
.wce-mini-cart-panel .fdi-threshold-block,
.wce-mini-cart-panel .fdi-unified-block {
	display: block !important;
}