.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;
  }
}