.rt-route-profile {
  --rt-route-color: var(--bs-primary, #006c67);
  --rt-route-fill: rgba(0, 108, 103, .14);
}

.rt-route-profile__stage {
  position: relative;
  min-height: clamp(28rem, 55vw, 42rem);
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--bs-gray-200, #e9ecef);
}

.rt-route-profile__map {
  height: clamp(22rem, 48vw, 36rem);
  min-height: clamp(28rem, 55vw, 42rem);
  background: var(--bs-gray-200, #e9ecef);
}

.rt-route-profile__toggle { position: absolute; z-index: 1001; top: 1rem; right: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.rt-route-profile__chart-wrap { position: absolute; z-index: 1000; right: 1rem; bottom: 1rem; left: 1rem; min-height: 10rem; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.55); border-radius: 1rem; background: rgba(255,255,255,.72); box-shadow: 0 4px 20px rgba(0,0,0,.16); backdrop-filter: blur(4px); }
.rt-route-profile__chart-wrap[hidden] { display: none; }
.rt-route-profile__chart { display: block; width: 100%; height: 12rem; overflow: visible; touch-action: pan-y; }
.rt-route-profile__loading { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--bs-secondary-color, #6c757d); background: rgba(255,255,255,.72); }
.rt-route-profile__grid { stroke: var(--bs-border-color, #dee2e6); stroke-width: 1; }
.rt-route-profile__area { fill: var(--rt-route-fill); }
.rt-route-profile__line { fill: none; stroke: var(--rt-route-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.rt-route-profile__cursor { stroke: var(--bs-dark, #212529); stroke-dasharray: 4 4; }
.rt-route-profile__axis { fill: var(--bs-secondary-color, #6c757d); font-size: 12px; }
.rt-route-profile__tooltip { position: absolute; z-index: 2; padding: .45rem .65rem; border-radius: .5rem; color: #fff; background: rgba(0, 0, 0, .82); font-size: .8rem; pointer-events: none; transform: translate(-50%, -115%); white-space: nowrap; }
.rt-route-marker { width: 1rem; height: 1rem; border: 3px solid #fff; border-radius: 50%; background: var(--rt-route-color); box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.rt-route-logo img { width: 86px; }

@media (max-width: 991.98px) {
  .rt-route-profile__stage,
  .rt-route-profile__map {
    min-height: 36rem;
  }

  .rt-route-profile__map { height: 36rem; }
  .rt-route-profile__chart-wrap { right: .75rem; bottom: .75rem; left: .75rem; }
}

@media (max-width: 575.98px) {
  .rt-route-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .rt-route-section h2 { margin-bottom: 1rem !important; font-size: clamp(1.35rem, 6vw, 1.75rem); }
  .rt-route-profile__stage { min-height: 31rem; border-radius: .875rem; }
  .rt-route-profile__map { height: 31rem; min-height: 31rem; }
  .rt-route-profile__toggle { top: .5rem; right: .5rem; max-width: calc(100% - 1rem); padding: .4rem .65rem; font-size: .75rem; }
  .rt-route-profile__chart-wrap { right: .35rem; bottom: .35rem; left: .35rem; min-height: 7.5rem; padding: .2rem .25rem; border-radius: .75rem; }
  .rt-route-profile__chart { height: 8.5rem; }
  .rt-route-profile__axis { font-size: 10px; }
  .rt-route-profile__tooltip { padding: .35rem .5rem; font-size: .7rem; }
  .rt-route-logo img { width: 68px; }
}

@media (max-width: 389.98px) {
  .rt-route-profile__stage,
  .rt-route-profile__map {
    min-height: 28rem;
    height: 28rem;
  }

  .rt-route-profile__chart { height: 7.75rem; }
}