/* responsive.css */

@media (max-width: 991px) {

  body {
    padding: 5px;
    margin:0px;
  }

  .main-wrapper {
    width: 100%;
    padding: 10px;
  }

  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .election-logo {
    width: 60px;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .main-title {
    font-size: 24px;
  }

  .subtitle {
    font-size: 16px;
  }

  .meta-info {
    font-size: 13px;
    margin-bottom: 15px;
    margin-top:5px;
    text-align: center;
  }

  .content {
    flex-direction: column;
  }

  .left-panel,
  .center-panel,
  .right-panel {
    flex: 1 1 100%;
    width: 100%;
  }

  .section-title,
  .section-title-left {
    font-size: 20px;
    text-align: center !important;
  }

 .istria-map-container {
    width: 315px;
    height: 356px;
    overflow: hidden;
    margin: 0 auto;
  }

  .istria-map {
    width: 315px;
    height: 356px;
    object-fit: cover;
    display: block;
    opacity: 0.9;
  }

  .city-group,
  .zupani-group {
    flex-direction: row;
    gap: 12px;
  }

  .zupani {
    flex: 1 1 100%;
    flex-direction: column;
    padding: 10px;
  }

.candidate {
    margin-bottom: 0px;
}

.city {
  flex-wrap: wrap;
  flex-direction: row; /* bitno: horizontalno slaganje */
  justify-content: center;
  gap: 8px;
}

.city .candidate {
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
  box-sizing: border-box;
  min-width: 140px;
}


  .city-name {
    text-align: center;
    padding: 0px 0;
    width:100%;
  }

  .candidate .name,
  .candidate .name2 {
    font-size: 14px;
    text-align: center;
  }

  .candidate .affiliation {
    font-size: 12px;
    text-align: center;
  }

  .chart-bar-container {
    height: 12px;
  }

  .chart-percentage {
    font-size: 12px;
    text-align: center;
  }

  .footer {
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
  }

  /* Redoslijed prikaza sadržaja - koristi se flexbox order gdje je moguće */
  .meta-info { order: 1; }
  .center-panel { order: 2; }
  .left-panel { order: 3; }
  .right-panel { order: 4; }
  .footer { order: 5; }

  .expand-btn-wrapper {
    margin-top: 3px;
  }

}