.fsp-box {
    width: 100%;
    max-width: 620px;
    margin: 25px auto;
    padding: 24px 30px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    text-align: center;
    box-sizing: border-box;
    transition: all .3s ease;
}


/* HEADER */

.fsp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


/* Nowoczesna ikona */

.fsp-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #1bb56c,
        #25d985
    );

    border-radius: 50%;

    color: #fff;
    font-size: 28px;

    box-shadow:
        0 8px 20px rgba(27,181,108,0.25);

    line-height: 1;
}


/* Tekst główny */

.fsp-message {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: #222;
}


/* Pasek */

.fsp-progress {
    width: 100%;
    height: 14px;

    background: #f1f3f5;

    border-radius: 20px;

    overflow: hidden;

    margin: 22px 0 12px;
}


.fsp-progress-bar {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #1bb56c,
            #32d583
        );

    position: relative;

    transition:
        width .6s cubic-bezier(.4,0,.2,1);
}


/* subtelny efekt światła */

.fsp-progress-bar::after {

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    animation:fsp-shine 2s infinite;

}



@keyframes fsp-shine {

    from {
        transform:translateX(-120%);
    }

    to {
        transform:translateX(300%);
    }

}



/* procent */

.fsp-percent {

    font-size:14px;
    font-weight:700;

    color:#555;

}



/* dodatkowy tekst */

.fsp-extra {

    margin-top:12px;

    font-size:15px;

    color:#666;

}


/* Po osiągnięciu darmowej dostawy */

.fsp-complete {

    border-color:#1bb56c;

    background:#f4fff8;

}


.fsp-complete .fsp-message {

    color:#1bb56c;

}



/* MOBILE */

@media(max-width:576px){

    .fsp-box {

        padding:20px 15px;

        border-radius:15px;

    }


    .fsp-icon {

        width:52px;
        height:52px;

        font-size:24px;

    }


    .fsp-message {

        font-size:16px;

    }

}