Added mapbox integration

frontend/src/index.css

@@ -2040,6 +2040,67 @@ label {
   font-size: 0.95rem;
 }
 
+.verified-location-field {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.verified-location-label {
+  display: grid;
+  gap: 0.35rem;
+  font-weight: 600;
+}
+
+.verified-location-search-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.65rem;
+  align-items: end;
+}
+
+.verified-location-selected {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid rgba(35, 138, 90, 0.2);
+  border-radius: 8px;
+  background: rgba(35, 138, 90, 0.08);
+}
+
+.verified-location-selected div {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.verified-location-selected small,
+.verified-location-result small {
+  color: var(--muted);
+}
+
+.verified-location-results {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.verified-location-result {
+  display: grid;
+  gap: 0.15rem;
+  width: 100%;
+  padding: 0.8rem 0.9rem;
+  text-align: left;
+  color: var(--ink);
+  border: 1px solid rgba(53, 129, 98, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.verified-location-result:hover {
+  border-color: rgba(39, 105, 179, 0.28);
+  background: rgba(255, 255, 255, 0.78);
+}
+
 .toggle-card input[type="checkbox"] {
   width: 20px;
   height: 20px;
@@ -2374,7 +2435,8 @@ label {
   .inline-form,
   .profile-hero,
   .photo-editor,
-  .settings-nested-grid {
+  .settings-nested-grid,
+  .verified-location-search-row {
     grid-template-columns: 1fr;
   }