.d3map-tooltip {
  background: white;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
}

#map-wrapper {
  margin-bottom: 30px;
  position: relative;
}

#map {
  position: relative;
  background: inherit;
  border: none;
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1.6;
}
#map svg {
  border: none;
  width: 100%;
  height: 100%;
}
#map .feature {
  stroke: white;
  stroke-width: 1px;
  fill: #D71D24;
  cursor: pointer;
  transition: fill 0.2s ease;
}
#map .feature.hover, #map .feature:hover {
  fill: #000;
}
#map .feature.active {
  stroke-width: 1px;
  fill: gray;
}
#map .labels {
  pointer-events: all;
  cursor: default;
  font-weight: normal;
}
#map .labels .state-label {
  cursor: pointer;
}
#map .labels .state-label text {
  fill: #fff;
  font-family: Monospace;
  pointer-events: all;
  stroke: none;
  font-size: 12px;
}
#map .labels .state-label circle {
  fill: #D71D24;
  pointer-events: all;
  stroke: gray;
  transition: fill 0.2s ease;
}
#map .labels .state-label.hover circle, #map .labels .state-label:hover circle {
  fill: #000;
}
#map .labels .state-label.active circle {
  fill: gray;
}
#map .labels .state-label.label-position-A text {
  pointer-events: none;
}
#map .labels .state-label.label-position-A circle {
  pointer-events: none;
  stroke: none;
  fill: transparent;
}
#map .labels .state-label.label-position-A.hover, #map .labels .state-label.label-position-A:hover {
  pointer-events: none;
  stroke: none;
  fill: transparent;
}
#map.layer-1 .feature {
  opacity: 1;
}
#map.layer-2 #layer-1-features .feature {
  opacity: 0.3;
}
#map.layer-2 #layer-1-features .feature.active {
  opacity: 0.5;
}
#map.layer-2 #layer-2-features .feature {
  opacity: 1;
}

.reset-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  color: #000;
  background: white;
  font-size: 1.5rem;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.reset-button:hover {
  color: #D71D24;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.reset-button i {
  display: block;
}

@media (max-width: 768px) {
  .reset-button {
    font-size: 1.2rem;
    padding: 4px 8px;
  }
  #map .labels .state-label text {
    font-size: 10px;
  }
}
@media print {
  .reset-button {
    display: none !important;
  }
  #map {
    border: 1px solid #000;
    background: white;
  }
}