.city-field{position:relative}
.city-menu{max-height:320px;overflow-y:auto;position:absolute;top:calc(100% + 10px);left:-8px;right:-8px;min-width:240px;background:#fff;border:1px solid #e6e8df;border-radius:18px;box-shadow:0 18px 40px rgba(38,63,59,.18);padding:8px;z-index:60;display:flex;flex-direction:column;gap:2px;text-align:left}
.city-menu[hidden]{display:none}
.city-menu-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#54867c;padding:6px 10px}
.city-menu button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;background:transparent;border:0;border-radius:12px;padding:10px;font:inherit;font-size:14px;font-weight:600;color:#263f3b;cursor:pointer;text-align:left}
.city-menu button small{font-size:11px;font-weight:500;color:#7a8a84;white-space:nowrap}
.city-menu button:hover,.city-menu button:focus-visible{background:#e9f1eb;outline:none}
.city-menu .city-empty{font-size:13px;font-weight:500;color:#7a8a84;padding:8px 10px}

/* YouTube-style: on phones the city list becomes a fixed sheet under the header, always visible above the keyboard */
@media (max-width:700px){
.city-menu{position:fixed;top:70px;left:10px;right:10px;min-width:0;max-height:52vh;z-index:300;border-radius:20px;box-shadow:0 24px 60px rgba(38,63,59,.35)}
.city-menu button{padding:13px 12px;font-size:15px}
}