/* Address autocomplete dropdown for the booking form.
 *
 * Deliberately reuses the custom properties declared in the inline <style> of
 * templates/index.html (--gold, --dark-3, --text, --radius…) so the list is the
 * same dark/gold as the rest of the form. Every var() carries a literal
 * fallback so the dropdown still looks right if this file is ever loaded on a
 * page that does not declare them.
 *
 * The list is appended to <body> and positioned in document coordinates by
 * places.js: .booking-card is `overflow: hidden` and would otherwise clip it.
 */

.ac-list {
  position: absolute;
  z-index: 1200;            /* above the fixed header (1000), below modals (2000) */
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 268px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--dark-3, #1E1E1E);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: var(--radius, 6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text, #E8E4DC);
}

.ac-list[hidden] { display: none; }

.ac-item {
  padding: 11px 12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text, #E8E4DC);
  overflow-wrap: anywhere;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.ac-item + .ac-item { border-top: 1px solid rgba(255, 255, 255, 0.05); }

.ac-item:hover,
.ac-item.is-active {
  background: rgba(201, 168, 76, 0.14);
  color: var(--gold-light, #E2CA7E);
}

.ac-item.is-active { box-shadow: inset 2px 0 0 var(--gold, #C9A84C); }

/* Visually hidden live region announcing the suggestion count. */
.ac-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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