/* Webartstudio Free Shipping Bar — https://www.webartstudio.gr
   Colours come from admin as --was-fsb-* custom properties on the container
   (style attribute); the fallbacks below are the defaults. */
.was-fsb{
    box-sizing:border-box;
    padding:14px 16px;
    font-size:14px;
    line-height:1.4;
    text-align:center;
}
.was-fsb *{box-sizing:border-box}

/* ── Message ── */
.was-fsb-msg{
    margin:0 0 11px;
    color:var(--was-fsb-text,#2b2b2b);
    font-weight:500;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
}
/* Single flex item wrapping the whole message — without it, every text run and
   inline tag (amount span, <b>, trailing "!") becomes its own flex item and the
   sentence fragments into separate boxes instead of wrapping as one line of text. */
.was-fsb-text{
    min-width:0;
}
.was-fsb-msg b{font-weight:800;color:inherit}
.was-fsb-amount{
    font-weight:800;
    white-space:nowrap;
    letter-spacing:.2px;
}

/* ── Progress track ── */
.was-fsb-track{
    position:relative;
    width:100%;
    height:11px;
    background:var(--was-fsb-track,#e9edf0);
    border-radius:20px;
    overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.09);
}
.was-fsb-fill{
    position:absolute;
    top:0;left:0;height:100%;
    min-width:11px;
    border-radius:20px;
    /* Yellow→green scale anchored to the FULL track (0–100%), revealed up to --pct.
       --pct / --c1 / --c2 are set inline (admin-configurable colours). */
    background-image:linear-gradient(90deg, var(--c1,#f1c40f), var(--c2,#2ecc71));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:calc(10000% / var(--pct,100)) 100%;
    transition:width .6s cubic-bezier(.22,1,.36,1), background-size .6s cubic-bezier(.22,1,.36,1);
}
/* top gloss — independent of the inline background color */
.was-fsb-fill::before{
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 62%);
    pointer-events:none;
}
/* animated shimmer sweep */
.was-fsb-fill::after{
    content:"";
    position:absolute;top:0;bottom:0;left:0;width:60%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform:translateX(-120%);
    animation:was-fsb-shimmer 2.4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes was-fsb-shimmer{
    0%{transform:translateX(-120%)}
    60%,100%{transform:translateX(280%)}
}

/* ── Reached state ── */
.was-fsb-done .was-fsb-msg{color:var(--was-fsb-done-text,#1e7e34);font-weight:700}
.was-fsb-done .was-fsb-fill{ /* solid success colour once earned */
    background-image:linear-gradient(90deg, var(--c2,#2ecc71), var(--c2,#2ecc71));
}
.was-fsb-done .was-fsb-fill::after{animation:none} /* calm, no shimmer once earned */

/* ── Mini-cart context: own <li> at the top of the dropdown ── */
.was-fsb-minicart{
    list-style:none;
    padding:0;
    margin:0;
    border-bottom:1px solid var(--was-fsb-border,#eee);
    background:var(--was-fsb-bg,#fafbfc);
}
.was-fsb-minicart.was-fsb-done{
    border-bottom-color:var(--was-fsb-done-border,#bfe5c7);
    background:var(--was-fsb-done-bg,#eef9f0);
}
.was-fsb-minicart .was-fsb{padding:13px 15px}
/* OpenCart default theme: beat `#cart .dropdown-menu li > div {padding:0 10px}` */
#cart .dropdown-menu .was-fsb-minicart > .was-fsb{padding:13px 15px}
/* default theme dropdown has 5px top padding — let the bar sit flush */
#cart .dropdown-menu > .was-fsb-minicart:first-child{margin-top:-5px}

/* ── Cart / checkout page card ── */
.was-fsb-block{
    background:var(--was-fsb-bg,#f7f9fb);
    border:1px solid var(--was-fsb-border,#e6e9ec);
    border-radius:12px;
    margin-bottom:20px;
    padding:16px 18px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.was-fsb-block.was-fsb-done{
    border-color:var(--was-fsb-done-border,#bfe5c7);
    background:var(--was-fsb-done-bg,#eef9f0);
}

/* NOTE: no prefers-color-scheme:dark rules — colours are set per store from the
   admin, so OS dark mode must not override them. */
