.leaflet-marker-pane .leaflet-marker-icon > img {
  scale: 0.6;                 /* modern, non-destructive */
  transform-origin: 50% 50%;  /* rotate about center; tweak if needed */
}

.leaflet-marker-icon .name i {
  display: inline-block !important; /* Ensure max-width applies */
  font-size: 7px !important; /* Default font size */
  line-height: 10px !important; /* Adjust line height */
  width: 70px !important; /* Restrict width for wrapping */
  white-space: normal !important; /* Allow text to wrap */
  overflow-wrap: break-word !important; /* Ensure long words wrap */
  padding: 2px 2px !important; /* Add padding */
  border: 2px solid darkblue !important; /* Add dark blue border */
  opacity: 0.95; /* Add transparency */
  transition: font-size 0.2s ease-in-out; /* Smooth transition for hover effect */
  transition: width 0.2s ease-in-out; /* Smooth transition for hover effect */
  transition: padding 0.2s ease-in-out; /* Smooth transition for hover effect */
  transition: border 0.2s ease-in-out; /* Smooth transition for hover effect */
}

.leaflet-marker-icon .name i:hover {
  font-size: 11px !important; /* Increase font size on hover */
  font-weight: bold;
  padding: 8px 8px !important; /* Add padding */
  width: 105px !important; /* Restrict width for wrapping */
  border: 4px solid darkblue !important; /* Add dark blue border */
  z-index: 10000;
}

.leaflet-marker-icon .name {
  white-space: normal !important; /* Allow text to wrap */
  font-size: 8px !important; /* Default font size */
}