/* City name + search */
#city-wrap {
  position:absolute; top:80px;
  left:50%; transform:translateX(-50%);
  display:flex; justify-content:center; align-items:center;
  white-space:nowrap;
  pointer-events:auto;
  z-index:100;
}
.city-btn {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.92);
  font-size:clamp(20px,5vw,28px); font-weight:300;
  letter-spacing:.04em;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
  padding:4px 10px; font-family:inherit;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:color .18s, border-color .18s;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.city-btn:hover { color:#fff; border-color:rgba(255,255,255,.6); }
#wx-date {
  position:absolute; top:calc(100% + 7px);
  left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-size:clamp(10px,2vw,12px); font-weight:400;
  color:rgba(255,255,255,.48);
  letter-spacing:.06em;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
  pointer-events:none;
}
.city-btn:active { transform:scale(.97); }
.city-search {
  display:none; align-items:center; gap:6px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.3);
  border-radius:24px; padding:7px 10px 7px 18px;
  pointer-events:auto; position:relative;
  width:220px;
}
.city-search.open { display:flex; }
.city-input {
  background:none; border:none; outline:none;
  color:#fff; font-size:16px; font-family:inherit;
  letter-spacing:.03em; width:100%;
  pointer-events:auto;
}
.city-input::placeholder { color:rgba(255,255,255,.35); }
.city-results {
  display:none; position:absolute; top:calc(100% + 8px);
  left:0; right:0; min-width:200px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; overflow:hidden;
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  z-index:30;
}
.city-results.open { display:block; }
.city-result-item {
  padding:10px 18px; color:rgba(255,255,255,.82);
  font-size:13px; letter-spacing:.02em;
  cursor:pointer; transition:background .14s;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.city-result-item:last-child { border-bottom:none; }
.city-result-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.city-result-item:active { background:rgba(255,255,255,.16); }