/*  ==========  #INFO  ==========  */

/* Ipad, laptop Devices < 1024px */
/* Tablet Devices < 767px */
/* Mobile Devices < 480px */
/* MINI Devices < 480px */

/*  ==========  END #INFO  ==========  */




/* ========== FILTERS STYLES ========== */
#filters{
    padding-bottom: 32px;
}
#filters .filters-inner{
    display: flex;
    gap: 15px;
    align-items: center;
}
#filters .open-item{
    width: 20%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid var(--color-border-6);
    cursor: pointer;
}
#filters .open-item span{font-weight: 500;}
#filters .open-item:hover span{color: var(--color-main);}

#filters .sorting-panel{
    flex: 1;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
#filters .sorting-panel .group{
    display: flex;
    gap: 20px;
}
#filters .sorting-panel .sort-by{
    display: flex;
    align-items: center;
    gap: 8px;
}
#filters .sorting-panel .sort-by label{font-size: 14px;}
#filters .sorting-panel .sort-by select{
    font-size: 14px;
    height: 32px;
    max-width: 180px;
    padding: 6px 10px;
    padding-left: 0;
    box-sizing: border-box;
    border: none;
    background: transparent !important;
    border-radius: 8px;
    outline: none;
}
#filters .sorting-panel .shop-view{
    display: flex;
    gap: 12px;
}
#filters .sorting-panel .shop-view .item{
    width: 37px;
    height: 37px;
    cursor: pointer;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 8px;
}
#filters .sorting-panel .shop-view .item.active{background-color: #fff;}
#filters .sorting-panel .shop-view .item.active svg path{fill: var(--color-main);}
@media screen and (max-width: 767px){
    #filters .open-item{width: calc(50% - 7.5px);}
    #filters .filters-inner{
        display: flex;
        flex-wrap: wrap;
    }
}
/* ========== END FILTERS STYLES ========== */





/* ========== FILTERS MODAL STYLES ========== */
#flters-modal .filters-form{
    display: flex;
    flex-direction: column;
    /* gap: 15px; */
}
#flters-modal .filters-form .item{
    padding: 24px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
}
#flters-modal .filters-form .item:first-child{padding-top: 0;}
#flters-modal .filters-form .button{margin-top: 20px;}
/* ========== END FILTERS MODAL STYLES ========== */