body { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
            margin: 20px; 
            background: #f9f9f9; 
        }
        h1 { 
            text-align: center; 
            color: #333; 
            margin-bottom: 20px; 
        }
        #map { 
            height: 600px; 
            width: 100%; 
            max-width: 1200px; 
            margin: 0 auto; 
            border-radius: 12px; 
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
            border: 1px solid #ddd; 
        }
        /* Map Info Window Popup Styles */
        .popup-container { 
            max-width: 240px; 
            padding: 4px;
        }
        .popup-img { 
            width: 100%; 
            height: 140px; 
            object-fit: cover; 
            border-radius: 6px; 
            margin-bottom: 5px; 
            display: block; 
            cursor: pointer; /* Pointer visual feedback for clicking */
            transition: opacity 0.2s;
        }
        .popup-img:hover {
            opacity: 0.9;
        }
	    .popup-img-static {
	        cursor: default;
	    }
	    .popup-img-static:hover {
	        opacity: 1;
	    }
 	    .popup-gallery-hint {
            font-size: 12px;
            color: #043566;
            text-align: center;
            margin: 0 0 8px 0;
            font-style: italic;
        }
        .popup-title { 
            font-size: 15px; 
            font-weight: 700; 
            color: #222; 
            margin: 0 0 6px 0;
        }
        .popup-desc { 
            font-size: 13px; 
            color: #555; 
            line-height: 1.4; 
            margin: 0; 
        }
        .popup-next-link {
            display: inline-block;
            /*margin-top: 10px;*/
            font-size: 13px;
            font-weight: 700;
            color: #0066cc;
            text-decoration: none;
            cursor: pointer;
        }
        .popup-next-link:hover {
            text-decoration: underline;
        }
        .popup-navigation-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px solid #eee;
            font-size: 13px;
        }
        .popup-prev-link {
            color: #666;
            text-decoration: none;
            font-weight: 700;
        }
        .popup-prev-link:hover {
            color: #DD6741;
            text-decoration: underline;
        }
        .project-tour-container {
            text-align: center;
            margin: 14px 0 20px;
        }
        .project-tour-link {
            font-size: 16px;
            font-weight: 700;
            color: #0066cc;
            text-decoration: none;
            cursor: pointer;
        }
        .project-tour-link:hover {
            text-decoration: underline;
        }
        /* Fullscreen Image Modal Styles */
        .modal {
            display: none; 
            position: fixed;
            z-index: 99999; /* Higher priority than Leaflet overlays */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85); 
            align-items: center;
            justify-content: center;
	        user-select: none;
        }
        .modal-wrapper {
            position: relative;
            max-width: 90%;
            max-height: 85vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            max-width: 90%;
            max-height: 85vh;
            border-radius: 8px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            display: block;
        }
        .modal-close {
            position: absolute;
            top: -50px;
            right: 0px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        .modal-close:hover {
            color: #bbb;
        }
        /* UPDATED: Prominent Navigation Arrows Styles */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.25); /* Bright high-contrast background */
            color: #ffffff;
            border: 2px solid rgba(255, 255, 255, 0.4);
            font-size: 24px;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            z-index: 100001; /* Locks above the photo image viewport */
        }
        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.45);
            transform: translateY(-50%) scale(1.05);
        }
        .nav-btn:active {
            transform: translateY(-50%) scale(0.95);
        }
        .prev-btn { left: -85px; } /* Positions clearly outside image bounds on desktop */
        .next-btn { right: -85px; }

        /* Responsive Configuration for Smartphone Displays */
        @media (max-width: 900px) {
        .modal-wrapper { max-width: 95%; }
        .prev-btn { left: 15px; background: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.2); } /* Overlay on image safely on phone sizes */
        .next-btn { right: 15px; background: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.2); }
        .modal-close { top: -60px; right: 10px; font-size: 45px; }
        }
        :root { --navy:#13283B; --navy-dark:#0d2030; --sky:#A6CAD2; --orange:#DD6741; --cream:#F3EEE4; }
        * { box-sizing:border-box; }
        body { margin:0; padding:0; background:var(--navy); color:#fff; font-family:Arial,Helvetica,sans-serif; }
        .map-header { min-height:104px; display:flex; align-items:center; justify-content:center; padding:15px 24px; background:var(--navy-dark); }
        .map-header img { display:block; width:auto; height:74px; max-width:min(480px,85vw); object-fit:contain; }
        .map-page { width:min(1040px,100%); margin:0 auto; padding:46px 32px 42px; }
        h1 { margin:0 0 14px; color:#fff; font:400 clamp(42px,6vw,76px)/1 Georgia,'Times New Roman',serif; letter-spacing:-.035em; }
        .map-intro { max-width:690px; margin:0 auto 34px; color:#c8d7df; text-align:center; font-size:17px; line-height:1.7; }
        #map { width:min(920px,100%); height:min(55vh,560px); min-height:400px; margin:0 auto; border:3px solid var(--sky); border-radius:0; box-shadow:0 22px 60px rgba(0,0,0,.28); }
        .project-tour-link,.popup-next-link { color:var(--sky); }
        .project-tour-link { display:inline-block; padding-bottom:5px; border-bottom:1px solid currentColor; text-transform:uppercase; letter-spacing:.1em; font-size:13px; }
        .project-tour-link:hover,.project-tour-link:focus-visible,.popup-next-link:hover,.popup-next-link:focus-visible { color:var(--orange); }
        .map-intro-tour-link { color:var(--sky); transition:color .2s ease; text-decoration: none; border-bottom:1px solid currentColor;}
        .map-intro-tour-link:hover,.map-intro-tour-link:focus-visible { color:var(--orange); }
        .return-wrap { text-align:center; margin-top:30px; }
        .return-button { display:inline-block; padding:16px 22px; border:0; background:var(--sky); color:var(--navy); font:900 12px Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.11em; cursor:pointer; transition:background .2s ease,color .2s ease; }
        .return-button:hover,.return-button:focus-visible { background:var(--orange); color:#fff; }
        .map-footer { padding:28px 24px; background:var(--navy-dark); color:#aab8c1; text-align:center; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
        .leaflet-container { font-family:Arial,Helvetica,sans-serif; }
        .leaflet-popup-content-wrapper,.leaflet-popup-tip { background:var(--cream); color:var(--navy); }
        .popup-title { color:var(--navy); font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .popup-desc { color:#52616c; }
        @media(max-width:700px){ .map-header{min-height:84px}.map-header img{height:58px}.map-page{padding:44px 14px 38px}#map{width:100%;height:62vh;min-height:390px}.map-intro{font-size:15px} }

        /* 🗺️ DYNAMIC MAP MARKER GLOWS AND BASES */
    .custom-map-pin {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        }
    .custom-pin-svg {
        filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.35));
        transform-origin: bottom center;
        transition: transform 0.15s ease;
        }
    .custom-pin-svg:hover {
        transform: scale(1.18);
        }
    /* 🎨 USER DEFINED COLOR TRACKS */
    .pin-tour-track { fill: #DD6741; }
    .pin-google-maps { fill: #2A75D3; } /* Standard digital map blue */
    .pin-default-house { fill: rgba(0, 0, 0, 0.5); }

    /* ==========================================================
   🗺️ PERSISTENT MAP LEGEND (NATIVE ATTRIBUTION BAR STYLE)
    ========================================================== */
    .map-legend-panel.horizontal-legend {
    /* 🌓 Exact Leaflet attribution glaze: ultra-thin light semi-transparent backing */
        background: rgba(255, 255, 255, 0.7); 
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    
    /* 📐 Native layout matching: sharp corners, micro padding margins, zero borders */
        padding: 0 5px;
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    
    /* Font style baseline normalization */
        font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
        color: #333333;
    
    /* Horizontal structural calculations */
        display: inline-flex;
        align-items: center;
        gap: 8px; /* Tight item margins matching attribution text gaps */
    }

    .legend-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* 🎨 ATTRIBUTION-SCALED COLOR DOTS */
    .legend-pin {
        display: inline-block;
        width: 7px;   /* Micro dots that align cleanly inside text baseline heights */
        height: 7px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.25);
        flex-shrink: 0;
    }

    .legend-pin-tour     { background: #DD6741; } /* 🟠 Has Images */
    .legend-pin-google   { background: #2A75D3; } /* 🔵 Street View */
    .legend-pin-fallback { background: #636364; } /* ⚪ No Images */

    .legend-label {
        font-size: 11px;
        font-weight: normal; /* Removes bolding to perfectly copy attribution styling */
        color: #333333;
        text-shadow: none;   /* Light background ensures perfect dark text readability */
        white-space: nowrap;
    }

    /* Fluid wrap preservation for smaller viewport widths */
    @media (max-width: 600px) {
    .map-legend-panel.horizontal-legend {
        padding: 0 4px;
        gap: 6px;
    }
    .legend-label {
        font-size: 10px;
    }
}