/* ============================================================
   timezone-picker.css — searchable timezone combobox dropdown
   ============================================================
   Pairs with js/timezone-picker.js. The <input> itself uses whatever
   input styling the calling page already has (e.g. .account-field
   input) -- this file only styles the results dropdown that appears
   below it.
   ============================================================ */

.tz-picker-dropdown {
    position: absolute;
    z-index: 20;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface-bg, #10182b);
    backdrop-filter: blur(var(--surface-blur, 0px));
    border: 1px solid var(--aether-dim);
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tz-picker-option {
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    color: var(--parchment);
    cursor: pointer;
}

.tz-picker-option:hover,
.tz-picker-option.active {
    background: color-mix(in srgb, var(--aether) 12%, transparent);
    color: var(--crystal-gold);
}