.leaflet-container{
  border-radius: 16px;
  overflow: hidden;
}

/* Reduce how "bright" the map feels against your dark UI */
.leaflet-container{
  filter: saturate(0.75) contrast(0.95) brightness(0.92);
}

/* Optional: make the blue route less loud (if needed) */
.leaflet-overlay-pane svg path{
  opacity: 0.85;
}

.leaflet-control-layers{
  display: none !important;
}

.leaflet-control-zoom{
  display: none !important;
}

/* =====================================================
   UpRunStats — spacing between splits / map / elevation
   (guaranteed selectors based on your DOM)
   ===================================================== */

/* Space AFTER the entire UpRunStats block (includes Splits) */
.tl-gpx-summary{
  margin-bottom: 36px !important;
}

/* Space BETWEEN map and elevation chart */
.leaflet-container{
  margin-bottom: 28px !important;
  border-radius: 16px;
  overflow: hidden;
}

/* Space ABOVE the elevation chart canvas (extra safety) */
canvas[id^="myChart_"]{
  margin-top: 28px !important;
  display: block;
}

/* Slight visual separation for the map/elevation block */
.wpgpxmaps{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
}

/* ===== Section Header (Overview / Zones / Splits) ===== */
.upstats-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.upstats-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bcbcbc;
}

.upstats-icon {
  font-size: 14px;
  opacity: 0.85;
}

/* =====================================================
   UpRunStats v3.7 FIX PACK
   - Restore zone bar colors (PHP changed span -> div)
   - Remove outer wrapper outline
   - Give Run Overview its own "section" container
   ===================================================== */

/* 1) Kill the big wrapper border/background so sections stand alone */
.tl-gpx-summary{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) Run Overview header styling (matches your section-title vibe) */
.tl-overview__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.80;
  margin: 0 0 12px 0;
}

/* optional: make the icon sit in the same "pill" style */
.tl-overview__title .tl-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.95;
}

/* 3) Wrap ONLY the overview grid in a section container
   (title + grid are siblings in markup) */
.tl-overview__title + .tl-gpx-summary__grid{
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  margin: 0 0 16px 0;
}

/* If you keep this wrapper, you can slightly reduce tile borders so it doesn’t feel “double framed” */
.tl-overview__title + .tl-gpx-summary__grid .tl-gpx-summary__item{
  border-color: rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.035);
}

/* 4) Zone bars — NEW structure uses:
      .tl-zone__barwrap (track) + .tl-zone__bar (fill)
*/
.tl-zone__barwrap{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}

.tl-zone__bar{
  height: 100%;
  border-radius: 999px;
  opacity: 0.95;
}

/* Zone colors now target .tl-zone__bar (not span) */
.tl-zone--z1 .tl-zone__bar{ background: #4B4F55; } /* Recovery */
.tl-zone--z2 .tl-zone__bar{ background: #7A7F86; } /* Aerobic Endurance */
.tl-zone--z3 .tl-zone__bar{ background: #C7A56E; } /* Aerobic Power (gold) */
.tl-zone--z4 .tl-zone__bar{ background: #E67E22; } /* Threshold */
.tl-zone--z5 .tl-zone__bar{ background: #FF2A2A; } /* Anaerobic Endurance */
.tl-zone--z6 .tl-zone__bar{ background: #FF0055 !important; } /* Anaerobic Power */

/* (Optional) keep Z6 feeling "final" without extra glow */
.tl-zone--z6 .tl-zone__barwrap{
  border-color: rgba(255,0,85,0.35);
}