.zone-picker { position: relative; }
.zone-input { cursor: text; text-overflow: ellipsis; }
.zone-options {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .35rem);
    z-index: 20;
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border, #dee2e6);
    border-radius: .75rem;
    background: var(--surface, #fff);
    color: var(--text, #212529);
    box-shadow: 0 .5rem 1.5rem #0002;
    padding: .3rem;
}
.zone-option { padding: .65rem .75rem; border-radius: .5rem; cursor: pointer; overflow-wrap: anywhere; }
.zone-option:hover, .zone-option.active { background: var(--bs-primary); color: #fff; }
.zone-option[aria-selected="true"] { font-weight: 700; }