.occupation-search-menu {
    /* jQuery UI's base theme sets .ui-widget { font-family: Arial,Helvetica,sans-serif } directly
       on this <ul> (Menu widget tags it with ui-widget), which overrides the site's inherited
       Roboto font despite body's !important - !important only wins ties on the same element, not
       against a more specific/closer rule further down the tree. Match the rest of the site here. */
    font-family: 'Roboto', sans-serif;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 22, 26, 0.12);
    background: #ffffff;
}

.occupation-search-menu .ui-menu-item {
    padding: 0;
}

.occupation-search-menu .ui-menu-item-wrapper {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

/* .occupation-search-group-header and .occupation-search-item render on the SAME element that
   jQuery UI's Menu.refresh() auto-tags with ui-menu-item / ui-menu-item-wrapper (not a parent),
   so the resets above (2-class specificity) would otherwise beat these 1-class intended rules. */
.occupation-search-menu .ui-menu-item.occupation-search-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    pointer-events: none;
    list-style: none;
}

.occupation-search-group-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.occupation-search-group-count {
    flex: 0 0 auto;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: #9aa3af;
}

.occupation-search-menu .ui-menu-item-wrapper.occupation-search-item {
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eef0f2;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.occupation-search-menu li:last-child .occupation-search-item {
    border-bottom: none;
}

/* jQuery UI's base theme (jquery-ui.css) styles .ui-state-active with its own border/background/
   color/margin (".ui-state-active", ".ui-widget-content .ui-state-active", ".ui-menu .ui-state-active")
   - neutralize those before applying our own highlight, at matching (3-class) specificity. */
.occupation-search-menu .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    border: none;
    color: inherit;
    font-weight: normal;
}

/* .occupation-search-item IS the ui-menu-item-wrapper/ui-state-active element, not its ancestor -
   target it directly rather than as a descendant. Declared after the reset above so it wins the
   background property at equal (3-class) specificity. */
.occupation-search-menu .occupation-search-item.ui-state-active,
.occupation-search-menu .occupation-search-item:hover {
    background: #eaf2ff;
}

.occupation-search-item-name {
    font-weight: 400;
    color: #1a1d21;
    font-size: 14px;
}

.occupation-search-item-group {
    font-size: 12px;
    color: #7a8290;
    margin-top: 1px;
}

.occupation-search-highlight {
    background: #ffd76a;
    border-radius: 2px;
    padding: 0 1px;
}