.osm-dofe-gpx-map-wrap {
  border: 1px solid #dcdcde;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.osm-dofe-gpx-map-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 14px;
  border-bottom: 1px solid #dcdcde;
  background: #f6f7f7;
}

.osm-dofe-gpx-map-header span {
  display: block;
  margin-top: 2px;
  color: #50575e;
  font-size: 12px;
}

.osm-dofe-gpx-basemap-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.osm-dofe-gpx-preview-map {
  height: 460px;
  width: 100%;
}

.osm-dofe-gpx-preview-map.is-adding-checkpoint,
.osm-dofe-gpx-preview-map.is-adding-checkpoint * {
  cursor: crosshair !important;
}

.osm-dofe-gpx-preview-map-status {
  padding: 10px 14px;
  border-top: 1px solid #dcdcde;
  font-size: 13px;
  color: #1d2327;
  background: #fff;
}

.osm-dofe-gpx-preview-map-status.is-ok { background: #f0f6fc; color: #0a4b78; }
.osm-dofe-gpx-preview-map-status.is-warning { background: #fcf9e8; color: #8a6d00; }
.osm-dofe-gpx-preview-map-status.is-error { background: #fcf0f1; color: #8a2424; }

.osm-dofe-leg-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #005ea5;
  color: #fff;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.osm-dofe-leg-marker span { line-height: 1; }

.osm-dofe-map-inline-tools,
.osm-dofe-gpx-edit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px 0;
}

.osm-dofe-gpx-map-edit-form { padding: 0 0 14px; }

.osm-dofe-map-popup-note {
  margin-top: 4px;
  color: #50575e;
  font-size: 12px;
}