/* ============================================================
   Bestand: public_html/assets/shared/css/adres-aanvullen.css
   ============================================================

   De suggestielijst onder een adresveld (adres-aanvullen.js).

   De kleuren komen uit de variabelen van het thema (--panel, --ink, --border, --accent).
   Zo volgt de lijst de dag- en nachtstand mee zonder dat hier iets van dat thema bekend
   hoeft te zijn. Draait dit ooit in een thema zónder die variabelen, dan vangt de tweede
   waarde in elke var() het op — een leesbare lijst is er dan nog steeds.

   Er staat bewust geen enkele maat in pixels die van het formulier afhangt: de lijst is
   precies zo breed als het veld waar hij onder hangt.
   ============================================================ */

.adres-aanvullen {
  position: relative;
}

.adres-suggesties {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel, #fff);
  color: var(--ink, #1a2230);
  border: 1px solid var(--border, #d3dae4);
  border-radius: 8px;
  box-shadow: var(--shadow-2, 0 4px 14px rgba(20, 30, 48, .10));
}

.adres-suggestie {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.4;
}

/* Aanwijzen met de muis en aanwijzen met de pijltjestoetsen zien er hetzelfde uit: wie met
   het toetsenbord werkt hoort net zo goed te zien waar hij staat. */
.adres-suggestie:hover,
.adres-suggestie.is-actief {
  background: var(--accent, #1f4e8c);
  color: var(--accent-ink, #fff);
}

@media (prefers-reduced-motion: no-preference) {
  .adres-suggestie {
    transition: background .12s ease, color .12s ease;
  }
}