/* =============================================================================
   Dumont Imóveis — busca.css
   Formulários de busca de imóveis: a busca rápida da home e a página de
   busca (/imoveis/, comprar, alugar, bairro).

   1. Choices.js — o tema da lista dos selects (vendor/choices/choices.min.css
      é a base; aqui só a cara da Dumont)
   2. Página de busca (archive-imoveis.php)
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Choices.js
   Estrutura que ele gera:
     .choices                          o campo (foco, aberto: .is-open)
       .choices__inner                 a caixa com o valor escolhido
       .choices__list--dropdown        o painel que abre
         .choices__input               a caixa de digitar (se houver)
         .choices__heading             título do grupo (cidade)
         .choices__item--choice        cada opção (.is-highlighted, .is-selected)
   -------------------------------------------------------------------------- */
.choices {
  margin: 0;
  font-size: inherit;
}

.choices__inner {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--dm-tinta);
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border: 0;
  border-radius: 0;
}

/* O Choices põe padding-bottom de 7.5px no select de uma opção, com um
   seletor mais específico que .choices__inner — por isso o repeteco. */
.choices[data-type*="select-one"] .choices__inner {
  display: block;
  padding-bottom: 0;
}

.choices__list--single {
  padding: .1rem 1.8rem .2rem 0;
}

.choices__list--single .choices__item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A opção de valor vazio ("Todos os tipos", "Todo o ABC") é uma escolha de
   verdade, não um texto de ajuda: o Choices a trata como placeholder e
   aplica opacidade .5, que também derrubava o contraste. */
.choices__placeholder {
  opacity: 1;
}

.choices__list--single .choices__placeholder {
  color: var(--dm-texto);
}

/* Seta: troca o triângulo do Choices por uma divisa que gira ao abrir */
.choices[data-type*="select-one"]::after {
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 0;
  background: var(--dm-marinho);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dm-transicao);
}

.choices[data-type*="select-one"].is-open::after {
  margin-top: -9px;
  border: 0;
  transform: rotate(180deg);
}

/* O painel: cartão branco com sombra, alinhado à pílula do campo
   (a pílula tem 1.1rem de respiro lateral; o painel ocupa a pílula toda) */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  z-index: 30;
  left: -1.1rem;
  right: -1.1rem;
  width: auto;
  min-width: 260px;
  margin-top: .85rem;
  padding: .4rem;
  border: 0;
  border-radius: 18px;
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-3);
  word-break: normal;
}

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
  border: 0;
}

/* Abrindo para cima (sem espaço embaixo): a margem troca de lado */
.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
  margin-top: 0;
  margin-bottom: .85rem;
  border-radius: 18px;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  max-height: min(340px, 50vh);
  padding: .15rem;
  scrollbar-width: thin;
}

/* Cada opção */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: .62rem 2.4rem .62rem .9rem;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--dm-texto);
}

/* O Choices reserva 100px à direita para o texto "Press to select" — sem uso aqui */
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
  padding-right: 2.4rem;
}

.choices__list--dropdown .choices__item--selectable::after,
.choices__list[aria-expanded] .choices__item--selectable::after {
  content: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--dm-marinho-claro);
  color: var(--dm-acento);
}

/* Opção escolhida: negrito e um "check" à direita */
.choices__list--dropdown .choices__item.is-selected,
.choices__list[aria-expanded] .choices__item.is-selected {
  font-weight: 700;
  color: var(--dm-acento);
}

.choices__list--dropdown .choices__item.is-selected::before,
.choices__list[aria-expanded] .choices__item.is-selected::before {
  content: "";
  position: absolute;
  top: 50%;
  right: .85rem;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--dm-ouro-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Grupo (cidade): rótulo pequeno em dourado — separa Santo André de Mauá */
.choices__heading {
  padding: .8rem .9rem .3rem;
  border-bottom: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dm-ouro-texto);
}

.choices__group:first-child .choices__heading {
  padding-top: .4rem;
}

/* Caixa de digitar dentro do painel, com lupa */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
  width: calc(100% - .3rem);
  margin: .15rem .15rem .4rem;
  padding: .7rem .9rem .7rem 2.4rem;
  border: 0;
  border-radius: 12px;
  background: var(--dm-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b667b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat .85rem center / 17px;
  font-size: .95rem;
  color: var(--dm-tinta);
}

.choices__list--dropdown .choices__input:focus,
.choices__list[aria-expanded] .choices__input:focus {
  outline: 2px solid var(--dm-marinho);
  outline-offset: 0;
}

.choices__list--dropdown .has-no-results,
.choices__list--dropdown .has-no-choices {
  padding: .8rem .9rem;
  color: var(--dm-suave);
}

/* Seleção múltipla (bairros): cada escolhido vira uma pílula com "x" */
.choices__list--multiple .choices__item {
  margin: .15rem .3rem .15rem 0;
  padding: .28rem .5rem .28rem .7rem;
  border: 0;
  border-radius: 999px;
  background: var(--dm-marinho);
  font-size: .8rem;
  font-weight: 600;
}

.choices__list--multiple .choices__item.is-highlighted {
  border: 0;
  background: var(--dm-profundo);
}

.choices[data-type*="select-multiple"] .choices__button {
  margin: 0 0 0 .4rem;
  padding-left: .7rem;
  border-left: 0;
  opacity: .8;
}

/* Caixa de digitar do múltiplo fica DENTRO do campo, não no painel */
.choices__inner .choices__input {
  margin: 0;
  padding: .15rem 0;
  background: transparent;
  font-size: .95rem;
  font-weight: 500;
  color: var(--dm-tinta);
}

.choices[data-type*="select-multiple"] .choices__inner {
  padding-right: 0;
}


/* -----------------------------------------------------------------------------
   2. Página de busca
   Markup: template-parts/imovel/busca.php e busca-filtros.php
   -------------------------------------------------------------------------- */
.busca {
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(3rem, 6vw, 4.5rem);
}

.busca__cabecalho {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.busca__titulo {
  margin: .35rem 0 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem);
  letter-spacing: -.02em;
}

.busca__intro {
  max-width: 72ch;
  margin-top: .75rem;
  color: var(--dm-suave);
}

.busca__intro p:last-child {
  margin-bottom: 0;
}


/* --- Painel de filtros ---
   No celular é offcanvas (Bootstrap cuida da abertura); do lg em diante vira
   um cartão fixo ao lado dos resultados, que acompanha a rolagem (sticky).
   O cartão é .busca__cartao — ver o comentário em busca.php. */
.busca__painel {
  --bs-offcanvas-width: min(390px, 92vw);
  --bs-offcanvas-bg: var(--dm-superficie);
}

@media (min-width: 992px) {
  /* Quem gruda é o painel: o pai dele é a coluna inteira (o trilho do
     sticky). O cartão, dentro, só tem o visual. */
  .busca__painel {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    border-radius: var(--dm-raio-lg);
    scrollbar-width: thin;
  }

  .busca__cartao {
    width: 100%;
    padding: .25rem 1.25rem 0;
    border-radius: var(--dm-raio-lg);
    background: var(--dm-superficie);
    box-shadow: var(--dm-sombra-1);
  }

  /* Lateral estreita: De e Até um embaixo do outro ("Qualquer" cortava) */
  .busca__cartao .filtro__preco {
    grid-template-columns: 1fr;
  }
}

/* Cada bloco de filtro, separado do próximo por um fio */
.filtro {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 0;
  border: 0;
  box-shadow: inset 0 -1px 0 var(--dm-linha);
}

.filtro__titulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  float: none;
  width: auto;
  margin: 0 0 .7rem;
  padding: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dm-tinta);
}

.filtro__titulo .icone {
  color: var(--dm-ouro-texto);
}

/* <legend> flutuando: um legend "normal" fica encaixado na borda do
   fieldset e o padding do fieldset entra DEPOIS dele (sobrava um vão de
   ~30px). Flutuando ele vira bloco comum — mesmo truque do Bootstrap, que
   também já solta o elemento seguinte (legend + * { clear: left }). */
legend.filtro__titulo {
  float: left;
  width: 100%;
}

/* Abas Comprar / Alugar / Todos */
.filtro__abas {
  display: flex;
  gap: .25rem;
  padding: .3rem;
  border-radius: 999px;
  background: var(--dm-papel);
}

.filtro__aba {
  flex: 1;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--dm-suave);
  cursor: pointer;
  transition: background-color var(--dm-transicao), color var(--dm-transicao);
}

.filtro__aba:hover {
  color: var(--dm-tinta);
}

.btn-check:checked + .filtro__aba,
.filtro__aba.is-ativa {
  background: var(--dm-marinho);
  color: #fff;
}

/* Chips de tipo e comodidade (checkbox com cara de pílula) */
.filtro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.filtro__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--dm-papel);
  font-size: .86rem;
  font-weight: 500;
  color: var(--dm-texto);
  cursor: pointer;
  transition: background-color var(--dm-transicao), color var(--dm-transicao), box-shadow var(--dm-transicao);
}

.filtro__chip .icone {
  color: var(--dm-ouro-texto);
}

.filtro__chip:hover {
  background: var(--dm-papel-hover);
}

.btn-check:checked + .filtro__chip {
  background: var(--dm-marinho-claro);
  color: var(--dm-acento);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--dm-acento);
}

.btn-check:checked + .filtro__chip .icone {
  color: var(--dm-acento);
}

.btn-check:focus-visible + .filtro__chip,
.btn-check:focus-visible + .filtro__aba,
.btn-check:focus-visible + .filtro__segmento {
  outline: 3px solid var(--dm-foco);
  outline-offset: 2px;
}

/* Quartos / banheiros / vagas: Todos 1+ 2+ 3+ 4+ */
.filtro__segmentos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .2rem;
  padding: .25rem;
  border-radius: 12px;
  background: var(--dm-papel);
}

.filtro__segmento {
  padding: .45rem 0;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  color: var(--dm-suave);
  cursor: pointer;
  transition: background-color var(--dm-transicao), color var(--dm-transicao);
}

.btn-check:checked + .filtro__segmento {
  background: var(--dm-superficie);
  color: var(--dm-acento);
  box-shadow: var(--dm-sombra-1);
}

/* Campo com select (Choices) — a mesma pílula da busca rápida da home */
.filtro__campo {
  position: relative;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: var(--dm-papel);
  transition: box-shadow var(--dm-transicao), background-color var(--dm-transicao);
}

.filtro__campo:focus-within {
  background: var(--dm-superficie);
  box-shadow: inset 0 0 0 2px var(--dm-acento);
}

.filtro__campo .choices__inner {
  font-size: .95rem;
}

/* O painel do Choices ocupa a pílula toda (respiro lateral de .9rem) */
.filtro__campo .choices__list--dropdown,
.filtro__campo .choices__list[aria-expanded] {
  left: -.9rem;
  right: -.9rem;
  min-width: 0;
  margin-top: .6rem;
}

/* Select nativo (sem JS): a mesma cara, sem borda */
.filtro__campo select:not(.choices__input) {
  width: 100%;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: var(--dm-tinta);
}

.filtro__preco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.filtro__rotulo {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--dm-suave);
}

.filtro__aviso {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: 12px;
  background: var(--dm-papel);
  font-size: .85rem;
  color: var(--dm-suave);
}

.filtro__local {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin: 0;
}

.filtro__local a,
.filtro__mais,
.busca-filtros__limpar {
  font-size: .86rem;
  font-weight: 600;
  color: var(--dm-acento);
}

.filtro__mais {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .65rem;
  padding: 0;
  border: 0;
  background: none;
}

.filtro__mais .icone {
  transition: transform var(--dm-transicao);
}

.filtro__mais[aria-expanded="true"] .icone {
  transform: rotate(180deg);
}

/* Chaves liga/desliga (form-switch do Bootstrap na cor da marca) */
.filtro--chaves {
  display: grid;
  gap: .7rem;
}

.filtro__chave {
  margin: 0;
}

.filtro__chave .form-check-input {
  cursor: pointer;
}

.filtro__chave .form-check-input:checked {
  border-color: var(--dm-marinho);
  background-color: var(--dm-marinho);
}

.filtro__chave .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  cursor: pointer;
}

.filtro__chave .icone {
  color: var(--dm-ouro-texto);
}

.filtro__ref {
  padding: .65rem .9rem;
  border: 0;
  border-radius: 12px;
  background: var(--dm-papel);
}

.filtro__ref:focus {
  background: var(--dm-superficie);
  box-shadow: inset 0 0 0 2px var(--dm-acento);
}

/* Rodapé do formulário: gruda embaixo do painel enquanto os filtros rolam */
.busca-filtros__rodape {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 1.25rem;
  background: var(--dm-superficie);
}

.busca-filtros__ver {
  flex: 1;
}


/* --- Resultados --- */
.busca-resultados__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}

/* Celular: a contagem ocupa a linha; Filtros e ordem dividem a de baixo */
.busca-resultados__total {
  flex-basis: 100%;
  margin: 0;
  color: var(--dm-suave);
}

@media (min-width: 768px) {
  .busca-resultados__total {
    flex-basis: auto;
  }
}

.busca-resultados__total strong {
  font-family: var(--dm-fonte-titulo);
  font-size: 1.2rem;
  color: var(--dm-tinta);
}

.busca-resultados__filtros {
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
}

.busca-resultados__filtros-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--dm-marinho);
  font-size: .75rem;
  color: #fff;
}

/* Ordem: pílula branca à direita da barra */
.busca-resultados__ordem {
  position: relative;
  width: 210px;
  margin-left: auto;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-1);
}

.busca-resultados__ordem .choices__inner {
  font-size: .92rem;
}

.busca-resultados__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
}

/* .chip-filtro está em base.css (o 404 também usa) */
.chip-filtro--limpar {
  padding-inline: .6rem;
  background: transparent;
  color: var(--dm-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chip-filtro--limpar:hover {
  background: transparent;
  color: var(--dm-tinta);
}

.busca-resultados__grade {
  display: grid;
  gap: 1.25rem;
  transition: opacity .2s ease;
}

@media (min-width: 576px) {
  .busca-resultados__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .busca-resultados__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Buscando (busca.js): resultados antigos esmaecem até os novos chegarem */
.busca-resultados.is-carregando .busca-resultados__grade,
.busca-resultados.is-carregando .vitrine-vazia {
  opacity: .45;
  pointer-events: none;
}

.vitrine-vazia__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}


/* --- Paginação --- */
.paginacao ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: 2.5rem 0 0;
}

.paginacao .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .75rem;
  border-radius: 12px;
  background: var(--dm-superficie);
  box-shadow: var(--dm-sombra-1);
  font-weight: 600;
  color: var(--dm-tinta);
  text-decoration: none;
  transition: background-color var(--dm-transicao), color var(--dm-transicao);
}

.paginacao a.page-numbers:hover {
  background: var(--dm-marinho-claro);
  color: var(--dm-acento);
}

.paginacao .page-numbers.current {
  background: var(--dm-marinho);
  color: #fff;
}

.paginacao .page-numbers.dots {
  background: transparent;
  box-shadow: none;
}