body {
  margin: 0px;
  font-family: 'Open Sans', sans-serif;

}

.main-wrapper {
  width: 100%;
  height: auto;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
}

.header {
  display: flex;
  flex-direction: column; /* umjesto row, za vertikalno slaganje */
  align-items: center;     /* centriraj horizontalno */
  justify-content: center; /* centriraj vertikalno ako bude visina */
  text-align: center;
  margin-bottom: 5px;

}

.election-logo {
  width: 80px;
  height: auto;
  margin-right: 20px;
}

.title-wrapper {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 33px;
  font-weight: bold;
  margin: 0;
}

.subtitle {
  font-size: 20px;
  margin: 4px 0;
}

.meta-info {
  font-size: 14px;
  color: #333;
}

.content {
  display: flex;
  flex: 1;
  gap: 20px;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: normal;
  gap: 10px;
}



.party-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  color: #333;
  margin-top:10px;
}

.party-summary li {
  margin-bottom: 6px;
}

.party-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
}

.sdp { background-color: #e03131; }
.hdz { background-color: #2b50a1; }
.ids { background-color: #9dd292; }
.mozemo { background-color: #6b4fa1; }
.ovire { background-color: #999; }
.možemo { background-color: #6b4fa1; }

.akcijamladih { background-color: #f8d929; }
.nlborisamiletića { background-color: #a2239e; }


.center-panel {
  flex: 1;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-title-left {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left!important;
}

.candidate {
  margin-bottom: 12px;
}

.candidate .name {
  font-weight: bold;
  margin: 0 0 2px 0;
  font-size:14px;
}

.candidate .name2 {
  font-weight: bold;
  margin: 0 0 2px 0;
  font-size:17px;
}


.bar {
  height: 10px;
  margin-bottom: 4px;
  background-color: #eee;
  position: relative;
}

.bar.red { background-color: #e03131; }
.bar.blue { background-color: #2b50a1; }
.bar.green { background-color: #9dd292; }
.bar.purple { background-color: #6b4fa1; }
.bar.grey { background-color: #ccc; }

.bar span {
  position: absolute;
  right: 5px;
  top: -4px;
  font-size: 12px;
  color: #000;
}

.votes {
  font-size: 13px;
  margin: 0;
}

.right-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.city-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;


}

.city-group2 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  width:100%!important;


}

.zupani-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top:-10px;


}



.city {
  font-size: 14px;
  background-color: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  flex: 1 1 320px;
  display: flex;
  flex-direction: row;
  gap:30px;
  box-sizing: border-box;
}

.zupani{
  font-size: 14px;
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  margin-top: 10px;
}

.city-name {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
  align-self: center;
  min-width:95px;
  padding-left:10px;
}

.city-name.special-full-width {
  width: 100%;
  text-align: left;
  padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.city .candidate {
  flex: 1 1 18%; 
  display: flex;
  flex-direction: column;
  max-width: 18%; 
  margin: 2px;
}

.city .name {
  font-weight: bold;
}


.city:not(:has(.special-pula)) .candidate {

  max-width: 44%; 
}

.city:has(.special-one) .candidate {

  max-width: 100%; /* Ograničava maksimalnu širinu svakog kandidata na 50% */
}




.affiliation {
  font-weight: normal;
  font-style: italic;
  color: #555;
  font-size:11px;
  padding-bottom:2px;
}

.chart-bar-container {
  height: 15px;
  width: 100%;
  background-color: #ddd;
  margin: 4px 0 8px;
  position: relative;
}

.chart-bar-fill {
  height: 100%;
}

.chart-bar-green { background-color: #9dd292; }
.chart-bar-blue { background-color: #2b50a1; }
.chart-bar-red { background-color: #e03131; }
.chart-bar-purple { background-color: #6b4fa1; }
.chart-bar-grey { background-color: #999; }


.chart-bar-akcijamladih { background-color: #f8d929; }
.chart-bar-nlborisamiletića { background-color: #a2239e; }



.chart-percentage {
  font-size: 13px;
  font-weight: bold;
  align-self: flex-start;
  margin-bottom: 8px;
}

.footer {
  font-size: 14px;
  margin-top: 10px;
  color: #555;
  text-align: center;
}



.left-panel {
  flex: 1 1 25%; /* Ovo podešava 'flex-grow', 'flex-shrink' i 'flex-basis' */
}

.right-panel {
  flex: 2 1 75%; /* Ovo podešava 'flex-grow', 'flex-shrink' i 'flex-basis' */
}

.candidate .name2, .candidate .affiliation {
  display: block;
}









.istria-map-container {
  position: relative;
  display: inline-block;
}

.istria-map {
  width: 100%;
  height: auto;
  display: block;
    opacity: 0.9;

}

.city-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  animation: bounce 1.6s ease-in-out infinite alternate;
  transform-origin: center;
  transition: transform 0.2s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* CENTRALNI BIJELI PULS — sada puno jači */
.city-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%) scale(0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); /* povećan opacity! */
  animation: whitepulse 1.8s ease-out infinite;
  z-index: 1;
}

/* ŠIRI VALOVI OKO DOT-A — pojačani također */
.city-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); /* pojačan i ovaj sloj */
  animation: ringpulse 2.8s ease-out infinite;
  z-index: 0;
}

/* Animacija centralnog pulsa */
@keyframes whitepulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

/* Animacija šireg bijelog vala */
@keyframes ringpulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.25;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

/* Bounce animacija za dot */
@keyframes bounce {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1.2);
  }
}


.city-label {
  position: absolute;
  background: white;
  color: black;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  white-space: nowrap;
  z-index: 2;
}

.city-dot.pula {
    top: 294px;
    left: 122px;
}
.city-label.pula {
    top: 290px;
    left: 72px;
}

.city-dot.vodnjan {
    top: 247px;
    left: 128px;
}
.city-label.vodnjan {
    top: 243px;
    left: 55px;
}

.city-label.labin {
    top: 189px;
    left: 234px;
}
.city-dot.labin {
    top: 194px;
    left: 215px;
}

.city-dot.rovinj {
    top: 194px;
    left: 57px;
}
.city-label.rovinj {
    top: 189px;
    left: 78px;
}

.city-dot.porec {
    top: 144px;
    left: 43px;
}
.city-label.porec {
    top: 138px;
    left: 64px;
}

.city-dot.pazin {
    top: 141px;
    left: 169px;
}
.city-label.pazin {
    top: 136px;
    left: 188px;
}

.city-dot.buzet {
    top: 45px;
    left: 168px;
}
.city-label.buzet {
    top: 40px;
    left: 186px;
}

.city-dot.novigrad {
    top: 110px;
    left: 31px;
}
.city-label.novigrad {
    top: 106px;
    left: 51px;
}

.city-dot.umag {
    top: 55px;
    left: 16px;
}
.city-label.umag {
    top: 51px;
    left: 34px;
}

.city-dot.buje {
    top: 78px;
    left: 86px;
}
.city-label.buje {
    top: 73px;
    left: 106px;
}



.city.special-pula {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0px;
  min-width: fit-content;
    border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* decentan shadow */

}

.city.special-pula .candidate {
  flex: 1 1 48%;
  max-width: 48%;
}
.city-container.expandable {
  max-height: 237px;
  overflow: hidden;
  transition: max-height 0.4s ease;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);



}

.city-container.expandable.expanded {
  max-height: 1000px; /* ili koliko ti treba za prikaz svih kandidata */
}

.expand-btn {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  background-color: #e03131;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  display: block;
}

.expand-btn-wrapper {

  text-align: center;
  padding: 0px;
  z-index: 2;
  width:100%;
margin-top:-12px;
}


.city-dot.dot-red { background-color: #e03131; }
.city-dot.dot-blue { background-color: #2b50a1; }
.city-dot.dot-green { background-color: #70e459; }
.city-dot.dot-purple { background-color: #6b4fa1; }
.city-dot.dot-grey { background-color: #999; }

.city-dot.dot-akcijamladih { background-color: #f8d929; }
.city-dot.dot-nlborisamiletića { background-color: #a2239e; }



.watermark {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}

.ionix-link {
  font-weight: 700;
  font-size: 12px;
  color: #444;
  text-decoration: none;
}

.ionix-link:hover {
  color: #000;
  text-decoration: none;
}

.city:has(.candidate:nth-child(3)) {
  flex: 1 1 100% !important;
}





.chart-result-line {
  display: inline-flex;
  align-items: baseline; /* najvažnije za poravnanje teksta s različitom visinom */
  gap: 6px;
  margin-top: 4px;
}

.chart-result-line .chart-percentage {
  font-weight: bold;
  line-height: 1;
}

.chart-result-line .chart-votes {
  color: #444;
  line-height: 1;
}