.state {
  fill: #e2e8f0; /* Default gray */
  stroke: #ffffff;
  stroke-width: 1;
  transition: fill 0.3s ease;
}

.state.highlighted {
  fill: #2563eb; /* Blue for highlighted states */
}

.state:hover {
  fill: #1e40af; /* Darker blue on hover */
}

/* Mobile view - scale down the entire SVG map container */
@media (max-width: 767px) {
  /* Assuming your ComposableMap SVG has a wrapper with class 'map-wrapper' */
  .map-wrapper {
    transform: scale(0.3);        /* scale down to 30% size */
    transform-origin: top left;   /* anchor scaling to top-left */
    width: 100%;                  /* keep full container width */
    height: auto;
  }

  /* Optionally adjust .state stroke width on mobile */
  .state {
    stroke-width: 0.7;
  }
}
.map-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.map-wrapper svg {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* Optional: reduce stroke width and marker size for mobile */
  .map-wrapper svg .rsm-geography {
    stroke-width: 0.5 !important;
  }

  .map-wrapper svg circle {
    r: 6 !important; /* smaller circles on mobile */
    stroke-width: 1 !important;
  }

  .map-wrapper svg text {
    font-size: 12px !important; /* smaller text on mobile */
  }
}
