.forecast-search { position: relative; }
.forecast-search-suggestions {
  position: absolute; z-index: 30; top: 100%; left: 16px; right: 16px;
  max-height: 60vh; overflow-y: auto; margin: 0; padding: 0;
  list-style: none; background: #fff; border: 1px solid #bccbd7;
  border-radius: 8px; box-shadow: 0 8px 24px #172b4526;
}
.forecast-search-suggestions[hidden] { display: none; }
.forecast-search-suggestions a, .forecast-search-results a {
  display: block; padding: 12px 16px; color: #174b6a; text-decoration: none;
}
.forecast-search-suggestions a:hover, .forecast-search-suggestions a:focus,
.forecast-search-suggestions a[aria-selected="true"], .forecast-search-results a:hover { background: #e7f2fa; }
.forecast-search-suggestions strong, .forecast-search-suggestions span,
.forecast-search-results strong, .forecast-search-results span { display: block; }
.forecast-search-suggestions span, .forecast-search-results span { margin-top: 4px; font-size: 13px; color: #526479; }
.forecast-search-page { max-width: 820px; margin: 24px auto; }
.forecast-search-page h1 { font-size: 26px; }
.forecast-search-page .forecast-search { padding: 14px 0; }
.forecast-search-page .forecast-search input { flex: 1; min-width: 150px; padding: 10px; }
.forecast-search-page button { padding: 10px 16px; cursor: pointer; }
.forecast-search-results { padding: 0; list-style: none; background: #fff; border-radius: 8px; }
.forecast-search-results li + li { border-top: 1px solid #e0e6ed; }