body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#map-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

#map {
    width: 100%;
    height: 100%;
}

/* UI Overlay */
.map-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 250px;
}

.map-overlay h2 { margin: 0 0 10px 0; color: #1b4332; font-size: 1.2rem; }
.map-overlay p { font-size: 0.9rem; color: #555; }

/* Legend Symbols */
.legend div { display: flex; align-items: center; margin-top: 8px; font-size: 0.8rem; }
.line { width: 20px; height: 3px; margin-right: 10px; display: inline-block; }
.trail { background: #e63946; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; display: inline-block; }
.hut { background: #2a9d8f; }
.view { background: #f4a261; }

/* Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 5px;
}
.popup-img {
    width: 100%;
    border-radius: 4px;
    margin-top: 8px;
}