.cart {
    width: fit-content;
    position: relative;
    top: 0;
    background-color: #efe;

    .cart-wrap {
        transition: width 400ms ease-in-out;

        width: 0;
        height: 90vh;

        position: sticky;
        top: 75px;

        overflow: hidden;

        color: black;

        #cart-cont {
            box-sizing: border-box;
            padding: 20px;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            position: relative;

            .cart_head {
                display: flex;
                align-items: end;
                justify-content: space-between;
                width: 230px;
            }

            .cart_head h5 {
                color: rgb(0, 85, 182);
            }

            &::-webkit-scrollbar {
                width: .5rem;
            }
        
            &::-webkit-scrollbar-track {
                background-color: #272727;
            }
        
            &::-webkit-scrollbar-thumb {
                background-color: goldenrod;
                border-radius: 20px;
            }
        }
    }
}

.cart-item {
    width: 240px;
    display: flex;
    flex-direction: column;

    padding: 15px;
    background: rgba(255, 235, 205, 0.384);
    border: 2px solid gray;
    border-radius: 3px;

    & h6 {
        font-size:16px;
    }

    #item-price {
        display: flex;
        justify-content: space-between;
    }

    #item-qty {
        display: flex;
        justify-content: space-between;

        & h6 {
            margin: 0;
            font-weight: 700;
        }

        #qty {
            display: flex;
            align-items: center;

            & img {
                cursor: pointer;
                width: 18px;
            }
        }
    }

    & button {
        display: flex;
        align-items: center;
        width: fit-content;
        height: 25px;

        font-size: 11px;

        & img {
            width: 15px;
            margin-right: 4px;
        }
    }
}

.cart_chkout {
    width: 230px;
    display: flex;
    justify-content: flex-end;

    #chkoutBtn {
        display: inline-block;
        width: 100%;
        height: 35px;
        padding: 3px;
        border-radius: 1rem;

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


.checkout-wrap {
    position: absolute;
    top: 0;
    left: 0;

    width: 0%;
    height: 100%;
    background-color: #272727;

    z-index: 99;

    transition: width 400ms ease-in-out;

    .checkout-cont {
        position: relative;
        top: 0;

        width: 95%;
        height: 100%;
        margin: 0 auto;

        .checkout-content {
            width: 100%;
            height: 450px;
            position: sticky;
            top: 95px;

            overflow-x: hidden;

            display: grid;
            gap: .8rem;
            grid-template-columns: repeat(2, 1fr);
            margin: 0;
            padding: 0;

            #contact {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            #delivery {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            & button {
                width: 200px;
                height: 35px;
                color: white;
            }
        }
    }
}