@layer page {
    @media (max-width: 767px) {
        .job-filters-content {
            display: none;
            padding: 15px;
            background: var(--ui-page-bg);
            border-radius: var(--ui-border-radius-md);
            border: 1px solid var(--ui-border-secondary-color);
            margin-top: 8px;
            box-shadow: var(--ui-shadow-xxl);
            position: absolute;
            left: 0;
            width: auto;
            z-index: 1000;
        }

        #job-filter-toggle:checked ~ .job-filters-content {
            display: block;
        }
    }

    .ui-card svg {
        color: var(--link-color);
    }
    .ui-card .job-salary {
        background: light-dark(var(--blue-50), transparent);
        color: light-dark(var(--text-color), var(--link-color));
    }

    .job-detail-items svg {
        background: light-dark(var(--blue-100), var(--blue-200));
        color: light-dark(var(--text-color), var(--black));
        padding: 5px;
    }
    .job-detail-items .job-salary {
        background: light-dark(var(--yellow-100), transparent);
        color: light-dark(var(--text-color), var(--yellow-300));
    }

    .jobs-filter {
        display: flex;
        max-width: 20ch;
        width: fit-content;
    }
    .jobs-filter.active {
        font-weight: 600;
        outline: 2px solid var(--ui-link-color);
        outline-offset: -1px;
    }
}