/* cf-patches — CheckoutWC (Kestrel "Checkout for WooCommerce") free-shipping bar restyle.
 * Loaded ONLY when free_ship_cwc is on. A real stylesheet survives Autoptimize (an inline <style>
 * gets aggregated out of the head). The SAME classes render in two places with DIFFERENT ancestry:
 *   - side cart  -> #cfw-side-cart .cfw-side-cart-free-shipping-progress*
 *   - checkout   -> .cfw-side-cart-free-shipping-progress*  (NOT under #cfw-side-cart)
 * So we target the classes UN-scoped, and lean on !important.
 *
 * UPDATED FOR CheckoutWC v11.4.0 (Tailwind rewrite). The bar's DOM is now:
 *   div.cfw-side-cart-free-shipping-progress-wrap[ --tiered ]
 *     p (message)
 *     div.cfw-side-cart-free-shipping-progress.cfw-side-cart-free-shipping-rail   (track, both classes)
 *       div.cfw-side-cart-free-shipping-progress-indicator  style="--cfw-fill:NN%;--cfw-fill-color:…" (fill)
 * The fill colour moved to a NEW variable --cfw-fill-color (default #3858e9 blue) and the fill is now
 * absolutely-positioned inside a rounded 8px rail. We recolour only and adopt their new geometry
 * rather than forcing the old .5em/square look (which fought the new layout = the regression).
 */

/* Message wrap -> branded card (matches the approved mockup's side-cart bar). Both variants. */
.cfw-side-cart-free-shipping-progress-wrap,
.cfw-side-cart-free-shipping-progress-wrap--tiered{
	border:1px solid #9c13d1 !important;
	border-radius:8px !important;
	background:#fff !important;
	padding:10px 13px !important;
}
/* Message text -> our type, not CheckoutWC's default. */
.cfw-side-cart-free-shipping-progress-wrap p{
	font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif !important;
	font-weight:700 !important;
	font-size:12.5px !important;
	line-height:1.35 !important;
	color:#23252b !important;
	margin:0 0 8px !important;
}
/* The "$X" amount sits in <strong><span.woocommerce-Price-amount><bdi> — a WooCommerce price
   rule recolours it (#333333) and drops the bold in the side cart (checkout's cascade keeps it).
   Pin it bold + our colour so the popout matches checkout. */
.cfw-side-cart-free-shipping-progress-wrap p strong,
.cfw-side-cart-free-shipping-progress-wrap p .woocommerce-Price-amount,
.cfw-side-cart-free-shipping-progress-wrap p .woocommerce-Price-amount bdi{
	font-weight:700 !important;
	color:#23252b !important;
}
/* Track (the rail) -> recolour only; keep CheckoutWC's new rounded pill geometry so the fill
   clips correctly. Clip the fill to the pill with overflow. */
.cfw-side-cart-free-shipping-progress,
.cfw-side-cart-free-shipping-rail{
	background-color:#e6e2ee !important;
	overflow:hidden !important;
}
/* Fill -> brand gradient. Direct !important wins over CheckoutWC's `background:var(--cfw-fill-color)`
   regardless of the inline var they set; width/position stay theirs. */
.cfw-side-cart-free-shipping-progress-indicator{
	background:linear-gradient(90deg,#d31775,#5262ac) !important;
	border-radius:999px !important;
}

/* 11.4.0 added a TIER system the old bar never had: a "Free shipping / $99" label row
   (.cfw-tier-labels) below the bar and milestone circles on it (.cfw-tier-node), both in
   CheckoutWC's default blue. The "$X away from free shipping!" message already carries this,
   so hide the markers for the clean single-bar look that matches the approved mockup. */
.cfw-tier-labels,
.cfw-tier-node{
	display:none !important;
}

/* CheckoutWC theming variables (belt) — set BOTH the old name and the 11.4.0 --cfw-fill-color. */
:root,
#cfw-side-cart{
	--cfw-fill-color:linear-gradient(90deg,#d31775,#5262ac) !important;
	--cfw-side-cart-free-shipping-progress-indicator:linear-gradient(90deg,#d31775,#5262ac) !important;
	--cfw-side-cart-free-shipping-progress-background:#e6e2ee !important;
}

/* Position B ("near checkout") — pure CSS, gated by body.cf-fsb-nearcheckout (added in PHP
 * only when that position is chosen). No DOM manipulation: the side cart is React-rendered.
 * Flexes the scrollable contents and pushes the bar to its bottom, just above the footer. */
body.cf-fsb-nearcheckout .cfw-side-cart-contents{
	display:flex !important;
	flex-direction:column !important;
}
body.cf-fsb-nearcheckout .cfw-side-cart-contents .cfw-side-cart-free-shipping-progress-wrap{
	order:99 !important;
	margin-top:auto !important;
	margin-bottom:0 !important;
}

/* Local Pickup selected -> hide CheckoutWC's free-shipping bar (original + our relocated clone). */
body.cf-fs-pickup [data-cf-clone],
body.cf-fs-pickup .cfw-side-cart-free-shipping-progress-wrap{ display:none !important; }

/* CheckoutWC 11.4.0 express-checkout buttons (WooPayments / Stripe / PayPal)
   render left-aligned in their container. Centre each wrapper's button with
   justify-content (the horizontal axis) WITHOUT shrinking the wrappers, so the
   payment buttons keep their rendered width. */
#cfw-payment-request-buttons,
#cfw-payment-request-buttons > div,
#cfw-payment-request-buttons > div > div,
#cfw-payment-request-buttons #wc-ppcp-express-button,
#cfw-payment-request-buttons #wc-stripe-express-checkout-element,
#cfw-payment-request-buttons #wcpay-express-checkout-element,
#cfw-payment-request-buttons .wc-stripe-banner-checkout,
#cfw-payment-request-buttons .wcpay-express-checkout-wrapper,
#cfw-payment-request-buttons .wcpay-payment-request-wrapper{
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}
/* The rendered Apple Pay / Google Pay buttons are nested iframes/buttons with an
   intrinsic width — centre them directly too. */
#cfw-payment-request-buttons iframe,
#cfw-payment-request-buttons button,
#cfw-payment-request-buttons [role="button"],
#cfw-payment-request-buttons .gpay-card-info-container,
#cfw-payment-request-buttons apple-pay-button{
	margin-left: auto !important;
	margin-right: auto !important;
}

/* "Have a promo code? Click here" (.cfw-show-coupons-module) renders left-aligned
   in 11.4.0; centre it to match the rest of the summary column. */
.cfw-coupon-wrap .cfw-show-coupons-module{
	display: block !important;
	text-align: center !important;
}

/* CheckoutWC 11.4.0 renders the trust-badges container with an INLINE
   grid-template-columns: repeat(2, minmax(0,1fr)), so a single badge (our
   Lifetime Warranty) is stuck in the left column and reads as left-aligned.
   Override the inline grid to a centered flex row that works for any count.
   (Stylesheet !important beats a non-important inline declaration.) */
[id^="cfw-trust-badges-"] > div{
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 0.5rem !important;
}

/* Breathing room between the side-cart header (cart icon + count) and the first
 * line item — on mobile CheckoutWC renders them right on top of each other. This
 * is a general side-cart spacing fix rather than a free-shipping one, but it
 * rides in this sheet (which loads with free_ship_cwc). */
.cfw-side-cart-contents-header{ margin-bottom:20px !important; }