@keyframes locationCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.interactive-map-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.interactive-map {
    width: 100%;
    height: auto
}

.interactive-map g path,.interactive-map path {
    fill: var(--soft-white);
    stroke: var(--soft-sand);
    stroke-width: .5;
    transition: stroke .3s ease
}

.interactive-map g.hover path,.interactive-map path.hover {
    stroke: var(--intraservis-blue)
}

.interactive-map g.active path,.interactive-map g.partner-country path,.interactive-map path.active,.interactive-map path.partner-country {
    fill: var(--intraservis-blue)
}

.location-card {
    display: none;
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--intraservis-blue);
    color: var(--soft-white);
    padding: clamp(24px,3vw,40px);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 10;
    max-width: min(820px,92%);
    border: 0;
    transform: translateZ(0);
    will-change: opacity,transform
}

.location-card.active {
    display: block;
    z-index: 99;
    animation: locationCardFadeIn 200ms ease-out
}

.location-card .location-card__title,.location-card h3 {
    margin: 0 0 16px;
    line-height: 1.1;
    color: var(--soft-white)
}

.location-card .location-card__description,.location-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--soft-white);
    opacity: .95
}

.map-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--intraservis-blue);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    pointer-events: none;
    z-index: 12;
    will-change: transform
}

@media (max-width:768px) {
    .interactive-map-container {
        flex-direction: column;
        align-items: center
    }

    .interactive-map-container .location-card {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 92%;
        margin-top: clamp(16px,3vw,24px);
        z-index: 0;
        border-radius: 24px
    }

    .interactive-map-container .map-marker {
        display: none
    }
}