/* ═══════════════════════════════════════════════════════════════════════════════
   BIBLIOTECA FILTROS — CSS FRONTEND
   Edite as variáveis em :root para customizar cores e tamanhos globalmente.
   Para ajustes finos, edite as seções específicas abaixo.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Variáveis customizáveis ────────────────────────────────────────────────── */
:root {
    /* Checkbuttons e Radio */
    --bf-filtro-bg:          #fff;
    --bf-filtro-cor:         #444;
    --bf-filtro-borda:       #d0d0d0;
    --bf-filtro-radius:      20px;       /* arredondamento dos botões */
    --bf-filtro-ativo-bg:    #1a1a1a;   /* fundo do botão ativo */
    --bf-filtro-ativo-cor:   #fff;      /* texto do botão ativo */
    --bf-filtro-ativo-borda: #1a1a1a;

    /* Dropdown (select) */
    --bf-select-bg:          #fff;
    --bf-select-cor:         #444;
    --bf-select-borda:       #d0d0d0;
    --bf-select-radius:      6px;

    /* Botão "Carregar mais" */
    --bf-btn-mais-bg:        transparent;
    --bf-btn-mais-cor:       #1a1a1a;
    --bf-btn-mais-borda:     #1a1a1a;
    --bf-btn-mais-radius:    6px;

    /* Grid */
    --bf-grid-gap:           20px;
}

/* ─── Seção ──────────────────────────────────────────────────────────────────── */
.bf-secao { margin-bottom: 3rem; }
.bf-secao__titulo { margin-bottom: 1rem; }

/* ─── Filtros (wrapper) ──────────────────────────────────────────────────────── */
.bf-secao .bf-filtro-linha {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

.bf-filtro-label {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}


.bf-secao .bf-filtros {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 1.5rem !important;
    align-items: flex-start !important;
}

/* ─── Dropdown ───────────────────────────────────────────────────────────────── */
.bf-select {
    padding: 8px 14px;
    border: 1px solid var(--bf-select-borda);
    border-radius: var(--bf-select-radius);
    background: var(--bf-select-bg);
    color: var(--bf-select-cor);
    font-size: .9rem;
    cursor: pointer;
    min-width: 180px;
}
.bf-select:focus { outline: none; border-color: #888; }

/* ─── Checkbuttons ───────────────────────────────────────────────────────────── */
.bf-secao .bf-filtro-group--check,
.bf-secao .bf-filtro-group--radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.bf-chk-state { display: none; }

.bf-secao .bf-check-btn {
    display: inline-block !important;
    padding: 6px 14px;
    border: 1px solid var(--bf-filtro-borda);
    border-radius: var(--bf-filtro-radius);
    background: var(--bf-filtro-bg);
    color: var(--bf-filtro-cor);
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    text-align: left !important;
}

.bf-check-btn:hover {
    border-color: var(--bf-filtro-ativo-borda);
}

.bf-check-btn--ativo,
.bf-secao .bf-filtro-group--check .bf-check-btn--ativo {
    background: var(--bf-filtro-ativo-bg) !important;
    color: var(--bf-filtro-ativo-cor) !important;
    border-color: var(--bf-filtro-ativo-borda) !important;
}

/* ─── Radio buttons ──────────────────────────────────────────────────────────── */
.bf-filtro-group--radio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bf-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--bf-filtro-borda);
    border-radius: var(--bf-filtro-radius);
    background: var(--bf-filtro-bg);
    color: var(--bf-filtro-cor);
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.bf-radio-label input[type="radio"] { display: none; }

.bf-radio-label--ativo {
    background: var(--bf-filtro-ativo-bg) !important;
    color: var(--bf-filtro-ativo-cor) !important;
    border-color: var(--bf-filtro-ativo-borda) !important;
}

/* ─── Grid de resultados ─────────────────────────────────────────────────────── */
.bf-resultado {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* sobrescrito inline por seção */
    gap: var(--bf-grid-gap) !important;
    align-items: stretch !important;
}

/* Garante que o template do Elementor ocupe toda a altura da célula */
.bf-resultado > .e-loop-item {
    height: 100% !important;
}
.bf-resultado > .e-loop-item > .elementor-element.e-flex {
    height: 100% !important;
}

/* ─── Card (padrão interno — não afeta template Elementor) ───────────────────── */
.bf-card {
    padding: 1rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bf-card__titulo  { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.4; }
.bf-card__autores { font-size: .875rem; color: #666; margin: 0; }
.bf-card__btn {
    display: inline-block;
    margin-top: auto;
    padding: 6px 16px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: .875rem;
    text-decoration: none;
    align-self: flex-start;
    transition: background .15s, color .15s;
}
.bf-card__btn:hover { background: currentColor; }

/* ─── Carregar mais ──────────────────────────────────────────────────────────── */
.bf-carregar-mais-wrap {
    text-align: center;
    margin-top: 24px;
}

.bf-carregar-mais {
    padding: 10px 28px;
    border: 1px solid var(--bf-btn-mais-borda);
    border-radius: var(--bf-btn-mais-radius);
    background: var(--bf-btn-mais-bg);
    color: var(--bf-btn-mais-cor);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bf-carregar-mais:hover:not(:disabled) {
    background: var(--bf-btn-mais-cor);
    color: #fff;
}
.bf-carregar-mais:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Estados ────────────────────────────────────────────────────────────────── */
.bf-carregando,
.bf-sem-resultado { color: #888; font-style: italic; grid-column: 1 / -1; }
.bf-erro { color: #c0392b; grid-column: 1 / -1; }

.bf-resultado--carregando {
    opacity: .5;
    pointer-events: none;
    transition: opacity .2s;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ÁREA DE CUSTOMIZAÇÃO — cole seus overrides abaixo desta linha
   Exemplos:
   
   Para mudar a cor dos filtros globalmente:
   :root { --bf-filtro-ativo-bg: #e63946; --bf-filtro-ativo-cor: #fff; }

   Para mudar só os checkbuttons de uma seção específica (ex: tipo "teses"):
   .bf-secao[data-tipo="teses"] .bf-check-btn--ativo { background: #2a9d8f; }

   Para remover borda dos cards:
   .bf-card { border: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Responsivo ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bf-resultado {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .bf-resultado {
        grid-template-columns: 1fr !important;
    }

    .bf-secao .bf-filtros {
        gap: 16px !important;
    }

    .bf-check-btn {
        font-size: .8rem;
        padding: 5px 10px;
    }
}