/* Address autocomplete dropdown */
.autocomplete__list {
  display: none;
  position: absolute;
  z-index: var(--z-dropdown);
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: var(--space-xs);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.autocomplete__list--visible {
  display: block;
  animation: slide-down 0.15s var(--ease-out);
}

.autocomplete__item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.autocomplete__item:hover,
.autocomplete__item--active {
  background: var(--surface-2);
}

.autocomplete__item--active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.autocomplete__error {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.form-input--loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238d95b2' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 18px 18px;
}

/* Parent needs relative for dropdown positioning */
[data-controller="address-autocomplete"] {
  position: relative;
}