add close button for setup overlay

frontend/app.js

@@ -792,10 +792,28 @@ function initializeMap() {
             // Legacy fallback
             startFromLocation(startLatLng, locationData.address || "Saved Location");
         }
-        document.getElementById('setup-overlay').classList.remove('active');
+        hideSetupOverlay();
     }
 }
 
+function showSetupOverlay() {
+    const overlay = document.getElementById('setup-overlay');
+    const closeBtn = document.getElementById('closeSetupButton');
+
+    // Only show close button if there's an active trip
+    if (localStorage.getItem(LOCATION_STORAGE)) {
+        closeBtn.style.display = 'block';
+    } else {
+        closeBtn.style.display = 'none';
+    }
+
+    overlay.classList.add('active');
+}
+
+function hideSetupOverlay() {
+    document.getElementById('setup-overlay').classList.remove('active');
+}
+
 function setupEventListeners() {
     // Start button
     document.getElementById('startButton').addEventListener('click', async () => {
@@ -876,6 +894,14 @@ function setupEventListeners() {
             openKMLBrowser();
         });
     }
+
+    // Close Setup Button
+    const closeSetupBtn = document.getElementById('closeSetupButton');
+    if (closeSetupBtn) {
+        closeSetupBtn.addEventListener('click', () => {
+            hideSetupOverlay();
+        });
+    }
 }
 
 async function calculateAndStartRoute(startAddress, endAddress, isRestoring = false) {
@@ -930,7 +956,7 @@ async function calculateAndStartRoute(startAddress, endAddress, isRestoring = fa
             stateBuffer = [];
 
             startFromLocation(leg.start_location, locationData.startAddress);
-            document.getElementById('setup-overlay').classList.remove('active');
+            hideSetupOverlay();
 
             // Update UI
             document.getElementById('routeInfo').textContent = `${leg.start_address} ➝ ${leg.end_address}`;
@@ -1102,7 +1128,7 @@ function resetLocation() {
     // We don't remove LOCATION_STORAGE here anymore, so that the confirmation 
     // dialog in the Start buttons correctly sees the active trip.
     // The storage will be overwritten when the NEW trip actually starts.
-    document.getElementById('setup-overlay').classList.add('active');
+    showSetupOverlay();
     document.getElementById('startLocationInput').value = '';
     document.getElementById('endLocationInput').value = '';
     stopAnimation();
@@ -2012,7 +2038,7 @@ function startFromCustomRoute(pathData, routeName, isRestoring = false, markers
 
     // Initialize Map View
     startFromLocation(startPoint, routeName);
-    document.getElementById('setup-overlay').classList.remove('active');
+    hideSetupOverlay();
 
     // Update UI
     document.getElementById('routeInfo').textContent = `${routeName}`;

frontend/index.html

@@ -71,6 +71,7 @@
             <!-- Start Location Setup Overlay -->
             <div id="setup-overlay" class="overlay active">
                 <div class="setup-card">
+                    <button id="closeSetupButton" class="close-btn" style="display: none;">×</button>
                     <h2>🌍 Plan Your Route</h2>
                     <p>Enter a start and finish location for your walk</p>
                     <div class="input-group">

frontend/style.css

@@ -260,6 +260,13 @@ body {
     max-width: 500px;
     width: 90%;
     border: 1px solid var(--border);
+    position: relative;
+}
+
+#closeSetupButton {
+    position: absolute;
+    top: 1rem;
+    right: 1.5rem;
 }
 
 .setup-card h2 {