/* The Lakes Planner — reusable route-map component styles */
.tlp-route-map { display: block; }
.tlp-rm-mapwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 340px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #eef2f0;
}
@media (min-width: 1024px) { .tlp-rm-mapwrap { aspect-ratio: 16 / 9; } }
.tlp-rm-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.tlp-rm-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; z-index: 2;
}
.tlp-rm-loading {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(30,41,59,0.85); color: #fff;
  font: 500 0.8rem/1 Inter, system-ui, sans-serif;
  padding: 0.5rem 0.85rem; border-radius: 9999px; pointer-events: none;
}
.tlp-rm-loading span {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #D97706;
  animation: tlp-rm-spin 0.8s linear infinite;
}
@keyframes tlp-rm-spin { to { transform: rotate(360deg); } }
/* Once the interactive map is up, the Leaflet pane covers the fallback */
.tlp-rm-ready .leaflet-container { border-radius: 1rem; font-family: Inter, system-ui, sans-serif; }
.tlp-rm-ready .leaflet-container a { color: #2C5E55; }

.tlp-rm-elev {
  margin-top: 0.85rem; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
}
.tlp-rm-elev-head {
  font: 700 0.72rem/1.3 Inter, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em; color: #2C5E55;
  margin-bottom: 0.4rem;
}
.tlp-rm-elev-note { color: #64748b; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tlp-rm-elev-chart svg { display: block; }