.address-autocomplete-wrapper {
  position: relative;
}

/* The wrapper div stretches to the full flex width (matching the
   "use my location" button next to it), but the <input> inside it
   keeps the browser default intrinsic text-input width unless told
   otherwise - leaving a visible gap between the field and the button
   it lines up with in both the job and education search filters. */
.address-autocomplete-wrapper input.address-autocomplete {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.address-results {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  overflow-y: auto;
  max-height: 220px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  z-index: 20;
}

.address-results[hidden] {
  display: none;
}

.address-results li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.address-results li:last-child {
  border-bottom: none;
}

.address-results li:hover {
  background: var(--grey-bg, #f5f5f5);
}