added a move system for the pins

map/app/public/css/style.css

@@ -111,6 +111,61 @@ body {
     z-index: 1000;
 }
 
+/* Move Controls */
+.move-controls {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 10000;
+    min-width: 300px;
+    text-align: center;
+}
+
+/* Mobile-specific move controls */
+@media (max-width: 768px) {
+    .move-controls {
+        top: auto;
+        bottom: 20px;
+        left: 10px;
+        right: 10px;
+        transform: none;
+        width: auto;
+        min-width: unset;
+        max-width: 100%;
+        padding: 15px;
+        z-index: 10001; /* Ensure it's on top */
+        background: white; /* Add background */
+        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Add shadow for visibility */
+    }
+    
+    .move-controls-content h3 {
+        font-size: 18px;
+        margin-bottom: 8px;
+    }
+    
+    .move-controls-content p {
+        font-size: 14px;
+        margin: 3px 0;
+    }
+    
+    .move-controls-actions {
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 12px;
+    }
+    
+    .move-controls-actions .btn {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 16px;
+    }
+}
+
 /* Buttons */
 .btn {
     padding: 10px 16px;
@@ -986,3 +1041,96 @@ path.leaflet-interactive {
     stroke-width: 2px !important;
     fill-opacity: 0.8 !important;
 }
+
+/* Marker being moved */
+.location-marker.leaflet-drag-target {
+    cursor: move !important;
+}
+
+/* Popup actions buttons spacing */
+.popup-actions {
+    display: flex;
+    gap: 5px;
+    margin-top: 10px;
+}
+
+/* Pulsing animation for marker being moved */
+@keyframes pulse-marker {
+    0% {
+        transform: scale(1);
+        opacity: 0.9;
+    }
+    50% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0.9;
+    }
+}
+
+/* Ensure marker animations work */
+.leaflet-overlay-pane svg path {
+    transform-origin: center;
+}
+
+/* Move confirmation popup styles */
+.move-confirm-popup-wrapper .leaflet-popup-content-wrapper {
+    background: white;
+    border: 2px solid var(--primary-color);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.move-confirm-popup {
+    text-align: center;
+    padding: 10px;
+}
+
+.move-confirm-popup h3 {
+    margin: 0 0 10px 0;
+    color: var(--dark-color);
+    font-size: 16px;
+}
+
+.move-confirm-popup p {
+    margin: 0 0 15px 0;
+    color: #666;
+}
+
+.move-confirm-popup .popup-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+/* Cancel move button styles */
+#cancel-move-btn,
+#mobile-cancel-move-btn {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+#cancel-move-btn:hover,
+#mobile-cancel-move-btn:hover {
+    background-color: #c0392b;
+}
+
+/* Ensure crosshairs are visible during move */
+.crosshair {
+    z-index: 1100;
+}
+
+/* Mobile-friendly popup buttons */
+@media (max-width: 768px) {
+    .popup-content .popup-actions .btn {
+        padding: 10px 12px;
+        font-size: 14px;
+        min-height: 44px; /* Ensure touch-friendly size */
+    }
+    
+    .move-confirm-popup .popup-actions .btn {
+        min-width: 100px;
+        min-height: 44px;
+    }
+}