/*
===========================================
FLOMART Active Filters
Modern UI v1.0
===========================================
*/

.faf-chip{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    border-radius:999px;

    text-decoration:none;

    color:#333;

    background:#fff;

    border:1px solid #e6e6e6;

    transition:.25s;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

.faf-chip:hover{

    background:#f3fcfd;

    border-color:#0b7c84;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


.faf-chip:hover .faf-remove{

    color:#d63031;

}

.faf-clear{

    flex-basis:100%;

    margin-top:18px;

}

.faf-clear a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 18px;

    border-radius:8px;

    background:#0b7c84;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    font-size:14px;

    transition:
    background .25s ease,
    transform .25s ease;


}

.faf-clear a:hover {

    background:#095e64;

    transform:translateY(-1px);

}

@media (max-width: 768px) {

    .faf-wrapper {

        gap: 8px;

    }

    .faf-chip {

        padding: 9px 14px;

    }

    .faf-name {

        font-size: 13px;

    }

}


.faf-wrapper {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:20px 0;

    align-items:center;

}


.faf-remove{

    text-decoration:none;

    font-weight:bold;

    color:inherit;

    margin-left:6px;

    font-size:18px;

    line-height:1;

    opacity:.65;

    cursor:pointer;

    transition:.2s;

}

.faf-remove:hover{

    opacity:1;

}


.faf-name{

    display:inline-block;

}

.faf-swatch{

    width:14px;

    height:14px;

    border-radius:50%;

    border:1px solid #ddd;

    display:inline-block;

    flex-shrink:0;

}