/* ==========================================================================
   Victor Harbour Whale Sighting — shared field-enhancement styles
   Address autocomplete (mock Places lookup). Pickers reuse the native OS
   UI, so only the autocomplete dropdown needs styling. Requires tokens.css.
   ========================================================================== */

.vh-ac__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--vh-white);
  border: 1px solid var(--vh-border);
  border-radius: var(--vh-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  max-height: 320px;
  overflow-y: auto;
}

.vh-ac__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--vh-font-body);
  font-size: 15px;
  line-height: 20px;
  color: #21272A;
}

.vh-ac__opt.is-active,
.vh-ac__opt:hover {
  background: var(--vh-gray-10);
}

.vh-ac__pin {
  flex: 0 0 auto;
  opacity: 0.55;
}

.vh-ac__label {
  min-width: 0;
}

/* Geolocation "use my location" pin — pulses while locating */
.vh-field__icon.is-locating {
  animation: vh-locating 0.9s ease-in-out infinite;
}

@keyframes vh-locating {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-field__icon.is-locating { animation: none; opacity: 0.6; }
}

.vh-ac__note {
  padding: 8px 16px 4px;
  border-top: 1px solid var(--vh-border);
  margin-top: 4px;
  font-family: var(--vh-font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #8a9096;
  text-transform: uppercase;
}