/*map.css*/
/* ===========================================
      Інтерактивна карта України
=========================================== */
.ua-map-wrap{
    position:relative;
    max-width:1100px;
    margin:auto;
}

#ua-map{
    width:100%;
}

#ua-map svg{
    display:block;
    width:100%;
    height:auto;
}

/* Всі області */
.region{
    fill:#E2E4E8;
    stroke:#ffffff;
    stroke-width:1.2;
    transition:
        fill .25s,
        transform .25s,
        filter .25s;
    cursor:pointer;
    transform-origin:center;

}

/* Hover */
.region:hover{
    fill:var(--accent);
    filter:drop-shadow(0 0 8px rgba(0,0,0,.15));

}

.region.active{
    fill:var(--accent);
}

.region:focus{
    outline:none;
}

#ua-tooltip{
    position:absolute;
    pointer-events:none;
    background:#fff;
    color:#222;
    padding:10px 14px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    font-size:15px;
    font-weight:600;
    opacity:0;
    transform:translate(-50%,-120%);
    transition:.2s;
    white-space:nowrap;
    z-index:50;
}

.city-point{
    fill:var(--accent);
    stroke:#fff;
    stroke-width:2;
    pointer-events:none;
}

.city-pulse{
    fill:var(--accent);
    opacity:.35;
    transform-origin:center;
    animation:cityPulse 2s infinite;
    pointer-events:none;
}

@keyframes cityPulse{
    0%{r:5;opacity:.6;}
    100%{r:15;opacity:0;}
}

.city-label{
    font-size:12px;
    fill:#333;
    font-weight:700;
    pointer-events:none;
    user-select:none;
}


@media (max-width:768px){
    .city-label{
        display:none;
    }
}