* { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, sans-serif; }

        body { background-color: #f5f7fa; }

        /* MAP CONTAINER fixed below header */
        #map-container {
            position: relative;
            width: 100%;
            height: calc(100vh - 80px); /* 80px = header height */
        }

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

        /* SIDEBAR – desktop */
        #sidebar {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 280px;
            height: calc(100% - 40px);
            background: white;
            border-radius: 12px;
            padding: 20px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 1500;
            transition: transform 0.3s ease;
        }

        #sidebar h3 {
            margin-bottom: 20px; padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
            color: #2c3e50; font-size: 1.4rem;
        }

        #sidebar a {
            display: flex; align-items: center;
            padding: 12px 15px; margin-bottom: 8px;
            background: #f8f9fa; border-radius: 8px;
            cursor: pointer; text-decoration: none; color: #34495e;
            transition: all .2s ease;
            border-left: 4px solid transparent;
        }

        #sidebar a:hover {
            background: #e3f2fd; border-left: 4px solid #3498db;
            transform: translateX(5px);
        }

        #sidebar a:before {
            content: "📍"; margin-right: 10px;
        }

        /* Hamburger button (mobile) */
        #sidebar-toggle {
            display: none;
            position: absolute; top: 20px; left: 20px;
            z-index: 2000;
            background: #3498db; color: white;
            border: none; border-radius: 50%;
            width: 50px; height: 50px;
            font-size: 1.5rem; cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        /* Overlay for closing sidebar */
        #overlay {
            display: none;
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.3);
            z-index: 1400;
        }

        /* Mobile behaviour */
        @media (max-width: 768px) {

            #sidebar-toggle {
                display: block;
            }

            #sidebar {
                left: 0;
                width: 260px;
                transform: translateX(-260px); /* fully hidden */
                height: 100%;
            }

            #sidebar.active {
                transform: translateX(0);
            }

            #overlay.active {
                display: block;
            }

        }

        /* Marker style */
        .custom-marker {
            background: #3498db;
            border: 3px solid white;
            border-radius: 50%;
            width: 20px; height: 20px;
        }


.gallery-header {
    max-width: 700px;
    margin: 0 auto;
}

.gallery-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary);
}

.gallery-subtitle {
    color: #555;
    font-size: 1.1rem;
    margin-top: 5px;
}