/**
 * tz-selector.css
 * Styles for the timezone selector bar (#tz-selector-bar) used on
 * workshops listing pages, plus the shared Bootstrap Select active-item override.
 */

/* ── Selector bar container ──────────────────────────────────────────────── */
#tz-selector-bar {
    background:     #f8f9fa;
    border:         1px solid #dee2e6;
    border-radius:  4px;
    padding:        8px 12px;
    margin-top:     16px;
    margin-bottom:  16px;
    display:        flex;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            8px;
    font-size:      0.875rem;
}

#tz-selector-bar label {
    margin:       0;
    white-space:  nowrap;
    font-weight:  500;
    color:        #495057;
}

#tz-selector-bar .bootstrap-select {
    min-width: 280px;
}

#tz-selector-bar .bootstrap-select .btn.dropdown-toggle {
    background:    white;
    border:        1px solid #ced4da;
    border-radius: 4px;
    font-size:     0.875rem;
    padding:       4px 10px;
}

#tz-selector-bar .tz-note {
    color:     #6c757d;
    font-size: 0.8rem;
}

/* ── Shared Bootstrap Select active/selected item override ───────────────── */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu .dropdown-item.active.selected {
    background-color: #ffe4ec !important;
    color:            #000 !important;
}