.interactive-map-container {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%; /* Ensure container doesn't exceed viewport width */
}

/* Ensure the map takes the full container size */
.leaflet-container {
    width: 100%;
    height: 100%;
}

/* Loading placeholder */
.map-loading-placeholder {
    text-align: center;
    padding: 20px;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    .interactive-map-container {
        /* Respect inline height set by JavaScript or PHP */
        height: inherit;
    }
}