/*===========================
     18.ADS SIDEBAR css 
===========================*/


.ads-sidebar{
    & .sidebar-title{
        border: 1px solid rgba($heading-color, 0.1);
        padding: 15px 20px;
        
        & .title{
            font-size: 16px;
            font-weight: 700;
            
            & i{
                margin-right: 3px;
            }
        }
    }
}

.ads-sidebar-title{
    & .title{
        font-size: 24px;
        font-weight: 700;
        color: $heading-color;
    }
}

.sidebar-category{
    border: 1px solid rgba($heading-color, 0.1);
    border-radius: 10px;
        
    & .list{
        & li{
            & + li{                
                & .single-list-category{
                    border-top: 1px solid rgba($heading-color, 0.1);
                }
            }
            
            & a{
                display: block;
            }
        }
        & .single-list-category{
            padding: 9px 20px;
            
            & .category-icon{
                
                & img{
									// width: 15px;
                    height: 15px;
                }
            }
            & .category-text{
                text-align: right;
                
                & .title{
                    font-size: 13px;
                    font-weight: 400;
                    color: $black-soft;
                    @include transition(0.3s);
                }
                & p{
                    font-size: 14px;
                    line-height: 22px;
                }
            }
            
            &:hover{
                 & .category-text{
                    & .title{
                        color: $theme-color-2;
                    }
                }
            }
        }
    }
}

.price-range-wrapper{
    border: 1px solid rgba($heading-color, 0.1);
    border-top: 0;
    padding: 30px 20px;
    
    & .slider-range{
        height: 2px;
        width: 100%;
        border: 0;
        border-radius: 0;
        background-color: $heading-color;
        
        & .ui-slider-range{
            background-color: $theme-color-2;
        }
        & .ui-slider-handle{
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 3px solid $theme-color-2;
            background-color: $white;
            top: -5px;
            cursor: pointer;
        }
    }
    
    & .range{
        margin-top: 20px;
        white-space: nowrap;
        
        & input{
            width: 32.5%;
            height: 35px;
            border-radius: 3px;
            background-color: #f3f3f3;
            border: 0;
            font-size: 14px;
            color: $body-color;
            text-align: center;
        }
        & button{
            width: 32.5%;
            height: 35px;
            border-radius: 3px;
            background-color: $theme-color-2;
            border: 0;
            font-size: 14px;
            color: $white;
            @include transition(0.3s);
            
            &:hover{
                background-color: $theme-color;
            }
        }
    }
}

.condition-wrapper{
    border: 1px solid rgba($heading-color, 0.1);
    border-top: 0;
    padding: 30px 20px;
    
    & .condition-check{
        & li{
            & + li{
                margin-top: 10px;
            }
        }
    }
}

.sidebar-rating{
    & .rating-wrapper{
        border: 1px solid rgba($heading-color, 0.1);
        border-top: 0;
        padding: 30px 20px;
        
        & .rating-list{
            & li{
                & + li{
                    margin-top: 10px;
                }
            }
            & .single-rating{
                                
                & .rating-icon{
                    padding-left: 5px;
                    
                    & i{
                        font-size: 14px;
                        color: #FFAB53;
                    }
                }
            }
        }
    }
}

.sidebar-ads{
    & .single-popular-ads{
        & .ads-thumb{
            & img{
                width: 80px;
                height: 80px;
                object-fit: cover;
                object-position: center;
                
                @media #{$lg}{
                    width: 60px;
                    height: 60px;
                }
            }
        }
        & .ads-content{
            padding-left: 15px;
            
            & .title{
                & a{
                    font-size: 16px;
                    font-weight: 700;
                    color: $heading-color;
                    @include transition(0.3s);
                    
                    @media #{$lg}{
                        font-size: 14px;
                    }
                }
            }
            & p{
                font-size: 14px;
                margin-top: 5px;
                
                @media #{$lg}{
                    font-size: 13px;
                    margin-top: 0;
                }
                
                & i{
                    font-size: 12px;
                    margin-right: 3px;
                }
            }
            
            & .price-rating{
                margin-top: 10px;
                
                @media #{$lg}{
                    margin-top: 5px;
                }
                
                & .price{
                    font-size: 16px;
                    font-weight: 600;
                    color: $heading-color;
                    
                    @media #{$lg}{
                        font-size: 14px;
                    }
                }
                & .rating{
                    display: -webkit-flex;
                    display: -moz-flex;
                    display: -ms-flex;
                    display: -o-flex;
                    display: flex;
                    
                    & li{
                        font-size: 13px;
                        color: $body-color;
                        
                        @media #{$lg}{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        
        &:hover{
            & .ads-content{
                & .title{
                    & a{
                        color: $theme-color-2;
                    }
                }
            }
        }
    }
}