/*===========================
  15.Product Quick View css 
===========================*/


.modal {
    &.fade {
        display: block !important;
        opacity: 0;
        visibility: hidden;

        &.show {
            display: block !important;
            opacity: 1;
            visibility: visible;
        }
    }

    & .modal-dialog {
        max-width: 1240px;
        
        @media #{$laptop}{
            max-width: 1024px;
        }
        @media #{$lg}{
            max-width: 960px;
        }
        @media #{$md}{
            max-width: 720px;
        }
        @media #{$xs}{
            max-width: 90%;
            margin: 30px auto;
        }
        @media #{$xs}{
            max-width: 85%;
        }

        & .modal-content {
            border-radius: 0;
            border: 0;
            @include box-shadow (0px 1px 3px 0px rgba(0, 0, 0, 0.2));

            & .modal-header {
                padding: 10px 20px 0;
                margin: 0;
                border-bottom: 0;
            }

            & .modal-body {
                padding: 20px 50px 50px;
                
                @media #{$laptop}{
                    padding: 10px 40px 40px;
                }
                @media #{$lg}{
                    padding: 10px 40px 40px;
                }
                @media #{$md}{
                    padding: 1px 30px 30px;
                }
                @media #{$xs}{
                    padding: 1px 20px 20px;
                }

                & .product-quick-view-image {
                    & .quick-view-image {
                        & .single-view-image {
                            & img {
                                width: 100%;
                                display: block;
                            }
                        }
                    }

                    & .quick-view-thumb {

                        & li {
                            border: 1px solid $border-color;
                            margin: 0 10px;
                            @include transition(0.3s);
                            cursor: pointer;
                            
                            @media #{$xs}{
                                margin: 0 5px;
                            }

                            & .single-thumb {
                                & img {
                                    width: 100%;
                                    display: block;
                                    cursor: pointer;
                                }
                            }
                    
                            &.slick-current{
                                border-color: rgba($black, 0.3);
                            }
                        }
                    }
                }

                & .product-quick-view-content {
                    & .product-title {
                        font-size: 28px;
                        text-transform: capitalize;
                        color: $black;
                        font-weight: 500;
                        
                        @media #{$md}{
                            font-size: 24px;
                        }
                        @media #{$xs}{
                            font-size: 20px;
                        }
                    }

                    & .reference {
                        font-size: 13px;
                        color: #a9a9a9;
                        padding-top: 25px;
                        
                        @media #{$laptop}{
                            padding-top: 15px;
                        }
                        @media #{$lg}{
                            padding-top: 15px;
                        }
                        @media #{$md}{
                            padding-top: 15px;
                        }
                        @media #{$xs}{
                            padding-top: 15px;
                        }
                    }

                    & .rating{
                        padding-top: 10px;

                        & li{
                            display: inline-block;
                            font-size: 13px;
                            color: $body-color;
                            
                            &.rating-on{
                                color: #f3cd1e;
                            }
                        }
                    }

                    & .product-prices {
                        display: -webkit-flex;
                        display: -moz-flex;
                        display: -ms-flex;
                        display: -o-flex;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        padding-top: 25px;
                        
                        @media #{$laptop}{
                            padding-top: 15px;
                        }
                        @media #{$lg}{
                            padding-top: 15px;
                        }
                        @media #{$md}{
                            padding-top: 15px;
                        }
                        @media #{$xs}{
                            padding-top: 15px;
                        }

                        & .sale-price {
                            color: $body-color;
                            font-size: 25px;
                            font-weight: 400;
                            margin-right: 15px;
                            
                            @media #{$md}{
                                font-size: 22px;
                            }
                            @media #{$xs}{
                                font-size: 18px;
                            }
                        }

                        & .regular-price {
                            color: $theme-color;
                            font-size: 28px;
                            font-weight: 500;
                            margin-right: 15px;
                            
                            @media #{$md}{
                                font-size: 26px;
                            }
                            @media #{$xs}{
                                font-size: 22px;
                            }
                        }

                        & .save {
                            font-weight: 400;
                            font-size: 13px;
                            background-color: $black;
                            height: 25px;
                            line-height: 25px;
                            padding: 0 10px;
                            border-radius: 4px;
                            -webkit-border-radius: 4px;
                            -moz-border-radius: 4px;
                            -ms-border-radius: 4px;
                            -o-border-radius: 4px;
                            color: $white;
                        }
                    }

                    & .product-description {
                        padding-top: 25px;
                        
                        @media #{$laptop}{
                            padding-top: 15px;
                        }
                        @media #{$lg}{
                            padding-top: 15px;
                        }
                        @media #{$md}{
                            padding-top: 15px;
                            font-size: 14px;
                        }
                        @media #{$xs}{
                            padding-top: 15px;
                            font-size: 14px;
                        }
                    }

                    & .product-size-color{
                        display: -webkit-flex;
                        display: -moz-flex;
                        display: -ms-flex;
                        display: -o-flex;
                        display: flex;
                        
                        & .title{
                            font-size: 14px;
                            color: $black;
                            font-weight: 500;
                            color: $black;
                        }
                        & .product-size{
                            position: relative;
                            display: inline-block;
                            margin-top: 25px;
                            margin-right: 30px;
                            
                            @media #{$md}{
                                margin-right: 15px;
                            }

                            & select{
                                width: 61px;
                                padding: 0 10px;
                                border: 1px solid $border-color;
                                height: 40px;
                                margin-top: 10px;
                            }
                        }
                        & .product-color{
                            margin-top: 25px;
                            margin-right: 30px;
                            
                            @media #{$md}{
                                margin-right: 15px;
                            }
                            
                            & .color-input{
                                display: -webkit-flex;
                                display: -moz-flex;
                                display: -ms-flex;
                                display: -o-flex;
                                display: flex;
                                margin-top: 10px;
                                
                                & .single-color{
                                    & input[type="radio"] {
                                        display: none;
                                        
                                        & + label {
                                            width: 20px;
                                            height: 20px;
                                            border: 0;
                                            cursor: pointer;
                                            position: relative;
                                            display: inline-block;
                                            margin: 0 10px -4px 0;
                                            @include box-shadow (0px 1px 3px 0px rgba(0, 0, 0, 0.2));

                                            &::before {
                                                position: absolute;
                                                content: '';
                                                top: 0;
                                                left: 0;
                                                width: 100%;
                                                height: 100%;
                                                @include transition(0.4s);
                                                border: 2px solid transparent;
                                            }
                                            
                                        }

                                        &:checked {
                                            & + label {
                                                &::before {
                                                
                                                }
                                            }
                                        }
                                    }
                                    
                                    &.color-1{
                                        & input[type="radio"] {
                                            & + label {
                                                background-color: $white;
                                            }

                                            &:checked {
                                                & + label {
                                                    &::before {
                                                        border-color: $black;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    &.color-2{
                                        & input[type="radio"] {
                                            & + label {
                                                background-color: #434A54;
                                            }

                                            &:checked {
                                                & + label {
                                                    &::before {
                                                        border-color: $white;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    &.color-3{
                                        & input[type="radio"] {
                                            & + label {
                                                background-color: $black;
                                            }

                                            &:checked {
                                                & + label {
                                                    &::before {
                                                        border-color: $white;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        & .product-quantity{
                            margin-top: 25px;
                            
                            & .quantity{
                                margin-top: 10px;
                                
                                & input{
                                    width: 60px;
                                    height: 40px;
                                    border: 1px solid $border-color;
                                    padding: 0 10px;
                                    text-align: center;
                                }
                                & button{
                                    width: 40px;
                                    height: 40px;
                                    background-color: transparent;
                                    border: 1px solid $border-color;
                                }
                            }
                        }
                    }

                    & .product-add-cart{
                        margin-top: 30px;

                        & button{
                            position: relative;
                            padding: 0;
                            color: $white;
                            line-height: 60px;
                            height: 60px;
                            font-size: 16px;
                            font-weight: 500;
                            border: 0;
                            width: 100%;
                            border-radius: 0;
                            box-shadow: none;
                            text-transform: uppercase;
                            letter-spacing: 0.2em;
                            background: -webkit-linear-gradient(left, rgba(188,110,255,1) 0%, rgba(101,226,255,1) 50%, rgba(188,110,255,1) 100%);
                            background: -o-linear-gradient(left, rgba(188,110,255,1) 0%, rgba(101,226,255,1) 50%, rgba(188,110,255,1) 100%);
                            background: linear-gradient(to right, rgba(188,110,255,1) 0%, rgba(101,226,255,1) 50%, rgba(188,110,255,1) 100%);
                            background-size: 200%;
                            background-position: left center;
                            @include transition(0.3s);
                            
                            @media #{$md}{
                                height: 50px;
                                line-height: 50px;
                            }
                            @media #{$xs}{
                                height: 50px;
                                line-height: 50px;
                            }
                            
                            & i{
                                font-size: 28px;
                                line-height: 60px;
                                
                                @media #{$md}{
                                    line-height: 50px;
                                    font-size: 24px;
                                }
                                @media #{$xs}{
                                    line-height: 50px;
                                    font-size: 24px;
                                }
                            }
                            
                            &:hover{
                                background-position: right center;
                            }
                        }
                    }
                    
                    & .product-wishlist-compare{
                        padding-top: 15px;
                        
                        & ul{
                            & li{
                                width: 50%;
                                margin-top: 15px;                                
                                
                                @media #{$xs}{
                                    width: 100%;
                                }
                                @media #{$sm}{
                                    width: 50%;
                                }
                                
                                & a{
                                    line-height: 0;
                                    border: none;
                                    color: $black;
                                    display: inline-block;
                                    font-size: 14px;
                                    background: transparent;
                                    cursor: pointer;
                                    font-weight: 500;
                                    text-transform: uppercase;
                                    
                                    @media #{$desktop}{
                                        letter-spacing: 2px;
                                    }
                                    
                                    @media #{$md}{
                                        font-size: 13px;
                                    }
                                    @media #{$xs}{
                                        font-size: 13px;
                                    }
                                    
                                    & i{
                                        margin-right: 5px;
                                        font-size: 22px;
                                        color: $body-color;
                                        
                                        @media #{$md}{
                                            font-size: 18px;
                                        }
                                        @media #{$xs}{
                                            font-size: 18px;
                                        }
                                    }
                                }
                                
                                & + li{
                                    border-left: 1px solid $border-color;
                                    
                                    @media #{$xs}{
                                        border-left: 0;
                                    }
                                    @media #{$sm}{
                                        border-left: 1px solid $border-color;
                                    }
                                    
                                    & a{
                                        padding-left: 30px;
                                        
                                        @media #{$md}{
                                            padding-left: 15px;
                                        }
                                        @media #{$xs}{
                                            padding-left: 0;
                                        }
                                        @media #{$sm}{
                                            padding-left: 15px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    & .product-share{
                        padding-top: 20px;
                        
                        & p{
                            font-size: 14px;
                            color: $black;
                            font-weight: 500;
                        }
                        & .social{
                            & li{
                                display: inline-block;
                                margin-left: 10px;
                                
                                & a{
                                    color: #b4b4b4;
                                    font-size: 14px;
                                    padding: 0;
                                    @include transition(0.3s);
                                    
                                    &:hover{
                                        color: $body-color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}