/* Base styles for the SVG */
svg {
  width: 100%;
  height: auto;
  max-width: 1200px; /* Limit maximum size */
}

/* Base map paths */
.map path {
  fill: #d3d3d3;
  stroke: #000;
  stroke-width: 0.5;
  transition: fill 0.3s ease, transform 0.3s ease;
  transform-origin: center; /* Ensures scaling happens from the center */
  pointer-events: all; /* Ensure path is clickable */
}

/* Highlighted countries - Enlarged hover effect */
.highlight {
  fill: #ff5722;
  cursor: pointer;
  transition: transform 0.3s ease, fill 0.3s ease;
  transform-origin: center; /* Ensures scaling happens from the center */
}

.highlight:hover {
  fill: #ff7043;
  transform: scale(1.2) translate(0, -10px); /* Enlarging and moving the country slightly */
}

/* Country labels */
.country-label {
  font-size: 12px;
  font-family: Arial, sans-serif;
  fill: #ffffff;
  text-anchor: middle;
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Ignore mouse events */
  transition: opacity 0.3s ease;
  z-index: 10; /* Ensure label stays on top */
}

/* Show the label when the country is hovered */
.highlight:hover + .country-label {
  opacity: 1;
}

/* Location markers (invisible circle for the country) */
.location-icon {
  fill: #007bff;
  cursor: pointer;
}

.location-icon:hover {
  fill: #0056b3;
}