/*
 * Autocomplete de endereco -- Zeuxis -> ServiceM8
 *
 * Tudo aqui e prefixado com .zx-ac para nao vazar estilo para o resto da pagina
 * (o site roda Elementor com quatro pacotes de addon; colisao de seletor generico
 * seria questao de tempo).
 *
 * As cores estao nas variaveis abaixo. O painel e opaco e claro de proposito:
 * assim fica legivel independente do fundo da secao onde o formulario estiver.
 * Se destoar, mude apenas estas cinco linhas.
 */
:root {
  --zx-ac-bg: #ffffff;
  --zx-ac-text: #1b1b1a;
  --zx-ac-muted: #6b6b66;
  --zx-ac-line: #e2e2dc;
  --zx-ac-accent: #dcae4b; /* dourado da marca */
}

.zx-ac-list {
  position: absolute;
  z-index: 9999; /* acima dos popups do Elementor */
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 5px;
  list-style: none;
  background: var(--zx-ac-bg);
  color: var(--zx-ac-text);
  border: 1px solid var(--zx-ac-line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  max-height: 262px;
  overflow-y: auto;
  text-align: left;
}

.zx-ac-list li {
  margin: 0;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  list-style: none;
}

.zx-ac-list li[aria-selected="true"] {
  background: rgba(220, 174, 75, 0.16);
  box-shadow: inset 2px 0 0 var(--zx-ac-accent);
}

.zx-ac-main {
  display: block;
  color: var(--zx-ac-text);
  font-weight: 600;
}

.zx-ac-meta {
  display: block;
  margin-top: 1px;
  color: var(--zx-ac-muted);
  font-size: 12px;
  font-weight: 400;
}

/* Aviso abaixo do campo: "sem numero", "busca fora do ar"... */
.zx-ac-status {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--zx-ac-accent);
  min-height: 1em;
}

@media (max-width: 480px) {
  .zx-ac-list { max-height: 210px; }
  .zx-ac-list li { font-size: 15px; } /* alvo de toque maior no celular */
}
