/* Address autocomplete dropdown.
 *
 * Its own file because it is loaded in two places that share no stylesheet:
 * the storefront via base.html, and the Unfold admin via settings.UNFOLD
 * STYLES for the phone-order screen. Every --la-* custom property carries a
 * literal fallback, since those variables are defined in site.css and the
 * admin never loads it.
 */
.address-ac { position: relative; }

.address-ac-list {
  position: absolute;
  z-index: 1050;               /* above Bootstrap's sticky elements */
  top: 100%;
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--la-border, #d9dbe3);
  border-top: none;
  box-shadow: 0 6px 18px rgba(15, 27, 51, 0.12);
}

.address-ac-item {
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--la-border, #d9dbe3);
  line-height: 1.35;
}
.address-ac-item:last-child { border-bottom: none; }

/* Hover and keyboard highlight share one state, so arrowing through the list
   looks the same as pointing at it. */
.address-ac-item:hover,
.address-ac-item.is-active {
  background: var(--la-red-light, #fef2f2);
}

.address-ac-main {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--la-text, #1c1c28);
}

/* The city/state line. Carries the disambiguation when several streets share
   a name, which is most of the time, so it is quiet but never hidden. */
.address-ac-secondary {
  display: block;
  font-size: 0.8rem;
  color: var(--la-muted, #6b6b76);
}

@media (max-width: 576px) {
  /* Bigger targets on a phone, where a mis-tap picks the wrong address. */
  .address-ac-item { padding: 0.8rem 0.9rem; }
  .address-ac-main { font-size: 0.95rem; }
  .address-ac-list { max-height: 14rem; }
}