/* -------------------------------------------------------
   Free Shipping components
     .fs-meter   cart / checkout (full width)
     .fs-badge   product pages (buybox)
     .fs-mini    cart hover dropdown
------------------------------------------------------- */

/* Shared container look — light blue, white text, rounded */
.fs-meter,
.fs-badge {
    background: linear-gradient(135deg, #1a7ac8 0%, #005288 100%);
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0, 82, 136, 0.28);
    margin: 8px 0;
}

/* Label row */
.fs-meter__label,
.fs-badge__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 15px;
    margin-bottom: 10px;
}

/* Dollar amount within the label — size independently */
.fs-amount {
    font-size: 17px;
    font-weight: 700;
}

/* Track — sunken cavity */
.fs-meter__track,
.fs-badge__track {
    position: relative;
    overflow: hidden;
    height: 20px;
    /* No grey "potential" track — show only the coloured progress fill, sized to the
       percent-to-free. Applies to both the cart/checkout meter and the sticky-ATC badge. */
    background: transparent;
    border-radius: 100px;
    padding: 0;
}

/* Ghost "potential" overlay retired — the single blue/green bar now moves to the projected
   position itself (see free-shipping.js), so there's no separate translucent projection. */
.fs-meter__ghost-fill,
.fs-badge__ghost-fill {
    display: none;
}

/* Per-state label messages inside fs-badge__label */
.fs-badge__msg--with-item,
.fs-badge__msg--would-ship-free {
    display: none;
}

/* Product selected, gap not yet closed */
.fs-badge--has-product .fs-badge__msg--default {
    display: none;
}
.fs-badge--has-product .fs-badge__msg--with-item {
    display: inline;
}

/* Product selected, would close the gap — swap label to the would-ship-free message */
.fs-badge--would-ship-free .fs-badge__msg--default,
.fs-badge--would-ship-free .fs-badge__msg--with-item {
    display: none;
}
.fs-badge--would-ship-free .fs-badge__msg--would-ship-free {
    display: inline;
}

/* Threshold caption — inside the badge, below the track, white text */
.fs-badge__caption {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

/* Glass rod fill */
.fs-meter__fill,
.fs-badge__fill {
    position: relative;
    z-index: 2;
    height: 100%;
    border-radius: 100px;
    min-width: 20px;
    background: linear-gradient(90deg,
        #1a7ac8 0%,
        #0f88c2 25%,
        #1a9e5a 65%,
        #1a9e3a 100%
    );
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.18);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Soft glass highlight — fades from white at top to transparent at centre */
.fs-meter__fill::after,
.fs-badge__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.10) 40%,
        rgba(255, 255, 255, 0)    70%
    );
    border-radius: 100px;
    pointer-events: none;
}

/* Endpoint "finish line" marker — a checkered flag pinned at the goal (right end) of the
   track, so shoppers can see how far the fill has travelled vs the free-shipping target.
   Only shows in-progress; the track is swapped for the "Ships Free!" message on complete. */
.fs-meter__track::after,
.fs-badge__track::after {
    content: "\f11e"; /* fa-flag-checkered */
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.9); /* both meter & badge sit on the blue gradient card */
}

/* Thin bars (sticky ATC + mini-menu, ~10px tall) → smaller flag */
.sticky-atc__fs .fs-badge__track::after,
.mini-menu__wrapper .fs-badge__track::after,
.mini-menu__wrapper .fs-meter__track::after {
    font-size: 9px;
    right: 3px;
}

/* Complete section — hidden by default */
.fs-meter__complete,
.fs-badge__complete {
    display: none;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

/* Complete state — keep blue, show complete div, hide in-progress */
.fs-meter--complete,
.fs-badge--complete {
    background: linear-gradient(135deg, #1a7ac8 0%, #005288 100%);
    box-shadow: 0 3px 10px rgba(0, 82, 136, 0.28);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    padding: 14px 16px;
}

.fs-meter--complete .fs-meter__inprogress,
.fs-badge--complete .fs-badge__inprogress {
    display: none;
}

.fs-meter--complete .fs-meter__complete,
.fs-badge--complete .fs-badge__complete {
    display: flex;
}

/* Compact overrides for cart hover dropdown */
.mini-menu__wrapper .fs-badge,
.mini-menu__wrapper .fs-meter {
    padding: 8px 12px;
    margin: 4px 0;
    font-size: 12px;
}

.mini-menu__wrapper .fs-badge__label,
.mini-menu__wrapper .fs-meter__label {
    font-size: 12px;
    gap: 6px;
    margin-bottom: 7px;
}

.mini-menu__wrapper .fs-amount {
    font-size: 13px;
}

.mini-menu__wrapper .fs-badge__track,
.mini-menu__wrapper .fs-meter__track {
    height: 10px;
    padding: 2px;
}

.mini-menu__wrapper .fs-badge__ghost-fill,
.mini-menu__wrapper .fs-meter__ghost-fill {
    height: 100%;
}

.mini-menu__wrapper .fs-badge--complete,
.mini-menu__wrapper .fs-meter--complete {
    padding: 8px 12px;
    font-size: 12px;
    gap: 7px;
}

/* Compact overrides for sticky ATC thin bar */
.sticky-atc__fs.fs-badge {
    margin: 0 14px 8px;
    padding: 7px 12px;
    font-size: 12px;
}

.sticky-atc__fs .fs-badge__label {
    font-size: 12px;
    gap: 6px;
    margin-bottom: 6px;
}

.sticky-atc__fs .fs-amount,
.sticky-atc__fs .fs-amount-post {
    font-size: 13px;
}

.sticky-atc__fs .fs-badge__track {
    height: 10px;
    padding: 2px;
}

.sticky-atc__fs .fs-badge__ghost-fill {
    height: 100%;
}

.sticky-atc__fs.fs-badge--complete {
    padding: 10px 16px;
    font-size: 12px;
    gap: 7px;
}