/**
 * Free Shipping Progress
 *
 * Scoped entirely under .bh-free-shipping-progress and driven by CSS custom properties, so it can be
 * reskinned from Breakdance/theme CSS without editing this file.
 *
 * Every var() below supplies its fallback inline (`var(--x, #default)`) rather than this file
 * declaring the custom properties on .bh-free-shipping-progress itself. A Breakdance element wraps
 * this markup in its own outer element and sets these same custom properties there (see
 * breakdance-elements/Free_Shipping_Progress/css.twig) so the color/height/radius controls
 * in its design panel take effect - custom properties cascade down from that ancestor regardless of
 * stylesheet load order, unlike a same-specificity rule on a direct property (e.g. height/
 * border-radius set outright rather than via a custom property), which would depend on which
 * stylesheet happens to load last. If this file redeclared `--bh-fsp-bar-color: #2e7d32` etc.
 * directly on .bh-free-shipping-progress (as an earlier version did), that redeclaration would
 * always win over the inherited value regardless of what the Breakdance ancestor set, which is
 * exactly why the track/bar color controls had no visible effect - keep every themeable value here
 * expressed only as a var() with a fallback, never declared outright on this class.
 *
 * `!important` on the display toggles and visual properties below is deliberate: this markup renders
 * inside a Breakdance page-builder canvas, where a theme's own reset/base stylesheet can plausibly
 * carry blanket `!important` rules on common properties (a pattern "Zero" starter themes built for
 * page builders sometimes use, precisely to guarantee their own controls always take visual effect) -
 * without matching that, our own rules could silently lose regardless of specificity or load order.
 */

.bh-free-shipping-progress {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--bh-fsp-text-color, inherit);
}

.bh-free-shipping-progress.bh-fsp-state-unavailable {
    display: none !important;
}

/* A normal flex item (not absolutely positioned) so it sits to the left of the bar/text instead of
   overlapping it - the wrapper's own flex layout is what puts it "top left, content to the right". */
.bh-free-shipping-progress .bh-fsp-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bh-fsp-icon-color, currentColor);
    font-size: var(--bh-fsp-icon-size, 24px);
    width: var(--bh-fsp-icon-size, 24px);
    height: var(--bh-fsp-icon-size, 24px);
    line-height: 0;
}

.bh-free-shipping-progress .bh-fsp-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.bh-free-shipping-progress .bh-fsp-content {
    flex: 1 1 auto;
    min-width: 0;
}

.bh-free-shipping-progress .bh-fsp-bar-track {
    width: 100%;
    height: var(--bh-fsp-bar-height, 8px) !important;
    background: var(--bh-fsp-track-color, #e5e5e5) !important;
    border-radius: var(--bh-fsp-bar-radius, 999px) !important;
    overflow: hidden;
    margin: 0 0 6px;
}

.bh-free-shipping-progress .bh-fsp-bar-fill {
    height: 100%;
    width: 0;
    background: var(--bh-fsp-bar-color, #2e7d32) !important;
    border-radius: var(--bh-fsp-bar-radius, 999px) !important;
    transition: width 0.3s ease;
}

.bh-free-shipping-progress .bh-fsp-message {
    margin: 0;
    font-size: 0.9em;
}

/* The unlocked message renders alongside the progress block (so live cart updates can toggle
   between the two without a server round-trip - see free-shipping-progress.js) and is hidden unless
   the wrapper is actually in the unlocked state. */
.bh-free-shipping-progress .bh-fsp-unlocked-block {
    display: none !important;
    color: var(--bh-fsp-bar-color, #2e7d32);
    font-weight: 600;
}

.bh-free-shipping-progress.bh-fsp-state-unlocked .bh-fsp-progress-block {
    display: none !important;
}

.bh-free-shipping-progress.bh-fsp-state-unlocked .bh-fsp-unlocked-block {
    display: block !important;
}

.bh-free-shipping-progress .bh-fsp-not-eligible {
    color: var(--bh-fsp-not-eligible-color, #b00020);
}

.bh-free-shipping-progress .bh-fsp-disclaimer {
    margin: 4px 0 0;
    font-size: 0.75em;
    color: var(--bh-fsp-disclaimer-color, #767676);
}