/* City suggestions enhance the existing optional route fields. */
.city-search { position: relative; }
.city-search-popup {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  overflow: hidden; border: 1px solid #c6d7dd; border-radius: 12px;
  background: #fff; box-shadow: 0 12px 28px rgba(11, 38, 46, .16);
}
.city-search-popup[hidden], .city-search-list[hidden] { display: none; }
.city-search-list {
  max-height: 244px; max-height: min(244px, 40dvh);
  overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto;
  margin: 0; padding: 5px; list-style: none;
}
.city-search-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 10px; border-radius: 7px; cursor: pointer;
  color: var(--navy-deep); font-size: 14px; line-height: 1.45;
}
.city-search-option + .city-search-option { margin-top: 2px; }
.city-search-option:hover, .city-search-option[aria-selected="true"] { background: #edf5f7; }
.city-search-option[aria-selected="true"] { outline: 2px solid var(--teal); outline-offset: -2px; }
.city-search-name { min-width: 0; overflow-wrap: anywhere; }
.city-search-state {
  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px;
  color: #285564; background: #e7f0f3; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.city-search-status { margin: 0; padding: 10px 14px; color: #526873; font-size: 12px; line-height: 1.5; }
.city-search-list:not([hidden]) + .city-search-status { border-top: 1px solid var(--line); }
@media (forced-colors: active) {
  .city-search-option[aria-selected="true"] { outline: 2px solid Highlight; }
}