/* ===========================================================================
   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 ----------------------------------------------------- */

.listagem__topo {
    padding-block: var(--gap-lg);
    padding-inline: 3rem;
    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
   ---------------------------------------------------------------------------
   Dois modos (Filtros e Código) 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.

   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: 350px minmax(0, 1fr);
    gap: var(--gap-sm);
    width: 100%;
    padding: var(--gap-lg) 3rem;
}

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

/* 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 — CSS puro, 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 (Características) — ver
   pages/partials/dropdown-checkboxes.php e js/dropdown-checkboxes.js.
   Reaproveita .dropdown/.dropdown__gatilho/.dropdown__menu de style.css; só a
   linha de opção muda (checkbox nativo + rótulo, em vez de <li> de seleção
   única) porque aqui mais de uma pode ficar marcada ao mesmo tempo.
   =========================================================================== */
.dropdown__opcao--checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
}

/* Mesmo checkbox customizado (quadrado + check em SVG) do modal de Bairro
   (ver .dropdown__opcao--checkbox input[type="checkbox"]:checked em style.css)
   — antes usava o quadradinho nativo do navegador (accent-color), que muda de
   cara entre Chrome/Firefox/Safari e destoa do resto do campo. */
.dropdown__opcao--checkbox input {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-branco) center / 11px no-repeat;
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao);
}

.dropdown__opcao--checkbox input:checked {
    background-color: var(--cor-primaria);
    border-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");
}

.dropdown__opcao--checkbox input:focus-visible {
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
}

.dropdown__opcao--checkbox span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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