/*
 * Moved here from job_portal_variables.css, which is not a file to keep
 * anything in: saving a theme colour regenerates it from a fixed template in
 * modules/theme/model.php, and everything below the :root block goes with it.
 */
/*
 * The plugin's own text size, inside the plugin's own pages.
 *
 * These tokens set the type scale, and everything the stylesheets name follows
 * them: a section title takes --wpjp-sub-heading, a menu link takes
 * --wpjp-body-font-size. What no stylesheet names simply inherits from the
 * theme - and a theme is free to set whatever body size it likes. Twenty
 * Twenty-Five sets 22px, which happens to be exactly --wpjp-sub-heading, so on
 * that theme a table cell was rendered as large as the heading above it.
 *
 * Counted on the employer dashboard, inside the plugin's own wrapper: 125
 * pieces of text at six different sizes, and the most common was the theme's
 * 22px, not the plugin's 17px - 61 elements against 32.
 *
 * So the wrapper states the body size rather than leaving it to whatever is
 * around it. Anything a stylesheet sizes deliberately still wins; this only
 * answers for the text nothing else speaks for. With it, those 61 join the 32.
 */
.wjportal-main-up-wrapper,
.wjportal-main-wrapper {
    font-size: var(--wpjp-body-font-size);
}

/*----------------------------------------------
            WP Job Portal New CSS 
------------------------------------------------*/
/* ---
  Modern CSS for WP Job Portal
--- */

/* ----------------------------------------- */
/* == 1. Global Styles & Variables         == */
/* ----------------------------------------- */
/*
 * job_portal_variables.css is not imported here; it is enqueued.
 *
 * An @import carries no version query, so the browser kept its own copy of
 * the token file under a second URL that never changed. That copy is parsed
 * as part of this sheet, which is enqueued after the real one, so the stale
 * :root won: a site saved a new theme colour, the generated file changed,
 * and the pages went on drawing the old one until the cache expired.
 *
 * The tokens are a dependency of this stylesheet and load ahead of it.
 */

/* new start*/
.wjportal-main-up-wrapper {
    width: 100%;
    max-width: 1350px !important;
    margin: 0 auto !important;
    overflow: hidden;
    color: var(--wpjp-body-font-color);
}
.wjportal-main-up-wrapper{
    box-sizing: border-box;
}
.wjportal-main-up-wrapper * {
    box-sizing: border-box;
    text-wrap: wrap;
}
.wjportal-main-up-wrapper div.wjportal-cp-content-mainwrp{display: flex;width:100%;gap: 30px;}
.wjportal-main-up-wrapper .wjportal-cp-right{min-width: unset;max-width:100%;width: calc(100% - 310px);flex: 1 1 auto;}
/*
 * One heading per page. A portal page prints its own heading and breadcrumbs,
 * so the theme's page title above it ("Employer", "Jobseeker") was a second,
 * larger heading that the Recruiting screens already hid.
 */
body.wpjobportal-page :where(.wp-block-post-title, .entry-title, .page-title) {
    display: none !important;
}
body.wpjobportal-page .wp-block-post-content {
    margin-block-start: 0;
}
/* An add-on screen in the dashboard shell has no menu beside it (controlpanel.php). */
.wjportal-main-up-wrapper .wjportal-cp-no-menu > .wjportal-cp-right{width: 100%;}
.wjportal-main-up-wrapper .wjportal-cp-graph *{max-width: 100% !important;}

/* new end*/
.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;

}


/* ----------------------------------------- */
/* == 1. Top Header       == */
/* ----------------------------------------- */


.wjportal-page-header {
    width: 100%;
    margin-bottom: 40px;
    flex-direction: column;
}

div.wjportal-breadcrumbs-wrp {
    width: 100%;
    margin-top: 10px;
    display: flex;
    /* A narrow screen moves whole crumbs to the next line; without wrapping
       each crumb was squeezed into a column ("My" over "Companies"). */
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 4px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-breadcrumbs-wrp div.wjportal-breadcrumbs-links a.wjportal-breadcrumbs-link {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-firstlinks {
    color: var(--wpjp-primary-color);
}

.wjportal-breadcrumbs-links.wjportal-breadcrumbs-lastlink {
    color: var(--wpjp-body-font-color);
}

.wjportal-page-heading {
    font-size: var(--wpjp-main-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    position: relative;
    width: 100%;
}

/* Main Header Container */
.wjportal-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Left Side: Title and Breadcrumbs --- */

.wjportal-page-header-cnt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.wjportal-breadcrumbs-links {
    display: inline-block;
}

.wjportal-breadcrumbs-link {
    color: #007bff;
    /* Standard link blue */
    text-decoration: none;
    transition: color 0.3s ease;
}

.wjportal-breadcrumbs-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wjportal-breadcrumbs-links:not(:first-child)::before {
    content: '/';
    margin: 0 8px;
    color: #adb5bd;
}

/* --- Right Side: Actions --- */

.wjportal-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between filter and button */
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

div.wjportal-header-actions div.wjportal-act-btn-wrp {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Filter/Sort Dropdown Styling */

.wjportal-filter-wrp {
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sorting {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    outline: none;
}

.wjportal-filter select#sorting {
    height: auto !important;
}

.wjportal-filter-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 5px;
    transition: background-color 0.3s ease;
    border-left: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper #sortingimage {
    width: 16px;
    height: 16px;
}

/* "Add New Job" Button Styling */
.wjportal-act-btn {
    background-color: var(--wpjp-primary-color);
    /* Primary action color */
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/*
 * --wpjp-hover-text: the label colour of a button under the mouse.
 *
 * Core's hover rules force white, with !important, to hold it against the
 * theme's link colours. A design add-on loads this sheet in a cascade layer,
 * and a layered !important beats everything outside the layer - so when the
 * add-on gave a button a pale hover ground, it could not also darken the
 * label, and the text went white on pale blue. Every such rule reads this
 * variable instead: unset, it is the same white as ever; a design that
 * lightens a hover sets it beside the background it chose.
 */
.wjportal-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-act-btn i {
    font-size: var(--wpjp-body-font-size);
}

/* ----------------------------------------- */
/* == 5. Modern Search Filter Styles       == */
/* ----------------------------------------- */

/* Main wrapper for the entire filter section */
.wjportal-filter-search-main-wrp {
    background-color: var(--wpjp-card-background);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    margin-bottom: 2rem;
}

.wjportal-main-up-wrapper form#job_form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Flex container for the form fields and buttons */
.wjportal-filter-search-wrp {
    display: flex;
    align-items: center;
    /* Vertically align items */
    gap: 1rem;
    /* Space between fields */
    width: 100%;
}

/* Wrapper for each input field, allows them to grow */
.wjportal-filter-search-field-wrp {
    flex: 1 1 auto;
    /* Allows input fields to take available space */
    position: relative;
    width: calc(100% / 2 - 100px - 1rem);
    background-color: white;

}

.wjportal-filter-search-input-field {
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: var(--wpjp-field-radius, 8px) !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal input[type="text"] {
    color: var(--wpjp-body-font-color);
    border: unset;
    height: 100% !important;
    min-width: fit-content;
}

.wpjobportal-input-list-wpjobportal:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    list-style-type: none;
    margin-bottom: 0;
}

.wjportal-filter-search-input-field:focus {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    outline: none;
}

.wjportal-main-up-wrapper p,
.wjportal-main-up-wrapper ul,
.wjportal-main-up-wrapper ol {
    background: #fff;
}

/* A notice's text sits on the notice's own tint, not a white strip. */
.wjportal-main-up-wrapper .wpjp-ds-notice > :is(p, ul, ol) {
    background: transparent;
}

/* The empty state's button is a link; the portal's link colour turned its text blue on blue. */
.wjportal-main-up-wrapper a.wpjp-ds-empty-state__action,
.wjportal-main-up-wrapper a.wpjp-ds-empty-state__action:is(:hover, :focus, :visited) {
    color: #fff !important;
}

/* Wrapper for the search and reset buttons */
.wjportal-filter-search-btn-wrp {
    display: flex;
    gap: 0.5rem;
}

/* Base styles for both buttons */
.wjportal-filter-search-wrp .wjportal-filter-search-btn,
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    min-height: 55px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: var(--wpjp-body-font-size);
    /* Adjust icon size */
}

/* Primary search button */
.wjportal-filter-search-wrp .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-filter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    text-decoration: none !important;
    color: #fff;
}

/* Secondary reset button */
.wjportal-filter-search-wrp .wjportal-filter-reset-btn {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
}

.wjportal-filter-search-wrp .wjportal-filter-reset-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none !important;
}

.wjportal-main-up-wrapper input[type="text"],
.wjportal-main-up-wrapper input[type="email"],
.wjportal-main-up-wrapper input[type="url"],
.wjportal-main-up-wrapper input[type="password"],
.wjportal-main-up-wrapper input[type="search"],
.wjportal-main-up-wrapper input[type="number"],
.wjportal-main-up-wrapper input[type="tel"],
.wjportal-main-up-wrapper input[type="range"],
.wjportal-main-up-wrapper input[type="date"],
.wjportal-main-up-wrapper input[type="month"],
.wjportal-main-up-wrapper input[type="week"],
.wjportal-main-up-wrapper input[type="time"],
.wjportal-main-up-wrapper input[type="datetime"],
.wjportal-main-up-wrapper input[type="datetime-local"],
.wjportal-main-up-wrapper input[type="color"],
.wjportal-main-up-wrapper textarea,
.wjportal-main-up-wrapper select {
    /* A design can set the field corner through --wpjp-field-radius; the
       important stays, so nothing else rounds the fields differently. */
    border-radius: var(--wpjp-field-radius, 8px) !important;
    /* Not !important. A control height is a design decision, and a design
       decision is the one thing a look has to be able to make - this sheet
       is in a cascade layer, where an important declaration beats even an
       inline one, so nothing could reach it. The height itself is unchanged. */
    height: 55px;
    color: var(--wpjp-body-font-color) !important;
    border-color: var(--wpjp-border-color) !important;
    background-color: white !important;
    width:100%;
}

/*
 * A textarea is not a one-line control. It had been swept into the rule
 * above and forced to 55px, so every multi-line field on every form - the
 * job description, the cover letter, the message - was a single line that
 * could not be dragged open.
 */
.wjportal-main-up-wrapper textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

/* ----------------------------------------- */
/* == Responsive for Search Filter         == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-filter-search-wrp {
        flex-direction: column;
        /* Stack fields vertically */
        align-items: stretch;
        /* Make items full-width */
    }

    .wjportal-form-wrp.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .wjportal-filter-search-btn-wrp {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .wjportal-resume-detail-left-wrapper .wjportal-resume-left-section {
        position: relative;
    }
    .wjportal-filter-search-btn-wrp button{min-width: 60px;}
}

/* ----------------------------------------- */
/* == AI Modern Search Filter Styles       == */
/* 
/* ----------------------------------------- */

/* --- Main Container --- */
.wjportal-filter-aisearch-main-wrp {
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Logo + Content) --- */
.wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 10px;
    padding-bottom: 30px;
    padding-top: 20px;
    align-items: flex-start;
}

/* --- AI Logo Styling --- */
.wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Show and style the original image */
.wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-aifilter-search-wrp {
    display: flex;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-aifilter-search-wrp .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
    /* Trendy gradient text */
    background: var(--wpjp-secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    padding-top: 10px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp {
    position: relative;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 12px 16px 12px 48px;
    /* Add left padding for an icon */
    font-size: 16px;
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;

}

.wjportal-form-wrp.wjportal-search-job-aiform .wjportal-aifilter-search-wrp .wjportal-filter-search-input-field {
    text-align: center;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* Add a search icon inside the input field */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-wrp::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--wpjp-body-font-color);
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transition: opacity 0.2s ease;
}

.wjportal-filter-search-main-wrp.wjportal-filter-aisearch-main-wrp {
    margin-bottom: 40px;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-input-field:focus+.wjportal-filter-search-field-wrp::before {
    opacity: 0.8;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
    align-self: flex-end;
    /* Pushes button to the right */
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-aifilter-search-wrp .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

.wjportal-form-wrp.wjportal-search-job-aiform {
    display: flex;
    width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

span.wjportal-filter-ai-searchfrm-discription {
    width: 100%;
}

.wjportal-main-up-wrapper input#aijobsearch {
    padding-left: 40px;
}

/* Hide original button image */
.wjportal-aifilter-search-wrp .wjportal-filter-search-field-icon {
    display: none;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .wjportal-filter-ai-searchfrm-wrp {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .wjportal-aifilter-search-wrp {
        align-items: center;
        justify-content: center;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn-wrp {
        align-self: stretch;
    }

    .wjportal-aifilter-search-wrp .wjportal-filter-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------- */
/* == AI Job Search Page            == */
/* ----------------------------------------- */

/* --- Main Form Container --- */
.wjportal-form-wrp.wjportal-search-job-aiform {
    /* Glassmorphism Effect */
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);

    border-radius: 24px;
    padding: 2.5rem;
    /* Increased padding */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    width: 100%;
}

/* --- Main Flex Layout (Column Direction) --- */
.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-wrp {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    align-items: center;
    /* Center everything horizontally */
    text-align: center;
    gap: 1.5rem;
    /* Space between elements */
}

/* --- AI Logo Styling --- */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo-wrp {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--wpjp-primary-color) 0%, var(--wpjp-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Show and style the original image */
.wjportal-search-job-aiform .wjportal-ai-searchfrm-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    /* Makes the PNG icon white */
}

/* --- Content Wrapper (Title, Input, Button) --- */
.wjportal-search-job-aiform .wjportal-aifilter-search-wrp {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-title {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    line-height: 1.4;
}

.wjportal-search-job-aiform .wjportal-filter-ai-searchfrm-discription {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin: 0 auto;
    /* Center the description text */
    line-height: 1.6;
}

.wjportal-search-job-aiform .wjportal-filter-search-field-wrp {
    position: relative;
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field {
    width: 100%;
    height: 55px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    text-align: center;
    color: var(--wpjp-body-font-color);
    background-color: white;
    border: 1px solid rgba(233, 236, 239, 0.8);
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-search-job-aiform .wjportal-elegant-addon-filter-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn-wrp {
    width: 100%;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 15px;
    /* Slightly taller button */
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 48, 48, 0.2);
}

.wjportal-search-job-aiform .wjportal-filter-search-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.wjportal-search-job-aiform .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);

}

/* Hide original button image */
.wjportal-search-job-aiform .wjportal-filter-search-field-icon {
    display: none;
}

/* ----------------------------------------- */
/* == 2. Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-filter-search-main-wrp {
    display: flex;
    width: 100%;
    padding: 15px 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--wpjp-card-shadow);
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
}

/* Main job item card */
.wjportal-jobs-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-jobs-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Flex container for the top section (logo + main content) */
.wjportal-jobs-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
}

/* Company Logo */
.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-jobs-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* Container for all job info */
.wjportal-jobs-cnt-wrp {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    flex-grow: 1;
}

/* Middle content: title, company, location */
.wjportal-jobs-middle-wrp {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-bottom: 8px;
}

span.wjportal-job-title {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wjportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline !important;
}

.wjportal-companyname {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wjportal-custom-field {
    padding-bottom: 5px;
}

span.wjportal-shortlist-job-comment-tit {
    font-size: var(--wpjp-body-font-size);
}

/*.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp .wjportal-jobs-middle-wrp{gap:10px;}*/
.wjportal-jobs-list-wrapper.wjportal-my-jobs-wrp a.wjportal-companyname {
    padding-top: 10px;
}

.wjportal-main-wrapper.wjportal-clearfix a.wjportal-companyname {
    padding: 5px 0;
}

.wjportal-jobs-data-text:not(:last-child)::after {
    content: "•";
    margin: 0 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-custom-field-val {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

/* Right content: job type, salary, date */
.wjportal-jobs-right-wrp {
    width: 30%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-cp-cnt .wjportal-jobs-middle-wrp {
    width: 100%;
}

.wjportal-cp-cnt .wjportal-jobs-right-wrp {
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.wjportal-job-type {
    /* The job type's colour is chosen per type by an administrator and
       arrives on the element as --wpjp-jobtype-color. It used to be written
       straight into the style attribute, which meant no stylesheet could
       restyle the chip - an inline declaration wins. Held in a variable, the
       administrator still picks the colour and a look can still decide
       whether the chip is painted at all. */
    background: var(--wpjp-jobtype-color, transparent);
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5em;
    /* Space between icon and text */
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- The CSS Clock Icon --- */
.wjportal-job-type::before {

    /* The clock shape created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");

}

.wjportal-jobs-salary {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    font-size: 18px;

}

span.wjportal-salary-type {
    font-weight: 400;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-shortlist-job-comments {
    flex-basis: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

span.wjportal-shortlist-job-comment-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-wrapper.wjportal-shortlisted-jobs-wrp .wjportal-container-small {
    padding: 10px;
    margin-top: 0 !important;
}

/* Bottom controls bar */
.wjportal-jobs-list-btm-wrp {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* This uses flexbox to perfectly align the icon and the text */
.wjportal-newest-jobs-date {
    display: inline-flex;
    /* Keeps the element inline while enabling flex alignment */
    align-items: center;
    /* Vertically centers the icon with the text */
    gap: 0.5rem;
    /* The space between the icon and the text */
    width: 40%;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    padding-left: 10px;
}

/* --- The CSS Clock Icon --- */
.wjportal-newest-jobs-date::before {
    content: '';
    display: block;
    width: 1em;
    /* Icon size will scale with the font size */
    height: 1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

a.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-jobs-act-btn-apply:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* --- Shared Styles for ALL Buttons --- */
.wjportal-jobs-act-btn,
.wjportal-jobs-act-btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* --- Base Icon Style for ALL Buttons --- */

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied {
    background: #fafafa;
    color: #a09e9e;
}

a.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:hover {
    background: var(--wpjp-secondary-color);
}

/* --- Secondary Button Style (Short List, Tell a friend) --- */
.wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
}

.wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-popup-field.wjportal-popup-field-job-title {
    font-weight: 700;
}

.wjportal-popup-field-email-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding: 10px 0;
}

/* --- Primary Button Style (Apply Now) --- */
.wjportal-jobs-act-btn-apply {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}


/* ----------------------------------------- */
/* == 8. Action Bar with Star Rating       == */
/* ----------------------------------------- */

/* Main flex container for the bottom action bar */
.wjportal-jobs-action-wrp {
    display: flex;
    justify-content: space-between;
    /* Pushes items to the edges */
    align-items: center;
    gap: 1rem;
}

/* Re-styling the action buttons to match the image */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Sizing and Shape */
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    /* Re-ordering with Flexbox */
    order: 2;
    /* Puts buttons after the stars */
}

/* Hover effect for the buttons */
.wjportal-jobs-list-btm-wrp .wjportal-jobs-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
    text-decoration: none;
}

.wjportal-jobs-act-btn.wjportal-jobs-act-btn-ai-suggested-resumes {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

/* Base style for icons added via CSS */

/* Featured tag icon */
span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon {
    color: #fff;
    background: var(--wpjp-primary-color);
    display: inline-block;
    position: absolute;
    top: -64px;
    left: -28px;
    z-index: 1;
    transform: rotate(45deg);
    height: 126px;
    width: 76px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-tag-icon i {
    position: absolute;
    bottom: 42px;
    right: 7px;
    font-size: 25px;
}

span.wjportal-featured-tag-icon-wrp span.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

span.wjportal-item-act-status.wjportal-waiting {
    /*
     * White on #f28d19 is 2.4:1, which a 17px label needs nearly twice as much
     * of. The design system's warning is chosen to carry white text and follows
     * whatever palette the site is wearing, exactly as the publish-status pills
     * beside it already do.
     */
    background-color: var(--wpjp-ds-color-warning, #a15c00);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

span.wjportal-item-act-status.wjportal-rejected {
    /* Its neighbour's colour, for the same reason. */
    background-color: var(--wpjp-ds-color-danger, #c52a35);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* --- Popup Backdrop --- */
.wjportal-main-up-wrapper #payment-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    /* Use secondary color for backdrop */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.quickviewfullwidth.tell-a-friend-captcha-wrapper .wjportal-form-value input {
    background-color: var(--background-color);
}

/* --- Payment Methods Layout --- */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
}

/* --- Individual Payment Method Styling --- */
.wjportal-payemt-method-item {
    display: block;
    padding: 1rem;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.wjportal-payemt-method-item:hover {
    transform: translateY(-5px);
    border-color: var(--wpjp-primary-color, #e83030);
    box-shadow: var(--wpjp-card-hover-shadow, 0 6px 20px rgba(0, 0, 0, 0.12));
}

.wjportal-payemt-method-item:hover img {
    /* Bring the logo to full color on hover */
    filter: grayscale(0%);
    opacity: 1;
}

.wjportal-payemt-method-item img {
    display: block;
    max-height: 80px;
    /* Controls the logo size */
    width: auto;
}

/* --- Stripe Button Specifics --- */
/* This makes the clickable area of the Stripe form fill the container */
.wjportal-payemt-method-stripe form {
    display: flex;
}

.wjportal-payemt-method-stripe .stripe-button-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes the default Stripe button invisible */
    cursor: pointer;
}

.wjportal-payemt-method-stripe .stripe-button-el span {
    display: none !important;
    /* Hide the default "Stripe" text */
    height: auto;
}

/* The hosted-checkout button that replaced Stripe Checkout: laid invisibly
   over the whole tile like the old one, so Stripe is a logo tile like PayPal
   instead of a plain "Pay with Stripe" button above a logo nobody can click.
   The text stays on the button for screen readers. */
.wjportal-payemt-method-stripe {
    position: relative;
}

.wjportal-payemt-method-stripe .wjportal-hosted-checkout-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wjportal-payemt-method-stripe:focus-within {
    outline: 2px solid var(--wpjp-primary-color);
    outline-offset: 2px;
}

#payment-popup .wjportal-popup-title .wjportal-popup-title3 {
    margin-top: 6px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 400;
    color: var(--wpjp-body-color);
}

/* The Stripe tile used to cap its logo at 115px while its two neighbours were
   capped at 80px, so one of the three payment methods stood 35px taller than
   the others in the same row. All three logo files are the same 147px square,
   so the shared cap above is all any of them needs. */

.wjportal-main-up-wrapper button#proceedPaymentBtn {
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-primary-color);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper button#proceedPaymentBtn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;

}

a.wjportal-payment-act-btn {
    background-color: var(--wpjp-card-background);
    color: #1b50ef;
    border: 1px solid #1b50ef;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-payment-act-btn:hover {
    background-color: #1b50ef;
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp a.wjportal-payment-act-btn {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}


/* Style for the primary "Make Payment" button */
.wjportal-payment-act-btn {
    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;

    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between icon and text */

    /* Effects */
    transition: background-color 0.3s ease;
}

.wjportal-payment-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}



/* ----------------------------------------- */
/* == 10. Job Data Icons (Category & Location) == */
/* ----------------------------------------- */
/* Make the parent a flex container to handle spacing */
.wjportal-jobs-data {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    align-items: center;
    gap: 0.5rem 1rem;
    /* Row and column gap */
    font-weight: 500;
}

/* Prepare the text span to hold an icon */
.wjportal-jobs-data-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);

}

/* The ::before pseudo-element creates the icon */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    
}

.wjportal-companyinfo-data::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the map pin icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

.wjportal-companyinfo a.wjportal-companyinfo-link::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color matches the text */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for the email icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3e%3cpolyline points='22,6 12,13 2,6'/%3e%3c/svg%3e");
}

/* Base styles for the icons */
.wjportal-jobs-data-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Use the light text color for the icons to match */
    -webkit-mask-size: cover;
    mask-size: cover;
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-body-font-color) !important;
}

/* Icon for the first span (Category) */
.wjportal-jobs-data .wjportal-jobs-data-text.wjportal-jobs-data-icon-class-category::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

.wjportal-jobs-data .wjportal-jobs-data-text.wjportal-jobs-data-icon-class-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");

}


/* Container for the star rating */
.wjportal-shortlist-stars {
    order: 1;
    /* Puts the stars first */
    /*border: 1px solid var(--wpjp-border-color);
  border-radius: 6px;
  padding: 6px 10px;
*/
    margin-right: auto;

}

div.wjportal-jobs-list-btm-wrp div.wjportal-jobs-action-wrp {
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
}

/* ----------------------------------------- */
/* == Job Details              == */
/* ----------------------------------------- */

.wjportal-jobdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-company-job-viewjob-wrp {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wjportal-view-job-title-wrp {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag .wjportal-job-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit,
.wjportal-view-job-page-wrapper.wjportal-view-page-featured-flag div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    color: var(--wpjp-secondary-color);
}

.wjportal-company-job-viewjob-leftwrp {
    flex-wrap: wrap;
    display: flex;
    flex: 2;
    min-width: 320px;
    gap: 30px;
}

.wjportal-job-data-map-wrp {
    width: 100%;
}

.wjportal-job-company-wrp {
    float: left;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: var(--wpjp-card-background);
    position: relative;
    overflow: hidden;
}

.wjportal-job-company-logo {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d4d4d5;
}

img.wjportal-job-company-logo-image {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
    float: left;
    width: calc(100% - 150px);
    padding: 0 0 0 20px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info a.wjportal-job-company-name {
    display: inline-block;
    font-size: var(--wpjp-body-font-size);
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info {
    padding-bottom: 10px;
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-tit {
    margin-right: 3px;
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt div.wjportal-job-company-info span.wjportal-job-company-info-val {
    display: inline-block;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-job-title,
div.wjportal-jobdetail-wrapper div.wjportal-job-sec-title,
.wjportal-tags-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-view-job-page-job-apply-form-wraper {
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    display: inline-flex;
    /* Allows for easy alignment of text and icon */
    align-items: center;
    /* Vertically centers the icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease,

}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-login-to-apply-btn::before {
    content: '';
    /* This is required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes the icon color the same as the text color (white) */

    /* The SVG login icon (arrow pointing into a door) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v-2h8V5h-8V3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-apply-as-visitor-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    width: 100%;
    justify-content: center;
}

.wjportal-job-apply-or-visitor span {
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
}

a.wjportal-apply-as-visitor-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

a.wjportal-jobs-act-btn.wjportal-job-act-btn-shortlist {
    font-weight: 500;
}

.wjportal-form-wrp.wpjobportal-quickapply-form .wjportal-form.has-validation-callback .wjportal-form-btn-wrp {
    padding: 0;
    margin: 0;
    border-top: 0px;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
}

a.wjportal-login-to-apply-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
}

a.wjportal-login-to-apply-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-job-apply-or-visitor {
    text-align: center;
    padding: 12px 0;
}

.wjportal-company-job-viewjob-leftwrp .wjportal-job-data .wjportal-job-data-tit,
.wjportal-company-job-viewjob-leftwrp .wjportal-custom-field .wjportal-custom-field-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-job-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border-bottom: 1px solid var(--wpjp-border-color);

}

div.wjportal-jobdetail-wrapper div.wjportal-job-data-wrp div.wjportal-custom-field:nth-child(even) {
    margin-right: 10px;
}

div.wjportal-jobdetail-wrapper div.wjportal-job-map {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-data-tags-wrp {
    width: 100%;
}

.wjportal-form.has-validation-callback {
    /*padding-top: 80px*/
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}

/* --- Provided HTML Styling --- */
.wjportal-job-apply-price-msg {
    background-color: #eaf6ec;
    color: #2f6f42;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 2rem;
    border: 1px solid #2f6f42;
}

.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;

    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);


}

.jssection_hide {
    display: none;
}

.wjportal-resume-section-undo {
    display: none;
}

/* --- Popup Overlay and Container --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* 1. Container Styling & Layout */
.wpjobportal-form-radio-field {
    /* Use flex to align the hidden input and the label horizontally */
    display: inline-flex;
    align-items: center;
    position: relative;
    /* Essential for positioning the checkmark later */
    cursor: pointer;
}

/* 2. Visually Hide the Default Checkbox */
/* We use the specific attribute selector to ensure we only target the checkbox */
.wpjobportal-form-radio-field input[type="checkbox"] {
    /* Standard method to hide an element but keep it accessible/tabbable */
    position: absolute;
    opacity: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* 3. Style the Checkbox Label Text */
.wpjobportal-form-radio-field label {
    /* The site's typeface. Naming Arial put a third face on a screen that
       already had two, on the label beside a checkbox and nowhere else. */
    font-family: inherit;
    font-size: 16px;
    color: #333;
    display: flex;
    /* Helps align the text with the pseudo-element */
    align-items: center;
    cursor: pointer;
}

/* 4. Create the Custom Square Box (The UNCHECKED State) */
.wpjobportal-form-radio-field label::before {
    content: '';
    display: block;
    /* Change from inline-block for better control */
    min-width: 20px;
    /* Size of the box */
    height: 20px;
    border: 2px solid #555;
    /* Dark grey border */
    border-radius: 4px;
    /* Slightly rounded corners for a checkbox */
    background-color: #fff;
    margin-right: 10px;
    /* Space between the box and the text */
    transition: all 0.2s ease;
}

/* 5. Style the Checked State: Background/Border */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::before {
    background-color: var(--wpjp-primary-color);
    /* Blue background when checked */
    border-color: var(--wpjp-primary-color);
}

/* 6. Style the Checked State: The Checkmark (✓) */
.wpjobportal-form-radio-field input[type="checkbox"]:checked+label::after {
    content: '\2713';
    /* Unicode for a checkmark (✓) */
    position: absolute;
    /* Calculate position based on the label::before size (20px wide) */
    left: 5px;
    /* Adjust to center the checkmark inside the 20px box */
    top: 47%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    /* Ensure no extra line-height pushes the position */
    color: #fff;
    /* White checkmark */
    font-weight: bold;
    background-color: unset;

}

/* Style the help text for completeness */
.wjportal-form-help-txt {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    padding-left: 5px;
    /* Indent slightly */
    width: 100%;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background-color: var(--wpjp-card-background);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

/* --- Popup Header --- */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.popup-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--wpjp-secondary-color);
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: var(--wpjp-primary-color);
}



.wjportal-job-apply-price-msg strong {
    font-weight: 700;
}

.wjportal-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wjportal-form-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
}

.wjportal-job-apply-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Custom Radio Button Styling --- */
.wpjobportal-form-radio-field input[type="radio"] {
    display: none;
    /* Hide the default radio button */
}

.wpjobportal-form-radio-field label {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wpjobportal-form-radio-field label img {
    height: 24px;
    width: auto;
    margin-right: 12px;
}

.wpjobportal-form-radio-field label:hover {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.1);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label {
    border-color: var(--wpjp-primary-color);

}

/* --- Trigger Button (for demo) --- */
#open-popup-btn {
    background-color: var(--wpjp-secondary-color);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease;
}

#open-popup-btn:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-3px);
}

.wjportal-company-job-viewjob-rightwrp {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    height: max-content;
    position: sticky;
    top: 2.5rem;
}

.wjportal-jobinfo-wrp {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem 2rem;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: var(--background-color);
}

.wjportal-jobinfo {
    display: flex;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobtype {
    /* The type's colour, chosen by an administrator, arrives as a variable
       rather than painted straight into the style attribute - where nothing
       downstream could reach it, and a white label on a pale blue could not
       be read. Same colour, same chip; a look can now answer it. */
    background: var(--wpjp-jobtype-color, transparent);
    display: inline-block;
    padding: 6px 15px;
    vertical-align: middle;
    color: #fff;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobinfo-data {
    align-items: center;
    display: flex;
    color: var(--wpjp-secondary-color);
    gap: 15px;
    vertical-align: middle;
    font-weight: 500;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);

}

/* --- Icon for Salary --- */
.wjportal-jobinfo-right-data-salary .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* --- Icon for Category --- */
.wjportal-jobinfo-right-data-category .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>');
}

/* --- Icon for Created Date --- */
.wjportal-jobinfo-right-data-created .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

/* --- Icon for Closing Date --- */
.wjportal-jobinfo-right-data-close-date .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

/* --- Icon for Location --- */
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

/* --- Icon for Views --- */
.wjportal-jobinfo-right-data-views .wjportal-jobinfo-data-view::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-jobinfo-right-data-workplace-type .wjportal-jobinfo-data::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 9h6v6H9z"></path></svg>');
}


.wjportal-jobinfo-highlight {
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    float: left;
    font-size: var(--font-size);
    background-color: #ffeeec;
    border-color: #f29d99;
}

/* --- Step 1: Hide the old PNG image icons --- */
.wjportal-jobinfo-data img {
    display: none !important;

}


/* --- Main Container --- */
/* This lays out all the info blocks in a flexible, wrapping row */
.wjportal-jobinfo-wrp,
.wjportal-jobinfo.wjportal-jobinfo-right-data-location {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    /* Vertical and horizontal spacing */
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
}

/* --- General Styling for Each Info Block --- */
/* Targets all spans like "salary", "category", etc. */
.wjportal-jobinfo-data,
.wjportal-jobinfo-data-view {
    display: flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
}

/* --- Hide Old PNG Images --- */
/* We target the specific images within each block and hide them */
.wjportal-jobinfo-wrp img {
    display: none;
}

/* --- Other Cosmetic Styles --- */
/* Style for the "Full-Time" badge */
.wjportal-jobtype {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* Style for highlighted info, like the closing date */
.wjportal-jobinfo-highlight .wjportal-jobinfo-data {
    color: #c0392b;
    /* A subtle red to draw attention */
    font-weight: 500;
}

a.wpjobportal_tags_a.wjportal-tags-item {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    margin: 5px;
}

div#wpjobportal_jstags {
    float: left;
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-tags-item::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    /* Adds space between icon and text */
    vertical-align: middle;
    /* Aligns icon with the text */

    /* This makes the icon color match the text color */
    background-color: currentColor;

    /* Use the SVG shape as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* SVG icon for a "tag" */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>');
}

a.wpjobportal_tags_a.wjportal-tags-item:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-job-company-btn-wrp {
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    gap: 10px;
    background-color: var(--wpjp-card-background);
}

a.wjportal-job-act-btn {
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px;
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-job-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-job-detail-about-company-wrap {
    width: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background-color: var(--wpjp-card-background);
}

.wjportal-job-detail-about-company-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-job-detail-about-company-description {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    font-weight: normal;
}

a.wjportal-company-view-all-jobs-btn,
.wjportal-company-view-company-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    margin-top: 20px;
}

.wjportal-company-btn-wrp-viewjobs {
    width: 100%;
}

.wjportal-job-detail-about-company-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to stack on smaller screens */

}

/* --- Base Button & Icon Style --- */
/* This is a shared style for both buttons */
.wjportal-company-btn-wrp a {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);


}

/* Base style for the icon's pseudo-element */
.wjportal-company-btn-wrp a::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */
    background-color: currentColor;
    /* Colors the SVG icon */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Primary Button: "View All Jobs" --- */
.wjportal-company-view-all-jobs-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-primary-color);
    /* Uses your variable with a fallback */
    color: #ffffff;
    border-color: var(--wpjp-primary-color);
}

.wjportal-company-view-all-jobs-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Secondary Button: "View Company" --- */
.wjportal-company-view-company-btn {
    background-color: transparent;
    color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);

}

.wjportal-company-view-company-btn:hover {
    background-color: var(--wpjp-primary-color, );
    color: #ffffff;
}

.wjportal-main-up-wrapper .wjportal-form-wrp.wpjobportal-quickapply-form {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 2rem;
    background-color: #fffdf7;
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-company-btn-wrp a.wjportal-job-act-btn-tell,
a.wjportal-job-act-btn-short {
    display: inline-flex;
    align-items: center;
    padding: 10px 10px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    gap: 10px;
}

a.wjportal-job-act-btn-tell:hover,
a.wjportal-job-act-btn-short:hover {
    background-color: var(--wpjp-secondary-color) !important;
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-jobinfo-data.wjportal-job-close-date {
    color: #b72e2e;
}

/* --- Icon for Views Count --- */

/* First, hide the old PNG image */
.wjportal-jobinfo-data-view img {
    display: none;
}

/* Optional: Improve alignment */
.wjportal-jobinfo-data-view {
    display: inline-flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;
}

/* ----------------------------------------- */
/* == Applied Job List Page Styles              == */
/* ----------------------------------------- */

.wjportal-jobs-list-wrapper.wjportal-applied-jobs-wrp {
    width: 100%;
}

/* --- Popup Backdrop --- */
#no-folder-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {
    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: 100%;
    max-width: 400px;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
    text-align: center;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}


#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}

/* --- Message Content Styling --- */
.wjportal-applied-job-actions-popup-norec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Space between text and button */
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-body-font-color);
}

/* --- "Add Folder" Button Styling --- */
.wjportal-applied-job-actions-popup-norec-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wjportal-applied-job-actions-popup-norec-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}


/* --- Popup Backdrop --- */
#add-note-popup-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 35, 39, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* --- Popup Card --- */
.wjportal-applied-job-actions-popup {

    background: var(--wpjp-card-background);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    width: calc(100% - 80px);
    max-width: 100%;
    margin: 0 40px;
    padding: 2.5rem;
    position: relative;
    box-sizing: border-box;
}

/* --- CSS-Only Close Icon --- */
#close-section {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-color: var(--wpjp-body-font-color);
    border-radius: 50%;
    font-size: 0;
    /* Hides broken image alt text */
    transition: all 0.2s ease;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#close-section:hover {
    background-color: var(--wpjp-primary-color);
    transform: rotate(90deg);
}


/* --- Form Content Styling --- */
.wjportal-applied-job-actions-wrp {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wjportal-applied-job-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wjportal-main-up-wrapper #comments-label {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-body-font-color);
}

/* --- Textarea Styling --- */
.wjportal-main-up-wrapper textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px 16px;
    font-size: 1rem;

    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    resize: vertical;
    transition: all 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Save Button --- */
.wjportal-job-applied-actions-btn-wrp {
    display: flex;
    justify-content: flex-end;
}

.wjportal-job-applied-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-job-applied-actions-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* Add a "save" icon to the button */
.wjportal-job-applied-actions-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/%3E%3C/svg%3E");
}

.wjportal-applied-job-actions-row #comments {
    margin: 0px;
    padding: 0;
}

.wjportal-applied-job-actions-wrp.wjportal-note-actions-wrp .wjportal-applied-job-actions-row #comments {
    padding: 10px;
}

.wjportal-applied-job-actions-row label {
    font-size: var(--wpjp-body-font-size);
    text-align: justify;
    font-weight: 500;
}

/* --- Main Notification Wrapper --- */
/* This can be used for positioning, e.g., position: fixed; bottom: 20px; right: 20px; */
.wjportal-visitor-msg-btn-wrp {
    width: clamp(300px, 90%, 450px);
    /* Responsive width */
}

/* --- Notification Bar (#notification-ok) --- */
#notification-ok {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /* Space between message and button */
    width: 100%;
    /* Appearance */
    background-color: #f0fdf4;
    /* Light green for success */
    color: #166534;
    /* Dark green text for readability */
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #4ade80;
    /* Green border */

    /* Effects */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide the original images */
#notification-ok img {
    display: none;
}

/* --- Message Label (#popup_message) --- */
#popup_message {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between icon and text */
    font-weight: 500;
    font-size: 16px;
}

/* --- SVG Icon for the Message --- */
#popup_message::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    /* Inherits the dark green color */

    /* SVG checkmark-in-circle icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button --- */
.applynow-closebutton {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 4px;

    /* Layout & Sizing */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;

    /* Appearance & Effects */
    color: #166534;
    /* Match text color */
    font-size: 0;
    /* Hides the "Close" text */
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.applynow-closebutton:hover {
    background-color: rgba(22, 101, 52, 0.1);
    /* Subtle hover effect */
}

/* --- SVG Icon for the Close Button --- */
.applynow-closebutton::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Animation for the notification appearing --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ----------------------------------------- */
/* == 6. Resume/Cover Letter Info Styles (V3) == */
/* ----------------------------------------- */

/* Main container for the resume info */
.wjportal-jobs-list-resume-wrp {
    position: relative;
    /* Establishes a positioning context for the status tag */
    padding: 1rem;
    /* Add padding on the right to prevent text from overlapping the positioned tag */

    width: 100%;
}

span.wjportal-item-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

div#job-applied-resume:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Container for each title/value pair */
.wjportal-jobs-list-resume-data {
    display: block;
    /* Make the divs stack vertically */
}

/* Add space between the "Resume Title" and "Cover Letter Title" sections */
.wjportal-jobs-list-resume-data:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

/* Style for the title (e.g., "Resume Title:") */
.wjportal-jobs-list-resume-tit {
    font-weight: 600;
    color: var(--wpjp-body-font-color);
    margin-right: 0.5rem;
    font-size: var(--wpjp-body-font-size);
}

/* Style for the value (the resume name/link) */
.wjportal-jobs-list-resume-val a {
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
}

span.wjportal-jobs-list-resume-val {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-jobs-list-resume-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* Status tag styling */
.wjportal-applied-job-resume-status {
    /* Positioning to place it on the right */
    position: absolute;
    top: 50%;
    right: 1rem;
    /* Aligns with the parent's padding */
    transform: translateY(-50%);
    /* Ensures perfect vertical centering */

    /* Visual styling to match the image */
    padding: 8px 18px;
    border-radius: 6px;
    /* Less rounded than a pill */
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

/* Green color for the "Inbox" status */
.wjportal-applied-job-resume-status.wjportal-inbox {
    background-color: #28a745;
    /* Green color from image */
}

/* You can add other status colors like this */
.wjportal-applied-job-resume-status.wjportal-rejected {
    background-color: #dc1b18;
    /* Red for rejected */
}

span.wjportal-applied-job-resume-status.statustags.wjportal-shortlist {
    background-color: #85a94a;
}

span.wjportal-applied-job-resume-status.statustags.wjportal-spam {
    background-color: #e69108;
}

.wjportal-applied-job-resume-status.statustags.wjportal-hired {
    background-color: #35811e;
}

.wjportal-applied-job-resume-status.wjportal-primary {
    background-color: var(--wpjp-primary-color);
    /* Blue */
}


/* ----------------------------------------- */
/* == 12. Resume Action Buttons with Icons == */
/* ----------------------------------------- */

/* Wrapper for the action buttons */
.wjportal-resume-action-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to wrap on smaller screens */
    align-items: center;
    gap: 0.75rem;
    justify-content: end;
}

/* Base style for all action buttons */
.wjportal-resume-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Styling for the secondary action links */
.wjportal-resume-act-btn.action-links {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-act-btn.action-links:hover {
    background-color: var(--wpjp-secondary-color);
    /* A very light gray */
    border-color: #ced4da;
    color: #fff;
}

/* Styling for the primary "View Profile" button */
.wjportal-resume-act-btn[title="view"] {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid transparent;
}

.wjportal-resume-act-btn[title="view"]:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}


.wjportal-view-job-count {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-job-listing-description-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    margin-bottom: 5px;

}

span.wjportal-job-listing-description-val p {
    font-size: var(--wpjp-body-font-size) !important;
    font-weight: normal;
    border: none;
}

.wjportal-custom-field-wrp {
    font-weight: normal;
    width: 100%;
    margin-top: -6px;
}

/* ----------------------------------------- */
/* == 2. Resume List Page Styles              == */
/* ----------------------------------------- */

.wjportal-save-search-form-wrp {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    color: #fff !important;
}

.wjportal-error-msg-actions-wrp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wjportal-error-msg-txt {
    text-align: center;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: bold;
    width: 100%;
    margin-bottom: 15px;
}

.wjportal-resume-listing-skills-data-text {
    margin-bottom: 10px;
    width: 100%;
}

/*.wjportal-error-msg-actions-wrp:hover {
background-color: var(--wpjp-secondary-color);
    color: #fff!important; }*/

div.wjportal-job-applied-resume-list div#job-applied-resume {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: visible;
    position: relative;
    width: 100%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-middle-wrp {
    width: 70%;
}

div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-right-wrp {
    width: 30%;
    flex-direction: column;
    align-items: flex-end;
}

.wjportal-resume-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    position: relative;
    width: 100%;
}

.wjportal-resume-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
    border-radius: 10px;
}

.wjportal-resume-logo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: static;
    border-radius: 6px;
}

.wjportal-resume-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 80%;
    margin-bottom: 8px;
}

/* Beside the right column, the middle one takes what is left. At a fixed 80%
   anything on the right wider than the other 20% - "View Cover Letter", or a
   job type with "No Cover Letter" - wrapped to its own line under the name,
   against the text below. Phones still stack them (the 768px rule). */
@media (min-width: 769px) {
    .wjportal-resume-cnt-wrp > .wjportal-resume-middle-wrp {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

.wjportal-resume-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
}

span.wjportal-resume-job-type {
    background: var(--wpjp-jobtype-color, transparent);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
    color: white;
}

/* The CSS code for the icon */
.wjportal-resume-job-type::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-login-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-error-msg-act-btn.wjportal-error-msg-act-register-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

span.wjportal-resume-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none !important;
}

span.wjportal-resume-name:hover {
    text-decoration: underline !important;
}

span.wjportal-resume-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-resume-data-text {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and title */

}

.wjportal-resume-right-wrp {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: flex-start;
}

span.wjportal-resume-status-heading {
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-secondary-color);
}

.wjportal-resume-listing-bottom-full-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-resume-cnt-wrp {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
}

.wjportal-resume-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-resume-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp {
    background: #e83030;
    color: #fff;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
}

.wjportal-resume-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
    text-decoration: none;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

a.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
    text-decoration: none;
}

/* Style for the data title (e.g., "City:") */
.wjportal-resume-data-title {
    display: none;
}

/* Style for the data value */
.wjportal-resume-data-value {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Base style for the icons */
.wjportal-resume-data-text::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 18px;
    height: 18px;
    background-color: var(--wpjp-body-font-color);
    /* Icon color */
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- Individual Icons (Based on Order) --- */

/* Icon for the 1st item (City) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-lcoation::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* Icon for the 2nd item (Desired Salary) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-salary::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='1' x2='12' y2='23'/%3e%3cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3e%3c/svg%3e");
}

/* Icon for the 3rd item (Experience) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-exprience::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3e%3cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3e%3c/svg%3e");
}

/* Icon for the 4th item (Category) */
.wjportal-resume-data-text.wjportal-jobs-data-icon-class-category::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3e%3cline x1='7' y1='7' x2='7.01' y2='7'/%3e%3c/svg%3e");
}

a.wjportal-resume-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-resume-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

div.wjportal-job-applied-resume div.wjportal-section-heading {
    width: 100%;
    margin-bottom: 25px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-applied-job-adv-search-field {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

input#btnsubmit-search {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

input#btnsubmit-search:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-main-up-wrapper input#reset {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-secondary-color);
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
}

.wjportal-main-up-wrapper input#reset:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-applied-job-adv-search-action-wrp {
    text-align: center;
}

div#wpjobportal_appliedresume_tab_search {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 30px;
    border-radius: 8px;
}

/* --- Dropdown Container --- */
.wjportal-resume-act-actions-dropdown {
    position: relative;
    display: flex;
    order: 5;
}

/* --- Dropdown Toggle Button --- */
.wjportal-resume-act-actions-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    font-family: inherit;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wjportal-resume-act-actions-dropdown-toggle span {
    transition: transform 0.2s ease-in-out;
}

.wjportal-resume-act-actions-dropdown-toggle:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* --- Dropdown Menu (Initially Hidden) --- */
.wjportal-resume-act-actions-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    position: absolute;
    right: 0;
    /* Align to the right of the button */
    top:auto;
    bottom: calc(100% + 6px);
    /* Position it right below the button */
    min-width: 220px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 10;
    overflow: hidden;
    padding: 6px;
}

/*
 * Show the menu when the container is hovered or focused. It said focused
 * and meant hovered, and hovering is something only a mouse can do: on a
 * phone, and from a keyboard, the ten actions behind this menu - add a note,
 * email the candidate, mark hired, print, and the rest - could not be
 * reached at all. The toggle is a button, so tapping or tabbing to it puts
 * focus inside the container, and :focus-within opens it.
 */
.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu,
.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-menu,
.wjportal-resume-act-actions-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 10;
}

.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

.wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-toggle span {
    transform: rotate(180deg);
}

/* --- Styling for links inside the dropdown --- */
.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-resume-act-actions-dropdown-menu .wjportal-resume-act-action-links svg {
    color: #6b7280;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.wjportal-visitor-msg-btn-wrp input {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-visitor-msg-btn-wrp input:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-spam.action-links {
    order: 1;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-not-spam.action-links {
    order: 2;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-rejected.action-links {
    order: 3;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-mark-hired.action-links {
    order: 4;
}

button.wjportal-resume-act-actions-dropdown-toggle {
    order: 5;
}

a.wjportal-resume-act-btn.wjportal-list-act-btn-view-profile {
    order: 6;
}


/* ----------------------------------------- */
/* == 15. Tabbed Navigation Actions        == */
/* ----------------------------------------- */

/* Main container for the tab list */
.wjportal-job-applied-resume-actions {
    margin: 50px 0 40px 0;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-job-applied-resume-actions ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Allows tabs to wrap on smaller screens */
    list-style: none;
    margin: 0 0 1.5rem 0;
    /* Adds space below the tabs */
    padding: 0;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* Individual list item */
.wjportal-job-applied-resume-actions li {
    margin: 0;
    padding: 0;
}

/* ----------------------------------------- */
/* ==  Resume Details              == */
/* ----------------------------------------- */

/* --- Main Layout --- */
.wjportal-resume-detail-wrapper {
    display: flex;
    flex-direction: column;
    /* Stack columns on small screens by default */
    gap: 24px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
    flex: 0 0 320px;
    /* Fixed width for left column on larger screens */
    position: sticky;
    /* Sticky left column */
    top: 4.5rem;
    /* Adjust as needed for header height */
    align-self: flex-start;
    /* Prevent stretching */
    overflow: hidden;
    border-radius: 8px;

}

.wjportal-resume-detail-wrapper.wjportal-view-page-featured-flag .wjportal-personal-data {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b;
}

.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Left Column Card --- */
.wjportal-resume-detail-wrapper .wjportal-resume-left-section {
    background-color: var(--wpjp-card-background);
    text-align: center;


}

.wjportal-resume-detail-wrapper .wjportal-resume-image img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-personal-data {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
    display: inline-block;
}

.wjportal-resume-detail-wrapper .wjportal-resume-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 10px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-info {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center info items */
    gap: 8px;
    font-size: calc(var(--wpjp-body-font-size) - 1px);
    /* Slightly smaller text */
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    word-break: break-all;
    /* Prevent long emails/numbers from overflowing */
    background-color: var(--wpjp-card-background);
}

/* --- Hide existing images --- */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell img,
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address img {
    display: none;
}

/* --- Common Icon Styles using ::before --- */

.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before,
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Icon size */
    height: 1em;
    /* Icon size */
    flex-shrink: 0;
    /* Prevent icon shrinking */

    /* Icon color and opacity */
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    /* Match previous icons */

    /* Mask properties */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Add the icon using ::before */
.wjportal-resume-detail-wrapper .wjportal-resume-info-email-address::before {
    content: '';
    display: inline-block;
    width: 1em;
    /* Match the size of other icons */
    height: 1em;
    /* Match the size of other icons */
    flex-shrink: 0;
    /* Prevent icon from shrinking */

    /* Color the icon using the current text color */
    background-color: currentColor;
    opacity: 0.7;
    /* Match the opacity of other icons */

    /* Email/Mail SVG Icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* --- Specific Icons --- */
/* Salary Icon (Dollar Sign) */
.wjportal-resume-detail-wrapper .wjportal-resume-info-salary::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>');
}

/* Cell/Phone Icon */
.wjportal-resume-detail-wrapper .wjportal-resume-info-cell::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14z'%3E%3C/path%3E%3C/svg%3E");
}

/* Icons for left column info */
.wjportal-resume-detail-wrapper .wjportal-resume-info img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}


/* --- Left Column Action Buttons --- */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-wrp {
    align-self: flex-start;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    text-align: center;
    padding: 2rem 1.2rem;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: all 0.3s ease;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-card-background);
    border-color: var(--wpjp-secondary-color);
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* Add Icons to Action Buttons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Specific Icons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9a1 1 0 11-2 0 1 1 0 012 0zm-3 5.5a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9a1 1 0 11-2 0 1 1 0 012 0zm-3 5.5a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4zm3 0a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-4a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v4z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'%3E%3C/path%3E%3C/svg%3E");
    /* Using download icon for export */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'%3E%3C/path%3E%3C/svg%3E");
}

.wjportal-resume-detail-wrapper .wjportal-resume-download-all-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12l-5 5-5-5h3V4h4v8z'%3E%3C/path%3E%3Cpath d='M19 18H5v-2h14v2z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 12l-5 5-5-5h3V4h4v8z'%3E%3C/path%3E%3Cpath d='M19 18H5v-2h14v2z'%3E%3C/path%3E%3C/svg%3E");
    /* Simpler download icon */
}

.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');

}

/* --- Right Column Content --- */
.wjportal-resume-section-records-wrap {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wpjp-primary-color);
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-detail-wrapper .resume-map {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

/* Add top border to distinguish inner sections like Languages */
.wjportal-resume-detail-wrapper .wjportal-resume-right-wrapper .wjportal-resume-section-wrapper+.wjportal-resume-section-wrapper[data-section="languages"] {
    border-top: 1px dashed var(--wpjp-border-color);
    border-radius: 0;
    box-shadow: none;
    padding: 15px 20px;
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-inner-sec-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Wrap dates if needed */
    gap: 10px;
}

.wjportal-resume-detail-wrapper .wpjp-resume-employer-dates {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    background-color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-resume-detail-wrapper .wjportal-resume-section-wrapper.-resumedetail-sec-data {
    padding: 0 !important;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row {
    gap: 16px;
    margin-bottom: 16px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-row:last-child {
    margin-bottom: 0;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    display: flex;
    width: 100%;
    padding: 15px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-title {
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 4px;
    display: flex;
}

.wjportal-resume-detail-wrapper .wjportal-resume-sec-data-value {
    word-break: break-word;
    /* Prevent overflow */
}

/* File Attachments */
.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachments-wrp .wjportal-resume-sec-data-value a.file:hover {
    background-color: var(--wpjp-primary-color);
    border-color: var(--wpjp-primary-color);
    color: white;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-filename {
    font-weight: 500;
}

.wjportal-resume-detail-wrapper .wjportal-resume-attachment-file-download {
    width: 16px;
    height: 16px;

}

/* Map Section */
.wjportal-resume-detail-wrapper .resume-map .row-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    cursor: pointer;
}

.wjportal-resume-detail-wrapper .resume-map .row-title img {
    width: 25px;
    height: 25px;
    order: 2;
    background: aliceblue;
}

.wjportal-resume-detail-wrapper .resume-map .map {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wpjp-border-color);
}

/* --- Responsive Layout --- */
@media (min-width: 992px) {
    .wjportal-resume-detail-wrapper {
        flex-direction: row;
        /* Side-by-side columns on large screens */
        align-items: flex-start;
        /* Align columns to the top */
    }

    .wjportal-resume-detail-wrapper .wjportal-resume-sec-row:not(.wjportal-resume-row-full-width):not(.wjportal-resume-attachments-wrp) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991px) {

    /* Un-stick the left column when it's stacked */
    .wjportal-resume-detail-wrapper .wjportal-resume-detail-left-wrapper {
        position: static;
        flex-basis: auto;
        /* Allow it to take full width */
    }
}


/* ----------------------------------------- */
/* ==  Resume Details---              == */
/* ----------------------------------------- */



.wjportal-custom-field.wjportal-resume-sec-data {
    float: left;
    width: 100%;
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
    margin-right: 10px;
    color: var(--wpjp-body-font-color);
}

.wjportal-custom-field-tit.wjportal-resume-sec-data-title {
    float: left;
    font-weight: 500;
}

.wjportal-custom-field-val.wjportal-resume-sec-data-value {
    float: left;
    margin-left: 8px;
    /*width: calc(100% - 20% - 8px);*/
    width: calc(100% - 32% - 10px);
}

.wjportal-resume-info {
    float: left;
    margin: 5px 15px 5px 0;
    font-size: var(--wpjp-body-font-size);
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 1rem 1rem;
    border-radius: 5px;
    font-weight: 500;
}

.wjportal-resume-adv-act-wrp {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.wjportal-resume-detail-wrapper a.wjportal-resume-adv-act-btn {
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    transition: all 0.2s ease;
    align-items: center;
    gap: 8px;
    /*padding: 12px 40px;*/
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    flex-wrap: wrap;
    justify-content: center;
}

a.downloadall.wjportal-resume-download-all-btn.wjportal-resume-adv-act-btn {
    order: 1;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf {
    order: 2;
}

a.wjportal-resume-adv-act-btn.wjportal-list-act-btn-print-resume {
    order: 3;
}

a.wjportal-resume-adv-act-btn {
    order: 4;
}

a.wjportal-resume-adv-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == Folders         == */
/* ----------------------------------------- */

.wjportal-folder-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-folder-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    flex-wrap: wrap;
}

.wjportal-folder-middle-wrp {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-folder-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-folder-data {
    display: flex;
    align-items: center;
    gap: 2em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 5px 0;
}

.wjportal-folder-info-data {
    padding-bottom: 5px;
}

/* Container for "Resumes" and Date */
.wjportal-folder-data:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.wjportal-folder-info-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Icons for Resume Count and Date */
.wjportal-folder-info-tit::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Resume Icon */
.wjportal-folder-info-data:nth-child(1) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
}

/* Date Icon */
.wjportal-folder-info-data:nth-child(2) .wjportal-folder-info-tit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

span.wjportal-folder-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

.wjportal-folder-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}


input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn {
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-primary-color);
    border: 1px solid var(--wpjp-primary-color);
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: unset;

    transition: unset;

}

input.wjportal-form-wrp.wjportal-resume-form-btn-primary.wjportal-form-btn.wjportal-form-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-folder-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
    width: 100%;
}

/* --- Action Buttons --- */
.wjportal-folder-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-folder-act-btn {
    font-weight: 500;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);

}

.wjportal-folder-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* Base style for all button icons */

a.wjportal-folder-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

/* Special styling for "Resume" button (primary action) */
.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-folder-act-resume-btn:hover,
.wjportal-folder-act-btn.wjportal-folder-act-resume-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-folder-act-btn.wjportal-folder-act-resume-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Folders         == */
/* ----------------------------------------- */

.wjportal-folderdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-folder-data-wrp {
    width: 100%;
}

span.wjportal-folder-data-tit {
    display: none;
}

.wjportal-folder-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    width: 100%;
}

.wjportal-folder-desc p {
    width: 100%;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
}

/* ----------------------------------------- */
/* ==  Departments             == */
/* ----------------------------------------- */

/* --- Main Card Layout --- */
.wjportal-department-list {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Modern rounded corners */
    box-shadow: var(--wpjp-card-shadow);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border radius */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wjportal-department-list:hover {
    box-shadow: var(--wpjp-card-hover-shadow);
    transform: translateY(-5px);
    /* Subtle lift effect on hover */
}

/* --- Top Content Section --- */
.wjportal-department-cnt-wrp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;

    flex-wrap: wrap;
}

.wjportal-department-middle-wrp {
    flex-grow: 1;
    /* Allows this section to take up available space */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 75%;
}

.wjportal-department-right-wrp {}

.wjportal-department-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* --- Typography and Content Styling --- */
.wjportal-department-title {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    /* Using the dark color for the title */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-department-data {
    display: grid;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-data {
    display: inline-block;
    /* Aligns company and date side-by-side */
    margin-right: 1rem;
    font-size: var(--wpjp-body-font-size);
    color: #6c757d;
    padding: 3px 0;
}

/* Optional: To ensure perfect vertical alignment */
.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;

}

span.wjportal-department-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-department-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

    /* Mask properties */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}



a.wjportal-companyname {
    color: var(--wpjp-primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;

}

.wjportal-companyname:hover {
    color: var(--wpjp-secondary-color);
}

.wjportal-department-desc p {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.6;
    margin: 0;

    /* Modern line-clamping to truncate long text */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Shows a maximum of 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Status Badge --- */
.wjportal-department-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

/* --- Bottom Action Bar --- */
.wjportal-department-list-btm-wrp {
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    background-color: var(--background-color);
}

.wjportal-department-action-wrp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between buttons */
    flex-wrap: wrap;
    justify-content: end;
}

.wjportal-department-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-department-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-department-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* ----------------------------------------- */
/* == View Departments Detail            == */
/* ----------------------------------------- */

.wjportal-departmentdetail-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-department-data-wrp {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding-top: 5px;
}

.wjportal-department-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;

}

span.wjportal-department-data-tit {
    display: none;
}

.wjportal-department-data:last-child {
    margin-bottom: 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 3px 0;
}

.wjportal-departmentdetail-wrapper .wjportal-department-desc p {
    display: flex;
    flex-wrap: wrap;
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;

}

/* ----------------------------------------- */
/* == Cover Letter Button         == */
/* ----------------------------------------- */

span.wjportal-no-coverletter-btn {
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0px 16px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    border: 1px solid var(--wpjp-border-color);
    background-color: var(--wpjp-card-background);
}


/* Main style for the "View Cover Letter" button */
.wjportal-coverletter-act-btn {
    /* Button Appearance */
    background-color: #fff;
    color: var(--wpjp-secondary-color);
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--wpjp-border-color);
    /* Layout for Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    margin-top: 5px;

}

/* Sits in the flex row of a resume card; the top margin pushed it off centre. */
.wjportal-resume-right-wrp .wjportal-coverletter-act-btn {
    margin-top: 0;
}

.wjportal-coverletter-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
    text-decoration: none;
}

/* The ::before pseudo-element creates the icon */
.wjportal-coverletter-act-btn::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    /* Icon color will be white */
    -webkit-mask-size: cover;
    mask-size: cover;
    /* SVG code for a document/file icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

/* Styling for each tab link */
.wjportal-job-applied-resume-actions li a {
    display: block;
    padding: 10px 15px;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    /* Overlaps the container's border for a seamless look */
    transition: color 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--wpjp-border-color);
    background: #fafafa;
    border-radius: 6px 6px 0 0;
}

/* Hover state for inactive tabs */
.wjportal-job-applied-resume-actions li a:not(.selected):hover {
    color: var(--wpjp-body-font-color);
}

.wjportal-job-applied-resume-actions li a:hover {
    color: var(--wpjp-hover-text, #fff) !important;
    background-color: var(--wpjp-secondary-color);
}

/* Active tab styling */
.wjportal-job-applied-resume-actions li a.selected {
    color: var(--wpjp-primary-color);
    font-weight: 600;
    border-bottom-color: var(--wpjp-primary-color);
}

/* Styling for the "Export All" button */
.wjportal-export-all-btn {
    /* Pushes the button to the far right */
    margin-left: auto;
    /* Button appearance */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 6px 6px 0 0;
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.wjportal-export-all-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-export-all-btn svg {
    width: 1em;
    height: 1em;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

/* ----------------------------------------- */
/* == Responsive for Tabs                  == */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .wjportal-job-applied-resume-actions ul {
        flex-direction: column;
        /* Stack tabs vertically */
        align-items: stretch;
        /* Make tabs full-width */
        border-bottom: none;
    }

    .wjportal-job-applied-resume-actions li {
        width: 100%;
        border-bottom: 1px solid var(--wpjp-border-color);
    }

    .wjportal-job-applied-resume-actions li a {
        border-bottom: none;
        /* Remove bottom border indicator */
        margin-bottom: 0;
    }

    .wjportal-job-applied-resume-actions li a.selected {
        background-color: #f0f5fc;
        /* Light blue background for active mobile tab */
    }

    .wjportal-export-all-btn {
        margin-left: 0;
        margin-top: 1rem;
        justify-content: center;
    }
}

/* --- Popup Overlay / Backdrop --- */
/* This creates the dark, semi-transparent background behind the popup */
.wjportal-main-up-wrapper #popup-main-outer.sendmessage {
    position: fixed;
    /* Cover the entire screen */
    backdrop-filter: blur(4px);
    /* Modern blur effect */
    display: flex;
    /* Center the popup vertically and horizontally */
    align-items: center;
    justify-content: center;
}

.wjportal-main-up-wrapper #popup-main-outer.sendmessage #popup-main {
    width: 100%;
}

/* --- Form Fields & Inputs --- */
.wjportal-popup-contentarea .wjportal-popup-field-wrp {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

*/ div#wjportal-listpopup .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-cnt {
    height: 50% !important;
}

.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-row {
    width: 100%;
}

/* Style for the text input box */
.wjportal-popup-field .inputbox {
    width: 100%;
    padding: 12px 15px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-popup-field .inputbox::placeholder {
    color: #a0a0a0;
}

/* Highlight effect when the input is focused */
.wjportal-popup-field .inputbox:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

/* --- Rich Text Editor Styling --- */
/* Basic styling to make the WordPress editor fit the design */
#wp-jobseekermessage-wrap {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Highlight the whole editor when it's in focus */
#wp-jobseekermessage-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px rgba(232, 48, 48, 0.15);
}

#wp-jobseekermessage-editor-container {
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-main-up-wrapper .wjportal-filter-search-field-wrp ul.wpjobportal-input-list-wpjobportal,
.wjportal-main-up-wrapper .wjportal-form-value ul.wpjobportal-input-list-wpjobportal {
    margin: 0;
    width: 100%;
    overflow-x: auto;
    position: relative;
    display: flex;
    padding: 0;
    height: 55px !important;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: inherit !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li {
    display: flex;
    align-items: center;
    min-width: fit-content;
    margin: 3px;
    background-color: transparent;
}

li.wpjobportal-input-token-wpjobportal span {
    font-size: var(--wpjp-body-font-size);
}

div.wpjobportal-input-dropdown-wpjobportal {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wpjobportal-input-list-wpjobportal li p {
    margin: 0;
    background-color: transparent;
}


/* --- Hover Effect --- */
/* Simply change the background color to change the icon color */
#wjportal-popup-close-btn:hover {
    background-color: var(--wpjp-primary-color);
    border-radius: 50%;
}

/* ----------------------------------------- */
/* == 2. Company List Page Styles              == */
/* ----------------------------------------- */

.wjportal-company-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-company-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-company-list-top-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    gap: 10px;
    width: 100%;
}

.wjportal-company-list-wrapper.wjportal-my-company-wrp {
    width: 100%;
}

.wjportal-jobs-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.wjportal-company-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

span.wjportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-company-title a:hover {
    text-decoration: underline !important;
}

.wjportal-company-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    font-size: var(--wpjp-body-font-size);

}

span.wjportal-company-data-value {
    color: var(---wpjp-body-font-color);
}

.wjportal-company-listing-data-description {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

.wjportal-company-list-btm-wrp {
    justify-content: flex-end;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-company-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    align-items: center;
    gap: 1rem;
}

a.wjportal-company-act-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;

}

a.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
    text-decoration: none;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
}

.wjportal-company-act-btn.wjportal-company-list-view-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}


.wjportal-payment-action-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    gap: 1rem;
}

span.wjportal-company-data-title {
    display: none;
}

.wjportal-company-data-wrp .wjportal-company-data .wjportal-company-data-tit {
    /*    color: var(--wpjp-secondary-color);*/
    font-weight: 500;
}

/* --- Company Data Item Base Styles --- */
.wjportal-company-data-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-company-data-text.wjportal-company-data-text-created span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-location span.wjportal-company-data-title,
.wjportal-company-data-text.wjportal-company-data-status span.wjportal-company-data-title {
    display: none;
}

/* --- Common Icon Styles using ::before --- */
.wjportal-company-data-text-created::before,
.wjportal-company-data-status::before,
.wjportal-company-data-location::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: currentColor;
    /* Inherits text color */
    opacity: 0.7;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* --- Specific Icons --- */

/* Created Icon (Calendar/Clock) */
.wjportal-company-data-text-created::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'%3E%3C/path%3E%3Cpath d='M13 7h-2v6l5.25 3.15.75-1.23-4-2.42V7z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'%3E%3C/path%3E%3Cpath d='M13 7h-2v6l5.25 3.15.75-1.23-4-2.42V7z'%3E%3C/path%3E%3C/svg%3E");
    /* Clock Icon */
}

/* Status Icon (Check Circle for Approved, could add others for different statuses) */
.wjportal-company-data-status::before {
    /* Default Icon (e.g., Info) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM11 11h2v6h-2zm0-4h2v2h-2z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM11 11h2v6h-2zm0-4h2v2h-2z'%3E%3C/path%3E%3C/svg%3E");
    /* Info Icon */
}


/* Location Icon (Map Pin) */
.wjportal-company-data-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3e%3ccircle cx='12' cy='10' r='3'/%3e%3c/svg%3e");
}

/* --- Optional: Align Title and Value Vertically --- */
/* This helps if the value wraps to multiple lines */
.wjportal-company-data-text .wjportal-company-data-title,
.wjportal-company-data-text .wjportal-company-data-value {
    display: inline-block;
    /* Or block depending on desired wrap behavior */
    vertical-align: top;
    /* Align to the top */
}

.wjportal-company-data-text .wjportal-company-data-title {
    font-weight: 600;
    /* Make title bold */
    color: var(--wpjp-secondary-color);
    /* Darker title */
    margin-right: 4px;
    /* Small space after title */
}

.wjportal-company-act-btn {
    /* Layout & Alignment */
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 0.5rem;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #ced4da;

    /* Effects */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* --- Button Container --- */
.wjportal-company-action-wrp {
    display: flex;
    gap: 0.75rem;
    /* Adds space between buttons */
}

/* --- General Button Styling --- */
.wjportal-company-act-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    color: #333;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wjportal-company-act-btn:hover {
    background-color: #f5f5f5;
}



/* ----------------------------------------- */
/* --- Main Success Message Container --- */
/* ----------------------------------------- */

/* --- Main Alert Styling --- */
.wjportal-main-up-wrapper .frontend.updated {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: #2e7d32;
    background-color: #e8f5e9;

    border-radius: 8px;
    border-left: 5px solid #4caf50;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    width: 100%;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

.wjportal-main-up-wrapper .frontend.updated p {
    background-color: transparent;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.updated::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Checkmark-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.updated p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* --- Animation Keyframes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------- */
/* --- Apply to job message  --- */
/* ----------------------------------------- */
/* --- Job Apply Message Styling --- */

/* Main wrapper for the message box */
.job-detail-jobapply-message-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    background-color: #FFFBEB;
    border: 1px solid #FEF3C7;

}

/* The message part with icon and text */
.job-detail-jobapply-message-msg {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #92400E;
    font-weight: 500;
}

.job-detail-jobapply-message-msg img {
    width: 24px;
    height: 24px;
}

/* --- Link/Button Styling with Icon --- */

/* The "Add Resume" link styled as a button */
.job-detail-jobapply-message-link {
    display: inline-flex;
    /* Use flexbox for easy icon alignment */
    align-items: center;
    /* Vertically center icon and text */
    gap: 0.5em;
    /* Space between icon and text */
    padding: 0.6rem 1.2rem;
    background-color: #D97706;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.job-detail-jobapply-message-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/* This adds the icon BEFORE the text */
.job-detail-jobapply-message-link::before {
    content: '';
    /* Required for pseudo-elements */
    display: block;
    width: 1.1em;
    /* Icon size relative to font size */
    height: 1.1em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* ---------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */
/* --- Modern Message Design --- */
.wjportal-visitor-msg {
    /* Layout & Box Model */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 10px;
    /* Space between the icon and the text */
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #facc15;
    /* Warning color border */
    width: 100%;
    /* Colors & Typography */
    background-color: #fffbeb;
    /* Light yellow background for warning */
    color: #854d0e;
    /* Darker yellow/brown text for readability */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    /* Effects */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: slideDownFade 0.4s ease-out;
}

/* --- SVG Icon Implementation --- */
/* Creates a virtual element before the text to hold our icon */
.wjportal-visitor-msg::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking if text wraps */
    width: 20px;
    height: 20px;

    /* The icon's color is inherited from the text color (#854d0e) */
    background-color: currentColor;

    /* The SVG shape is applied as a mask */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
}

/* --- Animation for appearing --- */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Errors Message Container --- */
/* ----------------------------------------- */


/* --- Main Error Alert Styling --- */
.wjportal-main-up-wrapper .frontend.error {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    width: 100%;
    color: #c62828;
    /* Dark red text/icon color */
    background-color: #ffdfe2;
    /* Light red background */

    border-radius: 8px;
    border-left: 5px solid #d32f2f;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .frontend.error::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Error X-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Paragraph Styling --- */
.wjportal-main-up-wrapper .frontend.error p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* --- Main Info Message --- */
/* ----------------------------------------- */
/* --- Main Info Alert Styling --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 1rem 0;
    margin-bottom: 20px;
    color: #0d47a1;
    /* Dark blue text/icon color */
    background-color: #e3f2fd;
    /* Light blue background */

    border-radius: 8px;
    border-left: 5px solid #1976d2;
    /* Accent border color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    font-size: 16px;
    font-weight: 500;

    /* Adds a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Hide the old PNG image --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message img {
    display: none;
}

/* --- Icon using ::before pseudo-element --- */
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before {
    content: '';
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;

    /* Icon color is inherited from the parent's text color */
    background-color: currentColor;

    /* SVG Info "i"-in-a-circle icon */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Animation Keyframes (can be reused) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------- */
/* == Company Detail           == */
/* ----------------------------------------- */

.wjportal-companyinfo-wrp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-weight: 500;
    width: 100%;
    padding-top: 10px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-company-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    border: 1px solid #ffb63b !important;
}

.wjportal-company-wrp {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
    overflow: hidden;
    position: relative;
}

.wjportal-companyinfo-middle-wrap {
    display: flex;
    flex-direction: column;
    width: 55%;
    margin-bottom: 8px;
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
}

div.wjportal-main-up-wrapper span.wjportal-companyinfo-data{
    font-size: var(--wpjp-body-font-size);
}
.wjportal-companydetail-wrapper.wjportal-view-page-featured-flag .wjportal-companyinfo {
    color: var(--wpjp-secondary-color);
}

.wjportal-companyinfo img {
    display: none;
}

.wjportal-company-data-wrp {
    width: 100%;
    display: flex;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 24px;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    background-color: white;
}

.wjportal-company-sec-title {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    font-size: var(--wpjp-sub-heading);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wpjp-primary-color);
}

.wjportal-companyinfo-link,
.wjportal-companyinfo-data {
    align-items: center;
    display: flex;
    gap: 10px;
}

a.wjportal-companyinfo-link {
    color: var(--wpjp-primary-color);
}

a.wjportal-companyinfo-link:hover {
    color: var(--wpjp-secondary-color);
}

/*
.wjportal-companyinfo-right-wrap{
 text-align: right;
    width: 25%;
}*/
/* --- Base Button Style --- */
.wjportal-show-contact-det-btn,
.wjportal-main-up-wrapper input#jsre_featured_button {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    gap: 10px;
    /* Space between icon and text */

    /* Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Hover Effect --- */
.wjportal-show-contact-det-btn:hover,
.wjportal-main-up-wrapper input#jsre_featured_button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}


/* --- Icon Implementation --- */
.wjportal-show-contact-det-btn::before,
.wjportal-main-up-wrapper input#jsre_featured_button::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Icon size */
    height: 20px;
    /* Icon size */

    /* This uses the button's text color to color the SVG icon */
    background-color: currentColor;

    /* The SVG icon shape is applied as a mask */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-companydetail-wrapper .wjportal-company-data,
.wjportal-company-data-wrp .wjportal-custom-field {
    float: left;
    width: calc(100% / 2 - 20px);
    padding: 15px;
    font-size: var(--wpjp-body-font-size);
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-custom-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    width: 100%;
}

.wjportal-company-data-wrp .wjportal-company-data {
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    width: 100%;
}

.wjportal-companyinfo-social-links-wrapper {
    font-size: 25px;
}

a.wjportal-companyinfo-social-link {
    display: inline-flex;
    align-items: center;
    padding: 15px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e9e9ee;
    justify-content: center;
    background-color: #fff;
    color: var(--wpjp-secondary-color);
}

a.wjportal-companyinfo-social-link:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-company-btn-wrp {
    display: flex;
    width: 100%;
    justify-content: center;
}

.wjportal-company-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-popup-wrp.wjportal-packages-popup .wjportal-pkg-item.wjportal-pkg-selected {
    border: 1px solid var(--wpjp-primary-color) !important;
}

/* ----------------------------------------- */
/* ==Login Form Design          == */
/* ----------------------------------------- */

/* --- This is the key part --- */
/* We style each <p> tag as a form row */
.wjportal-main-up-wrapper #loginform-custom p {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom p:last-child {
    border-bottom: none;
}

/* Style the labels */
.wjportal-main-up-wrapper #loginform-custom label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-main-up-wrapper #loginform-custom p .login-remember {
    width: 100%;
    align-items: flex-start;
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Add the purple asterisk like in the image */
.wjportal-main-up-wrapper #loginform-custom .login-username label::after,
.wjportal-main-up-wrapper #loginform-custom .login-password label::after {
    content: ' *';
    color: #6742f5;
    font-weight: 600;
}

/* Style the input fields */
.wjportal-main-up-wrapper #loginform-custom .input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
    /* Light gray from image */
    font-size: var(--wpjp-body-font-size);
    box-sizing: border-box;
    /* Important for padding */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wjportal-main-up-wrapper #loginform-custom .input:focus {
    outline: none;
    border-color: #6742f5;
    box-shadow: 0 0 0 3px rgba(103, 66, 245, 0.1);
}

/* --- Handle the special rows --- */

/* "Keep me login" row */
.wjportal-main-up-wrapper #loginform-custom .login-remember {
    /* Override the grid to be a single column */
    grid-template-columns: 1fr;
    background-color: #fdfdfd;
    margin-bottom: 0;
    border-bottom: unset;
    margin-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember label {
    display: flex;
    align-items: center;
    font-size: var(--wpjp-body-font-size);
    font-weight: 400;
    color: var(--wpjp-body-font-color);
    cursor: pointer;
    margin-top: 0;
    padding-top: 0;
}

.wjportal-main-up-wrapper #loginform-custom .login-remember input {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
}

/* "Login" button row */
.wjportal-main-up-wrapper #loginform-custom .login-submit {
    /* Override grid to be single column */
    grid-template-columns: 1fr;
    padding: 1.5rem 2rem;
    border-bottom: unset;

}

a.wjportal-form-add-comp {
    border: 1px solid var(--wpjp-border-color);
    padding: 5px 20px;
    border-radius: 5px;
    background-color: var(--wpjp-background-color);
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-add-comp :hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

.wjportal-error-messages-wrp {
    width: 100%;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #6742f5;
    /* Modern purple/blue */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:hover {
    background-color: #5a38d1;
}

.wjportal-main-up-wrapper #loginform-custom #wp-submit:active {
    transform: scale(0.99);
}

/* "Lost your password?" link */
#loginform-custom .wjportal-form-lost-password {
    display: block;
    /* Make it a block element */
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    text-decoration: none;
    border-bottom: none;
    /* Remove duplicate border */
    transition: color 0.2s ease;
}

#loginform-custom .wjportal-form-lost-password:hover {
    text-decoration: underline;
    color: #5a38d1;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #loginform-custom p {
        /* Stack label and input on top of each other */
        grid-template-columns: 1fr;
        gap: 0.75rem;
        /* Smaller gap */
        padding: 1.25rem 1.5rem;
    }

    .wjportal-main-up-wrapper #loginform-custom label {
        /* Ensure label isn't centered */
        text-align: left;
    }
}





/* ----------------------------------------- */
/* == Form Design          == */
/* ----------------------------------------- */
div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section img.wjportal-resume-section-delete {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 99999;
    display: none;
    background: #fff;
    opacity: 0.8;
}

.jsundo.wjportal-resume-section-undo img {
    vertical-align: middle;
}

div.wjportal-form-wrp div.wjportal-resume-section-wrp div.wjportal-resume-section div.wjportal-resume-section-undo img.wjportal-resume-section-undo-image {
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

.section_wrapper.form.wjportal-resume-section.jssection_wrapper.jssection_skills_0 .wjportal-form-row {
    border-bottom: 0;
}

/* --- Form Row Layout (Grid-based) --- */
.wjportal-form-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
    width: 100%;
}

.wjportal-form-title {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-title font {
    color: var(--wpjp-primary-color);
    margin-left: 4px;
    font-weight: bold;
}

/* --- Unified Input Styling --- */
.wjportal-main-up-wrapper .wjportal-form-input-field,
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-textarea-field,
.wpjobportal-input-list-wpjobportal .wjportal-main-up-wrapper .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 55px;
}

/* Everything above is one control height, which is right for a field that
   holds one line and wrong for the one that does not. */
.wjportal-main-up-wrapper .wjportal-form-textarea-field {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    border: 1px solid var(--wpjp-border-color) !important;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 55px !important;
    display: flex;
    align-items: center;
    border: 1px solid;
    flex-wrap: wrap;
    padding: 10px;
}

.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    width: fit-content;
}

.wjportal-form-value .chosen-container-multi .chosen-choices input {
    height: 25px !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices li.search-field input[type=text] {
    font-family: inherit !important;
    color: var(--wpjp-body-font-color) !important;
}

/* Focus State for all inputs */
.wjportal-form-input-field:focus,
.wjportal-form-select-field:focus,
.wjportal-form-textarea-field:focus,
.wjportal-main-up-wrapper .chosen-container-multi .chosen-choices:focus,
.wpjobportal-input-list-wpjobportal:focus-within {
    outline: none;
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-form-value .chosen-container .chosen-results li,
.wjportal-form-value .chosen-container-multi .chosen-choices li.search-choice {
    line-height: inherit !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result {
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color) !important;
}

.wjportal-main-up-wrapper .wjportal-form-value .chosen-container .chosen-results li.active-result:hover {
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-form-value .chosen-container .chosen-results li.highlighted {
    color: #fff !important;
}

.wjportal-form-value .chosen-container-multi .chosen-drop .result-selected {
    font-size: var(--wpjp-body-font-size) !important;

}

/* Select field custom arrow */
.wjportal-main-up-wrapper .wjportal-form-select-field,
.wjportal-main-up-wrapper .wjportal-form-value .chosen-container-multi .chosen-choices {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23656575'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1.5em;
    padding-right: 40px;
}

.wjportal-form-inner-fields {
    margin: 10px 0;
}

.wjportal-main-up-wrapper .wjportal-form-inner-fields .anchor.map-link.wjportal-form-map-link {
    margin-top: 10px;
}

/* --- Specific Field Group Styling --- */
.wjportal-form-5-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* .wjportal-form-inner-fields {
     margin-top: 20px;
} */
.wjportal-main-up-wrapper .wjportal-form-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
}

/* Rich Text Editor & Map */
.wjportal-main-up-wrapper #wp-description-wrap,
.wjportal-main-up-wrapper .wjportal-form-map {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#wp-description-wrap:focus-within {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Custom Radio Buttons --- */
.wjportal-form-email-field-wrp {
    padding: 0 26px 30px 10px;
}

.wpjobportal-form-radio-field input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.wpjobportal-form-radio-field label {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-form-radio-field label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.wpjobportal-form-radio-field label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--wpjp-primary-color);
    transition: transform 0.2s ease;
    margin-left: 10px;
}

.wjportal-main-up-wrapper label#forselected_payment_method {
    background: #fff;
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::before {
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-form-radio-field input[type="radio"]:checked+label::after {
    transform: translateY(-50%) scale(1);
}

.wjportal-form-email-field-txt {
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    padding-left: 5px;
    padding-top: 10px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.resume_submits.cancel.wjportal-form-wrp.wjportal-resume-form.wjportal-form-btn.wjportal-form-cancel-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #ffffff) !important;
}

.wpjobportal-terms-and-conditions-wrap,
.wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    border-radius: 8px !important;
    height: 55px !important;
    color: var(--wpjp-body-font-color) !important;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--background-color);
}

.wpjp-resume-section-button .wpjobportal-terms-and-conditions-wrap .js-col-md-12.js-form-value {
    margin-bottom: 0px;

    height: unset;
    color: var(--wpjp-body-font-color) !important;
    border: 0px;
    padding: 0px;
    padding-left: 0;
}

/* --- Info/Link Icon Styling --- */
.wpjobportal-terms-and-conditions-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.wpjobportal-terms-and-conditions-wrap a:hover {
    background-color: var(--wpjp-primary-color);
    color: white;
    border-color: var(--wpjp-primary-color);
    transform: scale(1.1);
}

/* --- Hide the default checkbox and the old image --- */
.wpjobportal-terms-and-conditions-wrap img {
    display: none;
}

/* The "i" info icon */
.wpjobportal-terms-and-conditions-wrap a::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Inherits color from parent 'a' tag */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wjportal-form-wrp.wjportal-job-alert-form .wjportal-form-row.wjportal-form-captcha {
    border-bottom: none;
    margin-bottom: 0;
}

span.wpjobportal-form-chkbox-field label {
    margin: 0;
}

.wjportal-main-up-wrapper span.wpjobportal-form-chkbox-field {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

.wjportal-main-up-wrapper div#input-text-joblink {
    width: 100%;
    display: none;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field {
    border: unset;
    width: unset;
    padding-left: 0;
}

.wpjobportal-terms-and-conditions-wrap .wpjobportal-form-chkbox-field label {
    margin-bottom: unset;
}

.checkbox-field.wpjp-form-value.wjportal-searchable-wrp span.wpjobportal-form-chkbox-field {
    padding-top: 5px !important;
    padding: 0px;
    border: 0px;
}

/* --- Save Button --- */
.wjportal-form-btn-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding-top: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    border-top: 1px solid var(--wpjp-secondary-color);

}

.wjportal-main-up-wrapper .wjportal-form-btn,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-primary-color);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    /* Centred without help: the rule that centred it used :has(), which Firefox before 121 ignores. */
    justify-content: center;
    gap: 8px;
    text-transform: none;
    line-height: inherit;
}

.wjportal-main-up-wrapper .wjportal-form-btn:hover,
.wjportal-main-up-wrapper .button.wjportal-form-btn.wjportal-save-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-secondary-color);
    color: #fff;
    text-decoration: none;
}

/* --- Input Button Styling with Background Icon --- */

/*.wjportal-form-wrp.wjportal-search-job-form .wjportal-form-btn.wjportal-save-btn {
   padding-left: 40px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center; 
    background-size: 18px 18px; 
}*/

/* --- Base Container for the Error State --- */
.wjportal-form-value.has-error {
    position: relative;

}

/* --- Styling the Input Field in an Error State --- */
.has-error .wjportal-form-input-field.error {
    /* Use the CSS variable for the border instead of inline styles */
    border-color: var(--error-color);

    /* Make space on the right for the icon */
    padding-right: 40px;
}

/* --- Styling the Focus State for the Error Field --- */
/* This ensures the red border and a red shadow appear when the user clicks to fix the error */
.has-error .wjportal-form-input-field.error:focus {
    outline: none;
    border-color: var(--error-color);
    box-shadow: var(--error-focus-shadow);
}

/* --- Adding the Icon INSIDE the Input Field --- */
/* This uses a pseudo-element on the container to place an icon */
.wjportal-main-up-wrapper .has-error::after {
    content: '';
    position: absolute;
    /* Position it vertically centered and on the right */
    top: 14px;
    /* Adjust this value to perfectly center the icon */
    right: 12px;
    width: 20px;
    height: 20px;

    /* Set the icon color */
    background-color: var(--error-color);

    /* Use a CSS mask for the icon shape (a modern warning symbol) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;

    /* This prevents the icon from blocking clicks on the input */
    pointer-events: none;
}

.wjportal-main-up-wrapper .wp-editor-wrap,
.wjportal-main-up-wrapper .wjportal-form-upload {
    width: 100%;
}

/* Card Styling (Kept as is) */
.wjportal-main-up-wrapper .card-container {
    max-width: 600px;
    width: 100%;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.wjportal-main-up-wrapper h3 {
    /*
     * A sub-heading takes the sub-heading size, not a number.
     *
     * This said 1.25rem, which is read against the root and so ignores the
     * size the site owner has set - and it is the last word on every h3 the
     * plugin renders, because this sheet is enqueued after the two control
     * panel ones. The employer panel happened to escape it, having an
     * id-scoped rule of its own; the job seeker panel did not, so the same
     * heading was 17px on one and 20px on the other.
     */
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    /* semibold */
    margin-bottom: 1rem;
    color: #1f2937;
    /* gray-800 */
}

/* Group Container (Kept as is) */
.wjportal-main-up-wrapper .wjportal-form-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* 3 units of gap */
}
div.wjportal-add-job-form .wjportal-form-value{
    overflow: hidden;
}

.wjportal-main-up-wrapper input[type="checkbox"] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--wpjp-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.wjportal-main-up-wrapper label#foruf_checkbox1 {
    font-weight: 500;
}

.wjportal-main-up-wrapper input[type=file] {
    padding: 14px 12px;
    border-radius: 0px;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: 500;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #171822;
    background: #fff;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #e5e5e5;
    display: block;
    width: 100%;
    border-radius: 8px;
}

.wjportal-main-up-wrapper div#js_cust_file_ext {
    color: var(--wpjp-body-font-color);
    width: 100%;
}


/* =============================================
        === Modern Alert Box Design                 ===
        =============================================
        */

.wjportal-packages-wrp {
    width: 100%;
}

/* --- Main Alert Container (#autohidealert) --- */
.wjportal-main-up-wrapper .alert.alert-danger {
    /* Layout & Spacing */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Space between icon and text */
    padding: 1rem 1.5rem;
    position: relative;
    /* For positioning the close button */

    /* Appearance */
    background-color: #fef2f2;
    /* Light red background */
    color: #991b1b;
    /* Dark red for text */
    border: 1px solid #fca5a5;
    /* Softer red for the border */
    border-left: 5px solid #e53e3e;
    /* Strong accent line */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Typography */
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;

    /* Animation */
    animation: slideInFade 0.5s ease-out forwards;
}

/* --- Hide the original, broken image --- */
.wjportal-main-up-wrapper .alert-danger img {
    display: none;
}

/* --- Add a new SVG icon using a pseudo-element --- */
.wjportal-main-up-wrapper .alert-danger::before {
    content: '';
    flex-shrink: 0;
    /* Prevents icon from shrinking */
    width: 24px;
    height: 24px;

    /* The icon color will match the text color */
    background-color: currentColor;

    /* SVG "warning/error" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Close Button Styling --- */
.wjportal-main-up-wrapper .alert-danger .close {
    /* Reset default button styles */
    background: none;
    border: none;
    padding: 0;

    /* Positioning */
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;

    /* Appearance & Interaction */
    color: #991b1b;
    /* Dark red for text */
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wjportal-main-up-wrapper .alert-danger .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Replace the '×' with a cleaner SVG icon --- */
.wjportal-main-up-wrapper .alert-danger .close span {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;

    /* SVG 'X' icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* --- Animation for the alert appearing --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Styling the Error Message Text --- */
.wjportal-main-up-wrapper .help-block.form-error {
    color: var(--error-color);
    font-size: 14px;
    font-weight: 500;
    margin-top: 0.5rem;

    /* Align the text with a prepended icon */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e53e3e;
    padding: 5px;
    border-radius: 5px;
    background: #fff6f6;
}

/* --- Main Uploader Dropzone --- */
.wjportal-main-up-wrapper .wjportal-form-upload {
    background-color: var(--background-color);
    border: 2px dashed var(--wpjp-border-color);
    border-radius: 12px;
    padding: 2rem;

    /* Center content using flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* Hover state for the dropzone */
.wjportal-main-up-wrapper .wjportal-form-upload:hover {
    border-color: var(--wpjp-primary-color);
    background-color: #fff;
}

.wjportal-main-up-wrapper a.file,
span.wjportal-form-upload-btn-wrp-txt {
    justify-items: center;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
    background: white;
    border-radius: 5px;
    color: black;
    font-size: 17px;
    margin: 5px;
    display: inline-block;
    width: 100%;
}

span.wpjobportal-form-chkbox-field label {
    font-size: var(--wpjp-body-font-size);
    margin-left: 10px;
    margin-right: 10px;
}

/* --- CSS Upload Icon --- */
/* This adds a cloud icon before the button container */
 .wjportal-form-upload .wjportal-form-upload-btn-wrp::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background-color: var(--wpjp-body-font-color);
    transition: background-color 0.2s ease-in-out;

    /* The SVG icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
}

.wjportal-form-upload:hover .wjportal-form-upload-btn-wrp::before {
    background-color: var(--wpjp-primary-color);
    width: 48px;
    height: 48px;
}

/* --- Custom "Upload Image" Button --- */
.wjportal-form-upload-btn {
    position: relative;
    /* Crucial for positioning the hidden file input */
    display: inline-block;
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    /* Hides the parts of the input that might stick out */
    transition: all 0.2s ease;
}

.wjportal-form-upload-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* The actual file input, hidden but functional */
.wjportal-form-upload-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Makes it invisible */
    cursor: pointer;
}

/* --- Help Text Styling --- */
.wjportal-form-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 0.5rem;
}

/* --- Image Preview Styling --- */
.wjportal-form-image-wrp {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--wpjp-card-shadow);
    border: 2px solid #fff;
}

.wjportal-form-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the area without distortion */
}

/* --- CSS-only Delete Icon (replaces broken img) --- */
#wjportal-form-delete-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(29, 35, 39, 0.7);
    /* Use secondary color with transparency */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
    /* Hides broken image alt text */

    /* The 'X' icon shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

#wjportal-form-delete-image:hover {
    background-color: var(--wpjp-primary-color);
    transform: scale(1.1) rotate(90deg);
}

.wjportal-main-up-wrapper div#jsresume_sectionid1,
.wjportal-main-up-wrapper div#jsresume_sectionid2,
.wjportal-main-up-wrapper div#jsresume_sectionid3,
.wjportal-main-up-wrapper div#jsresume_sectionid4,
.wjportal-main-up-wrapper div#jsresume_sectionid5,
.wjportal-main-up-wrapper div#jsresume_sectionid6,
.wjportal-main-up-wrapper div#jsresume_sectionid7,
.wjportal-main-up-wrapper div#jsresume_sectionid8,
.wjportal-main-up-wrapper div#jsresume_sectionid9,
.wjportal-main-up-wrapper div#jsresume_sectionid10,
.wjportal-job-sec-heading {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-border-color);
    margin-bottom: 40px;
    padding: 15px 10px 15px 5px;
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-main-up-wrapper .wjportal-form-title label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-resume-section-wrp .form-control {
    letter-spacing: 0;
    font-size: 15px;
    height: 55px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
    color: #171822;
}

.wjportal-main-up-wrapper .checkbox-field.wpjp-form-value.wjportal-searchable-wrp {
    padding-top: 12px;
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: var(--wpjp-field-radius, 8px) !important;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 55px !important;
}

/* --- Section Title --- */

.wjportal-resume-section-head {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    margin-bottom: 20px;
    background: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    padding: 10px;
    border-radius: 5px;
    padding-left: 2rem;
}

.wjportal-resume-section-undo {
    margin-left: auto;
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 15px;
    border-radius: 6px;
}

a.anchor.map-link.wjportal-form-map-link {
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
}

a.anchor.map-link.wjportal-form-map-link:hover {
    background-color: var(--wpjp-primary-color);
    color: var(--wpjp-hover-text, #fff) !important;

}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    padding: 10px 15px;
    border-radius: 6px;
    background-color: var(--wpjp-card-background) #ffffff;
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
    margin-bottom: 20px;
}

.wpjp-add-new-section-link.wjportal-resume-add-new-section-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

label.wjportal-input-box-switch {
    padding-top: 12px;
}

/* --- Form Field Grid Layout --- */
.wjportal-popup-field-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 1.25rem;
}

/* --- Input & Textarea Styling --- */
.wjportal-popup-field input[type="text"],
.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    height: 55px;
}

.wjportal-popup-field input[type="text"]::placeholder,
.wjportal-popup-field textarea::placeholder {
    color: #999;
}

div.wjportal-form-row div.wjportal-form-value input[type="text"]::placeholder {
    color: var(--wpjp-body-font-color) !important;
    font-size: var(--wpjp-body-font-size) !important;

}

.wjportal-popup-field input[type="text"]:focus,
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

.wjportal-popup-field input[disabled] {
    background-color: #f1f1f1;
    color: #888;
    cursor: not-allowed;
}

/* Make the message textarea span both columns */
.wjportal-popup-fullwidth {
    grid-column: 1 / -1;
    text-align: left;
}

.wjportal-popup-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Send Button --- */
.wjportal-visitor-msg-btn-wrp {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    width: 100%;
}

.wjportal-visitor-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;

}

.wjportal-visitor-msg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* --- Main Pagination Container --- */
.wjportal-pagination-wrp {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    /* Space between each pagination item */
    padding: 2rem 0;
}

/* --- Base Style for All Pagination Items (Links and Current) --- */
.wjportal-main-up-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    /* Create uniform, rounded squares */
    padding: 20px;
    border-radius: 12px;

    /* Effects */
    transition: all 0.2s ease-in-out;
}

/* --- Style for Clickable Page Numbers (not the current one) --- */
.wjportal-main-up-wrapper a.page-numbers {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-body-font-color);
    border: 1px solid var(--wpjp-border-color);
}

/* --- Hover Effect for Clickable Pages --- */
.wjportal-main-up-wrapper a.page-numbers:hover {

    border-color: var(--wpjp-secondary-color);
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* --- Style for the Current/Active Page --- */
.wjportal-main-up-wrapper .page-numbers.current {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--wpjp-card-shadow);
    cursor: default;
}

/* Add an Arrow Icon to the "Next" button */
.wjportal-main-up-wrapper .next.page-numbers::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
    background-color: currentColor;
    /* The icon color will match the text */

    /* The Arrow Shape */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Main Form Wrapper --- */
.wjportal-save-search-form-wrp {

    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--wpjp-card-shadow);
    border: 1px solid var(--wpjp-border-color);
    /*
     * Save Search sits in the column with the search form above it and the
     * results below, and those run the full width. Capping this one at 600px
     * and centring it left 300px of nothing down either side, so the card
     * read as a dialog that had drifted into the page. It is a row of the
     * page like the rest, and it is as wide as the rest.
     */
    margin: 2rem 0;
}

/* --- Form Layout --- */
/* Uses flexbox for a responsive, single-line layout */
.wjportal-save-search-form {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to stack on small screens */
    align-items: center;
    gap: 0.75rem;
    position: relative;
    /* Needed for the error icon positioning */
}

/* --- Form Label --- */
.wjportal-save-search-label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
    flex-shrink: 0;
    /* Prevents the label from shrinking */
}

/* --- Input Field --- */
.wjportal-save-search-input-field {
    flex-grow: 1;
    /* Allows the input to take up available space */
    width: auto;
    padding: 12px 16px;
    /*
     * The field beside the label, in the same type.
     *
     * A browser gives an input its own font rather than the page's, which is
     * why every other field in the plugin says font-family: inherit. This one
     * did not, so the box a job seeker types a search name into was set in the
     * system UI font while the label above it was in the theme's. The size
     * disagreed for the same reason: the label follows --wpjp-body-font-size
     * and this was pinned to 1rem, so on a site that sets a body size of
     * anything else the two no longer matched.
     */
    font-family: inherit;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wjportal-save-search-input-field:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 3px var(--wpjp-focus-shadow-color);
}

/* --- Error State Styling --- */
/* IMPORTANT: Remove the inline style="border-color: red;" from your HTML for this to work */
.has-error .wjportal-save-search-input-field.error {
    border-color: var(--error-color);
    padding-right: 40px;
    /* Make space for the icon */
}

.has-error .wjportal-save-search-input-field.error:focus {
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.25);
    /* Error focus glow */
}



/* --- Save Button --- */
.wjportal-save-search-btn {
    background-color: var(--wpjp-primary-color);
    border-color: 1px solid var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px
}

.wjportal-save-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: 1px solid var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #ffffff) !important;
}

.wjportal-coverletter-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

.wjportal-coverletter-list {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wjportal-coverletter-cnt-wrp {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    width: 100%;
    flex-wrap: wrap;
}

.wjportal-coverletter-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

span.wjportal-coverletter-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}

span.wjportal-coverletter-info-tit {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


.wjportal-coverletter-middle-wrp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 75%;
    margin-bottom: 8px;
}

.wjportal-coverletter-right-wrp {
    width: 25%;
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
}

.wjportal-coverletter-desc-wrap {
    font-size: var(--wpjp-body-font-size);
    font-weight: normal;
    color: var(--wpjp-body-font-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.wjportal-coverletter-list-btm-wrp {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

.wjportal-coverletterdetail-wrapper {
    background: var(--wpjp-card-background);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--wpjp-card-shadow);
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--wpjp-border-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 16px 20px;
}

.wjportal-coverletter-action-wrp {
    display: flex;
    font-size: var(--wpjp-body-font-size);
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wjportal-coverletter-sec-title {
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

span.wjportal-coverletter-data-tit {
    display: none;
}

.wjportal-coverletter-data {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

}

.wjportal-coverletterdetail-wrapper .wjportal-coverletter-data {
    padding: 10px 0;
}

.wjportal-coverletter-data-wrp {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

a.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;

}

a.wjportal-coverletter-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

/* 1. Primary "View" Button */
.wjportal-coverletter-act-btn-view {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- The CSS Clock Icon --- */
.wjportal-coverletter-info-tit::before {
    content: '';
    display: block;
    width: 1.1em;
    /* Icon size will scale with the font size */
    height: 1.1em;

    /* The icon will automatically match the text color */
    background-color: currentColor;

    /* The clock shape is created using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Main Grid Container --- */
.wjportal-by-type-wrp {
    display: grid;
    /* Creates a responsive grid that fits as many 250px columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

/* These wrappers are not needed for the grid, so we reset them */
.wjportal-type-row-wrapper,
.wjportal-type-wrapper {
    width: 100% !important;
    /* Override inline styles */

}

.wjportal-type-wrapper {
    margin-bottom: 15px;
}

/* --- The Link Card Styling --- */
.wjportal-type-wrapper a {
    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    /* Appearance & Glassmorphism */
    background: linear-gradient(135deg, var(--wpjp-card-background));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Important for the glow effect */

    /* Effects */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Interactive Glow Effect on Hover --- */
.wjportal-type-wrapper a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The glow is a radial gradient that follows the mouse */
    transition: opacity 0.3s ease;
}

.wjportal-type-wrapper a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

.wjportal-type-wrapper a:hover::before {
    opacity: 1;
}

/* --- Title and Number Styling --- */
.wjportal-type-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    z-index: 1;
    /* Keep text above the glow */
}

.wjportal-type-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/*.wjportal-type-wrapper:hover{
    border:1px solid var(--wpjp-primary-color);
}*/

/* --- Arrow Icon on Hover --- */
.wjportal-type-wrapper a::after {
    content: '→';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    font-size: 3rem;
    color: var(--wpjp-primary-color);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.wjportal-type-wrapper a:hover .wjportal-type-num {
    opacity: 0;
    transform: scale(0.8);
}

.wjportal-type-wrapper a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/*jave need to add */
/*<script>
document.querySelectorAll('.wjportal-type-wrapper a').forEach(card => {
    card.addEventListener('mousemove', e => {
        const rect = card.getBoundingClientRect();
        card.style.setProperty('--x', e.clientX - rect.left + 'px');
        card.style.setProperty('--y', e.clientY - rect.top + 'px');
    });
});
</script>*/

/*--------------jobs by category-------------------------
---------------------------------------
-------------------------
---------------*/

div#wpjobportal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    font-size: var(--wpjp-body-font-size);
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--wpjp-card-background), #fdfdfd);
    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp:hover {
    border: 1px solid var(--wpjp-primary-color);
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    padding: 10px;

}

div#wpjobportal-wrapper .wjportal-by-category-wrp {
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;

    border-radius: 8px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a:hover::before {
    opacity: 1;
}

div#wpjobportal-wrapper .wjportal-by-category-wrp a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(232, 48, 48, 0.15), transparent 40%);*/
    opacity: 0;
    transition: opacity 0.3s ease;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    /* Add some padding to the main container */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-job-by-catg-popup .wjportal-by-sub-catagory {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-category-wrp {
    width: 47% !important;
    padding: 8px;
    /* Adds spacing between the items */
    box-sizing: border-box;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-by-sub-catagory .wjportal-by-category-wrp {
    margin: 10px;
}

div#wpjobportal-wrapper .wjportal-popup-wrp.wjportal-resume-by-catg-popup .wjportal-popup-navigation {
    margin-top: 20px;
}

div#wpjobportal-wrapper .wjportal-by-sub-catagory {
    margin-top: 15px;
    position: absolute;
    top: 84%;
    left: 0px;
    right: 0px;
    padding: 10px;
    height: auto;
    z-index: 9999;
    display: block;
    width: auto;
    box-shadow: 0 0 8px #c9c9c9;
    /*background-color: var(--background-color);*/
    background-color: #fff;
    z-index: 2147483647;
    border-radius: 8px;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn {
    background-color: var(--wpjp-secondary-color);
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    justify-content: center;
    width: 100%;
}

div#wpjobportal-wrapper a.wjportal-by-category-item-btn:hover {
    background-color: var(--wpjp-primary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

div#wpjobportal-wrapper span.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 700;
    color: var(--wpjp-primary-color);
    background-color: var(--background-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-left: auto;
}

div#wpjobportal-wrapper .wjportal-by-category-item {
    display: flex;


}

div#wpjobportal-wrapper span.wjportal-by-category-item-title {
    display: flex;
    align-items: center;
    color: var(--wpjp-secondary-color);
    font-weight: 500;

}

.wjportal-error-msg-image-wrp {
    text-align: center;
}
.wjportal-error-msg-image-wrp img{
    margin: auto;
    max-width: 100%;
}
.wjportal-error-messages-wrp {
    text-align: center;
}

div#wpjobportal-wrapper .wjportal-error-messages-wrp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

div#wpjobportal-wrapper .wjportal-error-msg-image-wrp {
    width: 100%;
    justify-items: center;
    display: grid;
}


/* Card Container */
.wjportal-popup-contentarea {
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
}

/* Header */
.wjportal-popup-contentarea h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    /* Dark Gray 800 */
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    /* Light Gray 200 */
}

/* Responsive Flexbox Layout (REPLACES GRID) */
.wjportal-by-sub-catagory {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto the next line */
    gap: 1rem;
    /* Spacing between items */
}

/* Category Wrapper (Default to full width on mobile) */
.wjportal-by-category-wrp {
    width: 100%;
}

/* Tablet/Desktop breakpoint */
@media (min-width: 640px) {
    .wjportal-popup-contentarea {
        /*padding: 2rem;*/
    }

    /* Calculate width for two columns, accounting for the 1rem gap */
    .wjportal-by-category-wrp {
        width: calc(50% - 0.5rem);
    }
}

/* Category Item Link Styling */
.wjportal-by-category-wrp a {
    display: block;
    text-decoration: none;
    background-color: #f3f4f6;
    /* Light Gray 100 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    height: 100%;
    /* Ensures card fills wrapper height for consistency */
}

/* Category Item Hover Effect */
.wjportal-by-category-wrp a:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);

}

/* Category Item Content Layout */
.wjportal-by-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Title and Number Styling */
.wjportal-by-category-item-title {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #374151;
    /* Dark Gray 700 */
    transition: color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-title {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */
}

.wjportal-by-category-item-number {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    /* Gray 500 */
    background-color: #e5e7eb;
    /* Light Gray 200 */
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.wjportal-by-category-wrp a:hover .wjportal-by-category-item-number {}

/* Navigation Footer */
.wjportal-popup-navigation {
    display: flex;
    border-top: 1px solid #e5e7eb;
    /* Light Gray 200 */
    padding-top: 1rem;
    margin-top: 1.5rem;
    list-style: none;
    padding-left: 0;
}

.wjportal-popup-navigation li {
    cursor: pointer;
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: #6b7280;
    padding: 10px;
    background-color: #f3f4f6;
    border-radius: 4px;
    transition: all 0.15s;
}

.wjportal-popup-navigation li:hover {
    color: var(--wpjp-primary-color);
    /* Primary Color (Emerald) */

}


/*--------------Resume save search -------------------------
---------------------------------------
-------------------------
---------------*/
/* --- New Card Design --- */

/* Main card container */
.wjportal-save-search-list {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--wpjp-card-background);

    box-shadow: var(--wpjp-card-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 3rem;
    overflow: hidden;
    /* Ensures child elements respect the border-radius */
    border: 1px solid var(--wpjp-border-color);
}

.wjportal-save-search-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Wrapper for the main content (title and date) */
.wjportal-save-search-content {
    padding: 24px;
}

.wjportal-save-search-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding: 24px 10px 0px 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wjportal-save-search-created {
    margin-bottom: 15px;
}

.wjportal-save-search-created-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    padding: 10px 10px 0px 24px;
}

.wjportal-save-search-created-text::before {
    content: '';
    display: block;
    width: 1.1em;
    height: 1.1em;

    /* The icon's color will match the text color above */
    background-color: currentColor;

    /* -- Calendar Icon SVG Mask -- */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");

    /* Mask properties */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Footer area for action buttons */
.wjportal-save-search-action-wrp {
    display: flex;
    justify-content: flex-end;
    /* Aligns buttons to the right */
    gap: 12px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
}

/* Base button styles */
.wjportal-save-search-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff !important;
    border: 1px solid var(--wpjp-border-color);
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

.wjportal-save-search-act-btn-remove {
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
}

a.wjportal-save-search-act-btn-remove.wjportal-list-act-btn-delete:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

a.wjportal-save-search-act-btn.wjportal-list-act-btn-view:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;

}

.wjportal-save-search-act-btn,
.wjportal-save-search-act-btn-remove {
    color: var(--wpjp-secondary-color);
    display: inline-flex;
    /* Aligns icon and text horizontally */
    align-items: center;
    /* Aligns them vertically in the middle */
    gap: 0.5em;
    /* Creates a small space between the icon and text */
    text-decoration: none;

}


/*===========================================================
--------------  Messages  ----------
=============================================================*/

/* --- Single Column (100% Width) Message List Design --- */

/* Main container for the cards */
.wjportal-messages-list-wrapper {
    display: flex;
    /* Changed from grid to flex */
    flex-direction: column;
    /* Stacks items vertically */
    gap: 20px;
    /* Space between cards */
}

/* Individual message card styling */
.wjportal-messages-list {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    border: 1px solid var(--wpjp-border-color);
    box-shadow: var(--wpjp-card-shadow);

    display: flex;
    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* No width property needed; as a flex item, it will default to 100% width */
}

/* A subtle lift effect on hover to provide feedback */
.wjportal-messages-list:hover {
    transform: translateY(-5px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/* Top section of the card (Name) */
.wjportal-msg-list-top {
    padding-bottom: 15px;
    padding: 20PX;

}

.wjportal-msg-name {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

/* Bottom section (Info and Action Button) */
.wjportal-msg-list-btm {
    gap: 15px;
    flex-wrap: wrap;
    display: flex;
    border-radius: 0 0 10px 10px;
    align-items: center;
    width: 100%;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding: 16px 10px;
    justify-content: end;
}

/* Styling for the "Resume: Sample Resume 3" text */
.wjportal-msg-info-data {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-msg-info-data-tit {
    color: var(--wpjp-secondary-color);
}

.wjportal-msg-info-data-val a {
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wjportal-msg-info-data-val a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* The main action button */
.wjportal-msg-act-btn {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}


/* Darken button slightly on hover */
.wjportal-msg-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

.wjportal-msg-act-btn {
    /* Button Layout & Spacing */
    display: inline-flex;
    /* Aligns icon and text nicely */
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    padding: 10px 20px;

    /* Button Appearance */
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Smooth Transition for Hover */
    transition: all 0.3s ease;
}

/* --- Trendy Message Display Design --- */

/* The main container for the message content */
.wjportal-send-message {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Consistent soft corners */
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px 30px;
    /* Generous padding for a clean look */
    margin: 25px 0;
    /* Adds space above and below the component */
}

/* The subject line of the message */
.wjportal-send-msg-subject {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    /* Make the subject stand out */
    color: var(--wpjp-secondary-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
    /* A subtle line to cleanly separate the subject from the body */
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* The main body/text of the message */
.wjportal-send-msg-text {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* It's good practice to remove default margins from paragraphs within components */
.wjportal-send-msg-text p {
    margin: 0;
    font-size: var(--wpjp-body-font-size) !important;
    color: var(--wpjp-body-font-color);
    line-height: 1.7;
    /* Increased line height is crucial for readable paragraphs */
}

/* --- Trendy Message History / Chat Design --- */

/* Main wrapper for the entire message history component */
.wjportal-message-history-wrp {
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Creates vertical space between title and messages */
}

/* The main title "Message History" */
.wjportal-msg-history-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

/* A single message row (avatar + bubble) */
.wjportal-msg-history {
    display: flex;
    align-items: flex-end;
    /* Aligns avatar with the bottom of the bubble */
    gap: 15px;
    /* Space between avatar and message bubble */
    max-width: 85%;
    /* Prevents a message from taking the full screen width */
}

/* --- Sent Message Styling (Aligned Right) --- */
.wjportal-msg-history.mesend {
    align-self: flex-end;
    /* Aligns the entire row to the right */
    flex-direction: row-reverse;
    /* Puts the avatar on the right */
}

.mesend .wjportal-msg-history-cnt {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;
}

/* Change color of meta-data for better contrast on the dark background */
.mesend .wjportal-msg-history-name,
.mesend .wjportal-msg-history-created {
    color: var(--wpjp-secondary-color);
    opacity: 0.9;
}

/* --- Received Message Styling (Example) ---
You can create another class like "mereceived" for messages from the other person.
This would align them to the left with a different color.

.wjportal-msg-history.mereceived {
    align-self: flex-start;
}
.mereceived .wjportal-msg-history-cnt {
    background-color: var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    border-radius: 18px 18px 18px 5px;
}
*/

/* The user's avatar image */
.wjportal-msg-history-image img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--wpjp-border-color);

}

/* The message bubble content */
.wjportal-msg-history-cnt {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Space between the header and the text */
}

/* Top part of the bubble (name and date) */
.wjportal-msg-history-top {
    display: flex;
    align-items: center;
    /* Vertically aligns all items */
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 15px;
    /* Adds space between items */
    /* REMOVED: justify-content: space-between; */
}

/* The sender's name */
.wjportal-msg-history-name {
    font-weight: 600;
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-body-font-color);
}

/* The creation date */
.wjportal-msg-history-created {
    font-size: 13px;
    color: #6c757d;
    /* Muted color for secondary info */
    white-space: nowrap;
    margin-left: auto;
    /* ADDED: This is the magic property! */
}

/* --- Status Badge Styling --- */

/* Base style for all status badges */
.wjportal-msg-history-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style for the "rejected" status */
.wjportal-msg-history-status.rejected {
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
}

/* Style for a potential "approved" status */
.wjportal-msg-history-status.approved {
    background-color: #28a745;
    color: #ffffff;
}

/* Style for a potential "pending" status */
.wjportal-msg-history-status.pending {
    background-color: #eeba1f;
    color: #fff;
}

/* The actual message text */
.wjportal-msg-history-text {
    font-size: var(--wpjp-body-font-size);
    line-height: 1.6;
    word-break: break-word;
    /* Ensures long text doesn't break the layout */
    color: var(--wpjp-body-font-color);
}

.wjportal-msg-history-cnt.message-other,
.wjportal-msg-history-cnt.message-admin {
    background-color: var(--background-color);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    /* Custom border-radius for a chat bubble effect */
    border-radius: 18px 18px 5px 18px;

}

.wjportal-msg-history-text p {
    margin: 0;
    background: transparent;
}


.wjportal-msg-history-image {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
}

/*===========================================================
--------------  Special Cases  ----------
=============================================================*/

.wpjobportal-list-item-status-rejected {
    border-left: 5px solid #bb0906 !important;
}

.wpjobportal-list-item-status-pending {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-status-approved {
    border-left: 5px solid #008000 !important;
}

.wpjobportal-list-item-status-no-payment {
    border-left: 5px solid #ffa500 !important;
}

.wpjobportal-list-item-is-featured {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
}

.wjportal-resume-list.wpjobportal-list-item-is-featured .wjportal-resume-list-top-wrp {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, #fcfaf2 100%);
    position: relative;
    overflow: hidden;
}

.wjportal-resume-list.wpjobportal-list-item-status-no-payment .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-rejected .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #bb0906;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-approved .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #008000;
    opacity: 0.3;
}

.wjportal-resume-list.wpjobportal-list-item-status-pending .wjportal-progress-bar-container .wjportal-progress-bar-fill {
    background-color: #ffa500;
    opacity: 0.3;
}

/*===========================================================
--------------  Credits Pack ----------
=============================================================*/
.wjportal-packages-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: auto;
    /*background: var(--background-color);*/
    padding: 50px;
    border-radius: 8px;
}

/* 1. Main Wrapper Styling (ID updated to stripe-wrap) */
.wjportal-main-up-wrapper #stripe-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringstripe {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Form and Button Styling */
.wjportal-main-up-wrapper #stripe-form {
    display: block;
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.wjportal-main-up-wrapper div#stripe-wrap form#stripe-form button.stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 17px !important;
    margin-top: 15px;
    background-color: #0070ba;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-main-up-wrapper .stripe-button-el span {
    height: unset;
    font-size: 17px !important;
}

.wjportal-main-up-wrapper .stripe-button-el span {
    background-image: none !important;
    background-color: unset !important;
    box-shadow: unset !important;
}

.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover,
.wjportal-main-up-wrapper .stripe-button-el span:hover {
    background: #0f67d6 !important;
}

.wjportal-main-up-wrapper .stripe-button-el {
    width: 100%;
}

/* Targeting the Stripe generated button element */
.wjportal-main-up-wrapper .stripe-button-el {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    background-color: #5469D4;
    /* Stripe purple/blue color */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1;
    /* Fix vertical alignment */
}

.wjportal-main-up-wrapper .stripe-button-el:hover {
    background-color: #4355a6;
    /* Darker shade on hover */
}

/* 5. Mobile Responsiveness */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #stripe-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-main-up-wrapper .stripe-button-el {
        font-size: 16px;
        padding: 10px 0;
    }
}

/* 1. Main Wrapper Styling */
.wjportal-main-up-wrapper #paypal-wrap {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Reset the inline style from the provided HTML */
    margin: 0;
}

/* 2. Content Area and Checkbox */
.wjportal-payemt-method-desc-data {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.wjportal-payemt-method-desc-data label {
    display: flex;
    /* Use flex for better alignment */
    align-items: center;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    cursor: pointer;
}

.wjportal-main-up-wrapper #recurringpaypal {
    /* Basic styling for the checkbox */
    margin-right: 10px;
    transform: scale(1.1);
}

/* 3. Description Text Styling */
.wjportal-payemt-method-desc-txt {
    display: block;
    /* Ensures the span takes up full width */
    font-size: 13px;
    color: #777777;
    line-height: 1.5;
    padding-left: 2px;
    /* Slight indent to align with text */
}

/* 4. Button Styling */
.wjportal-payemt-method-desc-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    margin-top: 15px;
    background-color: #0070ba;
    /* PayPal Blue */
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wjportal-payemt-method-desc-btn:hover {
    background-color: #005ea6;
    /* Darker blue on hover */
    color: #fff;
}

/* 5. Mobile Responsiveness (optional, but good practice) */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper #paypal-wrap {
        padding: 15px;
        margin: 10px;
        border-radius: 8px;
    }

    .wjportal-payemt-method-desc-btn {
        font-size: 16px;
        padding: 10px 0;
    }
}

/*
 * 3. THE PACKAGE CARD ITSELF
*/
.wjportal-pkg-list-item {
    background-color: var(--wpjp-card-background);
    border: 1px solid var(--wpjp-border-color);
    border-radius: 16px;
    box-shadow: var(--wpjp-card-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Important for the badge */
    width: 100%;
    border-top: 5px solid;

}

.wjportal-pkg-list-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--wpjp-card-hover-shadow);
}

/*
 * 3.1. FEATURED CARD "MOST POPULAR" BADGE
*/
.wjportal-pkg-list-item.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--primary-gradient);
    color: white;
    padding: 8px 40px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/*
 * 4. CARD HEADER (Top Section)
*/
.wjportal-pkg-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: var(--background-color);
    border-bottom: 3px dotted var(--wpjp-primary-color);
}

.wjportal-pkg-list-item-title-txt {
    font-size: var(--wpjp-sub-heading);
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    margin-bottom: 5px;
}

span.wjportal-pkg-list-item-disc {
    border: 1px solid;
    padding: 5px 30px;
    border-radius: 6px;
    background: black;
    color: #fff;
    font-weight: 500;
}

.wjportal-pkg-list-item-crt-date {
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    margin-top: 10px;
}

.wjportal-pkg-list-item-price-txt {
    font-size: 32px;
    font-weight: 700;
    color: var(--wpjp-primary-color);
}

span.wjportal-pkg-list-item-price-discount {
    text-decoration: line-through;
    padding-right: 10px;
    font-size: 17px;
    color: #808080;
}

.wjportal-pkg-list-item-price-txt span {
    font-size: 16px;
    font-weight: 500;
    color: var(--wpjp-secondary-color);
}

/*
 * 5. CARD BODY (Middle Section) with ICONS
*/
.wjportal-pkg-list-item-mid {
    padding: 20px 30px;
    flex-grow: 1;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Creates two equal-width columns */
    gap: 20px;
    /* Space between grid items */
    background-color: var(--wpjp-card-background);
    border-radius: 10px;
    margin: 20px auto;
}

.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    gap: 15px;
    padding: 30px;
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-list .wjportal-pkg-list-item-act-btn {
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    width: 100%;
    border: 1px solid var(--wpjp-primary-color);
    background: var(--wpjp-primary-color);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}


.wjportal-packages-list .wjportal-pkg-list-item-act-btn:hover {
    background-color: var(--wpjp-secondary-color);
    border-color: var(--wpjp-secondary-color);
    color: white;
}

.wjportal-pkg-list-item-exp-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    text-align: center;
    border: 1px solid #a66e2d;
    background: antiquewhite;
    color: #a66e2d;
    padding: 5px;
    border-radius: 5px;
    width: 30%;
    margin: auto;
}

/* 2. GRID ITEM STYLING 
   Each row is now a self-contained item within the grid.
*/
.wjportal-pkg-list-item-row {
    display: flex;
    align-items: center;
    /* Vertically aligns the icon and text */
    padding: 12px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

.wjportal-pkg-list-item-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--wpjp-card-shadow);
    border-color: var(--wpjp-primary-color);
}


/* 3. ICON STYLING (using ::before)
   This adds an icon to the start of each row without changing the HTML.
*/
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    width: 18px;
    /* Icon size */
    height: 18px;
    margin-right: 12px;
    /* Space between icon and text */
    background-color: var(--wpjp-primary-color);
    /* Icon color */

    /* Generic checkmark icon using a CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 4. TEXT STYLING */
.wjportal-pkg-list-item-row-tit {
    color: var(--wpjp-body-font-color);
    font-size: var(--wpjp-body-font-size);
    white-space: nowrap;
    /* Prevents long titles from wrapping awkwardly */
}

.wjportal-pkg-list-item-row-val {
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    font-size: var(--wpjp-body-font-size);
    margin-left: auto;
    /* Pushes the value to the far right */
    padding-left: 10px;
    /* Ensures space between title and value */
}

/** 6. CARD FOOTER (Bottom Section)*/
.wjportal-pkg-list-item-btm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background-color: var(--background-color);
    border-top: 1px solid var(--wpjp-border-color);
}

.wjportal-pkg-list-item-action-wrp {
    display: flex;
    align-items: center;
    width: 100%;
}



/*==========================================================================
===========Login from =========================
==================================*/

.wjportal-main-up-wrapper p.login-username,
.wjportal-main-up-wrapper p.login-password {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 30px;
    align-items: flex-start;
    border-bottom: 2px dashed var(--wpjp-border-color);
    padding-bottom: 20px;
}

.wjportal-main-up-wrapper .login-username label,
.wjportal-main-up-wrapper p.login-password label {
    font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-sec-heading {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--wpjp-secondary-color);
}

a.wjportal-form-lost-password {
    display: block;
    text-align: center;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: color 0.3s;

}

.wjportal-form-reg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    background-color: var(--wpjp-card-background);
    color: var(--wpjp-secondary-color);
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    order: 2;
    margin-top: 15px;
    text-align: center;
}

/* Create the icon using a ::before pseudo-element */
.wjportal-form-reg-btn::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "person add" icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-form-reg-btn {
    justify-content: center;
}

.wjportal-main-up-wrapper input#rememberme {
    font-size: var(--wpjp-body-font-size);
}

.wjportal-form-reg-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: var(--wpjp-hover-text, #fff) !important;
}

.wjportal-main-up-wrapper form#loginform-custom p.login-submit {
    border-top: 1px solid black;
    padding-top: 20px;
    margin-bottom: 0;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 28px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.wjportal-main-up-wrapper form#loginform-custom input#wp-submit:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*==========================================================================
===========My Invoices =========================
==================================*/

/* --- Main Table Wrapper & Layout --- */
.wjportal-table-wrp {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--wpjp-card-background);
    border-radius: 12px;
    box-shadow: var(--wpjp-card-shadow);
    overflow: hidden;
    table-layout: fixed;
    /* ADD THIS LINE: Ensures the table respects the column widths */
}

/* --- Column Widths --- */
/* This section sets the width for each specific column */
#wjportal-table th:nth-child(1),
#wjportal-table td:nth-child(1) {
    width: 40%;
    /* Description column */
}

#wjportal-table th:nth-child(2),
#wjportal-table td:nth-child(2) {
    width: 15%;
    /* Amount column */
}

#wjportal-table th:nth-child(3),
#wjportal-table td:nth-child(3) {
    width: 10%;
    /* Payment Method column */
}

#wjportal-table th:nth-child(4),
#wjportal-table td:nth-child(4) {
    width: 10%;
    /* Created column */
}

#wjportal-table th:nth-child(5),
#wjportal-table td:nth-child(5) {
    width: 15%;
    /* Created column */
}

#wjportal-table th:nth-child(6),
#wjportal-table td:nth-child(6) {
    width: 10%;
    /* Created column */
}

/* --- Table Header Styling --- */
#wjportal-table thead th {
    background-color: var(--background-color);
    padding: 1rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--wpjp-border-color);
}

/* --- Table Body & Row Styling --- */
#wjportal-table tbody tr {
    border-bottom: 1px solid var(--wpjp-border-color);
    transition: background-color 0.2s ease;
}

#wjportal-table tbody tr:last-of-type {
    border-bottom: none;
}

#wjportal-table tbody tr:hover {
    background-color: var(--background-color);
}

/* --- Table Cell Styling --- */
#wjportal-table td {
    padding: 1rem 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    vertical-align: middle;
    /* Helps prevent long text from breaking the layout */

}

.wjportal-my-invoices-list-wrapper table td>a {
    padding: 1rem 0;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-primary-color);
    vertical-align: middle;
    box-shadow: unset;
}

.wjportal-my-invoices-list-wrapper table td>a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}


/* --- Special Badge for Payment Method --- */
.wjportal-my-invoices-list-payment-method-type {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

.wjportal-paypal {
    background-color: #e3f2fd;
    color: #1565c0;
}


/*==========================================================================
===========popup =========================
==================================*/

/* A nice highlight color when user selects text */
.wjportal-main-up-wrapper ::selection {
    background-color: var(--wpjp-primary-color);
    color: #fff;
}

/* --- Popup Container --- */
.wjportal-popup-cnt {
    background-color: var(--wpjp-card-background);
    border-radius: 20px;
    /* Softer, more modern corners */
    padding: 32px;
    width: 100%;

    position: relative;

    /* NEW: A more pronounced, layered shadow for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);

    /* NEW: A subtle gradient border at the top for a premium feel */
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color)) 1;

    /* NEW: A more dynamic entry animation */
    animation: slideInFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* --- Close Button --- */
#wjportal-popup-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background-color: var(--wpjp-secondary-color);
    border-radius: 50%;
}

#wjportal-popup-close-btn:hover {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
    /* NEW: Added scale effect */
}

/* --- Popup Header --- */
.wjportal-popup-title {
    /*text-align: center;*/
    font-size: var(--wpjp-second-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    /* Bolder for more impact */
}

.wjportal-popup-title2 {
    font-size: var(--wpjp-second-sub-heading);
    font-weight: 700;
    /* Bolder for more impact */
    color: var(--wpjp-secondary-color);
    position: relative;
    display: inline-block;
    /* Required for the ::after element */
}

/* NEW: A stylish gradient underline accent */
.wjportal-popup-title2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    border-radius: 2px;
}

/* --- Form Fields & Labels --- */
.wjportal-popup-field {
    margin-bottom: 20px;
}

.wjportal-popup-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

.wjportal-popup-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 12px;
    /* Softer radius */
    font-size: var(--wpjp-body-font-size);
    background-color: var(--background-color);
    transition: all 0.3s ease;
    resize: vertical;
    box-sizing: border-box;
}

/* NEW: A more prominent "glow" effect on focus */
.wjportal-popup-field textarea:focus {
    outline: none;
    border-color: var(--wpjp-primary-color);
    background-color: var(--wpjp-card-background);
    box-shadow: 0 0 0 4px rgba(232, 48, 48, 0.1);
}

/* --- Star Rating --- */
.wjportal-container-small {
    display: flex;
    justify-content: center;
    /*margin-bottom: 24px;*/
    border: 1px solid var(--wpjp-border-color);
    padding: 10px 10px 5px 10px;
    border-radius: 8px;
    background: var(--wpjp-card-background);
}

/* --- Save Button --- */
a.wjportal-visitor-msg-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds a small space between the icon and text */
    /* NEW: Attractive gradient background */
    background-image: linear-gradient(45deg, var(--wpjp-primary-color) 0%, var(--wpjp-primary-color-light) 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
    justify-content: center;
}

/* This creates the icon before the text */
div#wjportal-listpopup .wjportal-visitor-msg-btn::before {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18h14v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V18h6v-1.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* --- NEW Animation Keyframes --- */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Popup Overlay === */
#wjportal-popup-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, rgba(var(--wpjp-primary-color), 0.41), rgba(var(--wpjp-secondary-color), 0.84));*/
    /*background: rgba(0, 0, 0, 0.55);*/
    z-index: 999998;
    display: none;
}

#wjportal-popup-background::before {
    content: '';
    /* Pseudo-elements must have a content property */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--wpjp-primary-color), var(--wpjp-secondary-color));
    z-index: -1;
    border-radius: 8px;
    opacity: 0.85;
    /* Control the transparency of the entire gradient here */
}

/* === Popup Wrapper === */
.wjportal-popup-wrp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    display: none;
    overflow: hidden;
    width: 50%;
}


/* === Payment Methods Layout === */
.wjportal-payemt-methods-wrp {
    display: flex;
    justify-content: center;
    /* Center the payment cards */
    gap: 20px;
    /* Space between cards */
    flex-wrap: wrap;
    /* Allow cards to stack on smaller screens */
    padding: 20px 0;
}

/* === Payment Item === */
.wjportal-payemt-method-item {
    position: relative;
    /* Crucial for positioning the Stripe button later */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 20px;
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 12px;
    background-color: var(--wpjp-card-background, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

/* === Payment Logos === */
.wjportal-payemt-method-item img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
    /* NEW: Grayscale effect for a clean, uniform look */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}


.wjportal-payemt-method-item img:hover {
    transform: scale(1.05);

}

/* === Stripe Method === */
.wjportal-payemt-method-stripe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Normalize Stripe Button Layout */
.wjportal-payemt-method-stripe form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}


.wjportal-main-up-wrapper .stripe-button-el:hover,
.wjportal-main-up-wrapper button.stripe-button-el:hover {
    background: #0f67d6 !important;
}

/* Ensure the Stripe inner span displays properly */
.wjportal-main-up-wrapper .stripe-button-el>span,
.wjportal-main-up-wrapper button.stripe-button-el>span {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === Proceed Button === */
.wjportal-payment-act-btn {
    background: var(--wpjp-primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;

}

.wjportal-payment-act-btn:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

/* === Responsive Adjustments === */
@media (max-width: 480px) {
    .wjportal-popup-wrp {
        width: 90%;
        padding: 0;
    }

    .wjportal-payemt-methods-wrp {
        flex-direction: column;
        gap: 15px;
    }

    .wjportal-payemt-method-item img {
        width: 120px;
    }
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {

    /* Reset column widths for mobile */
    #wjportal-table th,
    #wjportal-table td {
        width: 100% !important;
        /* The !important ensures it overrides the desktop widths */
    }

    /* Hide the original table header */
    #wjportal-table thead {
        display: none;
    }

    /* Make rows and cells stack vertically */
    #wjportal-table tr {
        display: block;
        margin-bottom: 3rem;
        border-bottom: 2px solid var(--wpjp-border-color);
        padding: 15px;
    }

    #wjportal-table tr:last-of-type {
        margin-bottom: 0;
    }

    #wjportal-table td {
        display: block;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px dotted var(--wpjp-border-color);
    }

    #wjportal-table td:last-child {
        border-bottom: none;
    }

    /* Use the data-th attribute to create labels */
    #wjportal-table td::before {
        content: attr(data-th);
        float: left;
        font-weight: 600;
        color: var(--wpjp-secondary-color);
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-popup-field-wrp {
        grid-template-columns: 1fr;
        /* Stack to a single column */
    }
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
    .wjportal-form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .wjportal-form-title {
        text-align: left;
        padding-top: 0;
    }

    .wjportal-form-btn-wrp {
        justify-content: center;
        font-size: var(--wpjp-body-font-size);
    }

    .wjportal-form-btn {
        width: 100%;
        justify-content: center;
    }

    div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt {
        width: 100%;
        padding-left: 0;
    }
    .wjportal-filter-search-field-wrp{width:100%;}
    .wjportal-jobs-right-wrp{
        text-align: start;
    }
}

/* ----------------------------------------- */
/* == Responsive          == */
/* ----------------------------------------- */

@media (max-width: 480px) {
    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-resume-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-newest-jobs-date {
        margin-bottom: 15px;
    }

    .wjportal-jobs-list-btm-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%;
    }

    .wjportal-packages-list {
        padding: 5px;
    }

    .wjportal-department-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }
    .wjportal-form-btn-wrp{flex-wrap: wrap;}
    div#wpjobportal-wrapper{padding:0;}
    .wjportal-newest-jobs-date{width:100%;}
    div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-middle-wrp{
        width:55%;
        flex: 1 1 auto;
    }
    div.wjportal-job-applied-resume-list div#job-applied-resume .wjportal-resume-right-wrp{
        width:45%;
        flex: 1 1 auto;

    }
    .wjportal-company-job-viewjob-leftwrp{
        min-width: unset;
    }
}

@media (max-width: 650px) {
    .wjportal-jobs-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-job-listing-description-wrap {
        width: 100%;
    }

    .wjportal-jobs-right-wrp {
        gap: 5px;
    }

    .wjportal-coverletter-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-coverletter-middle-wrp {
        width: 100%;
    }

    .wjportal-coverletter-right-wrp {
        width: 100%;
        align-items: flex-start;
    }

    .wjportal-coverletter-action-wrp {
        justify-content: end;
    }

    .wjportal-company-list-top-wrp {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-top {
        flex-wrap: wrap;
    }

    .wjportal-pkg-list-item-exp-date {
        width: 100%;
    }

    .wjportal-department-middle-wrp {
        width: 100%;
    }

    .wjportal-pkg-list-item-row-tit {
        white-space: unset;
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

@media (max-width: 768px) {

    .wjportal-jobs-cnt-wrp {
        flex-wrap: wrap;
    }

    .wjportal-jobs-right-wrp {
        align-items: flex-start;
        width: 100%
    }

    div.wjportal-page-header div.wjportal-header-actions div.wjportal-filter-wrp {
        display: flex !important;
    }

    div.wjportal-page-header div.wjportal-header-actions {
        margin-top: 20px;
    }

    .wjportal-jobs-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-right-wrp {
        width: 100%;
        justify-content: start;
    }

    .wjportal-resume-middle-wrp {
        width: 100%;
    }

    .wjportal-resume-data {
        width: 100%;
    }

    .wjportal-applied-job-resume-status {
        position: static;
        transform: none;
        display: inline-block;
    }

    .wjportal-applied-job-resume-status {
        margin-bottom: 10px;
    }

    span.wjportal-resume-job-type {
        margin-bottom: 10px;
    }

    .wjportal-pkg-list-item-row {
        width: 100%;
    }

    .wjportal-department-desc-wrap {
        padding-top: 10px;
    }

    .wjportal-companydetail-wrapper .wjportal-company-data,
    .wjportal-company-data-wrp .wjportal-custom-field {
        width: 100%;
    }

    .wjportal-companyinfo-wrp {
        width: 100%;
    }

    .wjportal-companyinfo-middle-wrap {
        width: 100%;
    }


    .wjportal-filter-search-field-wrp { width:100% ;}
    .wjportal-filter-search-btn-wrp {
        display: flex;
        justify-content: center;
    }

}

@media (max-width: 1080px) {
    .wjportal-pkg-list-item-data {
        grid-template-columns: repeat(1, 1fr);
    }

    .wjportal-by-categories-row-wrp {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        width: 100%;
    }

    .wjportal-by-category-wrp {
        width: 100% !important;
    }
}

/* ----------------------------------------- */
/* == Responsive for this Section          == */
/* ----------------------------------------- */
@media (max-width: 576px) {
    .wjportal-jobs-list-resume-wrp {
        padding-right: 1rem;
        /* Reset right padding */
    }

}

/* featured styling all listing  */
.wpjobportal-list-item-is-featured {
    border: 1px solid #ffb63b;
}

.wpjobportal-list-item-is-featured .wjportal-jobs-logo,
.wpjobportal-list-item-is-featured .wjportal-company-logo,
.wpjobportal-list-item-is-featured .wjportal-resume-logo {
    border: 1px solid #ffb63b;
    width: 155px;
    height: 155px;
    padding: 10px;
}

.wpjobportal-list-item-is-featured .wjportal-resume-data-value,
.wpjobportal-list-item-is-featured .wjportal-jobs-data-text,
.wpjobportal-list-item-is-featured .wjportal-company-data-text-created span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-location span.wjportal-company-data-value,
.wpjobportal-list-item-is-featured .wjportal-company-data-status span.wjportal-company-data-value {
    color: var(--wpjp-secondary-color);
}

/*==========================================
icons =================================
=========================================*/


.wjportal-resume-action-wrp a::before,
.wjportal-job-type::before,
.wjportal-newest-jobs-date::before,
.wjportal-jobs-act-btn::before,
.wjportal-jobs-act-btn-apply::before,
.wjportal-payment-act-btn::before,
.wjportal-jobs-data-text::before,
.wjportal-companyinfo-data::before,
.wjportal-companyinfo a.wjportal-companyinfo-link::before,
a.wjportal-apply-as-visitor-btn::before,
.wjportal-jobinfo-data::before,
.wjportal-jobinfo-data-view::before,
.wjportal-jobinfo-right-data-location .wjportal-jobinfo-data::before,
.wjportal-tags-item::before,
.wjportal-job-act-btn::before,
.wjportal-job-act-btn-tell::before,
.wjportal-job-act-btn-short::before,
.wjportal-company-btn-wrp a::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-applied-job-actions-popup-norec-link::before,
.wjportal-job-applied-actions-btn::before,
.wjportal-main-up-wrapper #popup_message::before,
.wjportal-main-up-wrapper .applynow-closebutton::before,
.wjportal-resume-action-wrp a::before,
.wjportal-resume-job-type::before,
.wjportal-resume-data-text::before,
.wjportal-resume-act-btn.wjportal-resume-act-btn-ai-suggested-jobs::before,
a.wjportal-resume-act-btn-view::before,
.wjportal-folder-act-btn::before,
.wjportal-department-info-tit::before,
.wjportal-department-act-btn::before,
.wjportal-coverletter-act-btn::before,
.wjportal-company-act-btn::before,
.wjportal-main-up-wrapper .frontend.updated::before,
.wjportal-visitor-msg::before,
.wjportal-main-up-wrapper .frontend.error::before,
.wjportal-main-up-wrapper .visitor-apply-job-jobinforamtion-message::before,
.wjportal-show-contact-det-btn::before,
.wpjobportal-terms-and-conditions-wrap a::before,
.wjportal-main-up-wrapper .alert-danger::before,
.wjportal-coverletter-act-btn::before,
.wjportal-coverletter-act-btn-view::before,
.wjportal-coverletter-info-tit::before,
.wjportal-save-search-created-text::before,
.wjportal-save-search-act-btn::before,
.wjportal-save-search-act-btn-remove::before,
.wjportal-msg-act-btn::before,
.wjportal-pkg-list-item.featured::before,
.wjportal-pkg-list-item-row::before {
    content: '';
    display: inline-block;
    align-items: center;
    width: 1em;
    height: 1em;
    gap: 0.8rem;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.wjportal-error-msg-act-btn-back-btn ::before {
    /* User/Profile Icon */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
}

a.wjportal-payment-act-btn::before,
.wjportal-list-act-btn-proceed-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-delete::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}
.wjportal-company-act-btn.wjportal-featured-btn::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');   
}

a.wjportal-list-act-btn-edit::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-btn-wrp a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.wjportal-company-view-all-jobs-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-view::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-already-applied::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied:before,
.wjportal-list-act-btn-apply::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-copy-job::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
}

.wjportal-list-act-btn-tell-a-friend::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.wjportal-resume-act-btn-ai-suggested-jobs::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-ai-suggested-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6m-3-6v6m-3-14h.01M12 2a7 7 0 0 0-7 7c0 3 2 5 2 7h10c0-2 2-4 2-7a7 7 0 0 0-7-7z'/%3e%3c/svg%3e");
}


.wjportal-jobs-act-btn-delete-shortlist::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

div#wjportal-listpopup a.wjportal-visitor-msg-btn.wpjobportal-save-shortlist-popup-button::before,
.wjportal-job-act-btn-shortlist::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-applied-resumes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3cline x1='16' y1='13' x2='8' y2='13'/%3e%3cline x1='16' y1='17' x2='8' y2='17'/%3e%3c/svg%3e");
}

.wjportal-list-act-btn-mark-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-list-act-btn-add-note::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z"/></svg>');
}

.wjportal-list-act-btn-info-details::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.wjportal-list-act-btn-mark-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.wjportal-list-act-btn-mark-not-spam::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.wjportal-list-act-btn-mark-hired::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>');
}

.wjportal-list-act-btn-mark-rejected::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>');
}

.wjportal-list-act-btn-pdf-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-print-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>');
}

.wjportal-list-act-btn-view-message::before,
.wjportal-msg-act-btn::before,
.wjportal-resume-act-btn.wjportal-resume-act-action-links.wjportal-list-act-btn-tell-a-friend.action-links::before,
.wjportal-list-act-btn-send-message-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.wjportal-list-act-btn-folder-view-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.wjportal-list-act-btn-copy-to-folder::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>');
}

.wjportal-list-act-btn-export-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

.wjportal-list-act-btn-folder-delete-resume::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.wjportal-list-act-btn-view-profile::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-change-package::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

.wjportal-list-act-btn-select-package {}

.wjportal-list-act-btn-pdf::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 11.5c0 .83-.67 1.5-1.5 1.5H7v2H5.5V9H8c.83 0 1.5.67 1.5 1.5v1zm-2-1.5H7v1h.5v-1zm4.5 4.5h-1V9h1v6zm6-1.5c0 .83-.67 1.5-1.5 1.5h-2.5V9H18c.83 0 1.5.67 1.5 1.5v3zm-1.5-1.5h-1v1.5h1V13z"/></svg>');
}

.wjportal-list-act-btn-add {}

.wjportal-list-act-btn-unsub-job-alert {}

.wjportal-list-act-btn-featured::before {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.wjportal-company-job-viewjob-rightwrp .wjportal-job-detail-about-company-wrap .wjportal-company-btn-wrp a.wjportal-company-view-all-jobs-btn::before,
.wjportal-companydetail-wrapper .wjportal-company-act-btn::before,
.wjportal-company-view-all-jobs-btn::before,
.wjportal-company-view-company-btn::before,
.wjportal-list-act-btn-view-all::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
}

.wjportal-list-act-btn-make-payment::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3e%3cline x1='1' y1='10' x2='23' y2='10'/%3e%3c/svg%3e");
}

.wjportal-jobs-act-btn-apply.wp-job-portal-already-applied::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
}

a.wjportal-apply-as-visitor-btn::before,
.wjportal-job-act-btn::before,
.wjportal-jobs-act-btn-apply:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}

a.wjportal-apply-as-visitor-btn::before {}

.wjportal-error-msg-act-btn::before {}

.wjportal-list-act-btn-buy-now {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-buy-now::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG shopping cart icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

a.wjportal-act-btn.wjportal-unsubscribed-btn-wrp.wjportal-list-act-btn-unsub-job-alert {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
}

.wjportal-list-act-btn-unsub-job-alert::before {
    content: '';
    /* Required for the element to show */
    display: inline-block;
    width: 1.2em;
    /* Icon size relative to the font size */
    height: 1.2em;
    background-color: currentColor;
    /* Makes icon color same as text (white) */

    /* The SVG "notifications off" (bell with a slash) icon */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM2.1 2.1L.69 3.51 3 5.83V11c0 .32.04.63.1.94L1.6 13.43c-.15.27-.16.6.01.88.17.28.48.45.8.45h2.61l1.82 1.82c-.37.05-.74.08-1.13.08-1.93 0-3.6-1.03-4.55-2.64l-1.5-2.61c0 .02 0 .03-.01.05l-1.49-1.49L2.1 2.1zM20 12.94c.06-.31.1-.62.1-.94V11c0-2.89-1.86-5.4-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S12.5.67 12.5 4v.68c-.5.14-.98.34-1.43.57l1.5 1.5c.16-.05.32-.08.49-.11h.01c2.48 0 4.5 2.02 4.5 4.5v.91l2.02 2.02.53-.29c.17-.28.16-.6-.01-.88l-1.54-2.43z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp {
    display: flex;
    flex-wrap: wrap;
}

div#wpjobportal-wrapper.wjportal-by-categories-main-wrp.wjportal-job-by-categories-wrp .wjportal-by-categories-row-wrp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
}

.wjportal-form-roles .wjportal-form-text {
    padding-top: 12px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn {
    background-color: var(--wpjp-primary-color);
    color: #fff;
    border: 1px solid var(--wpjp-border-color);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--wpjp-body-font-size);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 15px;
    border-radius: 6px;
}

a.wjportal-error-msg-act-btn.wjportal-error-msg-act-btn-back-btn:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
    border: 1px solid var(--wpjp-secondary-color);
}

.wjportal-main-up-wrapper a,
.wjportal-main-up-wrapper .wjportal-main-wrapper a:focus {
    text-decoration: unset;
}

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus):first-letter,
.wp-block-button.is-style-outline,
a {
    color: #e98d26;
}


.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn {
    display: inline-flex;
    /* Aligns icon and text */
    align-items: center;
    /* Vertically centers icon and text */
    gap: 0.6em;
    /* Adds space between the icon and text */

}

.wjportal-pkg-list-item.wpjobportal-packages-list-item-status-expired .wjportal-pkg-list-item-act-btn::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-size: cover;
}


/* --- NEW: Linear Progress Bar for Profile Status --- */
.wjportal-progress-bar-container {
    width: 100%;
    padding: 10px 0px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wjportal-progress-bar-container .wjportal-progress-bar-title {
    font-size: var(--font-size);
    color: var(--wpjp-secondary-color);
    font-weight: 600;
}

.wjportal-progress-bar-container .wjportal-progress-bar-percentage {
    font-size: var(--font-size);
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}

.wjportal-progress-bar-container .wjportal-progress-bar-wrapper {
    width: 100%;
    background-color: #eeeff1;
    border-radius: 5px;
    height: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wjportal-progress-bar-container .wjportal-progress-bar-fill {
    opacity: 0.3;
    height: 100%;
    border-radius: 6px;
    /*background-color: #cbc8ea;*/
    background-color: var(--wpjp-primary-color);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    transition: width 0.6s ease;
    animation: progress-bar-stripes 1s linear infinite;
}

/* * Packages Wrapper
     * This will hold the package items using Flexbox
    */
.wjportal-packages-popup .wjportal-packages-wrp {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap to next line */
    margin: 0 -10px;
    /* Negative margin to counteract padding on items */
}

/* * Individual Package Item (Card)
*/
.wjportal-packages-popup .wjportal-pkg-item {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 8px;
    margin: 10px;
    /* Space between cards */
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    /* Flex properties for column layout */
    flex-grow: 1;
    /* Allow items to grow */
    flex-shrink: 1;
    /* Allow items to shrink */
    flex-basis: 300px;
    /* Base width - 2 cards will fit in 800px */

    display: flex;
    flex-direction: column;
    /* Stack top and bottom sections */
    transition: box-shadow 0.2s, transform 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.wjportal-packages-popup .wjportal-pkg-item-top {
    padding: 15px 20px;
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wjportal-packages-popup .wjportal-pkg-item-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    /* A primary blue color */
}

.wjportal-packages-popup .wjportal-pkg-item-btm {
    padding: 20px;
    flex-grow: 1;
    /* Makes bottom section fill available space */
    display: flex;
    flex-direction: column;
}

.wjportal-packages-popup .wjportal-pkg-item-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.95rem;
    /* 15px */
}

.wjportal-packages-popup .wjportal-pkg-item-tit {
    color: var(--wpjp-secondary-color);
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-val {
    color: var(--wpjp-body-font-color);
    text-align: right;
    font-size: var(--wpjp-body-font-size);
}

.wjportal-packages-popup .wjportal-pkg-item-btn-row {
    margin-top: auto;
    /* Pushes the button to the bottom */
    padding-top: 15px;
}

/* "Select Package" Button (Link) */
.wjportal-packages-popup .wjportal-pkg-item-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--wpjp-primary-color);
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 6px;
    font-weight: 600;
    font-size: var(--wpjp-body-font-size);
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-pkg-item-btn:hover {
    background-color: var(--wpjp-secondary-color);
}

/* Highlighted/Selected Package */
.wjportal-packages-popup .wjportal-pkg-item.selected {
    border-color: var(--wpjp-primary-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Message area */
.wjportal-packages-popup .wjportal-popup-msgs {
    margin-top: 15px;
    font-size: var(--wpjp-body-font-size);
    color: #28a745;
    /* Success color */

}

/* Bottom "Add To Featured" button area */
.wjportal-packages-popup .wjportal-visitor-msg-btn-wrp {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* "Add To Featured" Button */
.wjportal-packages-popup .wjportal-visitor-msg-btn {
    /* Green color */
    /*background-color: #28a745;*/
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wjportal-packages-popup .wjportal-visitor-msg-btn:hover {
    background-color: #218838;
}

/* Help Text */
.wjportal-packages-popup .wjportal-pkg-help-txt {
    font-size: var(--wpjp-body-font-size);
    color: #d9534f;
    /* A subtle error/warning color */
    background-color: #fdf7f7;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
}

/* --- Company list Widget Styles --- */

/* NEW: This is the main wrapper for the *list* of widgets */
.wpjobportal-companies-widget-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* This creates the space *between* the company rows */
}

/* This is the main card container for EACH widget row */
.wpjobportal-companies-list-row {
    width: 100%;
    /* max-width: 700px; */
    /* No longer needed, as wrapper handles width */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;
    box-sizing: border-box;
    /* Ensures padding is included in width */

    /* We use CSS Grid for a robust layout.
      It creates two columns: one for the logo, one for the content.
      The content column itself has two rows: title and details.
    */
    display: grid;
    grid-template-columns: auto 1fr;
    /* logo | content */
    grid-template-rows: auto auto;
    /* title | details */
    grid-template-areas:
        "logo title"
        "logo details";
    /* 1rem row-gap, 1.5rem column-gap */
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-list-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
    grid-area: logo;
    /* Assigns this div to the 'logo' area */
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo img {
    display: block;
    min-width: 100px;
    /* Fixed width */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 15px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
}

/* Title row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
}

/* Details row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
    /* Aligns details to the top of its cell */
    display: flex;
    gap: 12px;
    padding-top: 0.5rem;
    width: 53%;
    justify-content: flex-end;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    justify-content: flex-start;
}

.wpjobportal-companies-list-row .wpjobportal-company-field {
    font-size: var(--wpjp-body-font-size);
    color: #495057;
}

.wpjobportal-companies-list-row .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.25rem;
}

/* --- Responsive behavior for mobile --- */
@media (max-width: 600px) {
    .wpjobportal-companies-list-row .wpjobportal-companies-list-row {
        /* Change to a single column layout on mobile.
          Logo goes on top, then title, then details.
        */
        grid-template-columns: 1fr;
        /* Full width */
        grid-template-areas:
            "logo"
            "title"
            "details";
        gap: 1rem;
        padding: 1.25rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
        justify-self: start;
        /* Align logo to the left */
    }

    .wpjobportal-companies-list-row.wpjobportal-companies-list-col-title {
        align-self: start;
        /* Reset alignment */
    }

    .wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
        padding-top: 0;
        /* Remove extra padding */
    }
}


/* --- Company grid Widget Styles --- */

/* This creates the responsive grid */
/* --- New Widget Styles --- */

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .elementor-widget-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This creates the responsive grid */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-companies-grid-wrapper {
    display: grid;
    /* Creates a responsive grid:
       - On large screens: 3 columns
       - On medium screens: 2 columns
       - On small screens: 1 column
       - minmax(300px, 1fr) ensures cards are at least 300px wide
    */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* This is the main card for each company */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 2rem 1.5rem;
    margin-bottom: 15px;
    /* Use flex to align content vertically and center it */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Company Logo */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-logo img {
    display: block;
    border-radius: 10%;
    /* Make it circular */
    border: 2px solid #f0f0f0;
    object-fit: contain;
    /* Prevents image stretching */
    margin-bottom: 1.25rem;
    padding: 10px;
}

/* Company Title */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title {
    margin-bottom: 0.75rem;
    /* Ensure title doesn't take up extra space */
    flex-grow: 0;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Details (Location, Posted) */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);

    /* This makes the details section grow to fill space,
       pushing the button to the bottom */
    flex-grow: 1;
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* In case value is long */
}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-field-label {
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    margin-right: 0.35rem;
}

/* "View Company" Button */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button {
    border: 1px solid var(--wpjp-border-color);
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    /* Light purple */
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    /* Make button full width of card padding */
    max-width: 250px;
    box-sizing: border-box;

    /* This ensures the button is at the bottom */
    flex-grow: 0;
    margin-top: auto;
    /* Pushes button to bottom */

}

.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-grid-view-company-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #ffffff;
}


/* ========================================================================================================
---------------- job List Widget Styles --- 
=============================================================================================*/

/* Wrapper for the whole widget */
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list {
    width: 100%;
}

/* The main list item card */
.wpjobportal-layout-list .wpjobportal-job-box {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 24px */
    background-color: white;
    border-radius: 10px;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 10px;
    /* 24px */
    width: 100%;
    box-sizing: border-box;
    /* Ensures padding doesn't break width */
    border: 1px solid var(--wpjp-border-color);

}

.wpjobportal-layout-list .wpjobportal-job-box.wpjobportal-floatbox {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list .wpjobportal-job-box.wpjobportal-floatbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Logo container */
.wpjobportal-layout-list .wpjobportal-job-logo {
    flex-shrink: 0;
    /* Prevents logo from shrinking */
}

.wpjobportal-layout-list .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    /* 8px */
    object-fit: contain;
    border: 1px solid #e5e7eb;
    /* Light border */
    display: block;
    padding: 10px;
}

/*.wpjobportal-layout-list .wpjobportal-job-widget-detail-field-data.wpjobportal-job-apply_before {
    color: #a11616;
}*/

/* Main details section (grows to fill space) */
.wpjobportal-layout-list .wpjobportal-job-details {
    flex-grow: 1;
    min-width: 0;
    /* Fix for flexbox overflow */
}

.wpjobportal-layout-list .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    margin-bottom: 0.25rem;
    /* 4px */
}

.wpjobportal-layout-list .wpjobportal-job-title a {
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.wpjobportal-layout-list .wpjobportal-job-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-primary-color);
}

.wpjobportal-layout-list .wpjobportal-job-company {
    font-size: var(--wpjp-body-font-color);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    margin-bottom: 5px;
    /* 12px */
}

.wpjobportal-layout-list .wpjobportal-job-company a {
    text-decoration: none;
}

.wpjobportal-layout-list .wpjobportal-job-company a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);

}

/* Wrapper for the metadata items */
.wpjobportal-layout-list .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 10px;
    
}

/* Individual metadata item */
.wpjobportal-layout-list .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}

.wpjobportal-job-company .wpjobportal-job-company-posted-date{
    color: var(--wpjp-body-font-color);
}


/* Responsive adjustments */
@media (max-width: 640px) {
    .wpjobportal-job-box {
        flex-direction: column;
        /* Stack logo on top */
        align-items: center;
        /* Center-align content */
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .wpjobportal-job-details {
        text-align: center;
        /* Center text */
    }

    .wpjobportal-job-meta-row {
        justify-content: center;
        /* Center meta items */
        gap: 0.5rem 1rem;
    }
}


/*===================================================================================================
========================job grid widget=======================================================
==================================================================================*/

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row {
    background-color: white;
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 2rem 1.5rem;
    /* Vertical and horizontal padding */
    text-align: center;
    /* Center everything inside */
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid var(--wpjp-border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}



.wpjobportal-layout-grid.wpjobportal-cols-1 .company-logo {
    display: inline-block;
    /* Allows centering with text-align on parent */
    margin-bottom: 1.5rem;
    /* Space below the logo */
    padding: 0.75rem;
    /* Padding inside the logo container */
    border-radius: 0.5rem;
    /* Rounded corners for the container */
    background-color: #f9fafb;
    /* Very light gray background */
    border: 1px solid #e5e7eb;
    /* Light border */
    justify-content: center;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo {
    display: flex;
    justify-content: center;

}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-logo img {
    border-radius: 0.5rem;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    display: block;
    padding: 10px;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    margin-bottom: 0.5rem;
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title :hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    /* 20px */
    font-weight: 600;
    /* Semi-bold */
    color: var(--wpjp-secondary-color);
    /* Darker gray */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    /* 16px */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    margin-bottom: 1.5rem;
    /* Space below company name */
    text-decoration: none;
    display: block;
    /* Ensures it takes full width and centers */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all detail fields */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    /* Divider line */
    display: flex;
    /* Use flexbox for vertical stacking */
    flex-direction: column;
    /* Stack items vertically */
    gap: 0.75rem;
    /* Space between each detail item */
}

/* Individual detail field */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    /* Makes content and icon align horizontally */
    align-items: center;
    justify-content: center;
    /* Center the content of each item */
    gap: 0.5rem;
    /* Space between icon and text */
    font-size: var(--wpjp-body-font-size);
    /* About 15px */
    color: var(--wpjp-body-font-color);
    /* Medium gray */
    line-height: 1.5;
    width: 100%;
    /* Ensures it takes full width */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data svg {
    width: 1rem;
    /* 16px */
    height: 1rem;
    /* 16px */
    color: #9ca3af;
    /* Icon color */
    flex-shrink: 0;
    /* Prevents icon from shrinking */
}

/* Specific styling for job type tag */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    padding: 5px;
    /* 2px 10px */
    border-radius: 9999px;
    color: white;
    background-color: #b557b5;
    /* From original inline style */
    display: inline-block;
    /* Allows padding and background */
    margin-left: 0.25rem;
    /* Small space after "Job Type:" */
    width: 50%;
}


.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-apply_before svg {
    color: #d9480f;
}

/* Small adjustment for the Job Type line to prevent wrapping if possible */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-job-job_type {
    white-space: nowrap;
    /* Tries to keep "Job Type: Part-Time" on one line */

}

/*===================================================================================================
========================job Card widget=======================================================
==================================================================================*/

.wpjobportal-layout-card.wpjobportal-cols-1 {
    width: 100%;
    margin: 0 auto;
    gap: 1.5rem;
}

/* This is the main card for each job */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 1.5rem;

    gap: 1.25rem;
    align-items: start;
    /* Align logo and text block to the top */

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Job Logo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-logo img {
    display: block;
    border-radius: 8px;
    /* Rounded square logo */
    border: 1px solid #eee;
    object-fit: contain;
    padding: 10px;
}

/* Container for all text content */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Small gap between title and company */
}

/* Job Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-title a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

/* Company Name */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
    text-decoration: underline;
}

/* Container for all the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-meta-col {
    display: flex;
    gap: 5px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
}

/* Individual meta field (e.g., Salary, Location) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}

/* Add icons to the meta fields */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-job-widget-detail-field-data::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    width: 16px;
    text-align: center;
    color: #8a94a6;
}


/* Style for the "Part-Time" tag */
.wpjobportal-layout-card.wpjobportal-cols-1 .wjportal-job-type {
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}


/*===================================================================================================
========================Resume Card widget=======================================================
==================================================================================*/


/* 1. Main Widget Container */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 15px;
    box-sizing: border-box;
}

/* 2. Individual Resume Row Separator */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    border-bottom: none;
    /* Remove border from the last item */
    margin-bottom: 0;
}

/* 3. Resume Box (Flexbox for Alignment) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    padding: 5px 0;
}

/* 4. Resume Photo */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    /* Prevent photo from shrinking */
    border-radius: 10px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Blue ring for emphasis */
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-details {
    flex-grow: 1;
    /* Take up remaining space */
}

/* 6. Name and Title */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 16px */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    /* Dark text */
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Slightly smaller title */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    /* Medium gray */
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    width: 100%;
}

/* 7. Meta Information */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 12px for meta data */
    color: var(--wpjp-body-font-color);
    /* Light gray text */
    display: flex;
    flex-wrap: wrap;
    /* Allows meta fields to wrap on very small screens */
    gap: 5px 10px;
    /* Vertical and horizontal gap between meta items */
}

.wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
}

/* Highlight specific meta data if desired (e.g., Category) */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Blue for category */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-posted {
    font-style: italic;
}

/* 8. View All Button */
.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    /* 100% minus the widget padding */
    margin: 15px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Light gray background */
    color: #fff;
    /* Dark gray text */

}

.wpjobportal-layout-card.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    color: #fff;
}

/*===================================================================================================
========================Resume box widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    max-width: 480px;
    /* Constrain widget width */
    width: 100%;
    background-color: #F3F4F6;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    /* Reduced overall padding since inner boxes will have it */
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (New "Box Style" Container) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box {
    display: flex;
    flex-direction: column;
    /* Stack photo and details vertically */
    align-items: center;
    /* Center content horizontally */
    background: #ffffff;
    padding: 20px;
    /* Internal padding for the box */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Light shadow for box depth */
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    margin-bottom: 15px;
    /* Space below the photo */
    border-radius: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-photo img {
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    padding: 5px;
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-details {
    width: 100%;
    /* Ensure details section uses full width */
    text-align: center;
    /* Center name and title */
}

/* 6. Name and Title */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name {
    margin-bottom: 5px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* 18px - slightly larger name */
    font-weight: 700;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW CENTER ALIGNED) */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* 14px - slightly larger meta data for readability */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* STACKED FIELDS */
    width: 100%;
    gap: 4px;
    /* Small space between stacked fields */
    text-align: center;
    /* CENTER ALIGNED TEXT */
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    width: 100%;
    /* Ensure each field takes full width */
    padding: 2px 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-category {

    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}


/* 8. View All Button */
.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-grid.wpjobportal-cols-1 .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

/*===================================================================================================
========================Resume List widget=======================================================
==================================================================================*/

/* 1. Main Widget Container */
.wpjobportal-layout-list .wpjobportal-resume-widget-multi-style-wrapper {
    width: 100%;
    background-color: #F3F4F6;
    /* Light background for the overall widget */
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}


/* 2. Individual Resume Row Separator - Used for vertical spacing between boxes */
.wpjobportal-layout-list .wpjobportal-resume-row {
    padding: 10px 0;
    /* Vertical margin between boxes */
    border-bottom: none;
    /* No separator line */

}


.wpjobportal-layout-list .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (List Item Card) */
.wpjobportal-layout-list .wpjobportal-resume-box {
    display: flex;
    flex-direction: row;
    /* Horizontal List Layout */
    align-items: flex-start;
    /* Center content vertically in the row */
    background: #ffffff;
    padding: 15px;
    /* Slightly less internal padding */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--wpjp-border-color);
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpjobportal-layout-list .wpjobportal-resume-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* 4. Resume Photo */
.wpjobportal-layout-list .wpjobportal-resume-photo {
    flex-shrink: 0;
}

.wpjobportal-layout-list .wpjobportal-resume-photo img {
    padding: 5px;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid var(--wpjp-border-color);
    /* Adjusted border width */
    box-shadow: none;
    /* Removed shadow on image */
}

/* 5. Resume Details (Text content area) */
.wpjobportal-layout-list .wpjobportal-resume-details {
    flex-grow: 1;
    text-align: left;
    /* Left align text */
    color: var(--wpjp-body-font-color);

}

/* 6. Name and Title */
.wpjobportal-layout-list .wpjobportal-resume-name {
    margin-bottom: 2px;
}

.wpjobportal-layout-list .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading);
    /* Slightly smaller name for list view */
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpjobportal-layout-list .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-list .wpjobportal-resume-title a {
    font-size: var(--wpjp-body-font-size);
    /* Smaller title */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    /* Reduced vertical spacing */
}

.wpjobportal-layout-list .wpjobportal-resume-title a:hover {
    text-decoration: underline;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-top: 0.75rem;
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW LEFT ALIGNED) */
.wpjobportal-layout-list .wpjobportal-resume-meta-col {
    font-size: var(--wpjp-body-font-size);
    /* Smaller meta font for list */
    color: var(--wpjp-body-font-color);
    display: flex;
    flex-direction: column;
    /* Keep fields stacked for full-width info display */
    width: 100%;
    gap: 2px;
    /* Reduced space between stacked fields */
    text-align: left;
    /* LEFT ALIGNED TEXT */
    border-top: none;
    /* Removed separator dash line */
    padding-top: 0;
    margin-top: 5px;
    /* Small top margin */
}

.wpjobportal-layout-list .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    padding: 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-list .wpjobportal-resume-category {
    color: var(--wpjp-body-font-color);
    /* Use a green color for category highlight */
}

/* 8. View All Button */
.wpjobportal-layout-list .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 10px);
    margin: 20px auto 5px auto;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Button Styling */
    background-color: var(--wpjp-primary-color);
    /* Primary blue button */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.wpjobportal-layout-list .wpjobportal-resume-view-all-button:hover {
    background-color: var(--wpjp-secondary-color);

}


/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form {
    display: flex;
    flex-wrap:wrap;
    align-items:center;
    /* Space between rows */
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% /* !important*/;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/*===================================================================================================
======================== Resume seach Widget =======================================================
==================================================================================*/

/* 1. Main Widget Container Styling (Card Effect) */
#wpjobportal_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

/* 2. Form Title */
.wjportal-search-mod.wjportal-form-mod h2 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    color: #1f2937;
    /* Dark gray text */
    margin-bottom: 24px;
    text-align: center;
}

/* 3. General Form Row Layout (Stacked - mobile first) */

.wjportal-search-mod.wjportal-form-mod .wjportal-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Override the inline width: 100% is fine, but need to ensure it stacks */
    width: 100% /* !important */;
    margin-bottom: 0;
    gap: 10px;
}


/* 4. Labels */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-tit {
    width: 100%;
    font-size: var(--wpjp-body-font-size);
    /* 14px */
    font-weight: 500;
    color: var(--wpjp-body-font-color);
    /* Medium gray text */
    margin-bottom: 4px;
}

/* Style the hidden/dummy title div in the button row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row .wjportal-form-tit {
    display: none;
}

/* 5. Inputs and Selects */
.wjportal-search-mod.wjportal-form-mod.wjportal-search-mod.wjportal-form-mod .wjportal-form-val {
    width: 100%;
}

.wjportal-search-mod.wjportal-form-mod .inputbox {
    box-sizing: border-box;
    /* Important for padding/border not breaking width */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    color: #1f2937;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

.wjportal-search-mod.wjportal-form-mod .inputbox:focus {
    outline: none;
    border-color: #3b82f6;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 6. Buttons and Button Row */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
}


.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn,
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wpjp-body-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    /* For the <a> tag button */
    box-sizing: border-box;
}

/* Primary Button (Search Resume) */
.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn {
    background-color: var(--wpjp-primary-color);
    /* Blue */
    color: #ffffff;
    border: none;

}

.wjportal-search-mod.wjportal-form-mod .wjportal-filter-search-btn:hover {
    background-color: var(--wpjp-secondary-color);
    /* Darker blue */

}

/* Secondary Button (Advance Search) */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn {
    background-color: #f3f4f6;
    /* Light gray */
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-adv-srch-btn:hover {
    background-color: #e5e7eb;
    /* Darker light gray */
    color: #1f2937;
}

/* Styling for nested options for better visual hierarchy */
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option {
    color: #1f2937;
}

.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="56"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="57"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="58"],
.wjportal-search-mod.wjportal-form-mod .wjportal-form-val select option[value="59"] {
    padding-left: 10px;
    background-color: #fefefe;
}

/* job by category / type widget =======================================*/
/* job by category / type widget - Flexbox Conversion */

div.wjportal-job-by-mod {
    display: inline-block;
    width: 100%;
}

div.wjportal-job-by-mod div.wjportal-job-by {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item {
    display: flex;
    padding: 10px 5px;
    justify-content: flex-start;

}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt {
    display: block;
    padding: 1.5rem;
    /* p-6 */
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);

}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item .wjportal-job-by-item-cnt span.wjportal-job-by-item-num {
    text-align: right;
}


/* job Stats / stats =======================================*/
div#wpjobportals_mod_wrapper {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

div#wpjobportals-mod-heading {
    font-size: var(--wpjp-sub-heading);
    color: var(--wpjp-secondary-color);
    font-weight: 700;
    padding: 0 0 10px 0;
}

div#wpjobportals-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpjobportals-value.wjportal-stats-data {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wpjobportals-value.wjportal-stats-data:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

.wjportal-job-by-loc-item {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--wpjp-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

.wjportal-job-by-loc-item:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.03);
    border-color: var(--wpjp-primary-color);
    color: var(--wpjp-primary-color);
}

a.wjportal-job-by-loc-item-cnt {
    color: var(--wpjp-secondary-color);
    font-size: var(--wpjp-body-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
}

a.wjportal-job-by-loc-item-cnt:hover {
    color: var(--wpjp-primary-color);

}


/*======= Add Shees ===============*/

.wjportal-form-row.visible.js-form-custm-flds-wrp {
    display: none;
}

.wjportal-company-desc {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

div#job-applied-resume-wrapper.wjportal-job-applied-resume {
    position: relative;
    z-index: 9999 !important;
    width: 100%;
}

/* Show the menu when the container is focused */
/*.wjportal-resume-act-actions-dropdown:focus-within .wjportal-resume-act-actions-dropdown-menu, .wjportal-resume-act-actions-dropdown:hover .wjportal-resume-act-actions-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99999;
}*/
div.wjportal-elegant-addon-main-up-wrapper div.wjportal-applied-job-adv-search-wrp div.wjportal-applied-job-adv-search-action-wrp {
    justify-content: center;
}

.wjportal-main-up-wrapper .wjportal-form-map {width: 600px;max-width: 100%;}
.wjportal-job-applied-actions-btn-wrp input#send,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save, .wjportal-main-up-wrapper input#save-comments {background-color: var(--wpjp-primary-color);color: #fff;border: 1px solid var(--wpjp-primary-color);border-radius: 8px;padding: 10px 15px;font-size: var(--wpjp-body-font-size);font-weight: 600;cursor: pointer;transition: all 0.2s ease;display:inline-flex;align-items: center;gap: 8px;text-transform: none;line-height: inherit;}

.wjportal-job-applied-actions-btn-wrp input#send:hover,
.wjportal-main-up-wrapper input.wjportal-visitor-msg-btn:hover,
.wjportal-main-up-wrapper .wjportal-form-btn-wrp input#save:hover, .wjportal-main-up-wrapper input#save-comments:hover {background-color: var(--wpjp-secondary-color);border: 1px solid var(--wpjp-secondary-color);color: #fff;text-decoration: none;}
.wjportal-featured-tag-icon-wrp .featurednew-onhover.wjportal-featured-hover-wrp{margin-left: 10px;}

@media (max-width: 1750px) {
    .wjportal-main-up-wrapper {
        max-width: 1250px !important;
    }
}

@media (max-width: 1550px) {
    .wjportal-main-up-wrapper {
        max-width: 1200px !important;
    }
}

@media (max-width: 1280px) {
    .wjportal-main-up-wrapper {
        max-width: 1080px !important;
    }
}
@media (max-width: 1080px) {
    div.wjportal-cp-content-mainwrp{
        flex-wrap: wrap;
    }
}



/* job widget css  */
/* job widget css  */
/* job widget css  */
/* job widget css  */
.wjportal-form-horizontal .wjportal-form-row {
    display: inline-block;
    vertical-align: top;
}
.wjportal-form-responsive {
    display: flex;
    flex-wrap: wrap;
}
.wjportal-form-btn-row {
    text-align: center;
}
.wjportal-form-btn i {
    font-size: 16px;
}
div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button {float: left;padding: 7px;text-align: center;width: calc(50% - 3px);}
div.wjportal-search-mod form.wjportal-form div.wjportal-form-row div.wjportal-form-val{
    padding-right: 5px;
}


div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row .wjportal-form-tit{
    margin-bottom: 7px;
}

/* new job listing widget  */
.wpjobportal-job-widget-multi-style-wrapper {
    display: inline-block;
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-1 .wpjobportal-job-box { width: 100%; }
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-2 .wpjobportal-job-box { width: calc(50% - 20px); margin: 10px;padding: 15px 0;}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-3 .wpjobportal-job-box { width: calc(33.3% - 20px); margin: 10px;padding: 15px 0;}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-cols-4 .wpjobportal-job-box { width: calc(25% - 20px); margin: 10px;padding: 10px 0;}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box { padding-bottom: 0px;background: #fff;padding: 20px;border-radius: 18px;}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box{
    padding-bottom: 0px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a{
    text-decoration: none;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-row {
    float: left;
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    float: left;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    width: 100%;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title{
    margin: 0px 20px 10px;
    padding: 10px 0;
    font-size: 22px;
}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company{
    margin-bottom: 7px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-details{
    width: 100%;
    text-align: center;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-details .wpjobportal-job-meta-col{
    font-size: 14px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo{
    width: 100%;
    text-align: center;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a,
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a img{
    display: inline-block;
}



.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo {
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo img {
    display: block;
    border-radius: 4px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-logo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-logo img {
    display: inline-block;
    height: 90px;
    width: 90px;
    max-width: 100%;
    border-radius: 8px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-logo a {
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-logo img {
    padding: 10px;
    display: inline-block;
    border: 1px solid var(--wpjp-border-color);    
    max-width: 100%;
    border-radius: 10px;
}



.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo a {
    display: inline-block;
    overflow: hidden;
    background: transparent;
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-logo a img {
    display: inline-block;
    min-height: 90px;
    max-width: 100%;
}

.wpjobportal-company-box .wpjobportal-company-logo a {
    padding: 5px;
    display: inline-block;
    overflow: hidden;
    margin-top: 10px;
}

.wpjobportal-company-box .wpjobportal-company-logo a img {
    display: inline-block;
    height: 90px;
    width: 90px;
    max-width: 100%;
}





.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
}

/* view all jobs button  */
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button{
    display: inline-block;
    width: calc(100% - 20px) ;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin:15px 10px 10px;
}


/* view job button  */ 
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button{
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

/* view company button  */ 
.wpjobportal-company-box .wpjobportal-company-grid-view-company-button{
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-logo img {
    display: inline-block;
    
    max-width: 100%;
}


.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details {
    overflow: hidden;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title {
    font-size: 18px;
    font-weight: bold;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-title {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-company{
    font-size: 14px;
    font-weight: 500;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-location,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_type,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_category,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-salary,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-careerlevel,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-stoppublishing,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-apply_before,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-posted {
    margin-top: 4px;
}


.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-job_type .wjportal-job-type{
    color:#fff !important;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 3px;
    width: auto;
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-job_type .wjportal-job-type{
    color:#fff !important;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 3px;
    width: auto;
}


/*
.wpjobportal-layout-card .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data {
    padding:5px 10px;
    margin-bottom: 10px;
    margin-top: 0px;
    float: left;
    border:1px solid #ddd;
    margin-right: 4px;
}

*/
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-company{
margin-bottom: 10px;
}

.wpjobportal-layout-grid .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    /* Your styles here */
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.wpjobportal-company-box .wpjobportal-company-details .wpjobportal-company-field:last-of-type {
    /* Your styles here */
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 10px;
}


/*.wpjobportal-layout-card .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    margin-bottom: 10px;
}
*/

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: 14px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-col > div {
    margin-top: 4px;
    font-size: 14px;
    padding: 4px 0;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row i,
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-col i {
    min-width: 16px;
}


/* resume widget wordpress  */
/* Resume widget - matching job widget styling */
.wpjobportal-resume-widget-multi-style-wrapper {
    display: inline-block;
    width: 100%;
}

/* Column layouts */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-1 .wpjobportal-resume-box { width: 100%; }
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-2 .wpjobportal-resume-box { width: calc(50% - 20px); margin: 10px; padding: 15px 0;}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-3 .wpjobportal-resume-box { width: calc(33.3% - 20px); margin: 10px; padding: 15px 0;}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-cols-4 .wpjobportal-resume-box { width: calc(25% - 20px); margin: 10px; padding: 10px 0;}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box { 
    padding-bottom: 0px;
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-row {
    float: left;
    width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    float: left;
    padding: 10px;
    box-sizing: border-box;
}

/* Card layout */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* List layout */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    width: 100%;
    align-items: center;
}

/* Grid layout adjustments */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-name {
    margin: 0px 20px 0px;
    padding: 5px 0;
    font-size: 22px;
}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-title {
    margin-bottom: 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-details {
    width: 100%;
    text-align: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col {
    font-size: 14px;
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 10px;
    margin-bottom: 10px;
}

/* Photo styling */

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-photo {
    display: flex;
}
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo {
    width: 100%;
    text-align: center;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-photo img {
    display: block;
    border-radius: 4px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a{
    text-decoration: none;
}

/* Layout-specific photo styles */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-photo a {
    display: inline-block;
    overflow: hidden;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo a {
    padding: 7px;
    display: inline-block;
    overflow: hidden;
    margin-left: 15px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo a {
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--wpjp-border-color);
    border-radius: 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo img {
    display: inline-block;
    max-width: 100%;
    border-radius: 10px;
    justify-content: center;
}

/* Details section */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-details {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
}
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-details .wpjobportal-resume-details-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name {
    font-size: 18px;
    font-weight: bold;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-name {
    font-size: 20px;
    margin-bottom: 5px;
    
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-name {
    font-size: 22px;
    font-weight: bold;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-title {
    font-size: 16px;
    font-weight: 500;
}

/* Meta information */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-location,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-experience,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-education,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-salary {
    
}

/* Meta row styling */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
    font-size: 14px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-col > div {
    margin-top: 4px;
    font-size: 14px;
    padding: 4px 0;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row i,
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-col i {
    min-width: 16px;
}

/* View buttons */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 15px 10px 10px;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: var(--wpjp-secondary-color);
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.2s;
}

/* Card layout adjustments */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-title {
    margin-bottom: 10px;
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-widget-entity-view-button-wrap{
    padding: 0 15px;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box{
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.wpjobportal-layout-grid  .wpjobportal-job-box{
    overflow: hidden;
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-meta-col .wpjobportal-resume-widget-detail-field-data:last-of-type {
    margin-bottom: 10px;
}

/* company widget  */
/* Main wrapper */
.wpjobportal-companies-widget-wrapper {
    display: inline-block;
    width: 100% ;
}

/* Module heading */
.wpjobportal-companies-widget-wrapper .wjportal-mod-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
}

/* Grid layout columns */
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-1 .wpjobportal-company-box { width: 100%; }
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-2 .wpjobportal-company-box { width: calc(50% - 20px); margin: 10px ;}
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-3 .wpjobportal-company-box { width: calc(33.3% - 20px); margin: 10px;}
.wpjobportal-companies-grid-wrapper.wpjobportal-cols-4 .wpjobportal-company-box { width: calc(25% - 20px); margin: 10px;}

/* Company box - shared styles */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    float: left;
    background: #fff;
    margin-bottom: 15px;
    padding: 15px 0 0 ;
    box-sizing: border-box;
/*    transition: all 0.3s ease;*/
}

/* Grid layout specific styles */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box {
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-logo {
    margin-bottom: 10px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-logo img {
    display: inline-block;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title {
    margin-bottom: 10px;
    padding: 10px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-details {
    margin-top: 10px;
    font-size: 15px;
}

/* List layout specific styles */


.wpjobportal-companies-list-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px;
  flex-wrap:wrap;
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-logo {
    flex: 0 0 auto;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-logo img {
    display: block;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-title {
    flex: 1 1 auto;
}



.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-title a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-category,
.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-location,
.wpjobportal-companies-list-row  .wpjobportal-companies-list-col-posted {
    flex: 1 0 0;
    padding-right: 15px;
    font-size: 14px;
}
/*
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-field.wpjobportal-company-posted{
    margin-top: -10px;
}*/

/* Field styles - shared between layouts */


.wpjobportal-companies-list-row .wpjobportal-company-field{
    font-size: 14px;
    margin: 0;
}

.wpjobportal-company-field {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}



/* Icons */
.wpjobportal-company-field i {
    min-width: 16px;
}

.wpjobportal-companies-list-copmany-detail-wrap{
    display: flex;
    gap: 40px;
}

/* Hover effects */
.wpjobportal-companies-widget-company-row{
    display: inline-block;
    width: 100%;
}

div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row.wpjobportal-search-btn-full-width button {width: 100%;}

#wpjobportal-input-city{
    background: none !important;
    border: none !important;
}

/* widget carosel  */
.wpjobportal-slick-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    position: relative; /* Add this */
}

.wpjobportal-slick-nav-wrapper .slick-prev,
.wpjobportal-slick-nav-wrapper .slick-next {
    position: static;
    transform: none; /* Remove any transforms */
    width: auto; /* Allow buttons to size naturally */
    height: auto; /* Allow buttons to size naturally */
}

.wpjobportal-slick-nav-wrapper .slick-dots {
    display: flex !important;
    align-items: center; /* Vertically center dots */
    gap: 10px; /* Replace margin with gap for consistent spacing */
    padding: 0;
    margin: 0; /* Remove default margins */
    list-style: none;
    height: 100%; /* Take full height of wrapper */
}

.wpjobportal-slick-nav-wrapper .slick-dots li {
    margin: 0; /* Remove individual margins */
    display: flex;
    align-items: center;
}

.wpjobportal-slick-nav-wrapper .slick-dots button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    text-indent: -9999px; /* Hide text */
    overflow: hidden;
    padding: 0; /* Remove padding */
}
/* Responsive styles */
@media screen and (max-width: 768px) {
    .wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
    .wpjobportal-companies-list-header,
    .wpjobportal-companies-list-row {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .wpjobportal-companies-list-header {
        display: none;
    }

    .wpjobportal-companies-list-row {
        flex-wrap: wrap;
        padding: 15px;
    }

    .wpjobportal-companies-list-col-logo {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        padding-right: 0;
    }

    .wpjobportal-companies-list-col-title,
    .wpjobportal-companies-list-col-category,
    .wpjobportal-companies-list-col-location,
    .wpjobportal-companies-list-col-posted {
        flex: 1 0 100%;
        padding: 5px 0;
    }

    .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
        width: 100% !important;
        margin: 10px 0;
    }

    .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
        width: 100% !important;
        margin: 10px 0;
    }
}

/* color css from old   */
/* color css from old   */

/* --- Resume Widget Styles --- */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    color: var(--wpjp-body-font-color);
}


/* --- Job Widget Styles --- */
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a {
    color: var(--wpjp-body-font-color);
    text-decoration: none;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a:hover {
    color: var(--wpjp-primary-color);
}

/* Grid Specific CSS */
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title a {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title a:hover {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-company a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    color: var(--wpjp-body-font-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    background: var(--wpjp-card-background);
}


/* --- Companies Widget Styles --- */
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-companies-list-col-title a {
    color: var(--wpjp-primary-color);
}

.wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-secondary-color);
}

.wpjobportal-company-field {
    color: var(--wpjp-body-font-color);
}


/* --- Footer Specific Styles --- */
#footer .wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-resume-box {
    border-left-color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-meta-row {
    color: var(--wpjp-body-font-color);
}


#footer .wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-box {
    border-left-color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-box {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-company a:hover {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-meta-row {
    color: var(--wpjp-body-font-color);
}

#footer .wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    background: var(--wpjp-background-color);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-box,
.wpjobportal-companies-list-row {
    border: 1px solid var(--wpjp-border-color);
    color: var(--wpjp-body-font-color);
    background: var(--wpjp-card-background);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-companies-grid-wrapper .wpjobportal-company-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a {
    color: var(--wpjp-primary-color);
}

#footer .wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-secondary-color);
}

#footer .wpjobportal-company-field {
    color: var(--wpjp-body-font-color);
}


/* --- Buttons & Forms --- */
div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

div.wjportal-search-mod form.wjportal-form div.wjportal-form-btn-row button:hover {
    background: var(--wpjp-secondary-color);
}


/* --- Slick Slider --- */
.wpjobportal-slick-nav-wrapper .slick-next {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-slick-nav-wrapper .slick-next:hover {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}
.wpjobportal-slick-nav-wrapper .slick-next:focus {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}


.wpjobportal-slick-nav-wrapper .slick-prev {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}

.wpjobportal-slick-nav-wrapper .slick-prev:focus {
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-color: var(--wpjp-secondary-color);
}

.wpjobportal-slick-nav-wrapper .slick-prev:hover {
    background: var(--wpjp-primary-color);
    color: #fff;
    border-color: var(--wpjp-primary-color);
}

.wpjobportal-slick-nav-wrapper .slick-dots .slick-active button {
    background: var(--wpjp-primary-color);
    color: #fff;
}


/* --- Job Logos & Action Buttons --- */
/*.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-logo a {
    border: 2px solid var(--wpjp-primary-color);
    color: #fff;
    background: var(--wpjp-card-background);
}*/

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-all-jb-button:hover {
    background: var(--wpjp-primary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-view-jb-button:hover {
    background: var(--wpjp-secondary-color);
}


/* --- Company Buttons --- */
.wpjobportal-company-box .wpjobportal-company-grid-view-company-button {
    background: var(--wpjp-primary-color);
    color: #fff;
}

.wpjobportal-company-box .wpjobportal-company-grid-view-company-button:hover {
    background: var(--wpjp-secondary-color);
}

/*.wpjobportal-companies-grid-wrapper .wpjobportal-company-box {
    border-top: 4px solid var(--wpjp-primary-color);
}
*/

/* --- Meta Data & Layout Tweaks --- */
.wpjobportal-layout-grid .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data:last-of-type {
    background: var(--wpjp-background-color);
    border: 1px solid var(--wpjp-border-color);
    border-left: none;
    border-right: none;
}

.wpjobportal-company-box .wpjobportal-company-details .wpjobportal-company-field:last-of-type {
    background: var(--wpjp-background-color);
    border: 1px solid var(--wpjp-border-color);
    border-left: none;
    border-right: none;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-title {
    border-bottom: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-job-box {
    border-top: 4px solid var(--wpjp-primary-color);
}


/* --- Resume Grid/Card Specifics --- */
.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    border-radius: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box:hover {
    transform: translateY(-6px); 
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01); 
       
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-box {
    border: 1px solid var(--wpjp-border-color);
    border-top: 4px solid var(--wpjp-primary-color);
}
.wpjobportal-companies-list-col-logo a {
    background: var(--wpjp-card-background);
}

.wpjobportal-company-box .wpjobportal-company-logo a {
    border: 1px solid var(--wpjp-border-color);
    background: var(--wpjp-card-background);
}



.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-resume-photo a {
    border: 2px solid var(--wpjp-primary-color);
}

/* --- Resume Action Buttons --- */
.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button {
    background: var(--wpjp-secondary-color);
    color: #fff;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-all-button:hover {
    background: var(--wpjp-primary-color);
}


.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-resume-view-button:hover {
    background: var(--wpjp-primary-color);
}
.wpjobportal-carousel .wpjobportal-job-view-all-jb-button{
    display: none !important;
}
.wpjobportal-carousel .wpjobportal-resume-view-all-button{
    display: none !important;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card  {

}

.wjportal-popup-cnt{
    box-sizing: border-box;
}
.ui-datepicker{
    z-index: 1001 !important;
}
.wjportal-form-row.visible.js-form-custm-flds-wrp{
    display: none;
}
.wjportal-search-job-form .wjportal-form-row.visible.js-form-custm-flds-wrp{
    display: grid;
}
.wpjobportal-terms-and-conditions-wrap .wjportal-main-up-wrapper span.wpjobportal-form-chkbox-field{
    border:none;
}


.wjportal-popup-wrp .alert{padding: 8px 10px;width: 100%;background: #f7f7f7}
.wjportal-popup-wrp .alert img{margin-bottom: -5px}
.wjportal-popup-wrp .alert button{display: none;}
.wjportal-popup-wrp .alert.alert-danger{border: 1px solid red;}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right{
    display: flex;
    width: 25%;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: right;
    gap: 5px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-widget-detail-field-data .wpjobportal-job-widget-detail-field-data-value{
    font-weight: 600;
    color: var(--wpjp-secondary-color);
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-widget-detail-field-data.wpjobportal-job-job_type .wpjobportal-job-widget-detail-field-data-value{
color: #fff;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-salary{
    font-weight: bold;
    color: var(--wpjp-secondary-color);
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-location{
    font-size: 0.9rem;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap{
    display: flex;
    width: 100%;
    justify-content: right;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button{
    display: flex;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    background: var(--wpjp-secondary-color);
    color: #fff;
    border-radius: 6px;
    margin-top: 5px;
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button svg{
    width: 22px;
    height: auto;
    margin-left: 5px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button:hover{
    background: var(--wpjp-primary-color);
}
.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title .wpjobportal-job-widget-no-of-hits{
    padding: 5px;
    border:1px solid var(--wpjp-border-color);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    font-size: 13px;
    margin-right: 15px;
}

.wpjobportal-job-widget-multi-style-wrapper .wpjobportal-job-title .wpjobportal-job-widget-no-of-hits svg{
    display: flex;
    width: 14px;
    height: auto;


}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right{
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 10px;
    margin-top: 10px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap{
    width: 100%;
    border-top: 1px solid var(--wpjp-border-color);
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details-right .wpjobportal-job-details-right-view-button-wrap .wpjobportal-job-details-right-view-button{
    width: 100%;
    padding: 8px 15px;
    justify-content: center;
    margin-top: 10px;
}

.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details .wpjobportal-job-meta-col{
    display: flex;
    flex-direction: row;
    gap: 5px;
    font-size: var(--wpjp-body-font-size);
    color: var(--wpjp-body-font-color);
    flex-wrap: wrap;
}


.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-card .wpjobportal-job-details .wpjobportal-job-meta-col .wpjobportal-job-widget-detail-field-data{
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    /*font-size: var(--wpjp-body-font-size);*/
    font-size: 13px;
    /* 14px */
    color: var(--wpjp-body-font-color);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    transition: opacity 0.2s;
    background-color:#f3f4f6;
}
.wpjobportal-job-widget-multi-style-wrapper.wpjobportal-layout-list .wpjobportal-job-details-right .wpjobportal-job-details-right-location-salary-wrap{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
}
.wpjobportal-companies-widget-wrapper .wpjobportal-company-field{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap{
    display: flex;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: var(--wpjp-secondary-color);
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.2s;
}
.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link:hover{
    background: var(--wpjp-primary-color);
}

.wpjobportal-companies-list-copmany-noofjobs-wrap{
    background: #F0FDF4;
    color: #15803D;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
}

.wpjobportal-companies-list-copmany-noofjobs-wrap span.noofjobsdot{
    width: 6px;
    height: 6px;
    background: #15803D;
    border-radius: 50%;
    display: block;
}

.wpjobportal-companies-list-copmany-detailview-link-wrap .wpjobportal-companies-list-copmany-detailview-link svg{
    height: 14px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-copmany-detailview-link-wrap{
    width: 100%;
    margin-top: 15px;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box  .wpjobportal-companies-list-copmany-detail-wrap{
    flex-wrap: wrap;
    gap:0;
}



.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    color: var(--wpjp-secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: left;
    width: 100%;
    display: flex;
}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-primary-color);
    /* Same purple as login button */
    text-decoration: underline;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-col-logo{ 
    display: flex;
    margin-top: 30px;
    z-index: 999;
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box{
    padding: 15px;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        
}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-box-top-decoration{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background:#000 ;
    height: 100px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}

.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-company-field{
    margin-right: 10px;
}
.wpjobportal-companies-grid-wrapper .wpjobportal-company-box .wpjobportal-companies-list-copmany-noofjobs-wrap{
    position: absolute;
    top: 33px;
    right: 33px;
    z-index: 999;

}

.wpjobportal-companies-widget-wrapper .wpjobportal-companies-grid-wrapper .wpjobportal-company-box  .wpjobportal-companies-list-col-logo a{
    border-radius: 10px;
}


/* Specific gradients for variety - Unique light pastel for each company */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F4F6FF 0%, #DEE4FB 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FFF6F7 0%, #FFF0E3 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(1) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F5FEF8 0%, #CCFADD 100%);}

/* UPDATED: Airbnb - Soft Red */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FFF8F8 0%, #FAD6E5 100%); } 

/* UPDATED: Microsoft - Soft Sky Blue */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F6FBFF 0%, #F5DAF9 100%);}

.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(2) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #F3FEFF 0%, #CBFCFF 100%);}
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(1) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FEF7FF 0%, #A6E6C6 100%);}

/* UPDATED: Slack - Soft Purple */
.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(2) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FCF9FF 0%, #E2FDB8 100%); } 

.wpjobportal-companies-grid-wrapper div.wpjobportal-companies-widget-company-row:nth-of-type(3) .wpjobportal-company-box:nth-child(3) .wpjobportal-company-box-top-decoration { background: linear-gradient(135deg, #FEEFEF 0%, #FFB3B3 100%);}


.wpjobportal-companies-widget-wrapper .wpjobportal-companies-grid-wrapper .wpjobportal-company-box:hover {
    transform: translateY(-6px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01); 
            
}

/* Resume widget new style  */


.wpjobportal-layout-list .wpjobportal-resume-widget-detail-field-data{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-widget-entity-view-button-wrap{
    display: flex;
}

.wpjobportal-resume-widget-multi-style-wrapper .wpjobportal-widget-entity-view-button-wrap svg{
    height: 15px;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-box .wpjobportal-resume-details{
    width: 100%;
    justify-content: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-photo{
    justify-content: center;
}


.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-title a{
    color: var(--wpjp-body-font-color);
    text-decoration: none;
}

.wpjobportal-resume-widget-multi-style-wrapper.wpjobportal-layout-grid .wpjobportal-resume-meta-col .wpjobportal-resume-widget-detail-field-data{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.wjportal-main-up-wrapper .wpjobportal-terms-and-conditions-wrap span.wpjobportal-form-chkbox-field{
    border:none;
}

.wjportal-main-up-wrapper .js-col-md-12.js-form-wrapper.wpjobportal-terms-and-conditions-wrap{
    border:none;
}


.wjportal-main-up-wrapper .wjportal-form-upload .wjportal-form-upload-btn-wrp{
    position:relative;
}

.wjportal-main-up-wrapper .wjportal-form-upload .wjportal-form-upload-btn-wrp input[type=file]{
     position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: inline-block !important;
    cursor: pointer;
    opacity: 0;
    width: 240px;
    height: 60px;
    margin: auto;
}

/* --- WP Job Portal: Workplace Type Badges --- */

.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    /* 13px: the smallest size this plugin uses, and what NEW and URGENT beside
       it already take. 11px was under the floor and the only one left. */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
    /* Inline-start, not left: this badge sits after the facts beside it, and
       in a right-to-left page "after" is on the other side. It was the only
       thing on the jobs list that did not mirror. */
    margin-inline-start: 8px;
    margin-bottom: 10px;
}

.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* Remote Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-remote {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

/* Hybrid Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-hybrid {
    background-color: #faf5ff;
    color: #a855f7;
    border-color: #a855f7;
}

/* On-site Variant */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-onsite {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #d97706;
}


/* Remote Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-remote {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}

/* Hybrid Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-hybrid {
    background-color: #faf5ff;
    color: #a855f7;
    border-color: #a855f7;
}

/* On-site Variant */
.wjportal-view-job-page-wrapper  .wpjp-badge-onsite {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #d97706;
}



/* Hover State */
.wjportal-jobs-cnt-wrp .wjportal-jobs-info .wpjp-badge-mode:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
       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, #3baeda);
        /*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, #3baeda);
        color: #ffffff;
    }


    .wjportal-job-company-wrp{
        position: relative;
    }

    .wjportal-job-company-wrp .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-job-company-wrp .wpjp-badge-urgent-flag svg {
        margin-right: 4px;
    }

    .wjportal-view-job-title-wrp .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;
    }

    #wpjp-min-display{
        text-align: right;
    }

    /* ==========================================================================
    WP Job Portal - AI Match Score Badge (Option 1)
    ========================================================================== */
    .wpjp-ai-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        gap: 6px;
        border: 1px solid transparent;
        line-height: 1;
        white-space: nowrap;
        transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
    }

    .wpjp-ai-badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,.05);
    }

    .wpjp-ai-badge svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Excellent Match (90-100) */
    .wpjp-ai-excellent {
        background: #ecfdf5;
        color: #15803d;
        border-color: #86efac;
    }

    /* Strong Match (75-89) */
    .wpjp-ai-good {
        background: #f0fdf4;
        color: #166534;
        border-color: #bbf7d0;
    }

    /* Good Match (60-74) */
    .wpjp-ai-avg {
        background: #fffbeb;
        color: #b45309;
        border-color: #fde68a;
    }

    /* Partial Match (40-59) */
    .wpjp-ai-partial {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fdba74;
    }

    /* Limited Match (0-39) */
    .wpjp-ai-poor {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    /* Job listing placement */
    .wjportal-jobs-right-wrp .wpjp-ai-badge {
        margin-top: 4px;
    }

/* --- The menu entry for the page you are on --- */
/*
 * Extensions mark their current menu entry with .is-active, and until now each
 * decided for itself what that looked like: the Recruiting menu filled the row
 * with the primary colour and set the text white - 2.5:1, below any readable
 * threshold and the thing the row most needs to be - while the Marketplace
 * entry beside it marked nothing at all, so a person on Promotion Schedule
 * could not tell from the menu where they were.
 *
 * One treatment, stated here, for every entry in this menu. The current row is
 * a quiet fill with the text in the heading colour and a bar of the primary
 * down its edge: the accent carries the colour, where contrast does not matter,
 * and the words stay at the contrast of the rest of the menu.
 */
.wjportal-main-up-wrapper .wjportal-cp-list.is-active > .wjportal-list-anchor {
    background: var(--wpjp-background-color, #f6f6f6);
    border-radius: 8px;
    box-shadow: inset 3px 0 0 var(--wpjp-primary-color, #3baeda);
}

.wjportal-main-up-wrapper .wjportal-cp-list.is-active .wjportal-cp-link-text {
    color: var(--wpjp-secondary-color, #333333);
    font-weight: 600;
}

/*
 * The icon in front of each menu entry (wpjobportal_cp_menu_icon()), the same
 * for Core's entries and every add-on's. It has no colour of its own: it takes
 * the row's, so it is the text colour at rest, the primary colour on hover and
 * the heading colour on the current entry, in whatever colours the site uses.
 */
.wjportal-cp-menu-icon {
    display: inline-grid;
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    place-items: center;
    color: inherit;
}

.wjportal-main-up-wrapper .wjportal-cp-list.is-active .wjportal-cp-menu-icon {
    color: var(--wpjp-secondary-color, #333333);
}

/*
 * The menu's section headings, the same size in both control panels.
 *
 * "Manage Jobs" and "My Resumes" are the same thing on two screens and were
 * two sizes, for no reason either screen could give. Stated here, after both
 * panel stylesheets, so one answer holds on both.
 */
.wjportal-main-up-wrapper h3.wjportal-section-title,
.wjportal-main-up-wrapper summary.wjportal-section-title {
    font-size: var(--wpjp-body-font-size);
}

/* --- Waiting on featured approval --- */
/*
 * The markup for this has always been rendered - a job, a company or a resume
 * whose request to be featured is sitting in the queue carries
 * .wjportal-featured-waiting beside its title - and no stylesheet has ever
 * said what it looks like. So it arrived as bare text run against the title:
 * "PHP Developer NEW Featured Approval Waiting", with nothing to mark where
 * the name ends and the status begins.
 *
 * It is a badge, and it stands beside NEW and URGENT, so it is built like
 * them - the same size, weight, corner and padding - in the warning colour
 * those two leave free. --wpjp-ds-color-warning is chosen to carry white text:
 * white on it is 5.2:1, where the old amber of the status pills was 2.4:1.
 */
.wjportal-featured-waiting {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 8px;
    background-color: var(--wpjp-ds-color-warning, #a15c00);
    color: #ffffff;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/*
 * Empty once the request is approved: the same span is printed either way and
 * the text is dropped, which left a coloured 16px block sitting after the
 * title with nothing in it.
 */
.wjportal-featured-waiting:empty {
    display: none;
}

/* The star, and the wrapper that holds it beside the title. */
.wjportal-featured-waiting::before {
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.wjportal-featured-tag-wrp {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.5rem;
}

/* --wpjp-- Collapsible control panel menu sections --wpjp-- */
/*
 * The heading is now the control that opens its section, so it keeps the
 * type and the rule underneath it that it already had and gains a count
 * and a chevron. Everything here hangs off <details>/<summary>, which
 * means the open and closed states, the keyboard and the screen reader
 * announcement all come from the browser rather than from a script.
 */
.wjportal-cp-group > summary.wjportal-section-title {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    list-style: none;
}

.wjportal-cp-group > summary.wjportal-section-title::-webkit-details-marker {
    display: none;
}

.wjportal-cp-group-name {
    flex: 1 1 auto;
}

.wjportal-cp-group-count {
    color: var(--wpjp-body-font-color);
    font-size: 13px;
    font-weight: 400;
}

.wjportal-cp-group > summary.wjportal-section-title::after {
    block-size: 8px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    flex: 0 0 auto;
    inline-size: 8px;
    /*
     * The chevron is two borders of a turned square, so the V it draws sits
     * in one half of the square - a quarter of its diagonal (8px x 1.414 / 4)
     * off the centre the row aligns it to: below when it points down, above
     * when it points up. The shift puts the V itself level with the count.
     */
    transform: translateY(-2.8px) rotate(45deg);
    transition: transform 0.15s ease;
}

.wjportal-cp-group[open] > summary.wjportal-section-title::after {
    transform: translateY(2.8px) rotate(-135deg);
}

.wjportal-cp-group > summary.wjportal-section-title:focus-visible {
    outline: 2px solid var(--wpjp-primary-color);
    outline-offset: 2px;
}

/*
 * No ring when the heading is clicked. A click focuses the <summary>, and
 * block themes outline anything focused (Twenty Twenty-Five:
 * :where(.wp-site-blocks :focus)), so opening the section drew a box round
 * it. Keyboard focus still gets the ring above.
 */
.wjportal-cp-group > summary.wjportal-section-title:focus:not(:focus-visible) {
    outline: none;
}

/*
 * A folded section's links keep the 4px apart the open sections' links do.
 * The open ones sit in .wjportal-cp-short-links-list, a flex column with a
 * 4px gap; a folded section's body was a plain block, so its twelve entries
 * ran together with nothing between them.
 */
.wjportal-cp-group-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .wjportal-cp-group > summary.wjportal-section-title::after {
        transition: none;
    }
}

/* --wpjp-- The job card's description is an excerpt --wpjp-- */
/*
 * Two lines and an ellipsis, not the whole posting.
 *
 * The description partial prints what the employer wrote, and an employer
 * writes a job advert - so a card on the job list, and the Job Info card on
 * the applied-resume screen that reuses it, carried several hundred words and
 * pushed everything under them off the screen. Elegant Design had clamped it
 * for its own cards; Core never did, so on Core it ran to full length.
 *
 * The block children are laid out inline first. -webkit-line-clamp counts
 * line boxes, and a description made of <p> elements gives it blocks rather
 * than lines, so without this the clamp has nothing to count and no ellipsis
 * appears.
 */
.wjportal-jobs-list-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /*
     * The same gutter the rest of the card keeps.
     *
     * The excerpt is printed after the card's inner wrapper closes, so it is a
     * sibling of the padded part rather than inside it, and it ran from one
     * edge of the card to the other while every other line of the card stood
     * 24px in. 24px is what that wrapper uses; this is the same number rather
     * than a new one, so the two cannot come apart later.
     */
    padding-inline: 24px;
    /*
     * Margin, not padding, below it. overflow:hidden clips at the padding
     * edge, so a bottom padding left a strip in which the third line showed
     * cut in half under the ellipsis.
     */
    margin-block-end: 16px;
}

.wjportal-jobs-list-description :is(p, ul, ol, h1, h2, h3, h4, h5, h6),
.wjportal-resume-list-description :is(p, ul, ol, h1, h2, h3, h4, h5, h6) {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* Without this the last word of one list item runs into the next. */
.wjportal-jobs-list-description li::after,
.wjportal-resume-list-description li::after {
    content: " ";
}

/*
 * An editor's line breaks ended the excerpt early: the ellipsis landed after
 * the first sentence, as "deliverables....", with the lines below it cut. The
 * newline that follows each <br> still separates the words.
 */
.wjportal-jobs-list-description br,
.wjportal-resume-list-description br {
    display: none;
}

/*
 * The resume card's excerpt, the same way: two lines and an ellipsis, in the
 * 24px gutter of the card part above it rather than against the card's edge.
 */
.wjportal-resume-list-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    padding-inline: 24px;
    margin-block-end: 16px;
}

/* --wpjp-- Front-end consistency fixes (visual pass, 2.7.0) --wpjp-- */

/*
 * Job detail on a phone. For a logged-in job seeker the page carries the quick
 * apply form, and the card (a flex item) would not shrink below that form's
 * width: 25px of every card hung off the right edge. Long unbroken values (an
 * email address) wrap instead of pushing the card out.
 */
.wjportal-main-up-wrapper :is(.wjportal-company-job-viewjob-wrp, .wjportal-company-job-viewjob-leftwrp) {
    min-width: 0;
}
/* Allowed to shrink, the job and its side panel would squeeze side by side on
   a phone; there they stack, each the full width. */
@media (max-width: 782px) {
    .wjportal-main-up-wrapper .wjportal-company-job-viewjob-wrp > * {
        flex: 1 1 100%;
    }
}
.wjportal-main-up-wrapper .wjportal-job-company-info-val,
.wjportal-main-up-wrapper .job-detail-jobapply-message-link {
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* A list's chosen option stays on one line; a long one ends in an ellipsis
   rather than wrapping inside the box and being cut in half. */
.wjportal-main-up-wrapper select,
.wpjobportal-candidate-portal select {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * Jobs by Categories and Resumes by Categories: the same grid as Jobs by Types.
 * The rows of three were blocks, so every card sat alone in a third of the
 * width, one under another; each card also boxed its label a second time.
 */
/*
 * The column count is the "Categories Per Row" setting, which the template
 * passes in; an auto-fit grid here had ignored it and set as many columns as
 * the width allowed.
 */
.wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp {
    display: grid;
    grid-template-columns: repeat(var(--wpjp-cat-cols, 3), minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 1080px) {
    .wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp {
        grid-template-columns: repeat(var(--wpjp-cat-cols-md, 2), minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* The id outranks the older Jobs by Categories rule that keeps the rows as flex boxes. */
.wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp > .wjportal-by-categories-row-wrp {
    display: contents;
}
.wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp > .wjportal-by-categories-row-wrp > .wjportal-by-category-wrp {
    width: 100% !important; /* the template writes a width for its old rows */
    margin: 0;
}
.wjportal-main-up-wrapper div#wpjobportal-wrapper.wjportal-by-categories-main-wrp > .wjportal-by-categories-row-wrp > .wjportal-by-category-wrp > a {
    background: transparent;
    padding: 0;
}

/* Every form's Save button spans the form, Cancel beside it when there is one. */
.wjportal-main-up-wrapper .wjportal-form-btn-wrp:not(.wjportal-login-to-apply-btn-wrap):not(.wjportal-apply-package-apply-now-button):not(.wjportal-apply-as-visitor-btn-wrap) > :is(input, button, a) {
    flex: 1 1 0;
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* My Jobs on a phone: the card's actions as an even two-column grid instead of
   a ragged stack of buttons of every width. */
@media (max-width: 600px) {
    .wjportal-main-up-wrapper .wjportal-jobs-list-btm-wrp .wjportal-jobs-action-wrp {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .wjportal-main-up-wrapper .wjportal-jobs-list-btm-wrp .wjportal-jobs-action-wrp > * {
        width: 100%;
        margin: 0;
        justify-content: center;
        text-align: center;
    }
}

/* Company detail: the tagline under the name, not after a hyphen. */
.wjportal-main-up-wrapper .wjportal-company-salogon {
    display: block;
    font-size: var(--wpjp-body-font-size);
    font-weight: 400;
    color: var(--wpjp-body-font-color);
}

/* The city search field (tokenInput) at the size of the field beside it. */
.wjportal-main-up-wrapper :is(ul[class*="token-input-list"], ul[class*="token-input-list"] input) {
    font-size: inherit;
}

/*
 * "Are you new in WP Job Portal?" - the role choice.
 * The template draws one explained card per role; only Elegant Design's
 * sheet styled them, so the standard design ran both roles together as one
 * line of text. The same cards here, in Core's own colours, in the form's
 * usual value column.
 */
.wjportal-main-up-wrapper .wjportal-role-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    inline-size: 100%;
}

.wjportal-main-up-wrapper .wjportal-role-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 20px;
    background: var(--wpjp-card-background, #fff);
    border: 1px solid var(--wpjp-border-color, #e9ecef);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.wjportal-main-up-wrapper .wjportal-role-choice:hover {
    border-color: var(--wpjp-primary-color, #3baeda);
    box-shadow: var(--wpjp-card-shadow, 0 4px 15px rgba(0, 0, 0, .08));
}

/* The radio stays a real radio - focusable and announced - beside the words. */
.wjportal-main-up-wrapper .wjportal-role-choice-input {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    min-height: 0;
    margin: 3px 0 0;
    accent-color: var(--wpjp-primary-color, #3baeda);
}

.wjportal-main-up-wrapper .wjportal-role-choice:has(.wjportal-role-choice-input:checked) {
    border-color: var(--wpjp-primary-color, #3baeda);
    background: color-mix(in srgb, var(--wpjp-primary-color, #3baeda) 6%, var(--wpjp-card-background, #fff));
}

.wjportal-main-up-wrapper .wjportal-role-choice:has(.wjportal-role-choice-input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpjp-primary-color, #3baeda) 35%, transparent);
}

.wjportal-main-up-wrapper .wjportal-role-choice-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
}

.wjportal-main-up-wrapper .wjportal-role-choice-title {
    font-size: var(--wpjp-body-font-size, 17px);
    font-weight: 700;
    color: var(--wpjp-title-color, #333);
}

.wjportal-main-up-wrapper .wjportal-role-choice-desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--wpjp-body-font-color, #575757);
}

/*
 * Chosen dropdown lists. chosen.css sets 15px lines for 13px text; at the
 * portal's 17px a name that wraps overlapped the option below it, so a list
 * of long job names read as two options and a smear. The hovered option kept
 * its text colour on no background. One rule for every Chosen list.
 */
.wjportal-main-up-wrapper .chosen-container .chosen-results li {
    padding: 8px 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wjportal-main-up-wrapper .chosen-container .chosen-results li.highlighted {
    color: #fff;
    background: var(--wpjp-primary-color, #3baeda);
}