.map-container {
    position: relative; /* Necessary for positioning the info box */
    height: 550px; 
    padding: 1rem;
}
.region {
    stroke: #ffffff;
    stroke-width: 0.5px; 
    /* The `all` property ensures the transform will be animated */
    transition: all 0.2s ease-in-out; 
    cursor: pointer;
}
.region:hover {
    opacity: 0.8;
    transform: scale(1.01);
    transform-origin: center;

}
.region.selected {
    opacity: 1;
    /* THE FIX: Add the CSS scale transform.
    This will make the selected path 5% larger.
    `transform-origin: center` ensures it scales from its middle.
    */
}

.properties-box {
    /* CHANGE: position: fixed keeps it relative to the viewport */
    position: fixed;
    
    /* These styles remain the same */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 10px 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 0.8rem;
    max-width: 220px;
    
    /* CHANGE: This is crucial. It ensures the tooltip itself is never clickable,
       so you can move your mouse freely without it blocking map features. */
    pointer-events: none;

    /* These styles remain the same */
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    
    /* NEW: Add a transform for smoother positioning and animation */
    transform: translate(15px, 15px); /* Offset from the cursor */
}