/*===========================
11. cart-page-style
===========================*/
.cart-area {
    .cart-wrapper {
        box-shadow: 0px 5px 15px 0px rgba(68, 68, 68, 0.1);

        table {
            @media(max-width:991px) {
                width: 1022px;
            }
        }

        form {

            @media(max-width:991px) {
                overflow: scroll;
                overflow-y: hidden;
            }
        }
    }

    .cart-wrap td,
    .cart-wrap th {
        width: 10%;
        border-bottom: 1px solid #f0f0f094;
        text-align: center;
        font-weight: 400;
        color: #414141;

        ul {
            list-style: none;
        }
    }

    .cart-wrap th {
        border-bottom: 1px solid #f0f0f094;
        padding: 40px 0;
    }

    .cart-wrap thead {
        background: #fff;
        color: #505050;
        padding: 40px;
    }

    .cart-area form {
        margin: auto;
        text-align: center;
        background: #fff;
    }

    .cart-wrap .product {
        width: 15%;
    }

    .cart-wrap .product ul {
        text-align: left;
        padding-left: 30px;
        list-style: none;
    }

    .cart-wrap .product ul li {
        padding-bottom: 5px;
    }

    .cart-wrap .product a {
        font-size: 16px;
        color: #a5a4a4;
    }

    .cart-wrap .product-2 {
        text-align: left;
        padding-left: 55px;
    }

    .cart-wrap .product a:hover {
        color: $theme-primary-color;
    }

    .cart-wrap th {
        height: 80px;
        font-weight: 700;
    }

    .cart-wrap td {
        padding: 40px 25px;

        &.action {
            ul {
                display: flex;
                justify-content: center;
                list-style: none;

                .w-btn-view {
                    a {
                        line-height: 45px;
                    }
                }
            }
        }
    }

    .cart-wrap td span {
        display: block;
        width: 100px;
        height: 38px;
        line-height: 34px;
        color: #ee9902;
        font-size: 14px;
        border: 1.5px solid #ee9902;
        border-radius: 4px;
    }

    .cart-wrap td.Del span {
        color: #4ABA4E;
        border: 1.5px solid #4ABA4E;
    }

    .cart-wrap td.can span {
        color: #D85656;
        border: 1.5px solid #D85656;
    }

    .cart-wrap td.pro span {
        color: #691A5F;
        border: 1.5px solid #691A5F;
    }

    .cart-wrap .name {
        width: 15%;
    }

    .cart-wrap .action a {
        display: block;
        width: 40px;
        height: 38px;
        line-height: 45px;
        background: #414141;
        color: #fff;
        border-radius: 4px;
        font-size: 14px;

        .fi {
            &::before {
                font-size: 20px;
            }
        }
    }

    .cart-wrap .action a:hover {
        background: $theme-primary-color;
    }

    .cart-wrap .action li.c-btn {
        margin-right: 10px;

        a {
            background-color: $theme-primary-color;
        }
    }

    .order-wrap {
        padding: 0;
    }

    .cart-wrap tr:nth-child(even) {
        background: #FCFCFC;
    }

    .cart-wrap .quantity {
        position: relative;
        max-width: 110px;
        margin: 0 auto;
    }

    .quantity input {
        width: 105px;
        padding: 0px 35px;
        text-align: center;
        height: 36px;
        position: relative;
        background: #f2f2f5;
        border: none;
        border-radius: 40px;
    }

    .quantity .qtybutton {
        position: absolute;
        top: 0;
        left: 0px;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 28px;
        font-size: 18px;
        cursor: pointer;
        color: #333;
        background: #fafaff;
        border-radius: 30px;
    }

    .cart-wrap .quantity .qtybutton {
        top: 50%;
        left: 5px;
        transform: translateY(-51%);
        -webkit-transform: translateY(-51%);
        -moz-transform: translateY(-51%);

    }

    .cart-wrap .quantity .qtybutton.dec {
        border-left: none;
    }

    .cart-wrap .quantity .qtybutton.inc {
        right: 5px;
        left: auto;
        border-right: none;
    }

    .submit-btn-area {
        padding: 40px;

        ul {
            display: flex;
            justify-content: flex-end;
            list-style: none;

            @media(max-width:500px) {
                text-align: center;
                display: block;
            }

            li {
                &:last-child {
                    margin-left: 20px;

                    @media(max-width:500px) {
                        margin-left: 0;
                    }
                }
            }
        }

        button {
            border: none;
            transition: all .3s;
            outline: none;
            padding: 15px 45px;

            &:hover {
                background: $theme-primary-color;
            }
        }

        .theme-btn-s2 {
            @media(max-width:767px) {
                padding: 17px 30px;
                padding-right: 40px;
            }
        }

        .theme-btn {
            padding: 20px 45px;
            color: #fff;

            @media(max-width:767px) {
                padding: 17px 30px;
            }
        }
    }


    .cart-product-list {

        ul {
            border-top: 1px solid #f0f0f094;
            padding-top: 20px;
            list-style: none;

            li {
                display: flex;
                justify-content: space-between;
                padding: 0px 30px;
                font-weight: 300;
                font-size: 18px;
                line-height: 21px;
                color: #414141;
                padding-bottom: 30px;

                &.cart-b {
                    border-top: 1px solid #f0f0f094;
                    border-bottom: 1px solid #f0f0f094;
                    color: $theme-primary-color;
                    padding-top: 30px;
                    font-weight: 600;
                }
            }
        }
    }
}