.mmfsp-root{
    position:fixed;
    inset:auto 0 var(--mmfsp-bottom,24px) 0;
    z-index:99998;
    width:100%;
    padding:0 14px;
    pointer-events:none;
    box-sizing:border-box;
}

.mmfsp-bar{
    position:relative;
    width:min(var(--mmfsp-max-width,900px),100%);
    margin:0 auto;
    padding:18px 18px 16px;
    color:var(--mmfsp-text,#0F172A);
    background:linear-gradient(135deg,var(--mmfsp-bg,#FFFFFF) 0%,var(--mmfsp-surface,#F8FAFC) 100%);
    border:1px solid var(--mmfsp-border,#E2E8F0);
    border-radius:22px;
    box-shadow:0 22px 70px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.08);
    overflow:hidden;
    pointer-events:auto;
    opacity:0;
    transform:translateY(18px) scale(.985);
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .28s ease;
    visibility:hidden;
    box-sizing:border-box;
    font-family:inherit;
}

.mmfsp-bar.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
    visibility:visible;
}

.mmfsp-glow{
    position:absolute;
    width:230px;
    height:230px;
    border-radius:50%;
    filter:blur(46px);
    opacity:.14;
    pointer-events:none;
}

.mmfsp-glow-one{top:-150px;right:-70px;background:var(--mmfsp-accent,#2563EB)}
.mmfsp-glow-two{bottom:-170px;left:-80px;background:var(--mmfsp-accent-2,#38BDF8)}
.mmfsp-bar.is-complete .mmfsp-glow-one{background:var(--mmfsp-success,#16A34A);opacity:.16}

.mmfsp-close{
    position:absolute;
    top:12px;
    left:12px;
    z-index:4;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    margin:0;
    border:1px solid var(--mmfsp-border,#E2E8F0);
    border-radius:50%;
    background:rgba(255,255,255,.78);
    color:var(--mmfsp-muted,#64748B);
    cursor:pointer;
    box-shadow:0 5px 18px rgba(15,23,42,.08);
    -webkit-tap-highlight-color:transparent;
}

.mmfsp-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mmfsp-close:hover{color:var(--mmfsp-text,#0F172A);background:#fff}
.mmfsp-close:focus-visible{outline:3px solid var(--mmfsp-accent,#2563EB);outline-offset:2px}

.mmfsp-bar{
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:15px;
    align-items:start;
}

.mmfsp-icon{
    position:relative;
    z-index:2;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid var(--mmfsp-border,#E2E8F0);
    border-radius:18px;
    background:var(--mmfsp-surface,#F8FAFC);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.mmfsp-bar.is-complete .mmfsp-icon{
    background:var(--mmfsp-surface,#F8FAFC);
    border-color:var(--mmfsp-success,#16A34A);
}

.mmfsp-icon svg{width:40px;height:40px;fill:none}
.mmfsp-svg-stroke{stroke:var(--mmfsp-text,#0F172A);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mmfsp-svg-accent{stroke:var(--mmfsp-accent,#2563EB);stroke-width:2.4;stroke-linecap:round}
.mmfsp-svg-success{stroke:var(--mmfsp-success,#16A34A);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.mmfsp-content{position:relative;z-index:2;min-width:0;padding-left:38px}
.mmfsp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mmfsp-title-wrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.mmfsp-kicker{font-size:12px;font-weight:700;color:var(--mmfsp-muted,#64748B)}
.mmfsp-title{font-size:19px;line-height:1.55;font-weight:900;color:var(--mmfsp-text,#0F172A)}

.mmfsp-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.mmfsp-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:30px;
    padding:5px 10px;
    border:1px solid var(--mmfsp-border,#E2E8F0);
    border-radius:999px;
    background:var(--mmfsp-surface,#F8FAFC);
    color:var(--mmfsp-muted,#64748B);
    font-size:11px;
    line-height:1.6;
    white-space:nowrap;
}
.mmfsp-badge-light{background:rgba(255,255,255,.72)}
.mmfsp-badge b{font-weight:800;color:var(--mmfsp-text,#0F172A)}
.mmfsp-badge .woocommerce-Price-amount{white-space:nowrap}

.mmfsp-text{
    margin:12px 0 11px;
    font-size:13px;
    line-height:1.9;
    font-weight:650;
    color:var(--mmfsp-text,#0F172A);
}

.mmfsp-progress-area{display:grid;grid-template-columns:minmax(0,1fr) 46px;align-items:center;gap:10px;direction:ltr}
.mmfsp-progress{height:10px;border-radius:999px;background:var(--mmfsp-track,#E2E8F0);overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.06)}
.mmfsp-progress-fill{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,var(--mmfsp-accent,#2563EB),var(--mmfsp-accent-2,#38BDF8));box-shadow:0 0 16px rgba(37,99,235,.22);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mmfsp-bar.is-complete .mmfsp-progress-fill{background:linear-gradient(90deg,var(--mmfsp-success,#16A34A),#86EFAC)}
.mmfsp-percent{font-size:12px;color:var(--mmfsp-text,#0F172A);text-align:center;direction:rtl}

@media (max-width:720px){
    .mmfsp-root{bottom:var(--mmfsp-bottom-mobile,16px);padding:0 9px}
    .mmfsp-bar{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:14px 12px 13px;border-radius:18px}
    .mmfsp-icon{width:46px;height:46px;border-radius:14px}
    .mmfsp-icon svg{width:32px;height:32px}
    .mmfsp-content{padding-left:34px}
    .mmfsp-head{display:block}
    .mmfsp-title{font-size:16px}
    .mmfsp-kicker{font-size:10px}
    .mmfsp-badges{justify-content:flex-start;margin-top:8px;gap:5px}
    .mmfsp-badge{font-size:10px;min-height:28px;padding:4px 8px}
    .mmfsp-text{font-size:11.5px;line-height:1.8;margin:9px 0 9px}
    .mmfsp-progress-area{grid-template-columns:minmax(0,1fr) 38px;gap:7px}
    .mmfsp-progress{height:8px}
    .mmfsp-percent{font-size:11px}
    .mmfsp-close{width:30px;height:30px;top:10px;left:10px}
}

@media (max-width:430px){
    .mmfsp-bar{grid-template-columns:42px minmax(0,1fr);padding:12px 10px 11px}
    .mmfsp-icon{width:40px;height:40px;border-radius:12px}
    .mmfsp-icon svg{width:29px;height:29px}
    .mmfsp-content{padding-left:30px}
    .mmfsp-badges{display:grid;grid-template-columns:1fr 1fr;width:100%}
    .mmfsp-badge{justify-content:center;white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
    .mmfsp-bar,.mmfsp-progress-fill{transition:none!important}
}

/* =========================================================
   v3.0.1 — RTL progress direction + motion effects
   ========================================================= */

/* In RTL stores the progress must grow from right to left. */
.mmfsp-progress{
    display:flex;
    justify-content:flex-end;
    direction:ltr;
}

.mmfsp-progress-fill{
    position:relative;
    flex:0 0 auto;
    overflow:hidden;
    background-size:220% 100%;
}

/* Animated light sweep inside the completed part of the progress bar. */
.mmfsp-progress-fill::after{
    content:"";
    position:absolute;
    inset:-2px -42px;
    pointer-events:none;
    background:linear-gradient(
        110deg,
        transparent 0%,
        transparent 34%,
        rgba(255,255,255,.08) 42%,
        rgba(255,255,255,.72) 50%,
        rgba(255,255,255,.14) 58%,
        transparent 66%,
        transparent 100%
    );
    transform:translateX(125%);
    animation:mmfsp-progress-sheen 1.35s linear infinite;
}

/* Keep the gradient itself alive so the fill never looks static. */
.mmfsp-bar.is-visible .mmfsp-progress-fill{
    animation:mmfsp-progress-flow 2.2s linear infinite;
}

/* Move the existing colored glows across the full card to attract attention. */
.mmfsp-bar.is-visible .mmfsp-glow-one{
    animation:mmfsp-glow-orbit-one 3.6s ease-in-out infinite alternate;
}

.mmfsp-bar.is-visible .mmfsp-glow-two{
    animation:mmfsp-glow-orbit-two 4.2s ease-in-out infinite alternate;
}

/* A very soft breathing halo around the whole notification. */
.mmfsp-bar.is-visible{
    animation:mmfsp-card-halo 2.4s ease-in-out infinite;
}

@keyframes mmfsp-progress-sheen{
    from{transform:translateX(125%)}
    to{transform:translateX(-125%)}
}

@keyframes mmfsp-progress-flow{
    0%{background-position:0% 50%}
    100%{background-position:220% 50%}
}

@keyframes mmfsp-glow-orbit-one{
    0%{transform:translate3d(0,0,0) scale(.92);opacity:.10}
    35%{transform:translate3d(-36vw,70px,0) scale(1.12);opacity:.20}
    70%{transform:translate3d(-62vw,120px,0) scale(.98);opacity:.14}
    100%{transform:translate3d(-78vw,35px,0) scale(1.08);opacity:.18}
}

@keyframes mmfsp-glow-orbit-two{
    0%{transform:translate3d(0,0,0) scale(1);opacity:.10}
    35%{transform:translate3d(30vw,-75px,0) scale(1.12);opacity:.18}
    70%{transform:translate3d(58vw,-125px,0) scale(.96);opacity:.13}
    100%{transform:translate3d(76vw,-45px,0) scale(1.08);opacity:.18}
}

@keyframes mmfsp-card-halo{
    0%,100%{
        box-shadow:0 22px 70px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.08),0 0 0 rgba(37,99,235,0);
    }
    50%{
        box-shadow:0 22px 70px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.08),0 0 28px rgba(37,99,235,.16);
    }
}

@media (max-width:720px){
    .mmfsp-bar.is-visible .mmfsp-glow-one{
        animation-duration:3.1s;
    }

    .mmfsp-bar.is-visible .mmfsp-glow-two{
        animation-duration:3.7s;
    }
}

@media (prefers-reduced-motion:reduce){
    .mmfsp-bar.is-visible,
    .mmfsp-bar.is-visible .mmfsp-glow-one,
    .mmfsp-bar.is-visible .mmfsp-glow-two,
    .mmfsp-bar.is-visible .mmfsp-progress-fill,
    .mmfsp-progress-fill::after{
        animation:none!important;
    }
}