Fix FAB and weather widget z-index and positioning

- FAB category z-index goes to 9000 when open (above search/weather)
- FAB returns to normal z-index when closed
- Weather widget positioned with document flow below search bar
- Increased spacing between FAB categories and subcategories
- FABs moved lower on screen (260px desktop, 240px mobile)
- Search bar dropdown z-index increased to 850
- Labels use transparent background with text shadow

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Map/MapView.jsx

@@ -1953,7 +1953,7 @@ export default function MapView({
               </div>
             </div>
           </div>
-          {/* Weather widget - single nearest city - BELOW search bar */}
+          {/* Weather widget - flows naturally below search bar */}
           {nearestWeather && (() => {
             const w = nearestWeather;
             const isSunny = w.icon === '☀️' || w.icon === '⛅';
@@ -1974,9 +1974,8 @@ export default function MapView({
               <div
                 onClick={() => setActiveWeatherPost(w)}
                 style={{
-                  position: 'fixed',
-                  left: '2px',
-                  top: '55px',
+                  marginTop: '4px',
+                  marginLeft: '3px',
                   display: 'inline-flex',
                   alignItems: 'center',
                   gap: '5px',
@@ -1990,7 +1989,6 @@ export default function MapView({
                   cursor: 'pointer',
                   backdropFilter: 'blur(8px)',
                   boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-                  zIndex: 300,
                 }}
               >
                 <span style={{ fontSize: '16px' }}>{w.icon}</span>

src/components/Map/RadialMenu.css

@@ -7,7 +7,7 @@
   background: rgba(0, 0, 0, 0.15);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
-  z-index: 440; /* Above weather widget (300), below FAB items */
+  z-index: 810; /* Above map-overlay-top (800) */
   animation: fab-fade-in 0.2s ease;
 }
 
@@ -20,8 +20,8 @@
 .fab-left,
 .fab-right {
   position: fixed;
-  top: 180px;
-  z-index: 450; /* Above weather widget (300), below search dropdown (500) */
+  top: 260px;
+  z-index: 820; /* Above map-overlay-top (800) */
 }
 
 .fab-left {
@@ -49,7 +49,7 @@
   transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
   -webkit-tap-highlight-color: transparent;
   position: relative;
-  z-index: 451; /* Above weather widget (300), below search dropdown (500) */
+  z-index: 821; /* Above map-overlay-top (800) */
 }
 
 .fab-btn-right {
@@ -81,11 +81,11 @@
   transform: translateX(-50%);
   font-size: 10px;
   font-weight: 700;
-  color: #1e293b;
-  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
   white-space: nowrap;
   pointer-events: none;
-  background: rgba(255, 255, 255, 0.85);
+  background: transparent;
   padding: 2px 6px;
   border-radius: 4px;
   max-width: 80px;
@@ -94,14 +94,15 @@
 }
 
 .fab-label-time {
-  background: rgba(15, 23, 42, 0.85);
-  color: #e2e8f0;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  background: transparent;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
 }
 
 .fab-label-cat {
-  background: rgba(255, 255, 255, 0.9);
-  color: #1e293b;
+  background: transparent;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
 }
 
 /* Item labels (category/subcategory names) */
@@ -113,11 +114,11 @@
   margin-top: 4px;
   font-size: 9px;
   font-weight: 700;
-  color: #1e293b;
-  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
   white-space: nowrap;
   pointer-events: none;
-  background: rgba(255, 255, 255, 0.9);
+  background: transparent;
   padding: 1px 5px;
   border-radius: 3px;
 }
@@ -172,7 +173,7 @@
   transform: translate(var(--x), var(--y)) scale(1);
   pointer-events: auto;
   transition-delay: var(--delay);
-  z-index: 452; /* Above weather widget when visible */
+  z-index: 822; /* Above map-overlay-top (800) */
 }
 
 .fab-item:hover {
@@ -210,7 +211,7 @@
   animation: fab-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
   animation-delay: var(--delay);
   --color: #64748b;
-  z-index: 453; /* Above category items */
+  z-index: 823; /* Above category items */
 }
 
 .fab-sub.is-active {
@@ -251,13 +252,19 @@ body[data-theme="light"] .fab-btn {
 }
 
 body[data-theme="light"] .fab-label {
-  color: #1e293b;
-  text-shadow: 0 1px 4px rgba(255,255,255,0.8);
+  color: #0f172a;
+  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
 }
 
-body[data-theme="light"] .fab-label-time {
-  background: rgba(255, 255, 255, 0.9);
-  color: #1e293b;
+body[data-theme="light"] .fab-label-time,
+body[data-theme="light"] .fab-label-cat {
+  color: #0f172a;
+  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
+}
+
+body[data-theme="light"] .fab-item-label {
+  color: #0f172a;
+  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
 }
 
 body[data-theme="light"] .fab-item {
@@ -276,7 +283,7 @@ body[data-theme="light"] .fab-item.is-active {
 @media (max-width: 480px) {
   .fab-left,
   .fab-right {
-    top: 160px;
+    top: 240px;
   }
 
   .fab-left {

src/components/Map/RadialMenu.jsx

@@ -110,31 +110,32 @@ export default function RadialMenu({
       {(leftOpen || rightOpen) && (
         <div
           className="fab-backdrop"
+          style={{ zIndex: 8999 }}
           onClick={() => { setLeftOpen(false); setRightOpen(false); }}
         />
       )}
 
       {/* LEFT FAB - Categories */}
-      <div className={`fab-left ${leftOpen ? "is-open" : ""}`}>
+      <div className={`fab-left ${leftOpen ? "is-open" : ""}`} style={leftOpen ? { zIndex: 9000 } : undefined}>
         {/* Categories ring - expand DOWN-RIGHT */}
         <div className="fab-ring">
           {CATEGORIES.map((cat, i) => {
             // Find index of first active category to rotate
             const firstActiveIdx = CATEGORIES.findIndex(c => activeCategories.includes(c.id));
             // Rotate so active category is at middle-right (angle 0 = straight right)
-            const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 40 : 0;
-            const angle = -20 + (i * 40) + rotateOffset;
+            const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 50 : 0;
+            const angle = -25 + (i * 50) + rotateOffset;
             const rad = (angle * Math.PI) / 180;
-            const r = 62;
+            const r = 68;
             const x = Math.cos(rad) * r;
             const y = Math.sin(rad) * r;
             const isActive = activeCategories.includes(cat.id);
 
             // Subcategories for this category
             const subcats = SUBCATEGORIES[cat.id] || [];
-            const subRadius = 52;
+            const subRadius = 65;
             // Spread subcats more - center them around the category angle
-            const subSpacing = 32;
+            const subSpacing = 45;
             const subStartAngle = angle - ((subcats.length - 1) * subSpacing) / 2;
 
             return (
@@ -188,7 +189,7 @@ export default function RadialMenu({
         <button
           className="fab-btn fab-btn-split"
           onClick={leftOpen && hasActiveFilters ? handleClearAll : handleLeftToggle}
-          style={{ background: leftOpen ? "#ef4444" : fabGradient }}
+          style={{ background: fabGradient }}
           title={leftOpen && hasActiveFilters ? "Clear all filters" : "Categories"}
         >
           {leftOpen ? (

src/styles/map.css

@@ -177,7 +177,7 @@
   transform:translateX(-50%);
   max-width: min(980px, calc(100vw - 24px));
   width:100%;
-  z-index: 800; /* Above filters (300) but below modals (9999) */
+  z-index: 850; /* Above FAB (820) but below modals (9999) */
 }
 
 

src/styles/smartSearchBar.css

@@ -167,7 +167,7 @@ body[data-theme="light"] {
 
 .sw-search__dropdown {
   position: absolute;
-  z-index: 500;
+  z-index: 850;
   left: 0;
   right: 0;
   margin-top: 8px;