/*===============================
Woocommerce Cart Layout
==============================*/

.woocommerce-cart{
    .wc-proceed-to-checkout{
        padding: 5px 0 0;
        a.button.alt{
            background: var(--wooBgColor);
            color: var(--wooTextColor);
            border: 1px solid var(--wooBorderColor);
            border-radius: var(--bottonRoundness);
            font-size: 0.778em;
            font-weight: 400;
            letter-spacing: 0.5px;
            margin: 0;
            padding: var(--buttonPadding);
            text-transform: uppercase;
            
            &:hover{
                background: var(--wooBgHoverColor);
                border-color: var(--wooBorderHoverColor);
                color: var(--wooHoverColor);
            }
        }
    }
} 

.page.woocommerce-cart{
    .woocommerce{
        .rt-cart-form{
            .woocommerce-cart-form{
                margin-bottom: 45px;
                width: 100%;
                table.cart{
                    border: none;
                    thead{
                        tr{
                            background: var(--baseColor);
                            th{
                                font-size: 0.77778em;
                                font-weight: 400;
                                color: var(--primaryColor);
                                padding: 20px;
                                border: none;
                            }
                        }
                    }
                    tbody{
                        td{
                            padding: 30px 20px;
                            width: auto;
                            border-bottom: 1px solid var(--genborderColor);
                            border-top: none;
                            @include media(sm){
                                padding: 15px;
                            }
                            &.product-thumbnail{
                                padding-right: 0;
                                width: 95px;
                            }
                            &.product-name{
                                font-size: 0.833333em;
                                font-weight: 600;
                                line-height: 1.6;
                                padding-left: 15px;
                                padding-right: 0;
                                @include media(sm){
                                    padding: 15px;
                                }
            
                                a{
                                    color: var(--primaryColor);
                                    text-decoration: none;
                                }
                            }
                            &.product-price{
                                font-size: 0.8888889em;
                                font-weight: 400;
                                color: var(--primaryColor);
                            }
                            img{
                                width: 80px;
                                height: 80px;
                                margin-right: 15px;
                            }
                            input[type="number"]{
                                height: 40px;
                                width: 40px;
                                border: 1px solid rgba(41, 41, 41, 0.1);
                                padding: 0;
                                &:not(:hover)::-webkit-inner-spin-button,
                                &:not(:hover)::-webkit-outer-spin-button {
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                appearance: none;
                                }
                                
                            }
                            &.produrt-remove{
                                .remove{
                                    border-radius: 0;
                                    color: var(--primaryColor) !important;
                                    font-size: 0.88em;
                                    font-weight: 400;
                                    opacity: 0.45;
                                    text-decoration: underline;
                                    width: auto;
                                    @include media(sm){
                                        text-align: right;
                                    }
                                    &:hover{
                                        background: transparent;
                                    }
                                }
                            }
                            &.actions{
                                border: none;
                                margin-top: 20px;
                                padding: 0;
                                .coupon{
                                    width: calc(100% - 180px);
                                    width: -webkit-calc(100% - 180px);
                                    width: -moz-calc(100% - 180px);
                                    padding: 20px;
                                    text-align: left;
                                    background: var(--baseColor);
                                    display: inline-block;
                                    @include media(sm){
                                        width: 100%;
                                    }
                                    
                                    .input-text{
                                        height: 40px;
                                        line-height: 40px;
                                        padding: 0 15px;
                                        font-size: 13px;
                                        margin-right: 10px;
                                        color: var(--primaryColor);
                                        border: none;
                                        width: calc(100% - 180px);
                                        @include media(sm){
                                            width: calc(100% - 115px);
                                        }
                                        &::placeholder{
                                            color: var(--primaryColor);
                                        }
                                    }
                                    button.button{
                                        background: var(--wooBgColor);
                                        color: var(--wooTextColor);
                                        border: 1px solid var(--wooBorderColor);
                                        font-size: 0.88em;
                                        font-weight: 400;
                                        letter-spacing: 0.5px;
                                        text-transform: uppercase;
                                        min-height: 40px;
                                        height: 40px;
                                        line-height: 40px;
                                        padding: 0 20px;
                                        margin: 0;
                                        width: 170px;
                                        -webkit-appearance: none;
                                        -moz-appearance: none;
                                        appearance: none;
                                        @include transition(all ease 0.3s);
                                        @include media(sm){
                                            width: 105px;
                                        }
                                        &:hover{
                                            background: var(--wooBgHoverColor);
                                            border-color: var(--wooBorderHoverColor);
                                            color: var(--wooHoverColor);
                                        }
                                    }
                                }
                                .update-wrap{
                                    background: var(--baseColor);
                                    display: inline-block;
                                    margin-left: 5px;
                                    padding: 20px;
                                    position: relative;
                                    width: 175px;
                                    @include media(sm){
                                        margin-top: 10px;
                                        margin-left: 0;
                                        width: 100%;
                                    }
                                    button.button{
                                        background: var(--wooBgColor);
                                        color: var(--wooTextColor);
                                        border: 1px solid var(--wooBorderColor);
                                        display: block;
                                        font-size: 0.88em;
                                        height: 40px;
                                        line-height: 40px;
                                        letter-spacing: 0.3px;
                                        min-height: 40px;
                                        padding: 0 15px;
                                        font-weight: 400;
                                        -webkit-border-radius: var(--bottonRoundness);
                                        border-radius: var(--bottonRoundness);
                                        margin: 0 auto;
                                        text-transform: capitalize;
                                        @include transition(all ease 0.3s);
                                        
                                        &:hover{
                                            background: var(--wooBgHoverColor);
                                            border-color: var(--wooBorderHoverColor);
                                            color: var(--wooHoverColor);
                                        }
                                    }
                                }
                                
                            }
                        }
                        tr:nth-last-child(2){
                            td{
                                border: none;
                                @include media(sm){
                                    border-bottom: 1px solid var(--genborderColor);
                                }
                            }
                        }
                    }
                }
            }
            .cart_totals{
                border: 2px solid var(--genborderColor);
                margin-left: auto;
                padding: 40px 30px;
                max-width: 370px;
                width: 100%;
                @include media(sm){
                    padding: 20px;
                }
                h2 {
                    font-size: 1.23em;
                    margin-bottom: 20px;
                }
                table.shop_table{
                    border: none;
                    tbody{
                        .cart-subtotal{
                            th,td{
                                font-size: 0.778em;
                                font-weight: 400;                            
                                padding: 0 0 20px;
                            }
                            td{
                                text-align: right;
                            }
                        }
                        .order-total{
                            th,td{
                                border-top: 1px solid var(--genborderColor);
                                padding: 20px 0 0;
                            }
                            td{
                                background-color: transparent;
                                text-align: right;
                            }
                        }
                        .cart-discount{
                            th,td{
                                font-size: 0.778em;
                                font-weight: 400;                            
                                padding: 20px 0;
                            }
                            td{
                                color: var(--primaryColor);
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
    .cart-collaterals{
        margin-top: 45px;
        .cart_totals{
            min-width: 370px;
            border: solid 1px rgba(41, 41, 41, 0.02);
            padding: 35px 30px 50px;
            
            h2{
                font-size: 1.22222em;
                font-weight: 600;
                color: var(--primaryColor);
                text-transform: capitalize;
            }
            table{
                border: none;
                tr{
                    th, td{
                        border-top: none;
                        border-bottom: 1px solid rgba(41, 41, 41, 0.05);
                        font-size: 0.77778em;
                        font-weight: 400;
                        color: var(--primaryColor);
                        padding: 17px 0;
                    }
                    td{
                        text-align: right;
                    }
                    &:last-child{
                        th, td{
                            border-bottom: none;
                        }
                    }
                    &.order-total{
                        th{
                            font-weight: 600;
                        }
                        td{
                            font-size: 1em;
                        }
                    }
                }
            }
            .wc-proceed-to-checkout{
                padding: 0;
                a.checkout-button{
                    font-size: 0.777778em;
                    font-weight: 400;
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                    color: #FFF;
                    background: var(--primaryColor);
                    height: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                    margin-bottom: 0;
                    -webkit-border-radius: 4px;
                    border-radius: 4px;
                    @include transition(all ease 0.3s);
                    &:hover{
                        background: rgba(80,129,245,1);
                    }
                }
            }
        }
    }

    .rishi-container[data-strech="full"]{
        .woocommerce{
            .rt-cart-form{
                .cart_totals{
                    width: 390px;
                }
            }
        }
    }

    &.full-width{
        .woocommerce{
            .rt-cart-form{
                display: inline-block;
                width: 100%;
                .woocommerce-cart-form{
                    float: left;
                    margin: 0;
                    padding-right: 45px;
                    max-width: calc(100% - 370px);
                    width: 100%;
                    @include media(md){
                        padding-right: 10px;
                    }
                    @include media(sm){
                        max-width: 100%;
                        padding-right: 0;
                    }
                }
                .cart_totals{
                    float: left;
                    margin: 0;
                }
            }
        }

        .rishi-container[data-strech="full"]{
            .woocommerce{
                .rt-cart-form{
                    .woocommerce-cart-form{
                        padding-right: 80px;
                        width: calc(100% - 390px);
                    }
                }
            }
        }
    }
    &.default-layout{
        .rt-cart-form{
            .cart_totals{
                background: #fff;
            }
        } 
    }
}

header{
    .cb__cart-item{
        .cb__icon-container{
            svg{
                fill: var(--linkInitialColor);
                stroke: var(--linkInitialColor);
            }
        }
        &:hover{
            .cb__icon-container{
                svg{
                    fill: var(--linkHoverColor);
                    stroke: var(--linkHoverColor);
                }
            }
        }
        &[data-skip-badge]{
            .cb__icon-container:before{
                display: none;
            }
        }
    }
}