.travel-map .world-map {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(18, 50, 78, 0.78), rgba(4, 23, 40, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1rem 2rem rgba(0, 0, 0, 0.25);
  cursor: grab;
  touch-action: none;
}

.travel-map .world-map.is-dragging {
  cursor: grabbing;
}

.travel-map .world-map svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform: translate(var(--map-pan-x, 0px), var(--map-pan-y, 0px)) scale(var(--map-zoom, 1));
  transform-origin: center;
  transition: transform 220ms ease;
  shape-rendering: geometricPrecision;
}

.travel-map .world-map.is-dragging svg {
  transition: none;
}

.travel-map .world-map svg path,
.travel-map .world-map svg circle {
  fill: rgba(255, 244, 220, 0.18);
  stroke: rgba(255, 244, 220, 0.22);
  stroke-width: 0.45;
  transition:
    fill 240ms ease,
    stroke 240ms ease,
    opacity 240ms ease;
}

.travel-map .world-map svg [data-travel-status="ideal"] {
  fill: rgba(66, 210, 120, 0.96);
  stroke: rgba(177, 235, 184, 0.7);
}

.travel-map .world-map svg [data-travel-status="mixed"] {
  fill: rgba(244, 182, 55, 0.97);
  stroke: rgba(255, 220, 145, 0.72);
}

.travel-map .world-map svg [data-travel-status="avoid"] {
  fill: rgba(235, 75, 74, 0.95);
  stroke: rgba(255, 151, 139, 0.68);
}

.travel-map .world-map svg [data-has-travel-data="true"] {
  cursor: pointer;
}

.travel-map .world-map svg [data-has-travel-data="true"]:hover {
  stroke: rgba(255, 241, 189, 0.9);
}

.travel-map .world-map::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  content: "";
  pointer-events: none;
}

.travel-map .map-tooltip {
  position: absolute;
  right: 1.15rem;
  bottom: 4.65rem;
  z-index: 4;
  width: min(17rem, calc(100% - 2rem));
  border: 1px solid rgba(228, 189, 106, 0.62);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  color: var(--cream);
  background: rgba(7, 24, 42, 0.9);
  box-shadow:
    0 1rem 2.2rem rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px) saturate(1.2);
  pointer-events: none;
}

.travel-map .map-tooltip strong {
  display: block;
  color: var(--gold-light);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.travel-map .map-tooltip span {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255, 244, 220, 0.78);
  font-size: 0.8rem;
}

.travel-map .map-zoom {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.travel-map .map-zoom button {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(228, 189, 106, 0.62);
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(7, 24, 42, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.65rem 1.4rem rgba(0, 0, 0, 0.24);
  font-weight: 700;
  cursor: pointer;
}

.travel-map .map-zoom [data-map-zoom="reset"] {
  width: auto;
  min-width: 3.35rem;
  padding: 0 0.72rem;
  border-radius: 999px;
}

.travel-map .legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.travel-map .legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.travel-map .legend i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
}

.travel-map .ideal {
  background: #42d278;
}

.travel-map .mixed {
  background: #f4b637;
}

.travel-map .avoid {
  background: #eb4b4a;
}