/* ======================================================
   SugarPilots - Mængderabat
====================================================== */

#sp-pricing-ladder{

    background:#f7f1ea;
    border-radius:14px;
    padding:28px;
    margin:25px 0;

}

#sp-pricing-ladder .sp-title{

    margin:0 0 10px;
    font-size:24px;
    font-weight:700;
    text-align:center;

}

#sp-pricing-ladder .sp-subtitle{

    margin:0 0 35px;
    color:#666;
    text-align:center;
    font-size:15px;

}


/* ======================================================
   Selve linjen
====================================================== */

#sp-pricing-ladder .sp-line{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    margin-bottom:35px;

}

/* den vandrette linje */

#sp-pricing-ladder .sp-line::before{

    content:"";
    position:absolute;

    left:7%;
    right:7%;
    top:15px;

    height:4px;

    background:#d7d7d7;

    z-index:1;

}


/* ======================================================
   Punkterne
====================================================== */

#sp-pricing-ladder .sp-step{

    position:relative;

    width:25%;

    text-align:center;

    z-index:2;

}


#sp-pricing-ladder .sp-circle{

    width:24px;
    height:24px;

    margin:0 auto 12px;

    border-radius:50%;

    background:#ffffff;

    border:4px solid #cfcfcf;

    transition:.25s;

}


#sp-pricing-ladder .sp-label{

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

    margin-bottom:6px;

}


#sp-pricing-ladder .sp-price{

    font-size:15px;
    color:#555;

    font-weight:600;

}


/* ======================================================
   Aktivt trin
====================================================== */

#sp-pricing-ladder .sp-step.active .sp-circle{

    background:#3a7d44;
    border-color:#3a7d44;

}


#sp-pricing-ladder .sp-step.active .sp-label{

    color:#3a7d44;

}


#sp-pricing-ladder .sp-step.active .sp-price{

    color:#3a7d44;

    font-weight:700;

}


/* ======================================================
   Allerede opnåede trin
====================================================== */

#sp-pricing-ladder .sp-step.completed .sp-circle{

    background:#6ab04c;

    border-color:#6ab04c;

}


/* ======================================================
   Besked nederst
====================================================== */

#sp-quantity-message{

    margin-top:15px;

    padding:18px;

    border-radius:10px;

    background:#ffffff;

    text-align:center;

    font-size:16px;

    line-height:1.6;

    font-weight:500;

}


/* ======================================================
   Mobil
====================================================== */

@media (max-width:767px){

    #sp-pricing-ladder{

        padding:20px;

    }

    #sp-pricing-ladder .sp-line{

        flex-wrap:wrap;

        gap:20px;

    }

    #sp-pricing-ladder .sp-line::before{

        display:none;

    }

    #sp-pricing-ladder .sp-step{

        width:48%;

    }

}