/* Travel range page. Builds on planner.css (search card, autocomplete, spinner) and
   destinations.css (page hero, reachability widget); only what is specific to this page. */

@layer page {

.range-card { max-width: 720px; margin: 0 auto var(--sp-5); }
.range-search-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.range-search-row .autocomplete-wrap { flex: 1 1 auto; min-width: 0; }
.range-search-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .range-search-row { flex-direction: column; }
}

.range-status { text-align: center; color: var(--text-muted); min-height: 1.5em; margin: 0 0 var(--sp-3); }
.range-status.is-error { color: var(--danger); }

/* The overlay sits over the map while a search runs; the map itself stays put underneath. */
.range-map-wrap { position: relative; }
.range-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: var(--card-radius);
}
.range-loading[hidden] { display: none; }

} /* @layer page */