/* Ensure overlay is above map tiles but below Leaflet's default controls (optional) */  
#map-overlay {  
    z-index: 1000; /* Leaflet's map controls use z-index 1000; adjust to 999 to place below */  
}  

/* Optional: Add background to overlay for better visibility */  
#map-overlay {  
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */  
    padding: 0.5rem;  
    border-radius: 0.5rem;  
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */  
}  

/* Hover effect for buttons */  
#map-overlay .btn:hover {  
    transform: scale(1.05);  
    transition: transform 0.2s;  
}  

@media (max-width: 767px) {  
    #map-overlay .btn {  
        font-size: 0.8rem;  
        padding: 0.25rem 0.5rem;  
    }  
}  

/* Image corner round */
/*img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}
*/

/* Make sure map tiles aren't rounded */
.leaflet-container{
    img{
        border-radius: 0px;
    }
} 

/* Round entire map */
.leaflet-container{
    border-radius: 20px;
}