/* imobi-bairros-multi.css
 * Campo de selecao de VARIOS bairros na busca de imoveis do site publico.
 * ASCII puro de proposito: este arquivo e servido como esta e acento literal
 * quebraria a pureza em silencio (tools/verify.py reprova). Ver
 * docs/sites-clientes/busca-multipla-bairros.md
 *
 * DUAS CAMADAS, DE PROPOSITO
 * 1) O GATILHO herda a aparencia do <select> original, copiada em runtime pelo
 *    JS (fonte, borda, raio, altura, cor, padding). Cada um dos ~35 modelos
 *    estiliza a busca de um jeito; qualquer cor ou borda fixa aqui brigaria com
 *    o modelo. Por isso aqui so ha estrutura para o gatilho.
 * 2) O PAINEL e nosso e nao existia antes, entao tem visual proprio: neutro,
 *    claro e sobrio, para conviver com qualquer modelo.
 */

/* ---------------------------------------------------------------- estrutura */

/* O wrap ocupa a celula que era do <select>. A largura e a margem sao escritas
 * pelo JS (inline, a partir do campo vizinho), por isso nao levam !important --
 * aqui fica so o default e a estrutura. */
.ibbm {
  position: relative;
  display: block;
  float: none;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}

/* O <select> nativo continua no DOM: e a fonte da lista de opcoes (quem popula
 * e o dgCidadesBairros de cada modelo) e o carregador do valor unico legado.
 * Escondido sem display:none para nao virar campo "inexistente" no submit. */
.ibbm__nativo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------------------------ gatilho */

/* O !important nao e preguica: o gatilho e um <button> e vive DENTRO do markup
 * do modelo, onde regras de elemento o acertam em cheio -- o t30 estreita todo
 * <button> da barra para 23.5% e sobe -3px, a listagem mobile poe
 * #menu-filtros button{width:49%} (id, vence qualquer classe nossa). Sao regras
 * escritas para o botao "Buscar", nao para um campo.
 *
 * So a ESTRUTURA leva !important. A PINTURA (fundo, borda, altura, fonte) sai
 * do JS como estilo inline, e estilo inline PERDE para !important de folha --
 * marcar essas aqui congelaria o campo num visual so, o oposto do que ele faz. */
.ibbm__botao {
  position: relative !important;   /* ancora da seta -- ver .ibbm__seta */
  /* flex, nao block: ver ESTRUTURA_BOTAO no JS (que tambem escreve isto inline,
   * com !important). O texto encolhe com reticencias, o contador nao. */
  display: flex !important;
  align-items: center;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;            /* o espacamento e do wrap, copiado do vizinho */
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 26px;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* !important porque a pintura copiada do vizinho entra como estilo INLINE, e ha
 * modelo que desenha a borda do campo com `outline` (t22: os selects da barra tem
 * `outline:1px solid rgba(248,248,248,.61)`). Sem a marca, o outline copiado
 * venceria este e o campo ficaria sem anel de foco. */
.ibbm__botao:focus-visible {
  outline: 2px solid #00923F !important;
  outline-offset: 1px !important;
}

.ibbm--com-selecao .ibbm__botao {
  font-weight: 600;
}

/* O texto e a seta sao <span>, e varios modelos estilizam <span> DENTRO da
 * barra de busca -- com especificidade maior que a das nossas classes. No t22,
 * `.barra-pesquisa span{float:left;width:100%;padding:10px 0;line-height:3.1}`
 * (0,1,1 contra os nossos 0,1,0) inflava a seta para 70x20px e esticava o texto
 * para 54px de altura dentro de um botao de 31 -- o rotulo sumia no
 * `overflow:hidden`. Como nada disso e escrito pelo JS, a estrutura pode ser
 * fixada com !important sem tirar a liberdade da pintura. */
/* `color: inherit` pelo mesmo motivo -- e e o que faltava para o campo existir
 * no t27, cujo CSS abre com `*{color:#fff}`. A cor CERTA (a do campo vizinho) o
 * JS escreve no BOTAO, e o texto a herdaria; so que um seletor que casa com o
 * proprio <span>, ainda que `*`, vence a heranca. Resultado: rotulo branco sobre
 * a caixa branca -- o campo aparecia VAZIO, sem um erro no console. */
.ibbm__texto {
  display: block;
  /* item de flex: `min-width:0` e o que permite encolher abaixo do tamanho do
   * conteudo -- sem ele o padrao `min-width:auto` impede as reticencias e o
   * texto empurra o contador para fora do botao. */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  border: 0 !important;
  background: none !important;
}

/* Dentro do botao, nao do wrap: em modelo cujo CSS estreita o botao, o wrap
 * continua largo e a seta apareceria sozinha longe do campo. */
/* A seta e desenhada com `currentColor`, logo depende da cor HERDADA do botao --
 * e um `*{color:...}` do modelo casaria com ela e a pintaria de outra cor (no
 * t27, branca sobre branco). Dai o `color: inherit`, igual ao do texto. */
.ibbm__seta {
  position: absolute !important;
  float: none !important;
  right: 10px;
  top: 50%;
  width: 9px !important;
  height: 9px !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  margin-top: -6px;
  line-height: 0 !important;
  font-size: 0 !important;
  pointer-events: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);
  transition: transform .15s ease, opacity .15s ease;
}

.ibbm--aberto .ibbm__seta {
  margin-top: -2px;
  transform: rotate(225deg);
  opacity: .9;
}

/* Contador discreto quando ha mais de um bairro marcado.
 *
 * Ele e o TERCEIRO <span> dentro do botao (o JS o anexa dentro do .ibbm__texto),
 * e por muito tempo foi o unico sem as defesas que .ibbm__texto e .ibbm__seta ja
 * tinham -- ver o comentario delas acima. No t22 (MODELO 28),
 * `.barra-pesquisa span{padding:10px 0; float:left; width:100%; line-height:3.1}`
 * (0,1,1 contra os nossos 0,1,0) transformava a pilula num BLOCO de largura
 * total, flutuado, com 34px de linha dentro de um botao de 31: a quantidade
 * quebrava para outra linha e sobrava uma faixa verde cortada dentro do campo.
 *
 * Como nada aqui e escrito pelo JS -- o verde e nosso, nao vem do vizinho --,
 * fixar a estrutura com !important nao tira liberdade nenhuma da pintura. */
.ibbm__conta {
  display: inline-block !important;
  flex: 0 0 auto !important;       /* nao encolhe: quem cede espaco e o texto */
  float: none !important;
  width: auto !important;
  min-width: 18px;
  max-width: none !important;
  margin: 0 0 0 6px !important;
  /* 14px de altura total (line-height 14 + padding vertical 0) porque ha campo
   * BAIXO: o t24 (MODELO 30) tem 15px de altura, e uma pilula de 18px estourava
   * para fora do botao -- que e `overflow:hidden`, entao sumia cortada. */
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 999px;
  background: #00923F !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 14px !important;
  text-align: center;
  text-indent: 0 !important;
  vertical-align: 1px;
}

/* ------------------------------------------------------------------- painel */

/* Sobrio de proposito: uma caixa branca com uma borda fina, sem sombra e sem
 * cantos arredondados grandes. O painel convive com ~35 modelos de site, e
 * quanto menos aparencia propria ele tiver, menos briga com o modelo.
 *
 * A FONTE vem da PAGINA: o painel e filho do <body> (JS: document.body.appendChild),
 * entao `font: inherit` pega familia, tamanho e altura de linha do site. O JS ainda
 * sobrescreve a FAMILIA com a do proprio campo de busca (ajustar()), para o caso de
 * modelo que troca a fonte so dentro da barra. */
.ibbm__painel {
  position: absolute;
  z-index: 2147483000;
  box-sizing: border-box;
  min-width: 240px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 2px;
  /* FAMILIA da pagina, TAMANHO nosso. `font: inherit` herdava tambem o tamanho
   * do <body>, e na versao mobile (Skeleton, html{font-size:62.5%}) isso dava
   * uma lista de 10px -- ilegivel. A familia o JS ainda sobrescreve com a do
   * proprio campo de busca (ver ajustar()). */
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
}

/* O painel e filho do <body>, no meio do CSS de ~35 modelos, e e feito de
 * <ul>/<li>/<label>/<input> -- os seletores de ELEMENTO do modelo caem nele
 * inteiros. Nao e hipotese: a home da versao mobile tem
 * `label{position:absolute; z-index:-1; opacity:0; pointer-events:none}`
 * (esconder rotulo de a11y), e com isso NENHUMA caixinha de bairro podia ser
 * marcada -- invisiveis e fora do hit-test, sem um erro no console.
 * O `.ibbm__painel *` (0,1,0) vence qualquer seletor de elemento do modelo; id
 * do modelo nao alcanca aqui, porque o painel esta fora do markup dele.
 *
 * `color: inherit` esta na lista pelo mesmo motivo que no gatilho: o t27 abre o
 * CSS com `*{color:#fff}`, e sem esta linha a lista de bairros sairia branca
 * sobre o painel branco. Herdando, cada item pega o `color` do .ibbm__painel --
 * e as excecoes (titulo, botao Limpar, aviso de vazio) vem depois no arquivo e
 * continuam valendo. */
.ibbm__painel * {
  position: static;
  z-index: auto;
  float: none;
  color: inherit;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
  box-sizing: border-box;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  text-indent: 0;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  font-size: 1em;
  text-align: left;
  list-style: none;
}

.ibbm__painel[hidden] {
  display: none !important;
}

.ibbm__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e5e5;
}

.ibbm__titulo {
  font-size: .85em;
  font-weight: 600;
  color: #666;
}

.ibbm__acao {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #fff;
  color: #00923F;
  font: inherit;
  font-size: .85em;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.ibbm__acao:hover {
  background: #f2f2f2;
}

.ibbm__lista {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Os <li> nao tem classe, entao apanham do `li{}` do modelo (a versao mobile
 * da 1rem de margin-bottom a todo li -- a lista de bairros saia espacada como
 * um menu). */
.ibbm__lista > li {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  border: 0;
  background: none;
}

.ibbm__item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  cursor: pointer;
}

.ibbm__item:hover,
.ibbm__item:focus-within {
  background: #f2f2f2;
}

/* A caixinha de marcar.
 *
 * `input[type="checkbox"]{display:none}` e o comeco do truque de checkbox
 * customizado: esconde o controle real e desenha um quadrado no `+ label:before`.
 * Tres modelos trazem isso no CSS -- t21:504, t22:1341 e t23:2502 (MODELO 27, 28
 * e 29) -- e o `+ label` deles NAO alcanca o nosso item (o irmao do input aqui e
 * um <span>, nao um <label>), entao nada e desenhado no lugar: a caixinha some e
 * a lista fica sem nenhum sinal do que esta marcado. Sem erro no console.
 *
 * `.ibbm__item input` sozinho tem a MESMA especificidade (0,1,1) que
 * `input[type="checkbox"]`, e o CSS do modelo carrega depois do nosso -- empate
 * resolve pelo ultimo, e quem vence e o modelo. Dai o seletor mais especifico E o
 * !important no `display`: id de modelo nao alcanca o painel (ele e filho do
 * <body>), mas um `display:none !important` de folha alcancaria.
 *
 * A licao do teste: contar `.ibbm__item` teria passado -- os itens existiam. O
 * que pega e medir a CAIXA do input (0x0 aqui) ou o elementFromPoint. */
.ibbm__painel .ibbm__item input[type="checkbox"],
.ibbm__item input {
  display: inline-block !important;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: 15px;
  height: 15px;
  accent-color: #00923F;
  cursor: pointer;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

.ibbm__rotulo {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibbm__vazio {
  padding: 14px 12px;
  color: #666;
  font-size: .9em;
  text-align: center;
  list-style: none;
}

/* O painel e desenhado sobre a pagina; em telas estreitas ele encosta nas
 * bordas em vez de vazar. */
@media (max-width: 480px) {
  .ibbm__painel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0;
    max-height: 60vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ibbm__seta {
    transition: none;
  }
}