/* ==========================================================================
       The tokens are not restated here
       ==========================================================================

       This block declared the whole :root set - every colour and every font
       size - inside the page. An inline <style> comes after every enqueued
       stylesheet, so on any page carrying these filters it replaced the site
       owner's saved theme with the shipped defaults: a site on Ruby Red went
       cyan here and nowhere else, and a changed body size was ignored.

       job_portal_variables.css already carries them, and is enqueued ahead of
       this page.
       ========================================================================== */

    /* ==========================================================================
       Filter Component Scoped Styles (High Specificity)
       ========================================================================== */
     .wjportal-jobs-list-top-filter {
        box-sizing: border-box;
        /* The site's typeface, like the rest of the portal. Naming Inter here
           put a second sans on every jobs list - the filter bar in one face
           and the cards beside it in another - and under a theme whose body
           font is a serif it stood out further still. */
        font-family: inherit;
        color: var(--wpjp-body-font-color);
        margin: 0 auto;
        padding: 2rem 1rem;
        background-color: transparent;
        font-size: var(--wpjp-body-font-size);
    }

     .wjportal-jobs-list-top-filter *,
     .wjportal-jobs-list-top-filter *::before,
     .wjportal-jobs-list-top-filter *::after {
        box-sizing: inherit;
    }

    /* --- Filter Buttons --- */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-filters-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-filter {
        padding: 0.5rem 1rem;
        border: 1px solid var(--wpjp-border-color);
        border-radius: 0.5rem;
        font-size: 14px;
        font-weight: 700;
        color: var(--wpjp-body-font-color);
        background: var(--wpjp-card-background);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        font-family: inherit;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-filter svg {
        transition: transform 0.2s ease;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-filter:hover {
        background: var(--wpjp-background-color);
        color: var(--wpjp-secondary-color);
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-filter.is-active {
        background: var(--wpjp-background-color);
        border-color: var(--wpjp-border-color);
        color: var(--wpjp-secondary-color);
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-filter.is-active svg {
        transform: rotate(180deg);
    }

    /* --- Dropdown Menus --- */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-container {
        position: relative;
        display: inline-block;
    }

     /*
      * A closed filter panel takes no space.
      *
      * Closed panels used to be hidden with visibility and opacity only, so the
      * fade could run - which left each one laid out at 220px under its button.
      * On a phone the right-most (Date Posted) reached past the screen and made
      * the whole jobs page scroll sideways, open or not. They are now removed
      * from layout when closed, and fade in on opening with an animation, which
      * unlike a transition runs when display changes.
      */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu {
        display: none;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.75rem;
        background: var(--wpjp-card-background);
        border: 1px solid var(--wpjp-border-color);
        border-radius: 1rem;
        padding: 0.75rem;
        box-shadow: var(--wpjp-card-shadow);
        z-index: 50;
        min-width: 220px;
        max-width: calc(100vw - 30px);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.is-open {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        animation: wpjpJoblistingDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

     /* Opened near the right edge, a panel lines up with its button's right side instead. */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-align-end {
        left: auto;
        right: 0;
    }

    @keyframes wpjpJoblistingDropdownIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Colorful Dropdown Themes --- */
    /*
     * Sizes, not ratios, and none below the plugin's floor.
     *
     * This panel sized its labels in rem and small px - 0.7rem, 0.75rem, 11px,
     * 10px - which rendered as 11.2, 12, 11 and 10 beside a page whose
     * smallest size is 13. The rem ones are worse than small: they are read
     * against the root, so they ignore the body size the site owner set.
     */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-header {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 900;
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-status { border-top: 4px solid var(--wpjp-primary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-status .wpjp-joblisting-dropdown-header { color: var(--wpjp-primary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-status .wpjp-joblisting-checkbox-label:hover { background: var(--wpjp-background-color); color: var(--wpjp-primary-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-career { border-top: 4px solid var(--wpjp-success-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-career .wpjp-joblisting-dropdown-header { color: var(--wpjp-success-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-career .wpjp-joblisting-checkbox-label:hover { background: var(--wpjp-background-color); color: var(--wpjp-success-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-type { border-top: 4px solid var(--wpjp-secondary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-type .wpjp-joblisting-dropdown-header { color: var(--wpjp-secondary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-type .wpjp-joblisting-checkbox-label:hover { background: var(--wpjp-background-color); color: var(--wpjp-secondary-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-workplace { border-top: 4px solid var(--wpjp-primary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-workplace .wpjp-joblisting-dropdown-header { color: var(--wpjp-primary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-workplace .wpjp-joblisting-checkbox-label:hover { background: var(--wpjp-background-color); color: var(--wpjp-primary-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-date { border-top: 4px solid var(--wpjp-danger-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-date .wpjp-joblisting-dropdown-header { color: var(--wpjp-danger-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-date .wpjp-joblisting-checkbox-label:hover { background: var(--wpjp-background-color); color: var(--wpjp-danger-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-salary { border-top: 4px solid var(--wpjp-warning-color, #f59e0b); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-salary .wpjp-joblisting-dropdown-header { color: var(--wpjp-warning-color, #f59e0b); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-footer {
        border-top: 1px solid var(--wpjp-border-color);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        display: none;
        justify-content: flex-end;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.has-selections .wpjp-joblisting-dropdown-footer {
        display: flex;
    }

    /* --- Actions / Sort / Clear All --- */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-actions-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-global-clear-container {
        display: none;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-clear-all {
        background: transparent;
        border: none;
        color: var(--wpjp-danger-color);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        padding: 0;
        transition: opacity 0.2s;
        text-decoration: underline;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-clear-all:hover {
        opacity: 0.8;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-sort-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-sort-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--wpjp-body-font-color);
        min-width: fit-content;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-select {
        padding: 0.5rem 2.25rem 0.5rem 1rem;
        border: 1px solid var(--wpjp-border-color);
        border-radius: 0.5rem;
        font-size: 14px;
        font-weight: 700;
        color: var(--wpjp-secondary-color);
        background-color: var(--wpjp-card-background);
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23575757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        cursor: pointer;
        outline: none;
        transition: all 0.2s ease;
        font-family: inherit;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-select:hover {
        background-color: var(--wpjp-background-color);
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-select:focus {
        border-color: var(--wpjp-primary-color);
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-clear {
        font-size: 13px;
        font-weight: 700;
        color: var(--wpjp-danger-color);
        background: var(--wpjp-background-color);
        border: 1px solid var(--wpjp-border-color);
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-btn-clear:hover {
        background: var(--wpjp-danger-color);
        color: var(--wpjp-card-background);
        border-color: var(--wpjp-danger-color);
    }

    /* --- Checkboxes --- */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: var(--wpjp-body-font-color);
        border-radius: 0.5rem;
        transition: background-color 0.2s, color 0.2s;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-checkbox-label input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        background-color: var(--wpjp-card-background);
        margin: 0;
        /* style.css pads every portal checkbox by 1rem; this one is a 1.25rem box. */
        padding: 0;
        box-sizing: border-box;
        font: inherit;
        color: currentColor;
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid var(--wpjp-border-color);
        border-radius: 0.375rem;
        display: grid;
        place-content: center;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-checkbox-label input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--wpjp-card-background);
        background-color: var(--wpjp-card-background);
        transform-origin: center;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* Colorful Checkbox Active States using User Vars */
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-status input[type="checkbox"]:checked { background-color: var(--wpjp-primary-color); border-color: var(--wpjp-primary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-career input[type="checkbox"]:checked { background-color: var(--wpjp-success-color); border-color: var(--wpjp-success-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-type input[type="checkbox"]:checked { background-color: var(--wpjp-secondary-color); border-color: var(--wpjp-secondary-color); }
     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-date input[type="checkbox"]:checked { background-color: var(--wpjp-danger-color); border-color: var(--wpjp-danger-color); }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-checkbox-label input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    /* Specific AJAX Loading Styles */
     .wjportal-jobs-list-wrapper {
        position: relative;
        min-height: 200px;
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .wjportal-elegant-addon-jobs-list-wrapper {
        position: relative;
        min-height: 200px;
        transition: opacity 0.3s ease, filter 0.3s ease;
    }


     .wjportal-jobs-list-wrapper.wpjp-ajax-loading-active {
        filter: blur(3px);
        opacity: 0.8;
        pointer-events: none;
    }

     .wjportal-elegant-addon-jobs-list-wrapper.wpjp-ajax-loading-active {
        filter: blur(3px);
        opacity: 0.8;
        pointer-events: none;
    }

     #wpjp-list-loader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 150px;
        z-index: 999;
    }

     .wpjp-spinner {
        width: 50px;
        height: 50px;
        border: 5px solid var(--wpjp-border-color);
        border-top: 5px solid var(--wpjp-primary-color);
        border-radius: 50%;
        animation: wpjp-spin-loader 1s linear infinite;
    }

    @keyframes wpjp-spin-loader {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* --- Active State for Trigger Buttons --- */
     .wpjp-joblisting-btn-filter.has-active-filters {
        border-color: var(--wpjp-primary-color);
        background-color: rgba(47, 111, 196, 0.05);
        color: var(--wpjp-primary-color);
    }

     .wpjp-joblisting-btn-filter.wpjp-has-active-filters {
        border-color: var(--wpjp-primary-color);
        color: #fff;
        background: var(--wpjp-primary-color);
    }

    /* --- Active Filter Tags & UI --- */
     .wpjp-active-filters-display {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
        padding-top: 1rem;
        border-top: 1px dashed var(--wpjp-border-color);
    }

     .wpjp-active-filters-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--wpjp-secondary-color);
        display: block;
        margin-bottom: 0.75rem;
    }

     .wpjp-active-filters-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

     .wpjp-filter-group {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        background-color: var(--wpjp-background-color, #f8fafc);
        border: 1px solid var(--wpjp-border-color, #e9ecef);
        border-radius: 4px;
        padding: 0 0.25rem 0 0.75rem;
    }

     .wpjp-filter-group-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--wpjp-body-font-color, #333);
        margin-right: 0.25rem;
    }

     .wpjp-filter-tag {
        background-color: var(--wpjp-background-color, #f8fafc);
        color: var(--wpjp-primary-color, #2f6fc4);
        border: 1px solid var(--wpjp-primary-color, #2f6fc4);
        font-size: 13px;
        font-weight: 600;
        padding: 0.25rem 0.5rem 0.25rem 0.75rem;
        border-radius: 5px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

     .wpjp-filter-tag-sort {
        padding-right: 0.75rem;
    }

     .wpjp-filter-tag-remove {
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6;
        transition: opacity 0.2s;
    }

     .wpjp-filter-tag-remove:hover {
        opacity: 1;
        color: var(--wpjp-danger-color, #dc3545);
    }

    /* --- FIXED SLIDER CSS --- */
     .wpjp-inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
     .wpjp-input-wrapper { position: relative; }
     .wpjp-currency-symbol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-weight: 700; z-index: 2; }
     .wpjp-display-input { width: 100%; padding: 10px 10px 10px 25px; background: var(--wpjp-background-color, #f8fafc); border: 1px solid var(--wpjp-border-color, #e2e8f0); border-radius: 8px; font-size: 14px; font-weight: 800; color: var(--wpjp-secondary-color, #1e293b); outline: none; box-sizing: border-box; }
     .wpjp-slider-label { display: block; font-size: 13px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }

     .wpjp-range-area { position: relative; width: 100%; height: 35px; margin-top: 15px; margin-bottom: 10px; display: block; }
     .wpjp-track-bg { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; height: 6px; background-color: #d1d5db; border-radius: 4px; z-index: 1; }
     .wpjp-track-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; background-color: var(--wpjp-primary-color, #007bff); border-radius: 4px; z-index: 2; }

     .wpjp-range-input { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 100%; pointer-events: none; appearance: none; -webkit-appearance: none; background: transparent !important; margin: 0; z-index: 10; opacity: 0; cursor: pointer; }
     .wpjp-range-input::-webkit-slider-thumb { pointer-events: all; width: 28px; height: 28px; appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 50%; }
     .wpjp-range-input::-moz-range-thumb { pointer-events: all; width: 28px; height: 28px; cursor: pointer; border-radius: 50%; border: none; }

     .wpjp-custom-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: #ffffff; border: 2px solid var(--wpjp-primary-color, #007bff); border-radius: 50%; z-index: 5; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.1s; }
     .wpjp-custom-thumb.wpjp-is-active { transform: translate(-50%, -50%) scale(1.2); z-index: 6; }

    /* Fix Chosen Plugin Width in AJAX Filters */
     .wpjp-joblisting-dropdown-container .chosen-container {
        width: 100% !important;
    }

    /* ==========================================================================
       WP Job Portal - Badges & Tags (Highly Specific)
       ========================================================================== */
     .wjportal-jobs-list .wjportal-job-title.wpjp-job-title-flex {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

     .wjportal-jobs-list .wpjp-badge-new {
        background-color: var(--wpjp-success-color, #28a745);
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
        padding: 5px 8px;
        border-radius: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }

     .wjportal-jobs-list .wpjp-badge-urgent-flag {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--wpjp-danger-color, #dc3545);
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
        padding: 4px 14px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        display: flex;
        align-items: center;
        z-index: 10;
    }

     .wjportal-jobs-list .wpjp-badge-urgent-flag svg {
        margin-right: 4px;
    }

    /* --- Clickable Job Tags (main.php) --- */
     .wpjp-job-tags-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
        width: 100%;
    }

     .wpjp-clickable-tag {
        font-size: 14px;
        padding: 1px 2px;
        /*border-radius: 4px;*/
        /*background: #eff6ff;*/
        color: var(--wpjp-primary-color, #2f6fc4);
        /*border: 1px solid var(--wpjp-primary-color, #e9ecef);*/
        border-bottom: 1px solid var(--wpjp-primary-color, #e9ecef);
        text-decoration: none !important;
        font-weight: 600;
        transition: all 0.2s;
    }

    .wpjp-clickable-tag:hover {
        background-color: var(--wpjp-primary-color, #2f6fc4);
        color: #ffffff;
    }

    /* --- Salary Filter specific input layout additions --- */
     .wjportal-jobs-list-top-filter .wpjp-filter-salary-fields .wjportal-form-input-field,
     .wjportal-jobs-list-top-filter .wpjp-filter-salary-fields .wpjp-joblisting-select {
        width: 100%;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }

     .wjportal-jobs-list-top-filter .wpjp-company-filter-container {
        min-width: 220px;
    }

    /* ==========================================================================
       WP Job Portal - Chosen Plugin Field Standardization
       ========================================================================== */
     .wjportal-jobs-list-top-filter .chosen-container-multi .chosen-choices,
     .wjportal-jobs-list-top-filter .chosen-container-single .chosen-single {
        border: 1px solid var(--wpjp-border-color, #e2e8f0) !important;
        border-radius: 6px !important;
        background: var(--wpjp-background-color, #ffffff) !important;
        background-image: none !important;
        box-shadow: none !important;
        min-height: 48px !important;
        padding: 4px 8px !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease;
    }

     .wjportal-jobs-list-top-filter .chosen-container-active .chosen-choices,
     .wjportal-jobs-list-top-filter .chosen-container-active .chosen-single {
        border-color: var(--wpjp-primary-color, #2f6fc4) !important;
    }

     .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        height: 38px !important;
        line-height: 38px !important;
        color: var(--wpjp-body-font-color, #333) !important;
        font-family: inherit !important;
        margin: 0 !important;
    }

    /* The company filter sits in the row of filter buttons, so it takes their
       size and surface: it was 48px tall (45px under themes that size every
       Chosen field like a form input), grey, with its own corners and an
       extra 10px after it, and stood above the buttons beside it. Picked
       companies still wrap and the box grows to show them. */
     .wjportal-jobs-list-top-filter .wpjp-company-filter-container .chosen-container {
        height: auto;
        vertical-align: top;
    }

     .wjportal-jobs-list-top-filter .chosen-container-multi .chosen-choices {
        min-height: 0 !important;
        padding: 0 1rem !important;
        background: var(--wpjp-card-background, #ffffff) !important;
        border-radius: 0.5rem !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

     .wjportal-jobs-list-top-filter .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        height: calc(1rem + 14px) !important;
        line-height: calc(1rem + 14px) !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

     .wjportal-jobs-list-top-filter .chosen-container-single .chosen-single span {
        line-height: 38px !important;
        color: var(--wpjp-body-font-color, #333) !important;
    }

     .wjportal-jobs-list-top-filter .chosen-container-multi .chosen-choices li.search-choice {
        background: var(--wpjp-background-color, #f8fafc) !important;
        border: 1px solid var(--wpjp-primary-color, #2f6fc4) !important;
        color: var(--wpjp-primary-color, #2f6fc4) !important;
        border-radius: 4px !important;
        padding: 6px 22px 6px 10px !important;
        margin: 5px 5px 0 0 !important;
        box-shadow: none !important;
        font-weight: 600;
    }

     .wjportal-jobs-list-top-filter .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
        top: 7px !important;
        right: 5px !important;
    }

     .wjportal-jobs-list-top-filter .chosen-container .chosen-drop {
        border: 1px solid var(--wpjp-primary-color, #2f6fc4) !important;
        border-top: 0 !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }

     .wjportal-jobs-list-top-filter .wpjp-joblisting-dropdown-menu.wpjp-is-workplace input[type="checkbox"]:checked { background-color: var(--wpjp-primary-color); border-color: var(--wpjp-primary-color); }
    /*                */
    /*                */
    /*                */
    /*                */
    /*                */
    /* -------------------------------------------------------------
       Extraordinary Elegant Design for Job Filters (filters.php)
    ------------------------------------------------------------- */

    /* Main Filter Section Wrapper */
    .wjportal-elegant-addon-main-up-wrapper .wjportal-jobs-list-top-filter {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px 5px;
        box-shadow: 0 10px 30px rgba(35, 40, 45, 0.08);
        margin-bottom: 30px;
        border-left: 4px solid #4f46e5;
    }

    .wjportal-elegant-addon-main-up-wrapper .wjportal-jobs-list-top-filter h3 {
        color: #23282d;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Flex Container for Filter Items */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-filters-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container {
        position: relative;
        flex: 1 1 auto;
        min-width: 160px;
    }

    /* Modern Filter Buttons */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 12px 18px;
        border-radius: 8px;
        color: #23282d;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter:hover,
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter:focus {
        border-color: #4f46e5;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter svg {
        transition: transform 0.3s ease;
        stroke: #f79312;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container:hover .wpjp-joblisting-btn-filter svg {
        transform: rotate(180deg);
    }

    /* Floating Dropdown Menus */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 280px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(35, 40, 45, 0.1);
        border: 1px solid #e2e8f0;
        padding: 15px;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hover trigger for desktop - fallback to click if necessary via JS */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container:hover .wpjp-joblisting-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropdown Content */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-header {
        font-weight: 700;
        color: #4f46e5;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #e2e8f0;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-checkbox-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        cursor: pointer;
        color: #23282d;
        transition: color 0.2s ease;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-checkbox-label:hover {
        color: #f79312;
    }

    /* Custom Salary Range Filter Elements */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-filter-salary-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-slider-label {
        font-size: 13px;
        font-weight: 600;
        color: #23282d;
    }

    /* Dropdown Footer & Clear Buttons */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-footer {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear {
        background: transparent;
        border: none;
        color: #4f46e5;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.2s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear:hover {
        color: #f79312;
    }

    /* Global Actions (Clear All & Sorting) */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-actions-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear-all {
        background: #23282d;
        color: #ffffff;
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear-all:hover {
        background: #f79312;
    }

    /* Sorting Dropdown Tweaks */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-sort-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-sort-label {
        font-weight: 600;
        color: #23282d;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-select {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #23282d;
        outline: none;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.2s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-select:focus {
        border-color: #4f46e5;
    }


    /* -------------------------------------------------------------
       Extraordinary Elegant Design for Job Filters (filters.php)
    ------------------------------------------------------------- */

    /* Main Filter Section Wrapper */
    .wjportal-elegant-addon-main-up-wrapper .wjportal-jobs-list-top-filter {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(35, 40, 45, 0.08);
        margin-bottom: 30px;
        border-left: 4px solid #4f46e5;
    }

    .wjportal-elegant-addon-main-up-wrapper .wjportal-jobs-list-top-filter h3 {
        color: #23282d;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Flex Container for Filter Items */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-filters-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container {
        position: relative;
        flex: 1 1 auto;
        min-width: 160px;
    }

    /* Modern Filter Buttons */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 12px 18px;
        border-radius: 8px;
        color: #23282d;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter:hover,
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter:focus {
        border-color: #4f46e5;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-filter svg {
        transition: transform 0.3s ease;
        stroke: #f79312;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container:hover .wpjp-joblisting-btn-filter svg {
        transform: rotate(180deg);
    }

    /* Floating Dropdown Menus */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 280px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(35, 40, 45, 0.1);
        border: 1px solid #e2e8f0;
        padding: 15px;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hover trigger for desktop - fallback to click if necessary via JS */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-container:hover .wpjp-joblisting-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropdown Content */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-header {
        font-weight: 700;
        color: #4f46e5;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #e2e8f0;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-checkbox-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        cursor: pointer;
        color: #23282d;
        transition: color 0.2s ease;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-checkbox-label:hover {
        color: #f79312;
    }

    /* Custom Salary Range Filter Elements */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-filter-salary-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-slider-label {
        font-size: 13px;
        font-weight: 600;
        color: #23282d;
    }

    /* Dropdown Footer & Clear Buttons */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-dropdown-footer {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear {
        background: transparent;
        border: none;
        color: #4f46e5;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.2s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear:hover {
        color: #f79312;
    }

    /* Global Actions (Clear All & Sorting) */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-actions-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear-all {
        background: #23282d;
        color: #ffffff;
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-btn-clear-all:hover {
        background: #f79312;
    }

    /* Sorting Dropdown Tweaks */
    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-sort-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-sort-label {
        font-weight: 600;
        color: #23282d;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-select {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #23282d;
        outline: none;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.2s;
    }

    .wjportal-elegant-addon-main-up-wrapper .wpjp-joblisting-select:focus {
        border-color: #4f46e5;
    }