/* Free shipping progress bar.
   2026-06-29: pure CSS — the inline `style="width: X%"` on .cart-free-shipping-bar__fill
   is written by Liquid at render time, then CSS transitions on width animate the change.
   No MutationObserver, no JS writing to style. */
.cart-free-shipping-bar {
  padding: 0 20px 10px;
  text-align: center;
  background: rgb(var(--color-background));
  border-bottom: 1px solid rgb(var(--color-border, 230 230 230));
}

.cart-free-shipping-bar__message {
  font-size: 13px;
  line-height: 1.4;
  color: rgb(var(--color-text));
  margin-bottom: 8px;
}
.cart-free-shipping-bar__message strong,
.cart-free-shipping-bar__message b {
  font-weight: 600;
}

/* 2026-07-03: achieved-state visual treatment.
   The --achieved modifier was previously a no-op (it only
   re-set the message colour to the same var(--color-text)),
   so the filled-to-100% bar looked identical to a near-empty
   in-progress bar — the user had no way to tell "you've
   qualified" at a glance.

   What changes in the achieved state:
     - track becomes near-transparent so the fully filled
       bar stands out as a celebratory "complete" indicator
     - fill switches to the brand success green #5fa452
       (same colour as the .after-add-cart-title checkmark
       in cart-drawer.html, so the two "you did it" moments
       on the cart surface share a visual language)
     - message gets a leading checkmark SVG (inlined via
       ::before so no template change is required; the icon
       is hidden in the in-progress state via display:none
       on the same pseudo-element rule)
     - message goes semibold so the "you qualify" line
       reads as a success state, not a system message
     - the bottom border stays the same so the bar
       continues to divide the popup neatly. */
.cart-free-shipping-bar--achieved .cart-free-shipping-bar__message {
  color: rgb(var(--color-text));
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cart-free-shipping-bar--achieved .cart-free-shipping-bar__message::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: #5fa452;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5 L10 17.5 L19 7.5' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5 L10 17.5 L19 7.5' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.cart-free-shipping-bar__track {
  position: relative;
  height: 4px;
  background: rgb(var(--color-border, 220 220 220));
  border-radius: 2px;
  overflow: hidden;
}
.cart-free-shipping-bar--achieved .cart-free-shipping-bar__track {
  background: rgba(var(--color-text), 0.08);
}

.cart-free-shipping-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: rgb(var(--color-text, 0 0 0));
  border-radius: 2px;
  transform-origin: left center;
  /* 2026-07-01: stronger left-to-right fill animation.
     Was `width 0.3s linear 0.3s` — too short to be noticed.
     New: 0.9s ease-out with a 0.15s delay so the bar still
     starts AFTER the popup has finished its open transition.
     The cubic-bezier eases the tail (approaches 100%
     smoothly instead of slamming into the right edge). */
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* 2026-07-03: left-to-right entrance animation on popup/drawer open.

   The popup and cart-drawer are hidden by default (visibility /
   active class toggle). When they appear the progress bar fill
   element is already at its final width (set inline via
   style="width: X%") — the existing CSS `transition` only helps
   when the cart updates and the width changes server-side.

   We use an @keyframes animation with transform: scaleX() so the
   fill slides in from the left every time the surface opens,
   regardless of the width value in the inline style.

   How it works:
     - The fill element has the inline width (e.g. 60%) and
       transform-origin: left center
     - @keyframes goes from scaleX(0) (visually 0px wide) to
       scaleX(1) (the element's full inline width)
     - Only the hovered popup or the active drawer triggers the
       animation — on close the selector no longer matches, the
       animation resets, and on re-open it plays again.
     - The existing `transition: width` still applies for server-
       side width recalculations without interfering with the
       transform-based animation (they target different CSS
       properties).

   Keyframe timing matches the popup's open transition (0.2s fade
   + translate) + a 0.15s buffer so the fill bar doesn't begin
   until the popup card has fully appeared. */
@keyframes cart-free-shipping-bar-fill-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* mini popup hover */
.cart-icon-wrapper:hover .cart-free-shipping-bar__fill,
.cart-icon-wrapper:focus-within .cart-free-shipping-bar__fill,
.cart-mini-popup.is-open .cart-free-shipping-bar__fill {
  animation: cart-free-shipping-bar-fill-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* cart drawer open (class .active added by section-cart-drawer.js) */
.cart-drawer.active .cart-free-shipping-bar__fill {
  animation: cart-free-shipping-bar-fill-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.cart-free-shipping-bar--achieved .cart-free-shipping-bar__fill {
  background: #5fa452;
}

.cart-free-shipping-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: rgb(var(--color-light-text, 130 130 130));
}