/* Below-market rate indicator for hourly-rate dropdowns.
 * Shared across admin, client, marketplace, and groupadmin panels.
 *
 * The header row is a non-selectable <option disabled> used to visually
 * separate market-rate prices from below-market prices at the bottom of
 * the dropdown. Styling is intentionally neutral-warning (amber) so it
 * stays coherent with every panel's own color palette.
 */
.below-market-header {
    background-color: #fff8e1;
    color: #b45309;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    border-top: 1px solid #fbbf24;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.below-market-option {
    background-color: #fffbeb;
    color: #92400e;
}

/* Custom Bootstrap-based hourly-rate dropdown (admin panel).
 * Replaces the native <select> so we can cap the popup height and keep
 * the "Below market average" divider visible even with many price points. */
.hourly-rate-dropdown {
    position: relative;
}

.hourly-rate-menu {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.hourly-rate-menu .dropdown-item {
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    text-align: left;
}

.hourly-rate-menu .dropdown-item.active,
.hourly-rate-menu .dropdown-item:active {
    background-color: #00abd6;
    color: #fff;
}

.hourly-rate-menu .below-market-option.active,
.hourly-rate-menu .below-market-option:active {
    background-color: #b45309;
    color: #fff;
}