/*
 * fs-card.css — the order-value card (DECISIONS 077): "You are $X away from FREE SHIPPING" under the buy buttons
 * and at the top of /cart, gv_order_value_card() in inc/header-group.php. HARVESTED 2026-09-20 from the Essential
 * Apps "Order value booster" as it renders on gotvape.com (the only store that runs it): a white card, radius 8,
 * padding 16, margin 20px 0, centered; title in the heading face 20px/30px 700 #202223; an 8px track #E4E5E7 radius 4,
 * margin 15px 0 6px, fill #FF8B00. The fill and the ink are tokens so a child can re-brand them; the defaults are
 * the measured values. The card shares the drawer bar's `.gvws-fsbar` shell (gvws-shipping-progress.js fills both),
 * so every rule here is scoped to `.gvws-fscard` and outranks the drawer's inline 13px message rule.
 */
:root {
  --gv-fscard-bg: #fff;
  --gv-fscard-ink: #202223;
  --gv-fscard-track: #e4e5e7;
  --gv-fscard-fill: var(--gv-accent, #ff8b00);
}

.gvws-fsbar.gvws-fscard {
  /* (0,2,0): the drawer bar's inline `.gvws-fsbar{margin:0 0 14px}` prints later in the body and would win at (0,1,0) */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  padding: 16px;
  background: var(--gv-fscard-bg);
  border-radius: 8px;
  text-align: center;
}

.gvws-fscard .gvws-fsbar__msg {
  margin: 0;
  font-family: var(--element-text-font-family--heading), var(--element-text-font-family-fallback--heading, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--gv-fscard-ink);
}

.gvws-fscard .gvws-fsbar__msg strong {
  color: inherit;
  font-weight: inherit;
}

.gvws-fscard.gvws-fsbar--unlocked .gvws-fsbar__msg {
  color: var(--gv-fscard-ink);
}

.gvws-fscard .gvws-fsbar__track {
  width: 100%;
  height: 8px;
  margin: 15px 0 6px;
  border-radius: 4px;
  background: var(--gv-fscard-track);
  overflow: hidden;
}

.gvws-fscard .gvws-fsbar__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gv-fscard-fill);
  transition: width .35s ease;
}