/* ═══════════════════════════════════════════
   CART MILESTONE TRACKER (.wv-cart-nudge)
   ═══════════════════════════════════════════
   Shared free-shipping + rewards-coupon progress tracker, rendered by
   wv_render_cart_nudge() in BOTH the cart drawer and the /cart page (one
   source of truth — unifies the two surfaces). Ported from the original
   .wv-cart-drawer__nudge styles under neutral .wv-cart-nudge__* classes.

   Box → copy line → bar (track + fill + two milestone dots) → labels row.
   Tokens only. Mobile-first. The dot positions assume the $60/$100 tier
   ratio from wv_cart_thresholds() (shipping milestone at 60%).
   ═══════════════════════════════════════════ */

.wv-cart-nudge {
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-sm);
  padding: 16px 18px;
  margin-top: 8px;
}

.wv-cart-nudge__copy {
  /* font-* + color from the .wv-body global class on the element — layout only here. */
  margin: 0 0 12px;
}

.wv-cart-nudge__remaining {
  /* Inline emphasis span inside a .wv-body paragraph; the span carries no
     typography class, so local color + weight are not Rule-3 redeclarations. */
  color: var(--wv-color-olive-dark);
  font-weight: 600;
}

.wv-cart-nudge__track {
  position: relative;
  height: 8px;
  background: var(--wv-color-background);
  border-radius: var(--wv-radius-pill);
  margin-bottom: 10px;
}

.wv-cart-nudge__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--wv-color-accent);
  border-radius: var(--wv-radius-pill);
  transition: width var(--wv-transition-base);
}

.wv-cart-nudge__dot {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wv-color-background);
  border: 1px solid var(--wv-color-surface-2);
  color: var(--wv-color-text-secondary);          /* drives the glyph via currentColor */
}

.wv-cart-nudge__dot--shipping {
  left: 60%;
  transform: translate(-50%, -50%);
}

.wv-cart-nudge__dot--rewards {
  left: 100%;
  transform: translate(-100%, -50%);
}

.wv-cart-nudge__dot--earned {
  background: var(--wv-color-olive-dark);
  border-color: var(--wv-color-olive-dark);
  color: var(--wv-color-text-inverse);             /* cream glyph on the earned dot */
}

.wv-cart-nudge__glyph {
  width: 12px;
  height: 12px;
  display: block;
}

.wv-cart-nudge__labels {
  position: relative;
  min-height: 16px;
}

.wv-cart-nudge__label {
  /* font-* from the .wv-label-small global class; layout + transform only.
     Base color from the class (--wv-color-text-secondary); --earned overrides. */
  position: absolute;
  top: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Both labels right-justified to their dots so "FREE SHIPPING" and "REWARDS
   COUPON" don't overlap between the 60% and 100% milestones. */
.wv-cart-nudge__label:first-child {
  left: 60%;
  transform: translateX(-100%);
}

.wv-cart-nudge__label:last-child {
  left: 100%;
  transform: translateX(-100%);
}

.wv-cart-nudge__label--earned {
  color: var(--wv-color-olive-dark);
}