/* Wrapper layout (levo mapa, desno sadržaj) */
.home-map .hm-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}

/* Levo: držač mape */
.hm-left {
  position: relative;          /* da tooltip prati ovaj kontejner */
  width: 100%;
  min-height: 420px;           /* da mapa ima prostora da naraste */
}

/* SVG uvek fluidan */
#svg-holder svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover efekti na path-ovima mape */
#svg-holder svg .st0 {
  fill: #ececec;
  stroke: #b9c0c7;
  stroke-width: 0.5;
  transition: fill .15s ease, stroke .15s ease, filter .15s ease;
  vector-effect: non-scaling-stroke; /* da stroke ostane tanak i kad se skalira */
}

#svg-holder svg .st0:hover {
  fill: #dfe9f9;               /* svetla hover boja */
  stroke: #8ea6c1;
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.15));
}

/* Tooltip */
.hm-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-9999px, -9999px);
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  white-space: nowrap;
}

/* Na malim ekranima mapa ide u punoj širini iznad teksta */
@media (max-width: 960px) {
  .home-map .hm-wrap {
    grid-template-columns: 1fr;
  }
  .hm-left {
    min-height: 360px;
  }
}
/* Brojač postova unutar mape (za svaku zemlju) */
.hm-left .count-badge {
  pointer-events: none;
  position: absolute;
  background: #F27F0C;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
}

/* Dugme "Back to Europe" */
#map-back {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10;
  transition: background .2s;
}
#map-back:hover {
  background: rgba(0,0,0,0.85);
}