.vesna-scale-section {
    padding: 3.75rem 0;
    background-color: #F7F7F7;
    font-family: sans-serif;
    overflow: hidden;
}
.vesna-scale-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 3.75rem;
}
.vesna-scale-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 3.125rem;
}
.vesna-scale-title {
    color: var(--bi-black);
    margin: 0;
    white-space: nowrap;
}
.vesna-scale-line {
    flex: 1;
    height: 1px;
    background-color: #D1D1D1;
}
.vesna-scale-subtitle {
    color: var(--bi-gray);
    white-space: nowrap;
}
.vesna-scale-map-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.vesna-scale-map-container {
    width: 100%;
    position: relative;
    cursor: grab;
    user-select: none;
}
.vesna-scale-map-container:active {
    cursor: grabbing;
}

#<?= $block_uid; ?> svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
#<?= $block_uid; ?> path, #<?= $block_uid; ?> g {
    fill: #ABB1C1;
    stroke: #F7F7F7;
    stroke-width: 0.5;
    transition: fill 0.4s ease;
}

#<?= $block_uid; ?> .active-country-glow, 
#<?= $block_uid; ?> .active-country-glow path {
    fill: #9CA5B9 !important;
}



.vesna-map-core-circle {
    transition: r 0.2s ease, fill 0.2s ease;
}

/* Повертаємо та виправляємо анімацію */
@keyframes pinGlow {
    0% { 
        r: 6px;       /* Точний радіус вашої білої точки (щоб не було відступу) */
        opacity: 0.8; /* Початкова прозорість */
    }
    100% { 
        r: 22px;      /* Кінцевий радіус розмиття */
        opacity: 0;   /* Повне зникнення в кінці хвилі */
    }
}

/* Умикаємо видимість пульсуючого кола */
.vesna-map-pulse-circle {
    display: block; 
    transform-origin: center;
    pointer-events: none; /* Щоб пульсація не заважала клікам */
}

.vesna-map-core-circle {
    transition: r 0.2s ease, fill 0.2s ease;
}

/* Стилі для наведення залишаються вашими */
.vesna-country-center-pin .vesna-map-core-circle {
    fill: #FFFFFF;
    stroke: #9CA5B9;
    stroke-width: 2;
}
.vesna-country-center-pin:hover .vesna-map-core-circle {
    r: 9px;
    fill: #FFFFFF;
}

.vesna-city-pin .vesna-map-core-circle {
    fill: #FFFFFF;
}
.vesna-city-pin:hover .vesna-map-core-circle {
    r: 7px;
}
.vesna-city-pin {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.vesna-city-pin.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* СТИЛІ ДЛЯ МОБІЛЬНИХ ТАБІВ ЗГІДНО МАКЕТУ */
.vesna-map-mobile-tabs {
    display: none; /* Приховано на десктопі */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    flex-direction: column;
    gap: 0.625rem;
}
.vesna-map-tab-btn {
    background-color: rgba(247,245,243. 0.48);
    border: none;
    font-size: 1.125rem;
    color: var(--bi-gray);
    padding: 1.0625rem 3.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
/* Стан активного табу (Синя кнопка як на макеті) */
.vesna-map-tab-btn.active {
    background-color: var(--bi-blue);
    color: #FFFFFF;
}

/* Адаптивність під мобільні екрани */
@media (max-width: 768px) {
    .vesna-scale-container {
        padding: 0 1.25rem;
    }
    .vesna-scale-header {
        margin-bottom: 2rem;
    }
    .vesna-map-mobile-tabs {
        display: flex; /* Показуємо таби на мобільних */
    }
    
    .vesna-scale-header {
        flex-direction: column;
        gap: 0;
    }
    .vesna-scale-title {
        align-self: flex-start;
    }
    .vesna-scale-line {
        display:none;
    }
    .vesna-scale-subtitle {
        align-self: flex-end;
    }
    .vesna-scale-map-container {
        padding-top: 10px;
        height: 34.125rem; /* Переносимо висоту сюди */
        overflow: hidden;  /* Щоб карта не вилазила за межі екрану */
    }

    /* Карта тепер розтягується і заповнює весь блок */
    #<?= $block_uid; ?> svg {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Змушує карту заповнити блок без деформації */
    }
}