/**
 * trasa-route-overlay.css – polyline po značkovaných chodníkoch + Play UI.
 */

/* Štatistický pásik nad mapou (km / ↑ / ↓). */
.trasa-route-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: #fdf6ec;
  border: 1px solid #e8e4dc;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a18;
}

.trasa-route-stats strong {
  font-weight: 700;
  font-size: 16px;
  color: #1a1a18;
}

/* Polyline – pomocné triedy (oranžová + biely lem sú dva polyline objekty). */
.leaflet-overlay-pane .trasa-route-line {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
}

.leaflet-overlay-pane .trasa-route-line--fallback {
  opacity: 0.75;
}

/* Animovaný kurzor po polyline. */
.leaflet-overlay-pane .trasa-route-cursor,
.leaflet-marker-pane .trasa-route-cursor {
  filter: drop-shadow(0 0 6px rgba(239, 108, 0, 0.55));
}

/* Pulz waypointu pri prechode kurzora cez bod. */
@keyframes trasa-route-wp-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0    rgba(76, 175, 80, 0.0)); }
  35%  { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.85)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0    rgba(76, 175, 80, 0.0)); }
}

.trasa-route-wp-pulse {
  animation: trasa-route-wp-pulse 1.1s ease-out;
  transform-origin: center bottom;
}

/* Play tlačidlo počas behu – využíva existujúce .tura-wp-play. */
.tura-wp-play.is-playing {
  background: #ef6c00;
  color: #fff;
  border-color: #ef6c00;
}

/* Mobil. */
@media (max-width: 640px) {
  .trasa-route-stats {
    font-size: 13px;
    padding: 8px 10px;
    gap: 8px 14px;
  }
  .trasa-route-stats strong { font-size: 14px; }
}