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

/* ----------------------------------------- */
/* == 1. Global Styles & Variables         == */
/* ----------------------------------------- */
@import url('job_portal_variables.css');


.wjportal-main-up-wrapper{
  width: 100%;
}

.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;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}
div.wjportal-breadcrumbs-wrp {
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 2px;
    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; /* Allows items to wrap on smaller screens */
    gap: 8px; /* Space between items */
}

/* --- 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);
  }

#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);
}

#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;
}
.wjportal-act-btn:hover {
    background-color: var( --wpjp-secondary-color); 
    color:#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;
}

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: 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;
}

.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);
}
.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;
}

/* 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;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], 
input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], 
input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], 
textarea, select{
  border-radius: 8px !important;
  height:55px !important;
  color:var(--wpjp-body-font-color) !important;
  border-color: var(--wpjp-border-color) !important;
  background-color: white !important;
}

/* ----------------------------------------- */
/* == 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: grid;
    justify-content: center;
    width: 100%;
  }
  .wjportal-resume-detail-left-wrapper .wjportal-resume-left-section{
    position: relative;
  }
}

/* ----------------------------------------- */
/* == 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(--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%;
}

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(--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;
    width: 100%;
  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-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 {
   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: #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;
}

.wjportal-jobs-act-btn-apply:hover {
  
}


/* ----------------------------------------- */
/* == 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: #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 {
	   background-color: #f28d19;
    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{
 background-color:#bb0906;
    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 --- */
#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;
}

/* Hide the duplicate Stripe image that is outside the form */
.wjportal-payemt-method-stripe img {
    max-height:115px;
}

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);
}
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:#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;
  /* 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-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:first-child::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");
}

/* 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(--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-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: #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 {
    font-family: Arial, sans-serif;
    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 {
    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-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;
    margin: 20px 15px 5px 0;
    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: #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:#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-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: #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: #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;
}

#comments-label {
  font-size: var(--wpjp-body-font-size);
  font-weight: 600;
  color: var(--wpjp-body-font-color);
}

/* --- Textarea Styling --- */
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:#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;
}

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

span.wjportal-resume-job-type{
    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: #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: #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:nth-of-type(1)::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:nth-of-type(2)::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:nth-of-type(3)::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:nth-of-type(4)::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: #fff !important;
}

div.wjportal-job-applied-resume div.wjportal-section-heading {
    width: 100%;
    margin-bottom: 25px;
    font-size: var(--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;
}
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;
}
input#reset:hover{
  background-color: var(--wpjp-secondary-color);
    color:#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: 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 focused */
.wjportal-resume-act-actions-dropdown:hover .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;
    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 */
  mask-size: contain;
  mask-repeat: no-repeat;
  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 */
  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-size: contain;
  mask-repeat: no-repeat;
  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 {
  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;
}

.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;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Specific Icons */
.wjportal-resume-detail-wrapper .wjportal-resume-adv-act-btn.wjportal-list-act-btn-pdf::before {
  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 {
  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 {
  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 {
  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: #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(--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(--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;
  
}

.wjportal-coverletter-act-btn:hover {
  background-color: var(--wpjp-secondary-color);
  color: #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:#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:#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 */
#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;
}
#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-filter-search-field-wrp ul.wpjobportal-input-list-wpjobportal, .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;
}

.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;
}

.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: #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: #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;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

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

/* Created Icon (Calendar/Clock) */
.wjportal-company-data-text-created::before {
  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) */
  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 --- */
.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;
}

.frontend.updated p {
  background-color: transparent;
}

/* --- Icon using ::before pseudo-element --- */
.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 --- */
.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 --- */
.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 --- */
.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 --- */
.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 --- */
.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 --- */
.visitor-apply-job-jobinforamtion-message img {
    display: none;
}

/* --- Icon using ::before pseudo-element --- */
.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;
}
.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);
}
.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,
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-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

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


/* --- Icon Implementation --- */
.wjportal-show-contact-det-btn::before,
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: #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 */
        #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%;
        }

        #loginform-custom p:last-child {
            border-bottom: none;
        }

        /* Style the labels */
        #loginform-custom label {
               font-weight: 500;
    color: var(--wpjp-secondary-color);
    text-align: right;
    padding-top: 12px;
    font-size: var(--wpjp-body-font-size);
        }
        #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 */
        #loginform-custom .login-username label::after,
        #loginform-custom .login-password label::after {
            content: ' *';
            color: #6742f5;
            font-weight: 600;
        }

        /* Style the input fields */
        #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;
        }

        #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 */
        #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;
        }

        #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;
        }
        
        #loginform-custom .login-remember input {
            margin-right: 0.5rem;
            width: 16px;
            height: 16px;
        }

        /* "Login" button row */
        #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%;
        }
        #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;
        }

        #loginform-custom #wp-submit:hover {
            background-color: #5a38d1;
        }
        
        #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) {
            body {
                padding: 1rem;
            }
            
            #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;
            }

            #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-form-input-field,
.wjportal-form-select-field,
.wjportal-form-textarea-field,
.wpjobportal-input-list-wpjobportal
.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;
}

 .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-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,
.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-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-form-value .chosen-container .chosen-results li.active-result:hover{
  color: #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-form-select-field ,
.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-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-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 */
#wp-description-wrap, .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;
}
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: #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");
  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;
}
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%;
}
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-form-btn,
.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;
  gap: 8px;
  text-transform: none;
  line-height: inherit;
}
.wjportal-form-btn:hover,
.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 */
.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; 
}
.wp-editor-wrap, .wjportal-form-upload{
    width: 100%;
}

        /* Card Styling (Kept as is) */
.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;
}
       
h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* semibold */
    margin-bottom: 1rem;
    color: #1f2937; /* gray-800 */
}

/* Group Container (Kept as is) */
.wjportal-form-value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* 3 units of gap */
}
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;
}
label#foruf_checkbox1{
    font-weight: 500;
}
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;
}
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) --- */
.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 --- */
.alert-danger img {
    display: none;
}

/* --- Add a new SVG icon using a pseudo-element --- */
.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 --- */
.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;
}

.alert-danger .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Replace the '×' with a cleaner SVG icon --- */
.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 --- */
.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-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-form-upload:hover {
  border-color: var(--wpjp-primary-color);
  background-color: #fff;
}
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);
}

div#jsresume_sectionid1,div#jsresume_sectionid2,div#jsresume_sectionid3,div#jsresume_sectionid4,div#jsresume_sectionid5,
div#jsresume_sectionid6,div#jsresume_sectionid7,div#jsresume_sectionid8,div#jsresume_sectionid9,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-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;
}
.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: 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: #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: #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: #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) --- */
.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) --- */
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 --- */
a.page-numbers:hover {
  
  border-color: var(--wpjp-secondary-color);
  background-color: var(--wpjp-secondary-color);
  color: #fff !important;
}

/* --- Style for the Current/Active Page --- */
.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 */
.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);
  max-width: 600px;
  margin: 2rem auto; /* Centers the component */
}

/* --- 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;
  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;
  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: #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(--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: #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: #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-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) */
        #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;
        }

        #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 */
        #stripe-form {
            display: block;
            margin-top: 15px;
                width: 100%;
                text-align: center;
        }
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);
}
.stripe-button-el span{height: unset;font-size: 17px !important;}

.stripe-button-el span{background-image: none !important; background-color: unset !important; box-shadow: unset !important;}

.stripe-button-el:hover,
button.stripe-button-el:hover,.stripe-button-el span:hover {
    background: #0f67d6 !important;
}

.stripe-button-el {width: 100%;}

        /* Targeting the Stripe generated button element */
        .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 */
        }

        .stripe-button-el:hover {
            background-color: #4355a6; /* Darker shade on hover */
        }

        /* 5. Mobile Responsiveness */
        @media (max-width: 600px) {
            #stripe-wrap {
                padding: 15px;
                margin: 10px;
                border-radius: 8px;
            }

            .stripe-button-el {
                font-size: 16px;
                padding: 10px 0;
            }
        }
   /* 1. Main Wrapper Styling */
        #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;
        }

        #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 0;
            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) {
            #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%;
    background: var(--wpjp-primary-color);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 8px;
   display: flex;
    justify-content: center;
}


.wjportal-packages-list .wjportal-pkg-list-item-act-btn:hover {
  background-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");
  mask-size: contain;
  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 =========================
==================================*/
    
p.login-username ,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;
  }

 .login-username label , 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(--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;
}
input#rememberme{
    font-size: var(--wpjp-body-font-size);
}
.wjportal-form-reg-btn:hover {
background-color: var(--wpjp-secondary-color);
    color: #fff !important;
}
form#loginform-custom p.login-submit {
    border-top: 1px solid black;
    padding-top: 20px;
    margin-bottom: 0;
}

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;
}
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 */
::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: 9998;
    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: 9999;
    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;
}


.stripe-button-el:hover,
button.stripe-button-el:hover {
    background: #0f67d6 !important;
}

/* Ensure the Stripe inner span displays properly */
.stripe-button-el > span,
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;
  }
  body {
    padding: 1rem;
  }
  .wjportal-form-wrp {
    padding: 1.5rem;
  }
div.wjportal-jobdetail-wrapper div.wjportal-job-company-wrp div.wjportal-job-company-cnt{
    width: 100%;
    padding-left: 0;
    }
}

/* ----------------------------------------- */
/* == 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;}
}

@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%;}


}

@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,
#popup_message::before,
.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 ,
 .frontend.updated::before ,
 .wjportal-visitor-msg::before ,
 .frontend.error::before ,
 .visitor-apply-job-jobinforamtion-message::before ,
 .wjportal-show-contact-det-btn::before,
 .wpjobportal-terms-and-conditions-wrap a::before,
 .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>');
}

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 {
    background-color: #28a745; /* Green color */
    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";
    gap: 0rem 1.5rem; /* 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-list-row .wpjobportal-companies-list-col-logo img {
    display: block;
    width: 100px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
    border: 1px solid #eee;
        padding: 10px;
}

/* Title row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title {
    grid-area: title; /* Assigns this div to the 'title' area */
    align-self: end; /* Aligns title to the bottom of its cell */
    overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.wpjobportal-companies-list-row .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;
    
    /* Prevents long titles from breaking the layout */
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wpjobportal-companies-list-row .wpjobportal-companies-list-col-title a:hover {
    color: var(--wpjp-primary-color); /* Same purple as login button */
    text-decoration: underline;
}

/* Details row in the content column */
.wpjobportal-companies-list-row .wpjobportal-companies-list-copmany-detail-wrap {
    grid-area: details; /* Assigns this div to the 'details' area */
    align-self: start; /* Aligns details to the top of its cell */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between Location and Posted */
    padding-top: 0.5rem;
}
.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;
    color: var(--wpjp-secondary-color);
    background-color: #fff; /* 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.wpjobportal-cols-1 {
    width: 100%;
}

/* The main list item card */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-box {
    display: flex;
    align-items:flex-start;
    gap: 1.5rem; /* 24px */
    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: 1.5rem; /* 24px */
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break width */
        border: 1px solid var(--wpjp-border-color);
       
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-box.wpjobportal-floatbox{
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 .wpjobportal-layout-list.wpjobportal-cols-1 .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-cols-1 .wpjobportal-job-logo {
    flex-shrink: 0; /* Prevents logo from shrinking */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .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-cols-1 .wpjobportal-job-widget-detail-field-data.wpjobportal-job-apply_before{
        color:#a11616 ;
}
/* Main details section (grows to fill space) */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-details {
    flex-grow: 1;
    min-width: 0; /* Fix for flexbox overflow */
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title {
    font-size: var(--wpjp-sub-heading);
    font-weight: 600;
    margin-bottom: 0.25rem; /* 4px */
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title a {
    color:var(--wpjp-secondary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-title a:hover {
    text-decoration: underline;
    color:var(--wpjp-primary-color);
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company {
    font-size: var(--wpjp-body-font-color); 
    font-weight: 500;
    color: var(--wpjp-primary-color);
    margin-bottom: 0.75rem; /* 12px */
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company a {
    color: var(--wpjp-primary-color);
    text-decoration: none;
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-company a:hover {
    text-decoration: underline;
    color:var(--wpjp-secondary-color);
    
}

/* Wrapper for the metadata items */
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-job-meta-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on small screens */
    gap: 0.75rem 1.5rem; /* 12px row gap, 24px column gap */
    padding-top: 0.75rem; /* 12px */
    border-top: 1px solid #f3f4f6; /* Light divider */
}

/* Individual metadata item */
.wpjobportal-layout-list.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); /* 14px */
    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;
    display: grid;
    /* Creates a responsive grid:
       - minmax(320px, 1fr) ensures cards are at least 320px wide
       - auto-fit fills the space
    */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    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;
    
    /* Use Grid to lay out the logo and details */
    display: grid;
    grid-template-columns: auto 1fr; /* col 1 for logo, col 2 for details */
    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;
    flex-direction: column;
    gap: 0.65rem; /* Space between each meta item */
    margin-top: 1.25rem;
    font-size: var(--wpjp-body-font-size);
    color:var(--wpjp-body-font-color);
    border-top: 1px solid var(--wpjp-border-color);
    padding-top: 1.25rem;
}

/* 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.5rem; /* Space between icon and text */
    line-height: 1.5;
    justify-content: flex-start;
}

/* 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: 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: #f8fafc; /* 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: 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-cols-1 .wpjobportal-resume-widget-multi-style-wrapper {
    width: 100%;
    background-color: #f8fafc; /* 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-cols-1 .wpjobportal-resume-row {
    padding: 10px 0; /* Vertical margin between boxes */
    border-bottom: none; /* No separator line */
    
}


.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-row:last-child {
    padding-bottom: 0;
}

/* 3. Resume Box (List Item Card) */
.wpjobportal-layout-list.wpjobportal-cols-1 .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-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-list.wpjobportal-cols-1 .wpjobportal-resume-photo {
    flex-shrink: 0;
    margin-bottom: 0; /* Removed vertical margin */
    margin-right: 15px; /* Added horizontal spacing */
}
.wpjobportal-layout-list.wpjobportal-cols-1 .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-cols-1 .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-cols-1 .wpjobportal-resume-name {
    margin-bottom: 2px;
}
.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-name a {
    font-size: var(--wpjp-sub-heading); /* Slightly smaller name for list view */
    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-list.wpjobportal-cols-1 .wpjobportal-resume-name a:hover {
    color: var(--wpjp-primary-color);
    text-decoration: underline;
}

.wpjobportal-layout-list.wpjobportal-cols-1 .wpjobportal-resume-title a {
    font-size:var(--wpjp-body-font-size); /* Smaller title */
    font-weight: 500;
    color: var(--wpjp-primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 5px; /* Reduced vertical spacing */
}
.wpjobportal-layout-list.wpjobportal-cols-1 .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;
    border-top: 1px solid #f3f4f6;
}

/* 7. Meta Information - FULL-WIDTH STACKED FIELDS (NOW LEFT ALIGNED) */
.wpjobportal-layout-list.wpjobportal-cols-1 .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-cols-1 .wpjobportal-resume-widget-detail-field-data {
    line-height: 1.4;
    padding: 0;
}

/* Highlight specific meta data */
.wpjobportal-layout-list.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-list.wpjobportal-cols-1 .wpjobportal-resume-view-all-button {
    display: 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-cols-1 .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-direction: column;
    gap: 10px; /* 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 {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 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;
}

/* 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: inline-block;
    width: 100%;
}

div.wjportal-job-by-mod div.wjportal-job-by div.wjportal-job-by-item {
    display: flex;
    width: 100% !important;
    padding: 10px 0;
    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;}