/* The same picker serves the standalone page and the quick settings dialog. */
.bi-timezone-modal .bi-timezone-dialog { max-width: 480px; }
.bi-timezone-modal .modal-content {
    padding: 24px;
    border: 1px solid var(--bi-border);
    border-radius: 16px;
    background: var(--bi-filter-background);
    box-shadow: 0 24px 60px #071f5033;
    color: var(--bi-navy);
}
.bi-timezone-modal .modal-header { align-items: flex-start; gap: 16px; margin-bottom: 20px; padding: 0; border: 0; }
.bi-timezone-modal .modal-title { color: var(--bi-navy); font-size: 25px; font-weight: 600; line-height: 1.2; }
.bi-timezone-modal .modal-header p { margin: 7px 0 0; color: var(--bi-muted); font-size: 14px; line-height: 1.45; }
.bi-timezone-modal .btn-close { flex: none; margin: -4px -4px 0 0; padding: 10px; }
.bi-timezone-modal .modal-body { padding: 0; }
.bi-timezone-form .form-label { font-size: 14px; font-weight: 500; }
.bi-timezone-form small { color: var(--bi-muted); font-size: 13px; line-height: 1.45; }
.bi-timezone-modal .select2-container { max-width: 100%; }
.bi-timezone-modal .select2-results > .select2-results__options { max-height: min(240px, 35dvh); overscroll-behavior: contain; }
@media (max-width: 575.98px) {
    .bi-timezone-modal { padding: 0 !important; }
    .bi-timezone-modal .bi-timezone-dialog { align-items: flex-end; max-width: none; min-height: 100%; margin: 0; }
    .bi-timezone-modal .modal-content { max-height: 100dvh; padding: 22px 20px max(22px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
    .bi-timezone-modal .modal-body { overflow-y: auto; }
    .bi-timezone-modal.fade .bi-timezone-dialog { transform: translateY(24px); }
    .bi-timezone-modal.show .bi-timezone-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bi-timezone-modal.fade .bi-timezone-dialog { transform: none; }
}