#portfolio-map-container {
    display: flex;
    width: 100%;           /* Fills the width of the page container */
    height: 700px;         /* Set a fixed height so the navigation is visible */
    position: relative;    /* Sits in the normal flow of the page */
    background: #0a1128;
    color: white;
    font-family: 'Inter', sans-serif;
    z-index: 10;           /* Lowered so it doesn't float over your header */
    margin-top: 50px;      /* Optional: space above the map */
}

#map-sidebar {
    width: 260px;
    padding: 40px;
    background: #0a1128;
    z-index: 10002;
    border-right: 1px solid #1a2a4a;
    display: flex;
    flex-direction: column;
}

#map-sidebar h3 { font-size: 1.8rem; margin-bottom: 25px; color: #fff; text-transform: uppercase; }
#map-sidebar ul { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
#map-sidebar li {
    padding: 15px 0;
    font-size: 0.75rem;
    letter-spacing: 2px;
    cursor: pointer;
    color: #8a8a8a;
    transition: 0.3s;
    border-bottom: 1px solid #1a2a4a;
    font-weight: bold;
}
#map-sidebar li.active, #map-sidebar li:hover { color: #c89953; }

#map-canvas { flex-grow: 1; height: 100%; }

.orange-dot {
    width: 12px; height: 12px;
    background: #c89953;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(200, 153, 83, 0.8);
}

.marker-cluster { background: none !important; }
.marker-cluster div {
    width: 40px; height: 40px; border-radius: 50%;
    background-color: #c89953 !important;
    color: #fff !important; 
    font-weight: bold; line-height: 40px; text-align: center;
    box-shadow: 0 0 0 10px rgba(200, 153, 83, 0.2), 0 0 0 20px rgba(200, 153, 83, 0.1); 
    transition: transform 0.2s ease-in-out;
}

.map-hover-preview { padding: 10px; width: 200px; text-align: center; }
.map-hover-preview img { width: 100%; height: 110px; object-fit: cover; margin-bottom: 10px; border-radius: 2px; }
.map-hover-preview h4 { margin: 5px 0 !important; font-size: 13px !important; color: #fff !important; text-transform: uppercase; font-weight: 800; }
.map-hover-preview span { color: #c89953 !important; font-weight: bold; font-size: 10px; }

.leaflet-popup-content-wrapper { background: #111b31 !important; color: #fff !important; border-radius: 4px; padding: 0; border: 1px solid #c89953; }

@media (max-width: 768px) {
    #map-sidebar { position: absolute; top: 0; left: -100%; width: 85%; height: 100%; transition: left 0.3s ease-in-out; box-shadow: 10px 0 20px rgba(0,0,0,0.8); padding: 60px 30px; }
    #map-sidebar.open { left: 0; }
    #mobile-map-toggle {
        display: block; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10001; background: #c89953; color: #fff; padding: 15px 30px; border-radius: 50px; font-weight: bold; font-size: 14px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,0.5); cursor: pointer; white-space: nowrap;
    }
}
@media (min-width: 769px) { #mobile-map-toggle { display: none; }  }


#sidebar-close-btn {
    display: none; /* Hidden on desktop */
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #8a8a8a;
}

@media (max-width: 768px) {
    #sidebar-close-btn {
        display: block; /* Visible on mobile */
    }
    
    #map-sidebar h3 {
        margin-top: 20px; /* Give the X some space */
    }
}

/* Ensure the gold brand color is applied to the active state */
#map-sidebar li.active {
    color: #c89953 !important;
}