.city-selector-host { position: relative; }
.city-selector-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; max-height: 320px; overflow-y: auto; background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.city-selector-list[hidden], .city-selector-region[hidden], .city-selector-more[hidden] { display: none !important; }
.city-selector-region-pending { display: none !important; }
.city-selector-option { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #eee; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.city-selector-option:last-child { border-bottom: 0; }
.city-selector-more { text-align: center; color: #176a93; border-top: 1px solid #eee; }
.city-selector-option:hover, .city-selector-highlight { background: #f0f5f8; }
.city-selector-option:focus-visible { outline: 2px solid #229ac8; outline-offset: -2px; }
.city-selector-name, .city-selector-zone { display: block; }
.city-selector-name { font-weight: 600; }
.city-selector-zone { margin-top: 2px; font-size: .92em; color: #666; }
.city-selector-status { margin-top: 5px; font-size: .9em; color: #666; }
.city-selector-status:empty { display: none; }
.city-selector-error { color: #b33; }
.city-selector-region[readonly] { cursor: default; }
@media (max-width: 600px) { .city-selector-list { max-height: 240px; } .city-selector-option { padding: 12px; } }