/* WDK free-delivery meter — the markup is inc/wdk-freeship.php's own
 * (.wdk-fsm), so nothing here is fighting Porto or WooCommerce for a selector.
 * Loads on cart + checkout at wp_enqueue_scripts 10015, dep 'wdk-cart'.
 *
 * THE THREE CUSTOM PROPERTIES come from PHP, on the wrapper's style attribute:
 *   --wdkf-pct    where the fill stops on the track   (subtotal / free)
 *   --wdkf-min    where the "min" mark sits on the track (min / free)
 *   --wdkf-break  that same mark measured INSIDE the fill (min / subtotal)
 * The third one exists because a gradient painted on the fill is measured
 * against the fill's own width; without it the two-tone break would slide
 * along as the basket grows instead of staying pinned to the $50 mark.
 *
 * Tokens are --wdkf-* so they cannot collide with wdk-cart.css's --wdkc-*,
 * wdk-checkout.css's --wdkk-*, wdk-shop.css's --cw-* or wdk-chrome.css's
 * --wdk-*. No @font-face: Archivo Black ships once, in assets/wdk-shop.css.
 */

.wdk-fsm{
  --wdkf-jade:#3EB785;
  --wdkf-deep:#1F8A5F;
  --wdkf-forest:#0F6342;     /* the display figure — 8.1:1 on white */
  --wdkf-ink:#151917;
  --wdkf-mut:#6C7570;
  --wdkf-track:#E4EAE6;
  --wdkf-rule:#C4D0C9;       /* the tick hairlines — must beat the track */
  --wdkf-markink:#4F7A64;    /* mark labels: 4.6:1 on white, quieter than the figure */
  --wdkf-line:#E9EDEA;
  --wdkf-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --wdkf-ui:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Fallbacks: if the style attribute is ever stripped (a cache rewriting
     markup, a sanitiser), the meter still draws — empty, not broken. */
  --wdkf-pct:0%;
  --wdkf-min:0%;
  --wdkf-break:100%;

  display:block;box-sizing:border-box;
  margin:22px 0 0;padding:0;
}
.wdk-fsm *{box-sizing:border-box}

/* ---- the display block ------------------------------------------------ */
.wdk-fsm .wdk-fsm-k{
  margin:0 0 2px!important;
  font-family:var(--wdkf-display);font-weight:400;
  font-size:clamp(17px,2.1vw,23px);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--wdkf-forest);
}
/* The basket figure. Was clamp(38px,6.2vw,62px) — 62px on a desktop cart, big
   enough to dominate the block (owner, 2026-08-18: reduce it). The floor comes
   down with the ceiling so the mobile end doesn't end up disproportionately
   larger than the desktop one; the viewport term is rescaled to keep the same
   fluid behaviour between the two. */
.wdk-fsm .wdk-fsm-v{
  margin:0 0 14px!important;
  font-family:var(--wdkf-display);font-weight:400;
  font-size:clamp(30px,4vw,40px);line-height:.95;
  letter-spacing:-.01em;
  color:var(--wdkf-forest);
}
/* wc_price() wraps the figure in .amount > bdi > .woocommerce-Price-currencySymbol;
   the symbol rides small and high, as in the reference. */
.wdk-fsm .wdk-fsm-v .amount,
.wdk-fsm .wdk-fsm-v bdi{
  font-family:inherit!important;font-weight:inherit!important;
  font-size:inherit!important;color:inherit!important;
}
.wdk-fsm .wdk-fsm-v .woocommerce-Price-currencySymbol{
  font-size:.52em;vertical-align:.42em;margin-right:.02em;
}

/* ---- the scale above the track ---------------------------------------- */
/* Marks are positioned against the SAME box as the track, so a mark at
   --wdkf-min sits exactly over the notch below it. Each carries a hairline
   dropping to the bar, which is what ties label to position. */
.wdk-fsm .wdk-fsm-scale{
  position:relative;height:22px;margin:0 0 7px;
}
.wdk-fsm .wdk-fsm-mark{
  position:absolute;bottom:0;
  padding-bottom:9px;
  font:800 12px/1.2 var(--wdkf-ui);letter-spacing:.01em;
  color:var(--wdkf-markink);white-space:nowrap;
}
/* The rule that ties a label to its position. It has to be darker than the
   track it lands on or it reads as nothing — and it runs the full height of
   the gap so the eye follows it down to the bar. */
.wdk-fsm .wdk-fsm-mark::after{
  content:"";position:absolute;bottom:0;width:1px;height:9px;
  background:var(--wdkf-rule);
}
/* The min mark is centred on its position; the free mark is the track's end,
   so it right-aligns and its rule sits on the final pixel. */
.wdk-fsm .wdk-fsm-mark-min{
  left:var(--wdkf-min);transform:translateX(-50%);
}
.wdk-fsm .wdk-fsm-mark-min::after{left:50%}
.wdk-fsm .wdk-fsm-mark-free{
  right:0;
}
.wdk-fsm .wdk-fsm-mark-free::after{right:0}
.wdk-fsm .wdk-fsm-mark .amount,
.wdk-fsm .wdk-fsm-mark bdi{
  font:inherit!important;color:inherit!important;
}
/* At narrow widths a low min mark and the free mark can overlap; the min one
   yields, because the free threshold is the point of the meter. */
@media (max-width:420px){
  .wdk-fsm .wdk-fsm-mark{font-size:11px}
}

/* ---- the track -------------------------------------------------------- */
.wdk-fsm .wdk-fsm-track{
  position:relative;
  height:14px;border-radius:999px;
  background:var(--wdkf-track);
  overflow:hidden;
}
.wdk-fsm .wdk-fsm-fill{
  display:block;height:100%;width:var(--wdkf-pct);
  border-radius:999px;
  /* Two-tone: light jade up to the min mark, deep jade past it. The stop is
     --wdkf-break, i.e. the mark's position within the FILL. */
  background:linear-gradient(
    90deg,
    var(--wdkf-jade) 0,
    var(--wdkf-jade) var(--wdkf-break),
    var(--wdkf-deep) var(--wdkf-break),
    var(--wdkf-deep) 100%
  );
  animation:wdk-fsm-grow 1.05s cubic-bezier(.16,1,.3,1) both;
}
/* Only a `from` frame: the `to` is the element's own computed width, so the
   bar animates out to wherever the basket actually is and stops there. */
@keyframes wdk-fsm-grow{
  from{width:0}
}
/* The notch marks the min on the bar itself, over the fill. */
.wdk-fsm .wdk-fsm-notch{
  position:absolute;top:0;bottom:0;left:var(--wdkf-min);
  width:2px;margin-left:-1px;
  background:rgba(255,255,255,.85);
}
/* Unlocked: one solid deep bar, no notch competing with it. */
.wdk-fsm.is-unlocked .wdk-fsm-fill{background:var(--wdkf-deep)}

/* ---- the note under the bar ------------------------------------------- */
/* Owner, 2026-08-18: this line was too small to read next to the figure. */
.wdk-fsm .wdk-fsm-note{
  margin:11px 0 0!important;
  font:700 15.5px/1.5 var(--wdkf-ui);color:var(--wdkf-mut);
}
.wdk-fsm .wdk-fsm-note .amount,
.wdk-fsm .wdk-fsm-note bdi{
  font:inherit!important;color:var(--wdkf-ink)!important;font-weight:800!important;
}
.wdk-fsm.is-unlocked .wdk-fsm-note{color:var(--wdkf-forest);font-weight:800}

/* ============================================================
   PLACEMENT
   ============================================================ */

/* CART — printed on woocommerce_after_cart_table, so it sits under the
   Keep shopping / Update cart row inside the form. It gets the hairline and
   the breathing room that row does not carry itself. */
body.woocommerce-cart .wdk-fsm{
  margin-top:26px;padding-top:24px;
  border-top:1px solid var(--wdkf-line);
}
/* Below the two-column breakpoint the SUMMARY card stacks directly under this
   block and the two collided (owner, 2026-08-18). At desktop the summary is in
   its own column, so the gap is only needed once they share one. */
@media (max-width:1024px){
  body.woocommerce-cart .wdk-fsm{margin-bottom:34px}
}

/* CHECKOUT — inside #order_review, in the slot Porto's bar had. The column is
   440px, so the display figure steps down and the block is boxed to read as
   one more panel in the receipt rather than a page-level banner. */
/* The 22px bottom margin is this block's own edge against the PAYMENT METHODS
   heading below it, which sits behind #payment's border-top in
   assets/wdk-checkout.css. The two were touching (owner, 2026-08-18); the gap
   belongs to the meter, so it is set here and nothing in the checkout sheet
   needs to move. */
body.woocommerce-checkout .wdk-fsm{
  margin:16px 0 22px;padding:16px;
  background:#F1F9F5;border:1px solid var(--wdkf-line);border-radius:8px;
}
body.woocommerce-checkout .wdk-fsm .wdk-fsm-k{font-size:15px;margin-bottom:1px!important}
body.woocommerce-checkout .wdk-fsm .wdk-fsm-v{font-size:34px;margin-bottom:12px!important}
body.woocommerce-checkout .wdk-fsm .wdk-fsm-mark{font-size:11px}
body.woocommerce-checkout .wdk-fsm .wdk-fsm-track{height:12px}
body.woocommerce-checkout .wdk-fsm .wdk-fsm-note{font-size:13.5px}

@media (prefers-reduced-motion:reduce){
  .wdk-fsm .wdk-fsm-fill{animation:none}
}