/**
 * evov-sub — FunnelKit checkout shimmer re-skin
 *
 * FunnelKit (funnel-builder / funnel-builder-pro) prints its own loading
 * shimmer for the checkout order-review table inline, via
 * class-wfacp-public.php's shimmer_css() (echoes wfacp-shimmer.min.css
 * directly into a <style> tag — no enqueued handle to hook a dependency on,
 * hence !important below to guarantee this wins regardless of print order).
 * It's triggered by qty change (+/-, or entering a quantity), which adds
 * body.wfacp_anim_active and paints a shimmer bar via ::after on ~40
 * specific selectors (product image, name, price, qty box, shipping, tax,
 * coupon, totals, etc.) — the raw plugin source is at
 * wp-content/plugins/funnel-builder(-pro)/.../assets/css/wfacp-shimmer.css.
 *
 * FunnelKit's own version: light grey gradient (#eff1f3/#e2e2e2), 4%/25%/36%
 * stops, animated via `background-position` sweeping across an oversized
 * (1000px) background-size at 2s linear — clashes with the dark site and
 * doesn't match evov's own product-loop skeleton look.
 *
 * product-loop.css's .evov-skel-* system actually has TWO different
 * mechanics, for two different DOM shapes:
 *   1. evovSkeletonShimmer (transitions.css) — transform:translateX, used
 *      where the element has its OWN solid resting background-color AND a
 *      SEPARATE ::after sweep layered on top (e.g. .evov-skel-price,
 *      .evov-skel-thumb). Not usable here — FunnelKit's ::after IS the mask
 *      box itself (position:absolute; inset:0, no separate resting layer),
 *      so translating it would slide the whole box off and reveal the real
 *      text instead of sweeping a highlight across it.
 *   2. evovLineShimmer (transitions.css) — background-position sweep across
 *      a self-contained 5-stop gradient, background-size:400% 100% — used
 *      exactly where a pseudo-element IS the visible box with nothing
 *      layered separately underneath (.evov-skel-title's line bars). This
 *      is the matching shape for FunnelKit's structure, so it's reused
 *      directly (already loaded sitewide — not redefined here).
 *
 * Colours stay fully opaque (unlike .evov-skel-title's own rgba(255,255,
 * 255,.06/.22) stops) because FunnelKit does NOT hide the real underlying
 * text (no color:transparent/visibility:hidden) — the ::after box is the
 * ONLY thing masking it, so using the raw translucent stops directly would
 * let real price/title text show through. color-mix() pre-composites the
 * same 6%/22% white mix against the checkout page's actual dark background
 * (#1a1a1a, confirmed live) into fully opaque colours instead — same
 * percentages as .evov-skel-title, just made opaque for this different
 * masking context.
 *
 * border-radius: 9px, applied uniformly, plus a slight oversize (2px top,
 * 1px bottom, -1px left with +2px width) so the mask overshoots each
 * element's own box a touch and fully covers it edge-to-edge — smaller
 * overshoot values (or shifting left by the full added width instead of
 * half) were tried and reverted after leaking a hairline sliver of the
 * real element's edge on narrower rows (confirmed live via screenshot).
 *
 * .wfacp_mini_cart_item_title gets a different, dedicated treatment below
 * instead of this shared ::after box: when its text wraps to two lines, a
 * single ::after rectangle produced one solid slab instead of two separate
 * pill-shaped bars (reference: evov's own multi-line skeleton look). Fixed
 * by disabling this element's ::after entirely and painting the shimmer
 * directly on the <a> text run via box-decoration-break:clone, which gives
 * each wrapped line its own independently-rounded background box for free
 * (and a naturally shorter last line, since it's still inline content) —
 * see the dedicated rule below.
 */

.wfacp_anim_active .wfacp_shipping_table li label:after,
.wfacp_anim_active .wfacp_shipping_table .wfacp_shipping_price span:after,
.wfacp_anim_active .wfacp_mb_mini_cart_sec_accordion_content .cart_item .wfacp_order_summary_item_name .wfacp_cart_title_sec:after,
.wfacp_anim_active .wfacp_order_total_wrap tr td span:after,
.wfacp_anim_active .wfacp_no_add_here li span:after,
.wfacp_anim_active .wfacp_no_add_here li label:after,
.wfacp_anim_active .first-payment-date:after,
.wfacp_anim_active .subscription-price span:after,
.wfacp_anim_active .includes_tax:after,
.wfacp_anim_active .wfacp_order_subtotal td > span:after,
.wfacp_anim_active .wfacp_order_subtotal td:first-child span:after,
.wfacp_anim_active .shipping-method-description:after,
.wfacp_anim_active .amount:after,
.wfacp_anim_active .shipping_total_fee td:first-child span:after,
.wfacp_anim_active .shipping_total_fee th:first-child span + small:after,
.wfacp_anim_active .shipping th:first-child span + small:after,
.wfacp_anim_active .wfacp_single_shipping .wfacp_shipping_price:after,
.wfacp_anim_active .wfacp_mini_cart_item_title:after,
.wfacp_anim_active .wfacp_order_summary_container .shop_table tr th span:after,
.wfacp_anim_active .tax-total span:after,
.wfacp_anim_active .shipping_total_fee span:after,
.wfacp_anim_active .wfacp_mini_cart_reviews tr th span:after,
.wfacp_anim_active .wfacp_mini_cart_reviews tr td:first-child span:after,
.wfacp_anim_active .tax_label:after,
.wfacp_anim_active .wfacp_single_coupon_msg:after,
.wfacp_anim_active table tr td:first-child span:after,
.wfacp_anim_active .wfacp_order_summary_container ul li .wfacp_shipping_radio:after,
.wfacp_anim_active .product-name strong.product-quantity:after,
.wfacp_anim_active .wfacp_coupon_msg .woocommerce-error:after,
.wfacp_anim_active tbody tr.cart_item > td .product-image:after,
.wfacp_anim_active tbody tr.cart_item > td .product-name span:after,
.wfacp_anim_active tbody tr.cart_item > td .wfacp_product_subs_details span:after,
.wfacp_anim_active tbody tr.cart_item td.product-total .woocommerce-Price-amount.amount:after,
.wfacp_anim_active tbody tr.cart_item > td .wfacp_quantity_selector:after,
.wfacp_anim_active tbody tr.cart_item .wfacp_delete_item_wrap a:after,
.wfacp_anim_active .wfacp_order_summary_container table:not(.wfacp_mini_cart_items) tr:not(.cart_item) th:first-child span:after,
.wfacp_anim_active .wfacp_order_summary_container table:not(.wfacp_mini_cart_items) tr:not(.cart_item) td:first-child span:after,
.wfacp_anim_active .wfacp_order_summary_container table:not(.wfacp_mini_cart_items) tr:not(.cart_item) td:last-child span.woocommerce-Price-amount.amount:after,
.wfacp_anim_active .wfacp_order_summary_container table:not(.wfacp_mini_cart_items) tr:not(.cart_item).shipping_total_fee td:last-child span:after,
.wfacp_anim_active .wfacp_order_summary_container table:not(.wfacp_mini_cart_items) tr:not(.cart_item).cart-discount td:last-child span:after {
  /* background-image, NOT the `background` shorthand — the shorthand
     implicitly sets background-position:initial !important too, and a
     static !important value can never be overridden by a running
     animation (confirmed live: animation reported "running" the whole
     time, background-position stayed frozen at 0% 0% regardless). */
  top:    -2px !important;
  bottom: -1px !important;
  left:   -1px !important;
  right:  auto !important;
  width:  calc(100% + 2px) !important;
  border-radius: 9px !important;
  background-image: linear-gradient(
    90deg,
    #272831 0%,
    #272831 30%,
    color-mix(in srgb, white 22%, #272831) 50%,
    #272831 70%,
    #272831 100%
  ) !important;
  background-size: 400% 100% !important;
  animation: evovLineShimmer 1.4s ease-in-out infinite !important;
}

/* evov-sub: FunnelKit checkout mini-cart — product title, per-line shimmer.
   Wrapped titles need one independently-rounded pill per line rather than a
   single slab, so this element's shared ::after mask (above) is disabled
   and the shimmer is painted straight onto the <a> text run instead —
   box-decoration-break:clone gives each wrapped line its own background box
   automatically, no JS line-counting needed. Text is hidden via
   color:transparent on the title AND all its descendants (the <a> itself
   sets its own link color, which otherwise wins over inheritance). Kept
   padding/margin vertical-only and line-height modest (1.8, not >2) after
   live testing showed horizontal padding shifts line-wrapping enough to
   knock the sibling quantity badge ("× 1") out of its normal position, and
   a taller line-height than this exaggerates the gap between lines. */
.wfacp_anim_active .wfacp_mini_cart_item_title:after {
  display: none !important;
}

/* evov-sub: kill the .wfacp_cart_title_sec mask — MOBILE-ONLY BUG.
   FunnelKit scopes that mask to .wfacp_mb_mini_cart_sec_accordion_content, so
   it exists only in the mobile collapsible summary — which is why desktop
   never showed this. checkout-mini-cart-layout.css makes the element
   display:contents to flatten it into the card grid, so it generates no box
   of its own; Chrome still renders its ::after, and with no box to resolve
   inset:0 against, the mask fell back to the nearest positioned ancestor —
   tr.cart_item — and covered the ENTIRE card as one slab instead of showing
   per-element bars. The title's own mask already covers this content. */
.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_cart_title_sec:after {
  content: none !important;
  display: none !important;
}
/* The .wfacp_mini_cart_items tr.cart_item prefix is deliberate and required.
   checkout-mini-cart-layout.css sets an explicit title colour at
   (0,3,1)/(0,3,2); this rule at the shorter (0,2,0)/(0,2,1) lost the cascade
   even though both are !important — specificity is compared before source
   order — and the real title text stayed fully legible through the mask
   (confirmed live). Matching that depth puts this back in front. */
.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_mini_cart_item_title,
.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_mini_cart_item_title * {
  color: transparent !important;
}
.wfacp_anim_active .wfacp_mini_cart_item_title a {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 9px !important;
  /* No padding/margin: the bar hugs the text line. The earlier 2px vertical
     padding (with a -2px margin cancelling it out in layout) made each pill
     4px taller than the line box. */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.8 !important;
  background-image: linear-gradient(
    90deg,
    #272831 0%,
    #272831 30%,
    color-mix(in srgb, white 22%, #272831) 50%,
    #272831 70%,
    #272831 100%
  ) !important;
  background-size: 400% 100% !important;
  animation: evovLineShimmer 1.4s ease-in-out infinite !important;
}

/* evov-sub: FunnelKit checkout mini-cart — remove ("×") icon mask.
   Overrides the shared -2px/-1px insets above. The mask is 25px tall rather
   than the link's full 32px and sits 8px higher than the link box, because
   the icon's glyph is only 16px and is anchored to the TOP of its 32px hit
   area, not centred in it — so the covering constraint is the top inset, and
   the lower third of the link box is empty space that never needed masking. */
.wfacp_anim_active tbody tr.cart_item .wfacp_delete_item_wrap a:after {
  top:    -7px !important;
  bottom: 14px !important;
}

/* evov-sub: FunnelKit checkout mini-cart — tighten the gap between the
   title shimmer and the quantity-adjuster shimmer below it. .product-
   quantity carries a 12px margin-top by default (fine for real content,
   but visually oversized once the title is reduced to compact shimmer
   pills) — confirmed live via getComputedStyle, no other property was
   contributing to the gap. */
.wfacp_anim_active .product-quantity {
  margin-top: 4px !important;
}


/* evov-sub: FunnelKit checkout mini-cart — product title link, no underline.
   evov_mini_cart_item_name_link() (functions.php) wraps the title in <a>.
   !important: WoodMart's own `.elementor a { text-decoration: var(--wd-link-
   decor) }` (int-elem-base.css — the sitewide Customizer "underline links"
   setting) ties this rule on specificity (0,1,1 each) and loads after it,
   winning the tie — confirmed live (dotted underline persisted without this). */
.wfacp_mini_cart_item_title a,
.wfacp_mini_cart_item_title a:hover {
  text-decoration: none !important;
}


/**
 * evov-sub: FunnelKit "Place Order" loading mask — dark overlay + evov spinner
 *
 * WooCommerce core's checkout.js blocks form.woocommerce-checkout (jQuery
 * blockUI) with a light overlayCSS ({background:'#fff', opacity:0.6}), and
 * FunnelKit adds #wfacp_checkout_form.processing while the AJAX submission
 * is in flight. FunnelKit's OWN CSS (wfacp_combined.min.css) then repaints
 * that exact overlay with its light spinner.gif:
 *   body .wfacp_main_form #wfacp_checkout_form.processing .blockUI.blockOverlay
 *   { background: url(spinner.gif) 50% center no-repeat rgb(255,255,255) !important; }
 * — specificity (1 id, 4 classes, 1 type), !important. A same-specificity
 * override wouldn't beat it (important vs important is decided by
 * specificity first, source order only breaks a tie) — confirmed live: a
 * bare `#wfacp_checkout_form .blockUI.blockOverlay` override never took
 * effect even matching their exact selector, because checkout-shimmer.css
 * actually loads BEFORE wfacp_combined.min.css in the real page (confirmed
 * live via <link> order — the opposite of what dependency-based intuition
 * suggested), so their later same-specificity !important rule won the tie
 * for `background` (their rule never touches border-radius, which is why
 * that part alone worked). `.blockOverlay.blockOverlay` repeats the class
 * to add +1 specificity on purpose — a deliberate, well-known bump that
 * doesn't change what it matches — so this wins outright regardless of
 * load order, replacing their spinner.gif with the same .evov-spinner-ring
 * look used for page navigation (transitions.css's evovSpinnerRotate
 * keyframe, already loaded sitewide — reused here rather than redefined).
 *
 * Background: --bgcolor-white is the same variable WoodMart's own fly-in
 * panels use (mini cart / login form / mobile nav — .wd-side-hidden,
 * confirmed live: resolves to #121420 on this site, close to the requested
 * #0b0d14 fallback) — "what WoodMart uses for the fly-in mini cart", so this
 * tracks the site's actual dark-theme surface colour instead of a hardcoded
 * value.
 */
body .wfacp_main_form #wfacp_checkout_form.processing .blockUI.blockOverlay.blockOverlay {
  background: color-mix(in srgb, var(--bgcolor-white, #0b0d14) 88%, transparent) !important;
}
body .wfacp_main_form #wfacp_checkout_form.processing .blockUI.blockOverlay.blockOverlay::before {
  display: none !important;
}
body .wfacp_main_form #wfacp_checkout_form.processing .blockUI.blockOverlay.blockOverlay::after {
  content:        '' !important;
  display:        block !important;
  position:       absolute !important;
  top:            50% !important;
  left:           50% !important;
  width:          50px !important;
  height:         50px !important;
  margin:         -25px 0 0 -25px !important;
  border-radius:  50% !important;
  border:         4px solid color-mix(in srgb, var(--wd-primary-color, #6366f1) 18%, transparent) !important;
  border-top-color: var(--wd-primary-color, #6366f1) !important;
  animation:      evovSpinnerRotate 0.7s linear infinite !important;
  background:     none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Mini-cart line amounts — card skeleton instead of the opaque mask.

   The mask above stays in place for everything else on this page (titles,
   totals, shipping, tax). Only the per-line AMOUNTS switch to the site's card
   skeleton (.evov-skel in transitions.css), matching the slide-in cart.

   The two approaches are opposites and the difference matters: the mask paints
   an OPAQUE bar over text that stays visible, while the skeleton makes the
   element itself the placeholder and hides its text. Porting the mask to the
   slide-in without hiding the text produced a solid white block — the white
   price rendering on top of it — which is what this treatment avoids.

   Specificity: the mask rule above is (0,5,3) and carries !important, so the
   extra .wfacp_mini_cart_items class here is what lets these win.
   ════════════════════════════════════════════════════════════════════════ */
.wfacp_anim_active .wfacp_mini_cart_items tbody tr.cart_item td.product-total .woocommerce-Price-amount.amount {
	position: relative !important;
	display: inline-block !important;
	overflow: hidden !important;
	background-color: var(--evov-skel-bg, rgba(255, 255, 255, .06)) !important;
	border-radius: var(--wd-brd-radius, 4px) !important;
	color: transparent !important;
	pointer-events: none !important;
}

/* The currency symbol is a nested span; color:transparent does not reach it. */
.wfacp_anim_active .wfacp_mini_cart_items tbody tr.cart_item td.product-total .woocommerce-Price-amount.amount > * {
	visibility: hidden !important;
}

/* Every geometry property is restated: this same pseudo is the mask box in the
   rule above, sized with its own offsets, radius and 400% gradient. */
.wfacp_anim_active .wfacp_mini_cart_items tbody tr.cart_item td.product-total .woocommerce-Price-amount.amount:after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: inherit !important;
	background-color: transparent !important;
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		var(--evov-skel-shimmer, rgba(255, 255, 255, .30)) 50%,
		rgba(255, 255, 255, 0) 100%
	) !important;
	background-size: auto !important;
	animation: evovSkeletonShimmer var(--evov-skel-duration, 1.4s) ease-in-out infinite !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMPORARY — shimmer on the AMOUNTS ONLY
   ------------------------------------------------------------------------
   Suppresses every shimmer in the order-summary widget except the price
   amounts. To restore the full shimmer, DELETE THIS WHOLE BLOCK (down to the
   end of the file) — nothing above it was changed.

   Why an override block rather than commenting the rules out: the rules this
   disables span most of this file and are themselves full of explanatory
   comments, and CSS has no nested comments — wrapping them in an outer
   comment would terminate at the first inner `*​/` and corrupt everything
   after it. A single additive block is both safer and easier to remove.

   Two mechanisms have to be covered, which is why there are two rules:

     1. Most elements are masked by an absolutely-positioned ::after. Those
        are neutralised with content:none, excluding the amounts.
     2. The mini-cart product TITLE is different — its shimmer is painted
        directly onto the <a> text run (see the block above), not on a
        pseudo-element, so rule 1 does not reach it and it needs its own.

   Measured after applying: 47 shimmering elements down to 6, all of them
   .woocommerce-Price-amount.
   ════════════════════════════════════════════════════════════════════════ */
body.wfacp_anim_active .wfacp_order_summary_container *:not(.woocommerce-Price-amount):not(.amount)::after {
	content: none !important;
	animation: none !important;
	background-image: none !important;
	background-color: transparent !important;
}

body.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_mini_cart_item_title,
body.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_mini_cart_item_title a,
body.wfacp_anim_active .wfacp_mini_cart_items tr.cart_item .wfacp_mini_cart_item_title * {
	background-image: none !important;
	background-color: transparent !important;
	animation: none !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

/* ── thumbnail loading state ─────────────────────────────────────────────
   The same treatment as the slide-in cart: WoodMart's overlay dimming the
   thumbnail with the site's spinner over it, so both carts read the same way
   during an AJAX round trip.

   Two things about the selector. It has to out-specify the amounts-only block
   at the end of this file — that rule is (0,4,1) and clears every ::after in
   the summary except the price amounts, which would take this spinner with it;
   five classes and three elements here is (0,5,3), which wins. And the overlay
   is on ::before rather than sharing ::after, because the block only touches
   ::after and the two pseudo-elements have different jobs.

   .product-image is already position:relative, so both anchor to the
   thumbnail without changing its layout.

   .evov-row-busy is what keeps this to the line actually being changed.
   body.wfacp_anim_active is global — without the row class the spinner appeared
   over every thumbnail in the cart while one quantity was adjusted. js/cart-ui.js
   marks the row on the way in; the slide-in cart needs no equivalent because
   fkcart marks its own item. */
body.wfacp_anim_active .wfacp_order_summary_container .wfacp_mini_cart_items tr.cart_item.evov-row-busy td .product-image::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .7) !important;
  border-radius: 8px !important;
  z-index: 2 !important;
}

body.wfacp_anim_active .wfacp_order_summary_container .wfacp_mini_cart_items tr.cart_item.evov-row-busy td .product-image::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 24px !important;
  height: 24px !important;
  margin: -12px 0 0 -12px !important;
  background: none !important;
  border: 2px solid color-mix(in srgb, var(--wd-primary-color, #6366f1) 18%, transparent) !important;
  border-top-color: var(--wd-primary-color, #6366f1) !important;
  border-radius: 50% !important;
  animation: evovSpinnerRotate 0.7s linear infinite !important;
  z-index: 3 !important;
}