/* Timezone Selector - component-specific styles (base styles in utilities.css) */
.timezone-selector { position: relative; width: 100%; }
.timezone-selector__button { align-items: center; cursor: pointer; display: flex; gap: var(--space-3); justify-content: space-between; padding: var(--space-3) var(--space-4); text-align: left; }
.timezone-selector__button:disabled { cursor: not-allowed; opacity: 0.6; }
.timezone-selector__check { color: var(--accent); flex-shrink: 0; margin-left: auto; }
.timezone-selector__detail { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timezone-selector__dropdown { max-width: 360px; }
.timezone-selector__icon-wrapper { flex-shrink: 0; font-size: var(--size-xs); line-height: 1; }
.timezone-selector__info { display: flex; flex: 1; flex-direction: column; gap: 0; min-width: 0; }
.timezone-selector__list { flex: 1; overflow-x: hidden; overflow-y: auto; padding: var(--space-1); }
.timezone-selector__name { color: var(--text); font-size: var(--text-sm); font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timezone-selector__offset { background-color: var(--surface); border-radius: var(--radius); color: var(--text-muted); flex-shrink: 0; font-family: 'SuisseIntlMono', monospace; font-size: var(--text-xs); font-weight: var(--font-medium); padding: var(--space-1) var(--space-2); }
.timezone-selector__placeholder { color: var(--text-muted); opacity: 0.7; }
.timezone-selector__selected { align-items: center; display: flex; flex: 1; gap: var(--space-3); min-width: 0; }
.timezone-selector__text { color: var(--text); font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timezone-selector--open .timezone-selector__button { background-color: var(--bg); border-color: var(--accent); box-shadow: var(--focus-ring), var(--tub-shadow-inset); }
@media (min-width: 1024px) {
.timezone-selector__dropdown { max-width: 360px; }
}