.mtai-route-map {
  --mtai-background: #ffffff;
  --mtai-text: #24323a;
  --mtai-muted: #63737c;
  --mtai-border: #cfd9dd;
  --mtai-country: #eaf1f2;
  --mtai-country-covered: #dceceb;
  --mtai-country-context: #f3f6f6;
  --mtai-beginner: #17845d;
  --mtai-intermediate: #1565c0;
  --mtai-advanced: #b43c72;
  box-sizing: border-box;
  color: var(--mtai-text);
  width: 100%;
}

.mtai-route-map *,
.mtai-route-map *::before,
.mtai-route-map *::after { box-sizing: border-box; }

.mtai-route-map__toolbar,
.mtai-route-map__legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.mtai-route-map__toolbar { margin-bottom: 10px; }
.mtai-route-map__toolbar label { display: grid; gap: 4px; font-size: 13px; }

.mtai-route-map__select,
.mtai-route-map__button {
  background: var(--mtai-background);
  border: 1px solid var(--mtai-border);
  border-radius: 4px;
  color: var(--mtai-text);
  min-height: 36px;
  padding: 6px 9px;
}

.mtai-route-map__button { cursor: pointer; }
.mtai-route-map__button:hover { background: #f2f6f7; }

.mtai-route-map__count {
  background: #edf4f5;
  border-radius: 999px;
  font-size: 13px;
  padding: 5px 9px;
}

.mtai-route-map__detail {
  color: var(--mtai-muted);
  min-height: 24px;
  margin: 0 0 8px;
}

.mtai-route-map__canvas {
  background: var(--mtai-background);
  border: 1px solid var(--mtai-border);
  height: min(var(--mtai-map-height, 780px), calc((100vw - 32px) * .68));
  min-height: 420px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.mtai-route-map__svg {
  cursor: grab;
  display: block;
  height: 100%;
  touch-action: none;
  width: 100%;
}

.mtai-route-map__svg:active { cursor: grabbing; }
.mtai-route-map__country { fill: var(--mtai-country); stroke: #7f9198; stroke-width: .9; vector-effect: non-scaling-stroke; }
.mtai-route-map__country--covered { fill: var(--mtai-country-covered); }
.mtai-route-map__country--context { fill: var(--mtai-country-context); stroke-width: 1.2; }
.mtai-route-map__region { fill: none; stroke: #81939b; stroke-width: .55; vector-effect: non-scaling-stroke; }

.mtai-route-map__region-label,
.mtai-route-map__country-label,
.mtai-route-map__island-label {
  paint-order: stroke;
  pointer-events: none;
  stroke: var(--mtai-background);
  stroke-linejoin: round;
  text-anchor: middle;
}

.mtai-route-map__region-label { fill: var(--mtai-muted); font-size: 6px; stroke-width: 1.5px; }
.mtai-route-map__country-label { fill: var(--mtai-text); font-size: 8px; font-weight: 600; stroke-width: 2px; }
.mtai-route-map__island-label { fill: var(--mtai-muted); font-size: 7px; stroke-width: 1.8px; }

.mtai-route-map__route-line,
.mtai-route-map__route-hit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mtai-route-map__route-line { opacity: .74; pointer-events: none; stroke-width: 1.8; }
.mtai-route-map__route-hit { cursor: pointer; stroke: transparent; stroke-width: 14; }
.mtai-route-map__route[hidden] { display: none; }
.mtai-route-map__route--beginner .mtai-route-map__route-line { stroke: var(--mtai-beginner); }
.mtai-route-map__route--intermediate .mtai-route-map__route-line { stroke: var(--mtai-intermediate); }
.mtai-route-map__route--advanced .mtai-route-map__route-line { stroke: var(--mtai-advanced); }
.mtai-route-map__route--reservation .mtai-route-map__route-line { stroke-dasharray: 5 3; opacity: .9; }
.mtai-route-map__route:hover .mtai-route-map__route-line,
.mtai-route-map__route--selected .mtai-route-map__route-line { opacity: 1; stroke-width: 4; }
.mtai-route-map__route-hit:focus-visible { outline: none; stroke: #101820; stroke-dasharray: 2 3; stroke-width: 3; }

.mtai-route-map__legend { color: var(--mtai-muted); font-size: 13px; margin-top: 10px; }
.mtai-route-map__legend span { align-items: center; display: inline-flex; gap: 5px; }
.mtai-route-map__swatch { border-radius: 50%; display: inline-block; height: 10px; width: 10px; }
.mtai-route-map__swatch--beginner { background: var(--mtai-beginner); }
.mtai-route-map__swatch--intermediate { background: var(--mtai-intermediate); }
.mtai-route-map__swatch--advanced { background: var(--mtai-advanced); }
.mtai-route-map__error { color: #a32626; font-weight: 600; }

@media (max-width: 600px) {
  .mtai-route-map__toolbar { align-items: stretch; }
  .mtai-route-map__toolbar label { flex: 1 1 100%; }
  .mtai-route-map__select { width: 100%; }
  .mtai-route-map__canvas { height: min(560px, calc((100vw - 24px) * .68)); min-height: 320px; }
  .mtai-route-map__region-label { font-size: 5.5px; }
  .mtai-route-map__country-label { font-size: 7.5px; }
}