#fim-map svg path {
  fill: #e2e2e2;
  stroke: #ffffff;
  cursor: pointer;
  transition: .2s;

}

#fim-map svg path.selected {
  fill: #ff8a00;
}

#fim-map svg path:hover {
  filter: brightness(.9);
}

#fim-popup.hidden {
  display: none;
}

#fim-popup {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

.fim-popup-inner {
  background:#fff;
  border-radius:10px;
  padding:20px;
  max-width:400px;
  width:90%;
  position:relative;
}

.fim-close {
  position:absolute;
  right:10px;
  top:10px;
  cursor:pointer;
  font-size:24px;
}
#fim-tooltip {
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
}

.fim-container {
    display: flex;
    width: 100%;
    height: auto;

    justify-content: center;
     align-items: flex-start;   /* ⬅️ не stretch */
    gap: 60px;

    margin: 0 auto;       /* ⬅️ центрируем */
    padding: 0 40px;
    box-sizing: border-box;
}

#fim-map {
    flex: 1; /* занимает половину контейнера */
}

.fim-info {
    flex: 1; /* занимает вторую половину */
    padding: 10px;
    
    overflow-y: auto; /* если текста много */
}

#fim-map,
.fim-info {
    flex: 1 1 0;           /* ⬅️ КЛЮЧЕВО */
    min-width: 0;          /* ⬅️ запрещает налезание */
    box-sizing: border-box;
}


#fim-map {
    width: 100%;
    max-width: 100%;
    display: flex;
    
}

#fim-map svg {
    flex: 1 1 auto;   /* позволяет SVG растягиваться в flex */
    width: 100%;      /* растягиваем по контейнеру */
    height: auto;     /* сохраняем пропорции */
    display: block;
    max-height: 80vh; /* не выше 80% высоты экрана */
    min-width: 0;     /* ключ для flex: позволяет сжиматься правильно */
}


@media (max-width: 1024px) {

    .fim-container {
        flex-direction: column;
        align-items: stretch; /* ❗ ВАЖНО */
        gap: 40px;
        padding: 0 30px;
    }

    #fim-map,
    .fim-info {
        flex: none;
        justify-self: center;
        width: 100%;      /* ❗ НА ВСЮ ШИРИНУ */
        max-width: none; /* ❗ УБИРАЕМ ЛЮБЫЕ ОГРАНИЧЕНИЯ */
    }

    .fim-info {
        text-align: left; /* текст нормально читается */
    }
    @media (max-width: 1024px) {
    #fim-map {
        width: 100%;       /* занять всю ширину */
        max-width: 100%;   /* убрать любые ограничения */
        flex: 1 1 auto;
    }

    #fim-map svg {
        width: 100%;       /* svg растягивается на всю ширину */
        height: auto;      /* высота подстраивается */
        max-height: 80vh;  /* ограничиваем, чтобы не выходило за экран */
    }
}

}
@media (max-width: 767px) {
    .fim-container {
        gap: 30px;
        padding: 0 20px;
    }
}
@media (max-width: 600px) {
    .fim-container {
        padding: 0 15px;
    }
}
@media (max-width: 480px) {
    .fim-container {
        padding: 0 10px;
        gap: 25px;
    }

    .fim-info {
        font-size: 13px;
    }
}