/* =========================================================
   MERUISA REWARD PROGRESS BAR
   Version 4.1
========================================================= */


.mrp-wrapper {

    --mrp-navy:#01004C;
    --mrp-gold:#E7B84F;
    --mrp-light-gold:#FCEAC0;


    width:100%;
    max-width:460px;

    margin:20px auto;

    padding:0 12px;

    font-family:inherit;

    color:var(--mrp-navy);

    overflow:visible;

}



.mrp-wrapper *,
.mrp-wrapper *::before,
.mrp-wrapper *::after {

    box-sizing:border-box;

}






/* =========================
   HEADER
========================= */


.mrp-title {

    font-size:15px;

    font-weight:600;

    margin-bottom:6px;

}



.mrp-amount {

    font-size:13px;

    margin-bottom:18px;

    color:rgba(1,0,76,.65);

}



.mrp-amount span {

    font-weight:700;

    color:var(--mrp-navy);

}







/* =========================
   BAR
========================= */


.mrp-bar {

    position:relative;

    width:100%;

    height:8px;

    background:

    rgba(1,0,76,.12);

    border-radius:50px;

}



.mrp-fill {

    height:100%;

    width:0;

    border-radius:50px;


    background:

    linear-gradient(

        90deg,

        var(--mrp-gold),

        var(--mrp-light-gold)

    );


    transition:

    width .6s ease;

}







/* =========================
   MONEY ABOVE DOT
========================= */


.mrp-bar-amount {

    position:absolute;

    top:-28px;

    transform:translateX(-50%);


    font-size:12px;

    font-weight:700;

    color:var(--mrp-navy);

    white-space:nowrap;

}



.mrp-bar-shipping {

    left:44%;

}



.mrp-bar-gift {

    left:92%;

}







/* =========================
   DOT
========================= */


.mrp-dot {

    position:absolute;

    top:50%;


    width:14px;

    height:14px;


    background:#fff;


    border-radius:50%;


    border:

    2px solid var(--mrp-gold);


    transform:

    translate(-50%,-50%);


    z-index:5;

}



.mrp-dot-shipping {

    left:44%;

}



.mrp-dot-gift {

    left:92%;

}








/* =========================
   ICON + TEXT AREA
========================= */


.mrp-rewards {

    position:relative;


    height:62px;


    margin-top:16px;

}



.mrp-reward {

    position:absolute;


    top:0;


    display:flex;


    flex-direction:column;


    align-items:center;


    text-align:center;

}



.mrp-reward-shipping {

    left:44%;

    transform:

    translateX(-50%);

}



.mrp-reward-gift {

    left:92%;

    transform:

    translateX(-50%);

}








/* =========================
   ICON
========================= */


.mrp-icon {


    width:24px;

    height:24px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin-bottom:2px;

}



.mrp-icon svg {


    width:22px;

    height:22px;


    fill:none;


    stroke:var(--mrp-gold);


    stroke-width:1.6;


    stroke-linecap:round;


    stroke-linejoin:round;

}








/* =========================
   LABEL
========================= */


.mrp-reward span {


    font-size:11px;


    font-weight:600;


    line-height:1.15;


    color:var(--mrp-navy);


    white-space:nowrap;

}







/* =========================
   MESSAGE
========================= */


.mrp-message {


    margin:4px 0 0;


    font-size:13px;


    line-height:1.4;


    color:rgba(1,0,76,.75);

}



.mrp-message strong {


    font-weight:800;


    color:var(--mrp-navy);

}








/* =========================================================
   FREE SHIPPING UNLOCKED
========================================================= */


.mrp-wrapper.shipping-unlocked
.mrp-reward-shipping span {


    font-weight:800;

}



.mrp-wrapper.shipping-unlocked
.mrp-reward-shipping .mrp-icon svg {


    animation:

    mrpShippingUnlock .8s ease;

}






@keyframes mrpShippingUnlock {


    0% {

        transform:scale(.9);

        opacity:.5;

    }


    60% {

        transform:scale(1.15);

        opacity:1;

    }


    100% {

        transform:scale(1);

    }

}









/* =========================================================
   MYSTERY BOX COMPLETE
========================================================= */


.mrp-wrapper.is-complete
.mrp-reward-gift span {


    font-weight:800;

}



.mrp-wrapper.is-complete
.mrp-reward-gift .mrp-icon svg {


    animation:

    mrpGiftGlow 1.8s infinite;

}



.mrp-wrapper.is-complete
.mrp-fill {


    animation:

    mrpBarGlow 2s infinite;

}



.mrp-wrapper.is-complete
.mrp-message {


    animation:

    mrpMessageIn .8s ease;

}





@keyframes mrpGiftGlow {


    0%,
    100% {

        filter:none;

    }


    50% {

        filter:

        drop-shadow(
            0 0 6px #E7B84F
        );

    }

}





@keyframes mrpBarGlow {


    50% {

        box-shadow:

        0 0 14px rgba(231,184,79,.55);

    }

}





@keyframes mrpMessageIn {


    0% {

        opacity:0;

        transform:translateY(8px);

    }


    100% {

        opacity:1;

        transform:translateY(0);

    }

}








/* =========================
   MOBILE
========================= */


@media(max-width:600px){


    .mrp-wrapper {

        padding:0 8px;

    }



    .mrp-bar-amount {


        font-size:11px;


    }



    .mrp-reward span {


        font-size:10px;


        white-space:normal;


        max-width:90px;


    }



    .mrp-icon {


        width:21px;


        height:21px;

    }



    .mrp-icon svg {


        width:19px;


        height:19px;

    }



    .mrp-message {


        font-size:12px;

    }


}