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

.ism-region {
  fill: #e0e0e0;
  cursor: pointer;
  transition: fill 0.2s ease;
}

.ism-region:hover,
.ism-region.active {
  fill: #ff6b00;
}
/* Base map */
.ism-map-wrapper svg {
  width: 100%;
  height: 100%;
}

/* Override amCharts styles */
.ism-map-wrapper .land {
  fill: #CCCCCC;
  fill-opacity: 1;
  stroke:white;
  stroke-opacity: 1;
  stroke-width:0.5;
  cursor: pointer;
}
.ism-map-wrapper .water{
  fill: #CCCCCC;
  fill-opacity: 1;
  stroke:white;
  stroke-opacity: 1;
  stroke-width:0.5;
}
/* Hover / active */
.ism-map-wrapper .land:hover,
.ism-map-wrapper .land.active {
  fill: #ff6b00 !important;
}
.ism-tooltip {
  position: absolute;
  top:-50px;
  background: #222;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
  z-index: 9999;
}
.ism-map-container {
  display: flex;
  gap: 16px;
}

.ism-map-wrapper {
  display: flex;
  flex: 1;
}

.ism-info-box {
  width: 320px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px;
  display: none;
}

.ism-info-box.open {
  display: block;
}

.ism-info-box img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 8px;
}

.ism-close {
  float: right;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

/* Tooltip */
.ism-tooltip {
  position: absolute;
  top:-50px;
  background: #222;
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  display: none;
  z-index: 9999;
}
.district {
  fill: #e53935;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: pointer;
}

.district:hover {
  r: 6;
}

@media (max-width: 768px) {
  .ism-map-container {
    flex-direction: column;
  }

  .ism-info-box {
    width: 100%;
  }
}