/* ===========================================================================
   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);
}

.filtros__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: .65rem;
}

.filtros__campos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: .65rem;
}

.filtros__rodape {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: .5rem;
    padding-top: .65rem;
    margin-top: .65rem;
    border-top: 1px solid var(--cor-borda);
}

.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-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; }
}

/* ===========================================================================
   LISTAGEM — visual do site xip
   ---------------------------------------------------------------------------
   Fundo cinza claro, título centralizado (leve + negrito), contagem e
   ordenação logo abaixo, cards horizontais à esquerda e busca à direita.
   (Sobrescreve os estilos anteriores acima.)
   =========================================================================== */
.listagem {
    background: var(--cor-site-4);
}

.listagem__topo {
    padding: 60px 0 30px;
    background: transparent;
    border-bottom: none;
    text-align: center;
}

.listagem__titulo {
    margin: 0 0 30px;
    font-size: 48px;
    font-weight: 200;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--cor-site-2);
}

.listagem__titulo strong {
    font-weight: 800;
}

.listagem__barra {
    justify-content: center;
    gap: 20px 30px;
    margin-bottom: 0;
}

.busca-status {
    font-size: 16px;
    font-weight: 500;
    color: var(--cor-site-2);
}

.listagem__ordenar {
    width: 200px;
}

.listagem__ordenar .dropdown__gatilho {
    height: 50px;
    border-radius: 30px;
    font-weight: 700;
}

.listagem__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    padding-inline: 15px;
    gap: 30px;
    padding-top: 30px;
    padding-bottom: 90px;
    align-items: start;
}

.listagem__resultados {
    grid-column: 1;
    grid-row: 1;
}

.filtros {
    grid-column: 2;
    grid-row: 1;
}

.listagem__resultados .grid-imoveis {
    grid-template-columns: 1fr;
    gap: 30px;
}

/* (Cartão horizontal .imovel-linha: movido para o style.css — também é usado no detalhe do imóvel.) */

/* --- Busca lateral (widget claro, cantos arredondados) -------------------- */
.filtros__caixa {
    padding: 28px 26px;
    border: none;
    border-radius: 30px;
    background: var(--cor-branco);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.filtros__form .campo label,
.filtros__form .campo__rotulo,
.filtros__form .campo--dropdown > label {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-site-2);
}

.filtros__form .campo > input,
.filtros__form .dropdown__gatilho {
    border: 1px solid #ddd;
    border-radius: 30px;
    padding-inline: 18px;
}

.filtros__form .campo-moeda {
    border-radius: 30px;
}

.filtros__form .campo-moeda__campo {
    border-radius: 30px;
}

.filtros__buscar,
.filtros__rodape .btn--primario {
    border-radius: 30px;
    background: var(--cor-site-1);
    border-color: var(--cor-site-1);
    color: var(--cor-branco);
}

.filtros__rodape .btn--contorno {
    border-radius: 30px;
    border-color: var(--cor-site-1);
    color: var(--cor-site-1);
}

.filtros__rodape .btn--contorno:hover {
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.filtros__limpar {
    color: var(--cor-site-1);
}

.pills__opcao span {
    border-radius: 30px;
}

.pills__opcao input:checked + span {
    border-color: var(--cor-site-1);
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

/* --- Responsivo ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .listagem__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
    }

    .imovel-linha__foto {
        flex-basis: 240px;
    }
}

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

    .listagem__resultados,
    .filtros {
        grid-column: 1;
    }

    .listagem__topo {
        padding-top: 40px;
    }

    .listagem__titulo {
        font-size: 32px;
    }
}


/* --- Paginação numerada (12 por página), igual ao site xip ---------------- */
.paginacao {
    margin-top: 50px;
    text-align: center;
}

.paginacao[hidden] {
    display: none;
}

.paginacao ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginacao a,
.paginacao .reticencias span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    background: var(--cor-branco);
    font-weight: 700;
    color: var(--cor-site-2);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.paginacao .reticencias span {
    border-color: transparent;
    background: transparent;
    color: #999;
}

.paginacao a:hover,
.paginacao .ativa a {
    border-color: var(--cor-site-1);
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.paginacao a svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    .paginacao ul {
        gap: 5px;
    }

    .paginacao a,
    .paginacao .reticencias span {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* --- Busca lateral: ajustes finos (visual do site xip) -------------------- */
/* Títulos dos grupos: 17px, peso 600, sem caixa alta nem espaçamento entre letras. */
.filtros__form .campo > label,
.filtros__form .campo > .campo__rotulo,
.filtros__form .campo__rotulo {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cor-site-2);
}

.filtros__form .campo {
    gap: .45rem;
}

.filtros__fio {
    border: 0;
    border-top: 1px solid #ececec;
}

/* "Tipo de imóvel" é uma lista solta de checkboxes (variante inline): sem a caixa
   flutuante dos dropdowns, sem sombra nem fundo. */
.filtros__form .dropdown__menu.dropdown__menu--inline {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.filtros__form .dropdown__menu--inline .dropdown__opcao--checkbox {
    padding: 6px 0;
    border-radius: 0;
    background: none;
}

.filtros__form .dropdown__opcao--checkbox span {
    font-size: 16px;
    color: var(--cor-site-2);
}

/* Checkbox vermelho e quadradinho, como o do xip. */
.filtros__form .dropdown__opcao--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 2px solid #c9c9c9;
    border-radius: 4px;
    background-color: var(--cor-branco);
}

.filtros__form .dropdown__opcao--checkbox input[type="checkbox"]:hover {
    border-color: var(--cor-site-1);
}

.filtros__form .dropdown__opcao--checkbox input[type="checkbox"]:checked {
    border-color: var(--cor-site-1);
    background-color: var(--cor-site-1);
    background-size: 14px 14px;
}

.filtros__form .dropdown__vazio {
    margin: 0;
    padding: 6px 0;
    font-size: 15px;
    color: #999;
}

/* --- Busca lateral: campos e checkboxes iguais aos do site xip ------------ */
.filtros__form .campo > label,
.filtros__form .campo > .campo__rotulo,
.filtros__form .campo__rotulo {
    font-size: 18px;
}

/* Campo/dropdown: mais altos, borda de 2px cinza e cantos moderados (não pílula). */
.filtros__form .dropdown__gatilho,
.filtros__form .campo > input,
.filtros__form .campo-moeda {
    min-height: 56px;
    padding: 0 15px;
    border: 2px solid #ddd;
    border-radius: 16px;
    font-size: 16px;
}

.filtros__form .campo-moeda__campo {
    border-radius: 16px;
}

.filtros__form .dropdown__gatilho:hover {
    border-color: #c4c4c4;
}

.filtros__form .dropdown--aberto .dropdown__gatilho,
.filtros__form .campo > input:focus,
.filtros__form .campo-moeda:focus-within {
    border-color: var(--cor-site-1);
}

.filtros__form .dropdown__texto--vazio,
.filtros__form .campo > input::placeholder {
    color: #999;
}

/* Lista de checkboxes: quadrado cinza chapado, texto em cinza negrito; marcado vira vermelho. */
.filtros__form .dropdown__menu--inline .dropdown__opcao--checkbox {
    gap: 12px;
    padding: 9px 0;
}

.filtros__form .dropdown__opcao--checkbox span {
    font-size: 14px;
    font-weight: 700;
    color: #8f8f8f;
}

.filtros__form .dropdown__opcao--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 0;
    border-radius: 0;
    background-color: #a6a6a6;
}

.filtros__form .dropdown__opcao--checkbox:hover input[type="checkbox"],
.filtros__form .dropdown__opcao--checkbox input[type="checkbox"]:hover {
    border: 0;
    background-color: var(--cor-site-1);
}

.filtros__form .dropdown__opcao--checkbox input[type="checkbox"]:checked {
    border: 0;
    background-color: var(--cor-site-1);
    background-size: 14px 14px;
}

.filtros__form .dropdown__opcao--checkbox input[type="checkbox"]:checked + span {
    color: var(--cor-site-2);
}

/* Grupo de filtro escondido (ex.: "Mobília" quando a seção só tem 1 opção) — `.campo` é flex e vence o [hidden]. */
.filtros__form .campo[hidden] {
    display: none;
}

/* --- "Limpar filtros" e estado vazio (sem resultados) --------------------- */
.filtros__limpar {
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid var(--cor-site-1);
    border-radius: 30px;
    background: var(--cor-branco);
    color: var(--cor-site-1);
    font-size: 15px;
    font-weight: 700;
}

.filtros__limpar svg {
    width: 16px;
    height: 16px;
}

.filtros__limpar:hover {
    border-color: var(--cor-site-1);
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.busca-vazia {
    gap: 12px;
    padding: 60px 20px;
}

.busca-vazia__icone {
    width: 84px;
    height: 84px;
    margin-bottom: 6px;
    background: var(--cor-branco);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    color: var(--cor-site-1);
}

.busca-vazia__icone svg {
    width: 34px;
    height: 34px;
}

.busca-vazia__titulo {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--cor-site-2);
}

.busca-vazia__texto {
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.6;
    color: #777;
}

/* No estado vazio o botão é o principal: vermelho cheio, como "Ver mais". */
.busca-vazia .filtros__limpar {
    margin-top: 10px;
    min-height: 48px;
    padding: 0 32px;
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.busca-vazia .filtros__limpar:hover {
    border-color: var(--cor-site-3);
    background: var(--cor-site-3);
}

.busca-vazia__titulo strong {
    font-weight: 800;
}

/* "Limpar filtros" igual nos dois lugares (busca lateral e tela sem resultados): vermelho cheio. */
.filtros__limpar,
.busca-vazia .filtros__limpar {
    border-color: var(--cor-site-1);
    background: var(--cor-site-1);
    color: var(--cor-branco);
}

.filtros__limpar:hover,
.busca-vazia .filtros__limpar:hover {
    border-color: var(--cor-site-3);
    background: var(--cor-site-3);
    color: var(--cor-branco);
}

/* Foco dos campos da busca lateral: UM anel só (borda vermelha + halo suave), sem o contorno do foco global. */
.filtros__form .campo > input:focus,
.filtros__form .campo > input:focus-visible,
.filtros__form .dropdown__gatilho:focus-visible {
    outline: none;
    border-color: var(--cor-site-1);
    box-shadow: 0 0 0 4px rgba(183, 28, 28, .12);
}

/* ===========================================================================
   FILTROS NO CELULAR (gaveta) — cabeçalho com "×", campos com rolagem e rodapé (Buscar / Copiar link /
   Limpar) sempre visível; botão "Filtros" flutuante em pílula vermelha.
   =========================================================================== */
.filtros__cabecalho {
    display: none;
}

@media (max-width: 860px) {
    .filtros {
        padding: 16px;
    }

    .filtros__caixa {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        padding: 0;
        overflow: hidden;
        border-radius: 30px;
    }

    .filtros__cabecalho {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 16px 26px;
        border-bottom: 1px solid #eee7d9;
    }

    .filtros__cabecalho strong {
        font-size: 22px;
        font-weight: 300;
        text-transform: uppercase;
        color: var(--cor-site-2);
    }

    .filtros__fechar {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 2px solid var(--cor-site-1);
        border-radius: 50%;
        background: var(--cor-branco);
        color: var(--cor-site-1);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        transition: background .3s ease, color .3s ease;
    }

    .filtros__fechar:hover {
        background: var(--cor-site-1);
        color: var(--cor-branco);
    }

    .filtros__form {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
    }

    .filtros__campos {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        padding: 20px 26px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .filtros__rodape {
        flex: none;
        gap: 10px;
        margin: 0;
        padding: 16px 26px 22px;
        border-top: 1px solid #eee7d9;
        background: var(--cor-branco);
        box-shadow: 0 -8px 18px rgba(0, 0, 0, .05);
    }

    .filtros__rodape .btn,
    .filtros__rodape .filtros__limpar {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* Botão que abre a gaveta: pílula vermelha flutuante, centralizada embaixo. */
    .filtros__abrir {
        inset: auto auto 18px 50%;
        width: auto;
        min-width: 190px;
        padding: 14px 34px;
        border: 0;
        border-radius: 40px;
        background: var(--cor-site-1);
        color: var(--cor-branco);
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0 10px 26px rgba(183, 28, 28, .4);
        transform: translateX(-50%);
        gap: 10px;
    }

    .filtros__abrir svg {
        width: 18px;
        height: 18px;
        color: inherit;
    }

    .filtros__abrir:hover {
        background: var(--cor-site-3);
    }

    .listagem__resultados {
        padding-bottom: 100px;
    }

    /* WhatsApp flutuante sobe para ficar acima do botão "Filtros". */
    body[data-pagina="listagem"] .whatsapp-flutuante {
        bottom: 88px;
    }
}

/* Pilha de botões flutuantes na listagem (celular): "Filtros" embaixo, WhatsApp acima dele e voltar ao topo acima do WhatsApp. */
@media (max-width: 860px) {
    body[data-pagina="listagem"] .voltar-topo,
    body.tem-chat[data-pagina="listagem"] .voltar-topo {
        bottom: 158px;
    }
}

/* Gaveta (celular): "Buscar" na largura toda e "Copiar link" + "Limpar filtros" lado a lado embaixo. */
@media (max-width: 860px) {
    .filtros__rodape {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .filtros__rodape .filtros__buscar {
        grid-column: 1 / -1;
    }

    .filtros__rodape .btn,
    .filtros__rodape .filtros__limpar {
        min-width: 0;
        padding-inline: 10px;
        gap: 6px;
        font-size: 14px;
        white-space: nowrap;
    }

    .filtros__rodape .btn svg,
    .filtros__rodape .filtros__limpar svg {
        width: 15px;
        height: 15px;
        flex: none;
    }
}