diff --git a/components/weather/location-search.tsx b/components/weather/location-search.tsx
index 238cf2b..6ce9888 100644
--- a/components/weather/location-search.tsx
+++ b/components/weather/location-search.tsx
@@ -31,20 +31,47 @@ export function LocationSearch({ stations, positions }: { stations: SynopStation
           <MapPin className="size-4 text-accent" />
           <p className="section-kicker">{t("location.label")}</p>
         </div>
-        <label className="relative block">
-          <span className="sr-only">{t("location.searchLabel")}</span>
-          {isFetching || isPreparingStations ? <LoaderCircle className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 animate-spin text-accent" /> : <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted" />}
-          <input
-            value={query}
-            onChange={(event) => setQuery(event.target.value)}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => window.setTimeout(() => setIsFocused(false), 150)}
-            placeholder={t("location.placeholder")}
-            autoComplete="off"
-            className="w-full rounded-card border border-border/70 bg-surface-raised/80 py-3.5 pl-10 pr-10 text-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-          />
-          {query && <button type="button" aria-label={t("location.clear")} onClick={() => setQuery("")} className="absolute right-3 top-1/2 -translate-y-1/2 rounded-control p-1 text-muted transition hover:bg-surface-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"><X className="size-4" /></button>}
-        </label>
+        <div className="relative z-20">
+          <label className="relative block">
+            <span className="sr-only">{t("location.searchLabel")}</span>
+            {isFetching || isPreparingStations ? <LoaderCircle className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 animate-spin text-accent" /> : <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted" />}
+            <input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => window.setTimeout(() => setIsFocused(false), 150)}
+              placeholder={t("location.placeholder")}
+              autoComplete="off"
+              className="w-full rounded-card border border-border/70 bg-surface-raised/80 py-3.5 pl-10 pr-10 text-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            />
+            {query && <button type="button" aria-label={t("location.clear")} onClick={() => setQuery("")} className="absolute right-3 top-1/2 -translate-y-1/2 rounded-control p-1 text-muted transition hover:bg-surface-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"><X className="size-4" /></button>}
+          </label>
+          {showSuggestions && (
+            <div className="glass absolute inset-x-0 top-[calc(100%+0.5rem)] overflow-hidden rounded-panel p-2 shadow-card">
+              {isPreparingStations ? <p className="px-3 py-4 text-sm text-muted">{t("location.preparing")}</p> :
+                isError ? <p className="px-3 py-4 text-sm text-muted">{t("location.error")}</p> :
+                !isFetching && !suggestions.length ? <p className="px-3 py-4 text-sm text-muted">{t("location.empty")}</p> :
+                  suggestions.map(({ location, nearest }) => nearest && (
+                    <button
+                      type="button"
+                      key={location.id}
+                      onClick={() => {
+                        selectLocation(nearest);
+                        setQuery("");
+                        setIsFocused(false);
+                      }}
+                      className="flex w-full items-start justify-between gap-3 rounded-card px-3 py-3 text-left transition hover:bg-surface-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+                    >
+                      <span>
+                        <span className="block text-sm font-semibold">{location.name}</span>
+                        <span className="mt-0.5 block text-xs text-muted">{[location.district, location.province].filter(Boolean).join(" · ")}</span>
+                      </span>
+                      <span className="shrink-0 text-right text-[0.68rem] leading-5 text-muted">{t("location.nearest")}<br /><strong className="font-semibold text-foreground">{nearest.stationName} · {nearest.distanceKm} km</strong></span>
+                    </button>
+                  ))}
+            </div>
+          )}
+        </div>
         <CurrentLocationControl stations={locatedStations} />
         {selectedLocation && (
           <p className="mt-3 px-1 text-xs text-muted">
@@ -55,31 +82,6 @@ export function LocationSearch({ stations, positions }: { stations: SynopStation
           {t("location.attribution")} <a href="https://open-meteo.com/en/docs/geocoding-api" target="_blank" rel="noreferrer" className="underline decoration-muted/60 underline-offset-2 transition hover:text-accent">Open-Meteo / GeoNames</a>
         </p>
       </div>
-      {showSuggestions && (
-        <div className="glass absolute inset-x-0 top-[calc(100%+0.5rem)] overflow-hidden rounded-panel p-2 shadow-card">
-          {isPreparingStations ? <p className="px-3 py-4 text-sm text-muted">{t("location.preparing")}</p> :
-            isError ? <p className="px-3 py-4 text-sm text-muted">{t("location.error")}</p> :
-            !isFetching && !suggestions.length ? <p className="px-3 py-4 text-sm text-muted">{t("location.empty")}</p> :
-              suggestions.map(({ location, nearest }) => nearest && (
-                <button
-                  type="button"
-                  key={location.id}
-                  onClick={() => {
-                    selectLocation(nearest);
-                    setQuery("");
-                    setIsFocused(false);
-                  }}
-                  className="flex w-full items-start justify-between gap-3 rounded-card px-3 py-3 text-left transition hover:bg-surface-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-                >
-                  <span>
-                    <span className="block text-sm font-semibold">{location.name}</span>
-                    <span className="mt-0.5 block text-xs text-muted">{[location.district, location.province].filter(Boolean).join(" · ")}</span>
-                  </span>
-                  <span className="shrink-0 text-right text-[0.68rem] leading-5 text-muted">{t("location.nearest")}<br /><strong className="font-semibold text-foreground">{nearest.stationName} · {nearest.distanceKm} km</strong></span>
-                </button>
-              ))}
-        </div>
-      )}
     </section>
   );
 }