/* --- ESTILOS PARA DESKTOP --- */
#filtro-container-personalizado { display: flex; flex-direction: column; gap: 10px; }
.bv-filter-group { border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; }
.bv-filter-title { font-size: 1.1em; font-weight: bold; margin: 0 0 10px 0; cursor: pointer; position: relative; padding-right: 25px; user-select: none; text-transform: capitalize; }
.bv-filter-title::after { content: '▾'; position: absolute; right: 5px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; font-size: 1.2em; color: #777; }
.bv-filter-group.is-open .bv-filter-title::after { transform: translateY(-50%) rotate(180deg); }
.filtro-header, .bv-open-filter-btn { display: none; }

/* --- NOVO: Estilo dos Botões de Filtro (Substitui os Checkboxes) --- */
.bv-filter-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    display: flex; /* Alinha os botões lado a lado */
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    gap: 8px;
}
.bv-filter-group.is-open .bv-filter-options {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
    margin-top: 10px;
}

/* Esconde o checkbox original */
.bv-filter-button-label input[type="checkbox"] {
    display: none;
}

/* Estiliza o <span> para parecer um botão */
.bv-filter-button-label span {
    display: block;
    padding: 8px 12px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;
    line-height: 1;
    text-transform: capitalize;
}

/* ESTADO SELECIONADO: A MÁGICA ACONTECE AQUI */
/* Quando o checkbox escondido está marcado, estiliza o <span> irmão dele */
.bv-filter-button-label input[type="checkbox"]:checked + span {
    border-color: var(--e-global-color-primary);
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-secondary, #fff);
}


/* --- ESTILOS PARA MOBILE --- */
@media (max-width: 767px) {
    #coluna-filtro { display: none; }
    .bv-open-filter-btn { display: block; position: fixed; bottom: 15px; left: 20px; z-index: 998; background-color: var(--e-global-color-primary); color: var(--e-global-color-secondary, #fff); border: none; border-radius: 20px; padding: 12px 24px; font-size: 1em; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; }
    #filtro-container-personalizado { position: fixed; top: 0; left: 0; width: 85%; max-width: 320px; height: 100vh; background-color: #fff; z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; padding: 20px; box-sizing: border-box; box-shadow: 3px 0 15px rgba(0,0,0,0.1); }
    #filtro-container-personalizado.is-visible { transform: translateX(0); }
    .filtro-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
    .filtro-header-title { font-size: 1.2em; font-weight: bold; }
    .bv-close-filter-btn { background: none; border: none; font-size: 2.5em; line-height: 1; cursor: pointer; padding: 0; color: #888; }
    .filtro-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .filtro-overlay.is-visible { opacity: 1; visibility: visible; }
}