/* Campo de endereço: sugestões do Google logo abaixo do campo, sobre o conteúdo, com a atribuição ao
   Google. Sem JavaScript, a lista nunca aparece. Contrato em design.md. */

.field:has(> .address-suggestions) {
  position: relative;
}

.address-suggestions {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  margin-top: var(--space-1);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field);
  box-shadow: var(--elevation);
}

.address-suggestions-list {
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
}

.address-suggestions-list [role="option"] {
  display: flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.address-suggestions-list [role="option"]:hover {
  background: var(--surface);
}

/* Opção ativa pelo teclado: marcador à esquerda e fundo suave, além do aria-selected. */
.address-suggestions-list [role="option"][aria-selected="true"] {
  box-shadow: inset 4px 0 0 var(--selected);
  background: var(--selected-subtle);
}

.address-suggestions-attribution {
  max-width: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-support);
  text-align: end;
}

@media (forced-colors: active) {
  .address-suggestions-list [role="option"][aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}