/* ================================================================
   FILTERS.CSS — Estilos Modernizados para Filtros e Chips
   Versão B: Azul‑Cinzento Suave
================================================================ */

/* ==== FILTERS CHIPS PANEL (CORREÇÃO DEFINITIVA) ==== */
.filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.filters.hidden {
    display: none !important;
}

.filter-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f1f5f9;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d6dde6;
    width: 100%;
}

/* ----- TÍTULOS DE GRUPOS DE FILTROS ----------------------------- */

.filter-title {
    font-size: 15px;
    font-weight: 600;
    color: #39516a;
}

/* ----- BLOCOS DE FILTROS ---------------------------------------- */

.filter-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f1f5f9;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d6dde6;
}

.filter-block.hidden {
    display: none;
}

/* ----- DROPDOWN ITEMS (USADOS TANTO EM PC COMO EM MOBILE) ------- */

.dropdown .item {
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #1e293b;
    transition: background 0.15s ease;
}

.dropdown .item:hover {
    background: #e2e8f0;
}

/* ----- PAINEL STICKY DE FILTROS (ZONA CINZENTA SUPERIOR) ------- */

.filters-sticky {
    background: #f8fafc;
    border-bottom: 1px solid #cdd5df;
    padding: 12px;
}

.filters-sticky {
    width: 100%;
    overflow-x: visible;
}

/* ----- BOTÃO 3 ESTADOS (LOCAL / CONTEÚDO / OUTRA INFO) ---------- */

#toggleSecondaryBtn {
    background: #4C7DA6;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

#toggleSecondaryBtn:hover {
    background: #6FA3C5;
}

/* ----- Filtros em modo Mobile (<700px) --------------------------- */

@media (max-width: 700px) {

    .filter-block {
        padding: 8px;
    }

    .chip-btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    #toggleSecondaryBtn {
        width: 100%;
        padding: 8px;
        font-size: 14px;
    }

}

.filters-sticky {
    width: 100%;
    overflow-x: visible;
}

.filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.filter-block {
    flex: 1 1 200px;
    /* 200px mínimo, ajustável */
    min-width: 180px;
}

/* === Scroll ONLY inside dropdowns === */
.dropdown {
    max-height: 60vh;
    /* não excede a altura do ecrã */
    overflow-y: auto;
    /* ativa scroll interno */
    overscroll-behavior: contain;
    /* impede scroll no body */
    scrollbar-width: thin;
    /* Firefox */
}

.dropdown::-webkit-scrollbar {
    width: 8px;
}

.dropdown::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 6px;
}

.dropdown::-webkit-scrollbar-track {
    background: #e5e7eb;
}