/* Shared job-card favourite states: search results and company vacancies. */
#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #FF553A;
    border: 1px solid #FF553A;
    border-radius: 999px;
    background: #fff;
    transition: color .2s, background-color .2s, border-color .2s;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like::before {
    content: "";
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    background: #FF9191;
    -webkit-mask: url("/trade_2026_v1/_assets/start.svg") center / contain no-repeat;
    mask: url("/trade_2026_v1/_assets/start.svg") center / contain no-repeat;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(:hover, :focus-visible) {
    color: #fff;
    background: #FF553A;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(:hover, :focus-visible)::before {
    background: #fff;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:focus-visible {
    outline: 2px solid #FF553A;
    outline-offset: 3px;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like .job-favorite-saved {
    display: none;
}

/* Only the real collection state may enable these styles; hover never saves. */
#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(.active, [aria-pressed="true"]) {
    color: #FF553A;
    border-color: transparent;
    background: #FFEEE8;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(.active, [aria-pressed="true"])::before,
#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(.active, [aria-pressed="true"]) .job-favorite-default {
    display: none;
}

#wrap .job-detail-box .job-detail-op .op-btn.op-btn-like:is(.active, [aria-pressed="true"]) .job-favorite-saved {
    display: inline;
}