.place-suggestions {
  position: relative;
  z-index: 700;
}

/* Keep the map booking surface clipped to its rounded frame.  The suggestion
   list is the only child that may deliberately extend beyond that surface. */
.map-booking-slot { overflow: hidden; }

.map-booking-slot:has(.place-suggestions [role='listbox']:not([hidden])) {
  overflow: visible;
}

.place-suggestions [role='listbox'] {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  left: 0;
  max-height: 18rem;
  overflow: auto;
  z-index: 760;
  padding: .375rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line, #c6cad2) 86%, transparent);
  border-radius: .9rem;
  background: var(--raised, #fff);
  color: var(--ink, #17131a);
  box-shadow: 0 18px 42px rgb(0 0 0 / .18);
}

.place-suggestion {
  display: grid;
  width: 100%;
  min-height: 44px;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.place-suggestion span {
  color: var(--muted, #5f6572);
  font-size: .86rem;
}

.place-suggestion[aria-selected='true'],
.place-suggestion:hover,
.place-suggestion:focus-visible {
  background: color-mix(in srgb, var(--accent, #7367f0) 14%, transparent);
  outline: none;
}

html.dark .map-booking-slot .place-suggestions [role='listbox'] {
  border-color: #746b78;
  background: #342e38;
  color: #f8f1e9;
}

html.dark .map-booking-slot .place-suggestion span { color: #d4cad6; }

@media (max-width: 760px) {
  .map-booking-slot .place-suggestions [role='listbox'] {
    max-height: min(15rem, 42dvh);
  }
}