/* Searchable select structure. Field colors and states live in account.css. */
.member-combobox { position: relative; display: flex; align-items: center; }
body[data-page="account"] .signup-field .member-combobox input { padding-right: 54px; }
.member-combobox-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--account-muted); cursor: pointer;
}
.member-combobox-toggle:disabled { cursor: default; }
.member-combobox-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 230px; overflow: auto; padding: 6px;
  background: var(--account-surface); border: 1px solid var(--account-border);
  border-radius: 9px; box-shadow: 0 8px 24px #202a3614;
}
.member-combobox-list [role="option"] {
  padding: 11px 12px; border-radius: 6px; cursor: pointer; color: var(--account-text);
}
.member-combobox-list [role="option"]:hover { background: var(--account-canvas); }
.member-combobox-list [aria-selected="true"] {
  background: var(--account-selected); color: var(--account-accent);
}
.member-combobox-empty { padding: 12px; color: var(--account-muted); font-size: 13px; }