/*
 * Darealmop_FreeShippingBar — cart free-shipping progress bar.
 *
 * Self-contained: every value is a --dm-fsb-* custom property with a sensible
 * fallback, so the bar looks right on Magento/blank before any theme defines a
 * single token, yet a theme can re-skin it entirely (colours, height, radius,
 * spacing) without touching markup or JS. Defaults are brand-neutral —
 * neutral surfaces and grays, with the accent inherited via currentColor.
 */
.dm-fsb {
    box-sizing: border-box;
    width: 100%;
    margin: var(--dm-fsb-margin, 0 0 16px);
    padding: var(--dm-fsb-padding, 12px 14px);
    background: var(--dm-fsb-bg, #f8fafc);
    color: var(--dm-fsb-text, #1f2937);
    border: var(--dm-fsb-border, 1px solid rgba(0, 0, 0, .08));
    border-radius: var(--dm-fsb-radius, 8px);
    font-family: var(--dm-fsb-font, inherit);
}

.dm-fsb *,
.dm-fsb *::before,
.dm-fsb *::after {
    box-sizing: border-box;
}

.dm-fsb__message {
    margin: 0 0 var(--dm-fsb-message-gap, 8px);
    font-size: var(--dm-fsb-message-size, 14px);
    line-height: var(--dm-fsb-message-line, 1.35);
    font-weight: var(--dm-fsb-message-weight, 600);
    color: var(--dm-fsb-text, #1f2937);
    text-align: var(--dm-fsb-message-align, left);
}

.dm-fsb__track {
    position: relative;
    width: 100%;
    height: var(--dm-fsb-track-height, 8px);
    background: var(--dm-fsb-track-bg, rgba(0, 0, 0, .12));
    border-radius: var(--dm-fsb-track-radius, 999px);
    overflow: hidden;
}

.dm-fsb__fill {
    display: block;
    height: 100%;
    width: 0;
    min-width: var(--dm-fsb-fill-min, 0);
    background: var(--dm-fsb-fill, #9ca3af);
    border-radius: inherit;
    transition: width var(--dm-fsb-fill-transition, .4s ease);
}

/* Unlocked state: swap accents to the "success" token set. */
.dm-fsb--unlocked {
    background: var(--dm-fsb-unlocked-bg, #eef2f7);
    border-color: var(--dm-fsb-unlocked-border, rgba(0, 0, 0, .12));
}

.dm-fsb--unlocked .dm-fsb__message {
    color: var(--dm-fsb-unlocked-text, #1f2937);
}

.dm-fsb--unlocked .dm-fsb__fill {
    background: var(--dm-fsb-unlocked-fill, var(--dm-fsb-fill, #9ca3af));
}

@media (prefers-reduced-motion: reduce) {
    .dm-fsb__fill {
        transition: none;
    }
}