/* ===========================================================================
   imoveis.css — estilos EXCLUSIVOS da listagem (pages/listagem.php)
   ---------------------------------------------------------------------------
   Vale para /vendas e /locacao. O card de imóvel e o grid ficam no style.css
   (são compartilhados com a home). Aqui: topo da página, filtros, status da
   busca e o rodapé do scroll infinito.
   =========================================================================== */

/* --- Topo da listagem ----------------------------------------------------- */
/* O cabeçalho acompanha a largura da grade, senão o título fica desalinhado
   da primeira coluna de cards. */

.listagem__topo {
    padding-block: var(--gap-lg);
    background: var(--cor-fundo-alt);
    border-bottom: 1px solid var(--cor-borda);
}

.listagem__titulo { margin: 0; font-size: var(--fs-3xl); }

.listagem__subtitulo {
    margin: .35rem 0 0;
    color: var(--cor-texto-suave);
}

/* .migalhas agora é global — ver style.css (evita ficar sem estilo em
   páginas que carregassem outro CSS de página). */

/* ===========================================================================
   BUSCA NA LATERAL
   ---------------------------------------------------------------------------
   Uma etapa só numa coluna que acompanha o scroll: o visitante ajusta o
   filtro e vê a lista mudar do lado, sem perder os campos de vista e sem
   clicar em "Buscar" — quem aplica é o busca.js, a cada escolha (código de
   imóvel é exceção: submit normal, PHP redireciona direto pro imóvel).

   No celular a mesma caixa vira uma gaveta que sobe pelo botão "Filtros".
   =========================================================================== */
/* Largura própria, maior que a do resto do site: aqui o que importa é caber
   card, e 4 colunas + lateral não cabem nos 1240px do .container. */
.listagem__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--gap-sm);
    width: 100%;
    margin-inline: auto;
    padding: var(--gap-lg) var(--container-pad);
}

/* SEM `align-items: start` aqui de propósito: com ele a coluna encolhe para a
   altura da caixa, e um sticky dentro de uma caixa do próprio tamanho não tem
   para onde deslizar — era por isso que a busca não acompanhava o scroll.
   Esticando a coluna (padrão do grid), a caixa gruda e desce junto. */
.filtros { min-width: 0; }

.filtros__caixa {
    display: flex;
    flex-direction: column;
    padding: .85rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra-sm);
}

/* Grudar E rolar por dentro só quando sobra altura de tela para valer a pena.
   Numa janela baixa, uma caixa presa no topo com scroll próprio deixaria os
   últimos campos difíceis de alcançar — aí é melhor ela rolar junto com a
   página inteira, sem `sticky` nem altura travada.
   O dropdown pode abrir por cima porque agora é `position: fixed` (relativo à
   JANELA, não a esta caixa) — ver .dropdown__menu em style.css e a conta de
   posição em dropdown.js. Sem isso, o `overflow` abaixo cortaria o menu. */
@media (min-height: 760px) {
    .filtros__caixa {
        position: sticky;
        top: calc(var(--altura-header) + var(--gap));
        max-height: calc(100vh - var(--altura-header) - var(--gap) * 2);
        overflow: hidden;
    }
}

/* --- Campos --------------------------------------------------------------- */
/* O formulário é um flex column que ocupa a caixa inteira — só a área de
   campos rola por dentro, ver .filtros__campos. */
.filtros__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: .65rem;
}

/* Único trecho que rola quando a lista de campos é maior que a caixa: o
   rodapé (Buscar/Copiar/Limpar) fica sempre visível. */
.filtros__campos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: .65rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Some do conteúdo com a barra de rolagem colada nele. */
    margin-right: -.85rem;
    padding-right: .85rem;
}

/* Rodapé fixo: some do fluxo que rola, sempre visível no fim da caixa. */
.filtros__rodape {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: .5rem;
    padding-top: .65rem;
    margin-top: .65rem;
    border-top: 1px solid var(--cor-borda);
}

/* Versão compacta dos campos DENTRO da lateral — só aqui, não no resto do
   site: a busca da home e os formulários de contato continuam no tamanho
   normal, que é o que combina com telas maiores. Aqui o espaço é 300px de
   largura ao lado da grade de cards, então cada campo cede um pouco. */
.filtros__form .campo { gap: .2rem; }

.filtros__form .campo label,
.filtros__form .campo__rotulo {
    font-size: .7rem;
}

.filtros__form .dropdown__gatilho,
.filtros__form .campo > input,
.filtros__form .campo-moeda {
    padding: .5rem .65rem;
    font-size: var(--fs-sm);
}

.filtros__form .dropdown__seta { width: 14px; height: 14px; }

/* Fio fino entre grupos de campos — separa "onde" (tipo/cidade/bairro/condomínio)
   de "quanto" (pílulas + faixas) de "o quê" (palavra-chave), sem precisar de
   título de seção para cada bloco. */
.filtros__fio {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--cor-borda);
}

/* Rótulo "solto", para campos sem <label> de input único (Preço, Área — cada
   um tem DOIS inputs, então o rótulo fica no grupo, não num <label for>). */
.campo__rotulo {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* Preço e Área: dois campos-moeda com um travessão entre os dois. */
.filtros__faixa {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.filtros__faixa .campo-moeda { flex: 1; min-width: 0; }

.filtros__travessao {
    flex: none;
    color: var(--cor-texto-suave);
}

.filtros__dica {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--cor-texto-suave);
}

/* Agora mora no rodapé fixo (sempre visível), então ganha contorno próprio
   em vez do link discreto de antes — sem isso ficava parecendo desativado
   ao lado do botão "Buscar" preenchido. */
.filtros__limpar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .65rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: none;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: border-color var(--transicao), color var(--transicao);
}

.filtros__limpar svg { width: 15px; height: 15px; }
.filtros__limpar:hover { border-color: var(--cor-escura); color: var(--cor-escura); }

/* ===========================================================================
   PÍLULAS (Qualquer | 1+ | 2+ | 3+ ...) — ver pages/partials/pills.php
   ---------------------------------------------------------------------------
   São <input type="radio"> nativos: o input fica visualmente escondido (mas
   presente, focável, lido por leitor de tela) e quem aparece é o <span>
   ao lado. `input:checked + span` pinta a pílula ativa — o mesmo truque que
   `.filtros__modo[aria-pressed]` usa com JS, só que aqui é CSS puro porque o
   estado É o próprio radio.
   =========================================================================== */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.pills__opcao {
    position: relative;
    cursor: pointer;
}

/* Escondido visualmente, não com display:none — precisa continuar focável. */
.pills__opcao input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pills__opcao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    padding: .32rem .6rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    background: var(--cor-branco);
    font-size: .75rem;
    font-weight: 600;
    color: var(--cor-texto);
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.pills__opcao:hover span { border-color: var(--cor-texto-suave); }

/* Ativa: preta e cheia — mesmo padrão do .btn--secundario, para não competir
   com o amarelo da marca numa fileira de vários toggles pequenos. */
.pills__opcao input:checked + span {
    background: var(--cor-escura);
    border-color: var(--cor-escura);
    color: var(--cor-branco);
}

.pills__opcao input:focus-visible + span {
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--cor-primaria-suave);
}

/* DROPDOWN COM CHECKBOXES (Bairro/Tipo/Características) — TODO O ESTILO
   (LABEL, CHECKBOX PRÓPRIO, SPAN) MOROU EM STYLE.CSS (.dropdown__opcao--checkbox
   E FILHOS). ESTE BLOCO EXISTIA DUPLICADO AQUI (input NATIVO COM accent-color,
   GAP/CURSOR DIFERENTE) — CARREGANDO DEPOIS DE STYLE.CSS, ACABAVA
   SOBRESCREVENDO O QUE TINHA A MESMA ESPECIFICIDADE (display/gap/cursor do
   .dropdown__opcao--checkbox) E DEIXANDO O CHECKBOX INCONSISTENTE ENTRE
   PÁGINAS. REMOVIDO DAQUI DE PROPÓSITO — MEXEU NO CHECKBOX, MEXA SÓ EM
   STYLE.CSS. */
.dropdown__opcao--checkbox:hover { background: var(--cor-fundo-alt); }

/* Botão que abre a gaveta no celular — escondido no desktop. */
.filtros__abrir { display: none; }

/* Botão "Buscar": só existe no celular (ver por quê em busca.js, seção 2 —
   no desktop cada escolha já refaz a lista sozinha). Fica junto do resto do
   form; a troca de visibilidade por tamanho de tela é só isto, o
   comportamento por trás é decidido em JS via matchMedia. */
.filtros__buscar { display: none; }

/* --- Resultados ----------------------------------------------------------- */
.listagem__resultados { min-width: 0; }

/* Quatro colunas de imóveis ao lado da busca. O grid compartilhado (style.css)
   é `auto-fill`, que aqui daria de 3 a 6 colunas conforme a tela; na listagem
   a contagem é fixa para a página não mudar de cara a cada tamanho de janela. */
.listagem__resultados .grid-imoveis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Sem isto o toggle "Mapa" NUNCA esconde a lista: `display: grid` acima vence
   o atributo `hidden` (que é só um `display: none` da folha do navegador) —
   mesmo caso de .scroll-loading[hidden] logo abaixo. */
#lista-imoveis[hidden] { display: none; }

.listagem__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm, .6rem) var(--gap);
    margin-bottom: var(--gap);
}

.busca-status {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-texto-suave);
}

/* --- "Ordenar por" na mesma linha do status ("X imóveis encontrados"),
   não mais dentro da aside de filtros — só o CAMPO mudou de lugar
   (form="form-busca" em dropdown.php mantém ele associado ao formulário
   de verdade pra continuar entrando no FormData que busca.js lê). --- */
.listagem__barra-acoes {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, .6rem);
}

.listagem__ordenar { width: 180px; }
.listagem__ordenar .campo--dropdown { margin: 0; }
/* Rótulo "Ordenar por" continua no DOM (leitor de tela/aria-labelledby),
   só não ocupa linha própria aqui — o botão já é claro sozinho ao lado do
   "X imóveis encontrados". */
.listagem__ordenar .campo--dropdown > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .listagem__barra-acoes { flex-wrap: wrap; }
    .listagem__ordenar { width: 100%; order: 1; }
}

.scroll-sentinela { height: 1px; }

.scroll-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: var(--gap-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-texto-suave);
}

/* Sem isto o spinner NUNCA some: o `display: flex` acima vence o atributo
   `hidden` (que é só um `display: none` da folha do navegador). O JS esconde
   pelo atributo, então a regra precisa existir. */
.scroll-loading[hidden] { display: none; }

/* --- Estado vazio (0 imóveis com os filtros atuais) — grid.busca.js
   substitui #lista-imoveis por este bloco em vez de deixar a tela em
   branco abaixo do aviso de texto. --- */
.busca-vazia {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm, .6rem);
    padding: var(--gap-lg, 3rem) var(--gap-md, 1.5rem);
    text-align: center;
}

/* SEM O CARTÃO CINZA POR BAIXO (REMOVIDO ACIMA), O CÍRCULO PRECISA DE TINTA
   PRÓPRIA PRA APARECER NO FUNDO BRANCO DA PÁGINA — BRANCO SOBRE BRANCO SUMIA. */
.busca-vazia__icone {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cor-fundo-alt, #f0f2f5);
    color: var(--cor-primaria, var(--cor-escura));
}
.busca-vazia__icone svg { width: 28px; height: 28px; }

.busca-vazia__titulo {
    margin: 0;
    font-size: var(--fs-lg, 1.15rem);
    font-weight: 700;
    color: var(--cor-escura);
}

.busca-vazia__texto {
    margin: 0;
    max-width: 40ch;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

.scroll-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--cor-borda);
    border-top-color: var(--cor-escura);
    border-radius: 50%;
    animation: girando .7s linear infinite;
}

@keyframes girando { to { transform: rotate(360deg); } }

/* --- Responsivo ----------------------------------------------------------- */
@media (max-width: 1500px) {
    .listagem__resultados .grid-imoveis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .listagem__grid { grid-template-columns: 260px minmax(0, 1fr); gap: var(--gap-md); }
    .listagem__resultados .grid-imoveis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    /* Sem largura para as duas colunas: a busca vira gaveta, aberta pelo botão
       fixo no rodapé da tela (ver .filtros__abrir abaixo). */
    .listagem__grid { grid-template-columns: 1fr; }

    /* Sobra de espaço embaixo pros cards não ficarem escondidos atrás do
       botão "Filtros", que agora é fixo no rodapé da tela. */
    .listagem__resultados {
        padding-bottom: calc(3.6rem + env(safe-area-inset-bottom));
    }

    .filtros {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: none;
        padding: var(--gap);
        background: rgba(0, 0, 0, .5);
    }

    .filtros--aberto { display: block; }

    /* A caixa nunca passa da tela: quem rola é só .filtros__campos (dentro
       dela), não mais o fundo (.filtros). Duas barras de rolagem encaixadas
       (uma dentro da outra) era ruim de usar em qualquer tela, pior ainda no
       toque — e travava a caixa acima da altura da tela, obrigando a rolar
       a gaveta inteira só pra achar "Buscar"/"Limpar" no fim. */
    .filtros__caixa {
        position: static;
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - var(--gap) * 2);
        overflow: hidden;
        max-width: 420px;
        width: 100%;
        margin-inline: auto;
    }

    .filtros__campos {
        overflow-y: auto;
        overscroll-behavior: contain;
        flex: 1;
        min-height: 0;
    }

    .filtros__rodape { flex: none; }

    /* Botão que abre a gaveta: fixo no rodapé da tela, sempre à vista
       (antes ficava ao lado do contador de resultados, e quem não rolasse
       até ele nem sabia que dava pra filtrar). Some enquanto a gaveta está
       aberta — ela já cobre a tela inteira, não precisa do botão por baixo. */
    .filtros__abrir {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 70;
        width: 100%;
        border-radius: 0;
        justify-content: center;
        padding: .9rem var(--gap) calc(.9rem + env(safe-area-inset-bottom));
        border-width: 0;
        border-top: 1px solid var(--cor-borda);
        background: var(--cor-branco);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }

    body.filtros-abertos .filtros__abrir { display: none; }

    .filtros__buscar { display: flex; }

    /* Trava o fundo enquanto a gaveta está aberta. */
    body.filtros-abertos { overflow: hidden; }
}

@media (max-width: 575px) {
    .listagem__resultados .grid-imoveis { grid-template-columns: 1fr; }
}

/* ===========================================================================
   VISUAL DO MARQUES — busca lateral "Refine sua busca" + cabeçalho dos resultados
   ---------------------------------------------------------------------------
   Sobrescreve o que está acima (mesmos controles e mesmo JS; só a aparência):
   cada filtro vira uma LINHA (rótulo em caixa alta + valor/“Selecione” em
   cinza + setinha), sem caixa de campo; título grande com fio laranja.
   =========================================================================== */
.listagem {
    background: #fafafa;
}

.listagem__grid {
    grid-template-columns: 335px minmax(0, 1fr);
    gap: 14px;
    max-width: none;
    padding: 50px clamp(1rem, 3vw, 3rem);
}

/* --- Caixa lateral ----------------------------------------------------------- */
.filtros__caixa {
    padding: 0;
    border: 0;
    border-top: 3px solid var(--cor-primaria);
    border-radius: 10px;
    background: var(--cor-branco);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

@media (min-height: 760px) {
    .filtros__caixa {
        max-height: calc(100vh - var(--altura-header) - var(--gap) * 2);
    }
}

.filtros__cabecalho {
    flex: none;
    padding: 10px 20px;
    background: var(--cor-escura);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cor-branco);
}

.filtros__form {
    gap: 0;
}

.filtros__campos {
    gap: 0;
    margin-right: 0;
    padding-right: 0;
}

.filtros__fio {
    display: none;
}

/* Cada filtro = uma linha. */
.filtros__form .campo {
    gap: 4px;
    padding: 16px 20px;
    border-bottom: 1px solid #ececec;
}

.filtros__form .campo > label,
.filtros__form .campo__rotulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-escura);
}

/* O controle perde a "cara de campo": só o texto cinza e a seta. */
.filtros__form .dropdown__gatilho,
.filtros__form .campo > input {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    color: #9aa0a6;
}

.filtros__form .dropdown__texto {
    color: var(--cor-escura);
}

.filtros__form .dropdown__texto--vazio {
    color: #9aa0a6;
}

.filtros__form .campo > input::placeholder {
    color: #9aa0a6;
}

.filtros__form .campo > input:focus {
    outline: none;
    color: var(--cor-escura);
}

.filtros__form .dropdown__seta {
    width: 14px;
    height: 14px;
    color: #9aa0a6;
}

/* Faixas (Área / Preço): caixinhas discretas lado a lado. */
.filtros__form .campo-moeda {
    padding: .45rem .6rem;
    border: 1px solid #e3e5e8;
    border-radius: 4px;
    background: var(--cor-branco);
}

.filtros__faixa {
    margin-top: 6px;
}

/* Rodapé: "LIMPAR FILTROS" laranja, centralizado, com fio laranja em cima. */
.filtros__rodape {
    margin-top: 0;
    padding: 0;
    border-top: 2px solid var(--cor-primaria);
}

.filtros__limpar {
    gap: .5rem;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: var(--cor-branco);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.filtros__limpar:hover {
    border: 0;
    background: #fff7ef;
    color: var(--cor-primaria-escura);
}

.filtros__buscar {
    margin: 12px 20px 0;
    width: calc(100% - 40px);
}

/* --- Resultados --------------------------------------------------------------- */
.listagem__titulo {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 16px;
    font-size: clamp(1.9rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--cor-escura);
}

.listagem__titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--cor-primaria);
}

.listagem__barra {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e5e8;
}

.busca-status {
    font-size: 15px;
    font-weight: 700;
    color: var(--cor-escura);
}

.listagem__ordenar {
    width: 190px;
}

.listagem__ordenar .dropdown__gatilho {
    padding: 14px 18px;
    border: 1px solid #e3e5e8;
    border-radius: 4px;
    background: var(--cor-branco);
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-escura);
}

.listagem__ordenar .dropdown__texto--vazio {
    color: var(--cor-escura);
}

.listagem__resultados .grid-imoveis {
    gap: 14px;
}

@media (max-width: 1100px) {
    .listagem__grid { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .listagem__grid { grid-template-columns: 1fr; padding-top: 28px; }
}

/* ===========================================================================
   ACORDEÃO — cada filtro abre DENTRO da barra (igual ao Marques), não num menu
   flutuante. É o mesmo dropdown.js / dropdown-checkboxes.js de sempre: o JS
   continua abrindo e fechando (atributo `hidden`) e escrevendo top/left/width
   inline; aqui o menu é tirado do posicionamento fixo (`!important` vence o
   estilo inline) e vira um bloco no fluxo, logo abaixo do rótulo.
   =========================================================================== */
.filtros__form .campo {
    position: relative;
}

.filtros .dropdown,
.filtros .dropdown__gatilho {
    position: static;
}

.filtros .dropdown__menu,
.filtros .dropdown__painel {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-height: none !important;
    margin: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    z-index: auto;
}

.filtros .dropdown__menu {
    max-height: 270px !important;
    padding: 0 6px 0 0;
    overflow-y: auto;
}

.filtros .dropdown__painel {
    overflow: visible;
}

.filtros .dropdown__painel .dropdown__menu {
    max-height: 250px !important;
    margin: 0;
}

.filtros .dropdown__painel .dropdown__busca {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #f4f5f7;
    font-size: 14px;
}

/* Setinha no canto da linha; aberta, vira o círculo laranja claro com a seta para cima. */
.filtros__form .dropdown__seta {
    position: absolute;
    top: 18px;
    right: 20px;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 7px;
    border-radius: 50%;
    color: #b3b8be;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.filtros__form .campo:has(.dropdown--aberto) .dropdown__seta {
    background: #fdeedd;
    color: var(--cor-primaria);
}

.filtros__form .campo:has(.dropdown--aberto) > label {
    color: var(--cor-primaria);
}

.filtros__form .campo:has(.dropdown--aberto) .dropdown__texto--vazio {
    color: var(--cor-primaria);
}

.filtros__form .dropdown__gatilho {
    width: 100%;
    cursor: pointer;
}

/* Opções = linhas com caixinha de marcar (Cidade e quantidades são de escolha única, mas
   têm a mesma cara). A opção vazia ("Selecione") não faz sentido na lista aberta. */
.filtros li.dropdown__opcao {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 6px;
    border-bottom: 1px solid #eee;
    box-shadow: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #14213d;
    white-space: normal;
}

.filtros li.dropdown__opcao[data-valor=""] {
    display: none;
}

.filtros li.dropdown__opcao::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c9ccd1;
    border-radius: 3px;
    background: var(--cor-branco) center / 11px no-repeat;
}

.filtros li.dropdown__opcao[aria-selected="true"]::before {
    border-color: var(--cor-primaria);
    background-color: var(--cor-primaria);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.filtros li.dropdown__opcao:hover,
.filtros li.dropdown__opcao--ativa {
    background: #fafafa;
}

.filtros .dropdown__opcao--checkbox {
    gap: 14px;
    padding: 11px 6px;
    border-bottom: 1px solid #eee;
    background: transparent;
}

.filtros .dropdown__opcao--checkbox span {
    font-size: 13px;
    font-weight: 700;
    color: #14213d;
}

.filtros [data-dropdown-nome="tipo"] .dropdown__opcao--checkbox span {
    text-transform: uppercase;
}

.filtros .dropdown__opcao--checkbox:hover {
    background: #fafafa;
}

/* --- Código / Área / Preço: <details>, mesma cara de linha --------------------- */
.filtros__acordeao {
    position: relative;
    border-bottom: 1px solid #ececec;
}

.filtros__acordeao summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 52px 16px 20px;
    list-style: none;
    cursor: pointer;
}

.filtros__acordeao summary::-webkit-details-marker {
    display: none;
}

.filtros__acordeao-rotulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-escura);
}

.filtros__acordeao-dica {
    font-size: 15px;
    color: #9aa0a6;
}

.filtros__acordeao summary::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 20px;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 7px;
    border-radius: 50%;
    background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23b3b8be'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    transition: background-color var(--transicao), transform var(--transicao);
}

.filtros__acordeao[open] summary::after {
    background-color: #fdeedd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ff7e00'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}

.filtros__acordeao[open] .filtros__acordeao-rotulo {
    color: var(--cor-primaria);
}

.filtros__acordeao-corpo {
    padding: 0 20px 18px;
}

.filtros__acordeao-corpo > input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e3e5e8;
    border-radius: 6px;
    font-size: 14px;
    color: var(--cor-escura);
}

.filtros__acordeao-corpo .filtros__faixa {
    margin-top: 0;
}

/* --- Ajustes: campos de número dentro do acordeão de Área e as linhas de Valor ---------
   `.campo .campo-moeda__campo` (style.css) só zera borda/padding do input quando há um
   `.campo` por perto; dentro do <details> não há, então o input aparecia com borda própria
   e estourava a caixinha. Aqui a regra vale também para o corpo do acordeão e para as
   linhas "Valor mínimo" / "Valor máximo" (sem caixinha: só o texto cinza, como as outras). */
.filtros__acordeao-corpo .campo-moeda__campo,
.filtros__form .campo-moeda--linha .campo-moeda__campo {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    color: var(--cor-escura);
}

.filtros__acordeao-corpo .campo-moeda__campo:focus,
.filtros__form .campo-moeda--linha .campo-moeda__campo:focus {
    outline: none;
    box-shadow: none;
}

.filtros__acordeao-corpo .campo-moeda__campo::placeholder,
.filtros__form .campo-moeda--linha .campo-moeda__campo::placeholder {
    color: #9aa0a6;
}

.filtros__form .campo-moeda--linha {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.filtros__form .campo-moeda--linha:focus-within {
    outline: none;
    box-shadow: none;
}

.filtros__acordeao-corpo .filtros__faixa {
    gap: .5rem;
}

.filtros__acordeao-corpo .campo-moeda {
    flex: 1;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid #e3e5e8;
    border-radius: 6px;
    background: var(--cor-branco);
}

/* A linha inteira do acordeão é clicável (ver busca.js): cursor de mão na linha, normal dentro da lista aberta. */
.filtros__form .campo:has([data-dropdown-gatilho]),
.filtros__form .campo:has([data-dropdown-checkboxes-gatilho]) {
    cursor: pointer;
}

.filtros__form .dropdown__menu,
.filtros__form .dropdown__painel {
    cursor: default;
}

.filtros__form li.dropdown__opcao,
.filtros__form .dropdown__opcao--checkbox {
    cursor: pointer;
}

/* "Ordenar por": a opção ativa (Menor valor por padrão) aparece em negrito sobre cinza, sem o fio lateral;
   a opção vazia do dropdown (placeholder) não entra na lista. */
.listagem__ordenar li.dropdown__opcao[data-valor=""] {
    display: none;
}

.listagem__ordenar .dropdown__opcao[aria-selected="true"] {
    background: #dfe3e3;
    box-shadow: none;
}

/* Hover nas linhas do acordeão: fundo cinza claro (e cursor de mão, definido acima). */
.filtros__form .campo:has([data-dropdown-gatilho]),
.filtros__form .campo:has([data-dropdown-checkboxes-gatilho]),
.filtros__acordeao summary {
    transition: background-color .15s ease;
}

.filtros__form .campo:has([data-dropdown-gatilho]):hover,
.filtros__form .campo:has([data-dropdown-checkboxes-gatilho]):hover,
.filtros__acordeao summary:hover {
    background-color: #f6f6f6;
}

/* Aberto, a linha toda continua em destaque (lista e rótulo) e o hover não "pisca" sobre a lista. */
.filtros__form .campo:has(.dropdown--aberto) {
    background-color: var(--cor-branco);
}

.filtros__form .campo:has(.dropdown--aberto):hover {
    background-color: var(--cor-branco);
}