#wrap{
  position:relative;
  width:650px;
  max-width:100%;
}
#map{
  width:100%;
  display:block;
  overflow:visible;
}

/* State Styling */
.state{
  fill:#dce1e9;
  stroke:#ffffff;
  stroke-width:1.2px;
  transition: fill 0.25s ease;
  cursor: pointer;
}
.state:hover{ 
  fill:#64b5f6;
}

.pin-g{ 
  cursor:pointer;
  transition: transform 0.2s ease;
}
.pin-g:hover{
  transform: translateY(-4px);
}

/* Image-matching Card Tooltip */
#tip{
  position:absolute;
  background:#ffffff;
  border-radius:12px;
  padding:14px 18px;
  width:250px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  display:none;
  z-index:99;
  pointer-events:none;
  border: 1px solid rgba(0,0,0,0.08);
}
#tip-inner{ 
  display:flex; 
  align-items:flex-start; 
  gap:12px; 
}
#tip-icon{ 
  flex-shrink:0; 
  margin-top:2px; 
}
#tip-title{
  font-size:14px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:4px;
}
#tip-addr{ 
  font-size:12px; 
  color:#475569; 
  line-height:1.4; 
  font-weight: 500;
  white-space:pre-line; 
}

/* State Name Hover Tooltip */
#state-tip{
  position:absolute;
  background:rgba(15, 23, 42, 0.88);
  color:#ffffff;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:6px;
  display:none;
  z-index:98;
  pointer-events:none;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}