/*==================================================
    ZOZO FILTER
==================================================*/

.zf-filter{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:14px;

    padding:24px;

    margin-bottom:30px;

    box-shadow:0 6px 18px rgba(0,0,0,.04);

}


/*==================================================
    HEADER
==================================================*/

.zf-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    padding-bottom:18px;

    border-bottom:1px solid #f1f1f1;

}

.zf-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:24px;

    font-weight:700;

    color:#0d8f2c;

}

.zf-title i{

    font-size:20px;

}

#zf-reset{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:30px;

    border:1px solid #0d8f2c;

    color:#0d8f2c;

    text-decoration:none;

    transition:.25s;

    font-size:14px;

    font-weight:600;

}

#zf-reset:hover{

    background:#0d8f2c;

    color:#fff;

}


/*==================================================
    ROW
==================================================*/

.zf-row{

    margin-bottom:22px;

}

.zf-label{

    font-size:17px;

    font-weight:700;

    color:#222;

    margin-bottom:12px;

}


/*==================================================
    TAG LIST
==================================================*/

.zf-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


/*==================================================
    TAG
==================================================*/

.zf-tag{

    position:relative;

    cursor:pointer;

    margin:0;

}

.zf-tag input{

    display:none;

}

.zf-tag span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border:1px solid #d9d9d9;

    border-radius:30px;

    background:#fff;

    color:#333;

    font-size:14px;

    font-weight:500;

    transition:.25s;

}

.zf-tag:hover span{

    border-color:#0d8f2c;

    color:#0d8f2c;

    background:#f5fff7;

}


/*==================================================
    ACTIVE
==================================================*/

.zf-tag input:checked + span{

    background:#0d8f2c;

    color:#fff;

    border-color:#0d8f2c;

    box-shadow:0 5px 12px rgba(13,143,44,.18);

}
/*==================================================
    TOOLBAR
==================================================*/

.zf-toolbar{

    display:flex;

    gap:20px;

    align-items:flex-end;

    margin-top:28px;

    padding-top:20px;

    border-top:1px solid #f3f3f3;

}

.zf-select{

    flex:1;

}

.zf-select label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:700;

    color:#222;

}

.zf-select select{

    width:100%;

    height:46px;

    border:1px solid #d9d9d9;

    border-radius:10px;

    background:#fff;

    padding:0 15px;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.zf-select select:focus{

    border-color:#0d8f2c;

    box-shadow:0 0 0 3px rgba(13,143,44,.12);

}


/*==================================================
    FILTER RESULT
==================================================*/

#filter-result{

    position:relative;

    min-height:220px;

}

#filter-result.loading{

    pointer-events:none;

    opacity:.6;

    transition:.25s;

}


/*==================================================
    LOADING
==================================================*/

.filter-loading{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    min-height:220px;

}

.filter-loading p{

    margin-top:12px;

    color:#666;

    font-size:14px;

}

.spinner-border{

    width:42px;

    height:42px;

    border:4px solid #e5e5e5;

    border-top:4px solid #0d8f2c;

    border-radius:50%;

    animation:zfSpin .8s linear infinite;

}

@keyframes zfSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
    PAGINATION
==================================================*/

.ajax-pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:35px;

}

.ajax-pagination a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    border:1px solid #ddd;

    text-decoration:none;

    color:#333;

    transition:.25s;

}

.ajax-pagination a:hover{

    background:#0d8f2c;

    border-color:#0d8f2c;

    color:#fff;

}

.ajax-pagination .active{

    background:#0d8f2c;

    border-color:#0d8f2c;

    color:#fff;

}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px){

    .zf-filter{

        padding:18px;

    }

    .zf-toolbar{

        flex-direction:column;

        gap:15px;

    }

    .zf-select{

        width:100%;

    }

}

@media(max-width:768px){

    .zf-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .zf-title{

        font-size:20px;

    }

    .zf-tags{

        gap:8px;

    }

    .zf-tag span{

        min-height:36px;

        padding:0 14px;

        font-size:13px;

    }

    .zf-select select{

        height:42px;

        font-size:14px;

    }

}