/* ===============   CART  ================ */

.section__cart{
    background-color: var(--color-light-green);
    height: 100%;
}
.container__cart{
    flex-direction: column;
}
.block__cart{
    flex-direction: column;
    gap: var(--big-padding);
    padding: var(--mid-padding) 0;
    padding-top: var(--main-padding);
    box-sizing: border-box;
}
.box__list__units{
}
.space__card.card__btn__delete{
    display: none;
}

.btn__delete__img{
    height: 30px;
}
/* ===============   UNITS LIST  ================ */

.section__service__unit {
    padding: var(--huge-padding) 0;
    background-color: var(--color-light-green);
}
.container__service__unit {
}
.block__service__unit {
    flex-direction: column;
    gap: var(--def--padding);
    
}

.card__unit {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    background-color: white;
    padding: var(--def--padding);
    box-sizing: border-box;
    gap: var(--main-padding);
}
.block__service__unit .card__unit {
    padding: var(--mid-padding);
}
.card__unit:nth-child(2n) {
    background-color: var(--color-pre-light-green);
}
.unit__cart{
    position: relative;
}

.unit__cart > .box__desc__unit::after {
    position: absolute;
    content: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    right: -6px;
    top: -6px;
    background: url("/files/static/icons/btn_delete.svg") no-repeat center/contain;
    padding: 1px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 100px;
    border: 1px solid var(--color-light-green);
    transition: all 0.150s ease-in;
    cursor: pointer;
}
.unit__cart:nth-child(2n) > .box__desc__unit::after {
    background-color: var(--color-pre-light-green);
}

.mob__btn__delete{
    position: absolute;
    justify-content: center;
    height: 38px;
    width: 38px;
    right: -6px;
    top: -6px;
    background-color: white;
    
}
.unit__cart:nth-child(2n) > .mob__btn__delete {
    background-color: var(--color-pre-light-green);
}
.btn__delete {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--color-light-green);
    transition: all 0.150s ease-in;
}
.box__desc__unit {
    display: flex;
    flex-direction: column;
    gap: var(--short-padding-x2);
}

.box__price__unit {
    display: flex;
    gap: var(--main-padding);
}
.box__price__unit > * {
    font-size: 1.625rem;
}

.box__cart__total{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.unit__cart {
    opacity: 1;
    transition: all .8s ease-in !important;
cubic-bezier(.52,.06,.31,.8)
    /*transition: all 1s cubic-bezier(0.36, 0, 0.66, -0.56) !important;*/
}
.unit__cart.fade__out  {
    opacity: 0 !important;
    transform: translateX(1000px);

}
@media (min-width: 768px) {

    .block__cart{
        gap: var(--huge-padding);
    }
    
    .mob__btn__delete{
        display: none;
        
    }
    /* ===============   UNITS LIST  ================ */


    .block__service__unit {
        flex-direction: column;
        gap: var(--main-padding);
    }

    .card__unit {
        flex-direction: row;
        min-height: 100px;
        padding: var(--def--padding);
        gap: var(--mid-padding);
        transition: all 0.2s ease-in;
        box-shadow: rgba(149, 157, 165, 0.0) 0px 8px 24px;
    
    }
    
    .box__desc__unit {
        display: flex;
        flex-direction: column;
        gap: var(--short-padding);
        flex: 0 0 76%;
    }

    .box__price__unit {
        flex-direction: column;
        gap: var(--short-padding);
        flex: 4;
        justify-content: center;
    }
    .space__card.card__btn__delete{
        display: flex;
        align-items: center;
        flex: 1;
        width: 100%;
    }
   
    .box__price__unit > * {
        font-size: 1.625rem;
    }
    .box__price__unit > .old__price {
        color: var(--color-red);
        text-decoration: line-through;
    }
    .unit__cart.fade__out  {
        opacity: 0 !important;
        transform: translateX(1500px);

    }
}
@media (min-width: 1024px) {
   
    /* ===============   UNITS LIST ================ */

    .box__desc__unit {
        flex: 0 0 80%;
    }

    .box__price__unit {
        flex: 5;
    }
   
}
@media (hover: hover) {

    .card__unit:hover {
        background-color: var(--color-pre-light-green);
        transition: all 0.150s ease-in;
        box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;

    }
    .btn__delete:hover {
        border: 1px solid var(--color-red);
        transition: all 0.150s ease-in;
    }
}