/* =========================================================
   JS Jobs Modern Core
   Scope: #js_jobs_main_wrapper
   Notes: Shared shell, menu, title, breadcrumbs and basic actions.
          Do not add page-specific form/list layouts here.
   ========================================================= */
#js_jobs_main_wrapper.jsjobs-modern-form-page,
#js_jobs_main_wrapper.jsjobs-modern-page {
    width: min(100%, 980px);
    max-width: 980px;
    margin: 0 auto 56px;
    padding: 20px 22px 32px;
    border: 1px solid var(--jsjobs-border-soft);
    border-radius: var(--jsjobs-radius-xl);
    background: var(--jsjobs-surface);
    box-shadow: var(--jsjobs-shadow-lg);
    color: var(--jsjobs-text);
    font-family: var(--jsjobs-font-ui);
    box-sizing: border-box;
    overflow: visible;
}


#js_jobs_main_wrapper.jsjobs-modern-form-page *,
#js_jobs_main_wrapper.jsjobs-modern-page * {
    box-sizing: border-box;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page::before,
#js_jobs_main_wrapper.jsjobs-modern-page::before {
    content: none;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper,
#js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    padding: 6px;
    border: 1px solid var(--jsjobs-border-soft);
    border-radius: 16px;
    background: var(--jsjobs-surface);
    box-shadow: var(--jsjobs-shadow-sm);
    overflow: visible;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_link,
#js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--jsjobs-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--jsjobs-transition-fast), border-color var(--jsjobs-transition-fast), color var(--jsjobs-transition-fast), transform var(--jsjobs-transition-fast);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_link:hover,
#js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_link.selected,
#js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_link:hover,
#js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_link.selected {
    border-color: var(--jsjobs-border);
    background: var(--jsjobs-primary-soft);
    color: var(--jsjobs-primary-hover);
    transform: translateY(-1px);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_right_link,
#js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_right_link {
    margin-inline-start: auto;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page .jsjobs-main-page-title,
#js_jobs_main_wrapper.jsjobs-modern-page .jsjobs-main-page-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 0;
    margin: 0 0 12px;
    padding: 19px 20px;
    border: 0;
    border-radius: 0;
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    float: none;
    clear: both;
    border: 1px solid var(--jsjobs-border);
    border-radius: 17px;
    background: var(--jsjobs-primary-subtle);
    color: var(--jsjobs-text-strong);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page .jsjobs-main-page-title::before,
#js_jobs_main_wrapper.jsjobs-modern-page .jsjobs-main-page-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 30px;
    border-radius: var(--jsjobs-radius-pill);
    background: var(--jsjobs-primary);
    transform: translateY(-50%);
}
#js_jobs_main_wrapper.jsjobs-modern-form-page .js_controlpanel_section_title,
#js_jobs_main_wrapper.jsjobs-modern-page .js_controlpanel_section_title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 0;
    margin: 0 0 12px;
    padding: 19px 20px;
    border: 0;
    border-radius: 0;
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    float: none;
    clear: both;
    border: 1px solid var(--jsjobs-border);
    border-radius: 17px;
    background: var(--jsjobs-primary-subtle);
    color: var(--jsjobs-text-strong);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page .js_controlpanel_section_title::before,
#js_jobs_main_wrapper.jsjobs-modern-page .js_controlpanel_section_title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 30px;
    border-radius: var(--jsjobs-radius-pill);
    background: var(--jsjobs-primary);
    transform: translateY(-50%);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page .jsjobs-breadcrunbs-wrp,
#js_jobs_main_wrapper.jsjobs-modern-page .jsjobs-breadcrunbs-wrp {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    float: none;
    clear: both;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #jsjobs-breadcrunbs,
#js_jobs_main_wrapper.jsjobs-modern-page #jsjobs-breadcrunbs {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 9px 13px;
    border: 1px dashed #d1d5db;
    border-radius: var(--jsjobs-radius-pill);
    background: var(--jsjobs-surface-soft);
    color: var(--jsjobs-muted);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #jsjobs-breadcrunbs ul,
#js_jobs_main_wrapper.jsjobs-modern-page #jsjobs-breadcrunbs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #jsjobs-breadcrunbs li,
#js_jobs_main_wrapper.jsjobs-modern-page #jsjobs-breadcrunbs li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--jsjobs-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #jsjobs-breadcrunbs li + li::before,
#js_jobs_main_wrapper.jsjobs-modern-page #jsjobs-breadcrunbs li + li::before {
    content: "/";
    margin: 0 7px 0 1px;
    color: var(--jsjobs-border);
}

#js_jobs_main_wrapper.jsjobs-modern-form-page #jsjobs-breadcrunbs a,
#js_jobs_main_wrapper.jsjobs-modern-page #jsjobs-breadcrunbs a {
    color: var(--jsjobs-primary);
    text-decoration: none;
}

#js_jobs_main_wrapper .jsjobs-modern-btn,
#js_jobs_main_wrapper .jsjobs-modern-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--jsjobs-radius-pill);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--jsjobs-transition-fast), box-shadow var(--jsjobs-transition-fast), background var(--jsjobs-transition-fast), border-color var(--jsjobs-transition-fast);
}

#js_jobs_main_wrapper .jsjobs-modern-btn-primary {
    background: var(--jsjobs-primary);
    color: var(--jsjobs-on-primary);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
}

#js_jobs_main_wrapper .jsjobs-modern-btn-primary:hover,
#js_jobs_main_wrapper .jsjobs-modern-btn-primary:focus {
    background: var(--jsjobs-primary-hover);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .30);
    transform: translateY(-1px);
}

@media (max-width: 780px) {
    #js_jobs_main_wrapper.jsjobs-modern-form-page,
    #js_jobs_main_wrapper.jsjobs-modern-page {
        width: 100%;
        max-width: 100%;
        margin-bottom: 34px;
        padding: 14px;
        border-radius: 20px;
    }

    #js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper,
    #js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper {
        border-radius: 16px;
    }

    #js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_right_link,
    #js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_right_link {
        margin-inline-start: 0;
    }

    #js_jobs_main_wrapper.jsjobs-modern-form-page .jsjobs-main-page-title,
    #js_jobs_main_wrapper.jsjobs-modern-page .jsjobs-main-page-title {
        font-size: 23px;
    }
}

/* =========================================================
   Modern Shared: Cards
   Scope: #js_jobs_main_wrapper
   Notes: Reusable card base for modern frontend pages.
   ========================================================= */
#js_jobs_main_wrapper .jsjobs-modern-card {
    border: 1px solid var(--jsjobs-border-soft);
    border-radius: var(--jsjobs-radius-lg);
    background: var(--jsjobs-surface);
    box-shadow: var(--jsjobs-shadow-sm);
}

/* =========================================================
   Modern Shared: Error / access-denied message panel
   Scope: #js_jobs_main_wrapper
   Notes: Renders views/messages.php (getSystemOfflineMsg,
          getAccessDeniedMsg, getUserNotSelectedMsg), which every
          view falls back to for guest/offline/no-role states.
          Keep this token-only so modern-ready pages never need
          style.css just for these fallback states.
   ========================================================= */
#js_jobs_main_wrapper .js_job_error_messages_wrapper {
    display: block;
    width: 100%;
    margin: 12px 0 20px;
    padding: 32px 24px;
    border: 1px solid var(--jsjobs-border-soft);
    border-radius: var(--jsjobs-radius-lg);
    background: var(--jsjobs-surface);
    box-shadow: var(--jsjobs-shadow-md);
    text-align: center;
    box-sizing: border-box;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .message1,
#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 {
    display: block;
    width: 100%;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper img.js_job_messages_image {
    display: inline-block;
    max-width: 120px;
    max-height: 120px;
    height: auto;
    margin: 0 auto 16px;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 {
    margin-bottom: 8px;
    color: var(--jsjobs-text);
    font-size: 18px;
    font-weight: 800;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 span.img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 span.img img {
    max-width: 90px;
    max-height: 90px;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 span.message-txt,
#js_jobs_main_wrapper .js_job_error_messages_wrapper .message2 span.message-text {
    display: block;
    color: var(--jsjobs-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer {
    display: block;
    width: 100%;
    margin-top: 18px;
    /* .footer collides with Cassiopeia's site-wide footer bar (dark gradient); neutralize it here. */
    background-color: transparent;
    background-image: none;
    color: inherit;
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    padding: 10px 26px;
    border-radius: var(--jsjobs-radius-pill);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--jsjobs-transition-fast), box-shadow var(--jsjobs-transition-fast);
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer a.login {
    background: var(--jsjobs-primary);
    color: var(--jsjobs-on-primary);
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer a.login:hover {
    background: var(--jsjobs-primary-hover);
    transform: translateY(-1px);
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer a.register {
    background: var(--jsjobs-surface-muted);
    color: var(--jsjobs-text);
    border: 1px solid var(--jsjobs-border);
}

#js_jobs_main_wrapper .js_job_error_messages_wrapper .footer a.register:hover {
    background: var(--jsjobs-surface-soft);
    transform: translateY(-1px);
}

@media (max-width: 780px) {
    #js_jobs_main_wrapper .js_job_error_messages_wrapper {
        padding: 22px 16px;
    }
}

/* =========================================================
   Modern Shared: Global popup (apply / quick view / shortlist)
   Scope: document level (markup sits outside #js_jobs_main_wrapper)
   Notes: IDs are fixed contract with js/common.js and template JS.
          Hidden by default; JS slides it open. Ported from legacy
          style.css and tokenized. Tokens are re-declared here since
          the popup lives outside the tokened wrapper.
   ========================================================= */
div#js_jobs_main_popup_back {
    display: none;
    position: fixed;
    inset: 0;
    height: 100%;
    width: 100%;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

div#js_jobs_main_popup_area {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 94vw);
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
    z-index: 9999;
    overflow: hidden;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
}

div#js_jobs_main_popup_area div#js_jobs_main_popup_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #e8f1fb;
    background: #f8fafc;
}

div#js_jobs_main_popup_area div#js_jobs_main_popup_head div#jspopup_title {
    display: inline-block;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

div#js_jobs_main_popup_area div#js_jobs_main_popup_head img#jspopup_image_close {
    cursor: pointer;
    flex: 0 0 auto;
    filter: brightness(0);
    width: 16px;
    height: 16px;
    opacity: .45;
}

div#js_jobs_main_popup_area div#jspopup_work_area {
    display: block;
    width: 100%;
    max-height: min(420px, 62vh);
    overflow: auto;
    padding: 22px 20px;
}

/* =========================================================
   Modern Shared: Refine-search / list popup (jobs listing)
   Scope: document level (markup sits outside #js_jobs_main_wrapper)
   Notes: #jsjob-search-popup (refine search) and #jsjobs-listpopup
          (quick view) with .popup-title head and .jsjob-contentarea
   body. IDs/classes are a contract with template JS. Replaces live
          legacy rules from style.css lines ~796-840.
   ========================================================= */
div#jsjob-popup-background {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

div#jsjob-search-popup,
div#jsjobs-listpopup {
    display: none;
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 94vw);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
    z-index: 9999;
    overflow: hidden;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
}

div#jsjob-search-popup span.popup-title,
div#jsjobs-listpopup span.popup-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #e8f1fb;
    background: #f8fafc;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    box-sizing: border-box;
}

div#jsjob-search-popup span.popup-title img#popup_cross,
div#jsjobs-listpopup span.popup-title img#popup_cross {
    float: none;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    /* popup-close.png is a white glyph built for the old dark header; recolour
       it so it is visible on the modern light popup header. */
    width: 16px;
    height: 16px;
    filter: brightness(0);
    opacity: .45;
    transition: opacity var(--jsjobs-transition-fast);
}
div#jsjob-search-popup span.popup-title img#popup_cross:hover,
div#jsjobs-listpopup span.popup-title img#popup_cross:hover { opacity: 1; }

div#jsjob-search-popup div.jsjob-contentarea,
div#jsjobs-listpopup div.jsjob-contentarea {
    display: block;
    width: 100%;
    float: none;
    max-height: min(440px, 60vh);
    overflow-y: auto;
    padding: 22px 20px;
    box-sizing: border-box;
}

div#jsjob-search-popup div.jsjob-contentarea::after {
    content: "";
    display: block;
    clear: both;
}

div#jsjob-search-popup div.jsjob-refine-wrapper {
    float: inline-start;
    width: calc(50% - 20px);
    margin: 0 10px 10px;
}

div#jsjob-search-popup div.jsjob-refine-wrapper.jsjob-refine-wrapper-center-alignment {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
}

div#jsjob-search-popup div.js-searchform-title {
    width: 100%;
    float: inline-start;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
}

div#jsjob-search-popup div.js-searchform-value {
    float: inline-start;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}

div#jsjob-search-popup div.js-searchform-value input.inputbox,
div#jsjob-search-popup div.js-searchform-value input,
div#jsjob-search-popup div.js-searchform-value select {
    width: 100%;
    height: 45px;
    padding: 8px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 13px;
    box-sizing: border-box;
    box-shadow: none;
}

div#jsjob-search-popup div.js-searchform-value select.sal { width: calc(25% - 5px); margin-inline-end: 5px; }
div#jsjob-search-popup div.js-searchform-value select.exp { width: calc(50% - 5px); margin-inline-end: 5px; }

/* Salary Range: the four sub-selects are built with class="inputbox" + an inline
   style="width:40%" (models/job.php), and the field sits in a 50%-width refine
   wrapper, so they were crushed and their text overlapped. Give the whole row
   full width and size the four selects to 25% each (overriding the inline width). */
div#jsjob-search-popup div.jsjob-refine-wrapper:has(select[name="srangestart"]) {
    width: calc(100% - 20px);
}
div#jsjob-search-popup div.js-searchform-value select[name="currencyid"],
div#jsjob-search-popup div.js-searchform-value select[name="srangestart"],
div#jsjob-search-popup div.js-searchform-value select[name="srangeend"],
div#jsjob-search-popup div.js-searchform-value select[name="srangetype"] {
    width: calc(25% - 6px) !important;
    margin-inline-end: 6px;
    display: inline-block;
    vertical-align: top;
}

div#jsjob-search-popup .bottombutton {
    width: calc(100% - 20px);
    margin: 8px 10px 0;
    padding: 14px 0 4px;
    border-top: 1px solid #e8f1fb;
    text-align: center;
    float: inline-start;
}

div#jsjob-search-popup .search_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0 5px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

div#jsjob-search-popup .search_button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

div#jsjob-search-popup .search_button#reset_btn {
    background: #f1f5f9;
    border-color: #dbe7f5;
    color: #0f172a;
}

div#jsjobs-refine-actions {
    display: block;
    width: calc(100% - 40px);
    margin: 12px 20px 0;
    padding: 16px 0;
    text-align: center;
}

div#jsjobs-showmore {
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    background: #f1f5f9;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}

span#jsjob-popup-closebtn {
    float: inline-end;
    cursor: pointer;
}

@media (max-width: 640px) {
    div#jsjob-search-popup div.jsjob-refine-wrapper {
        width: calc(100% - 20px);
    }
}

/* =========================================================
   Modern Shared: Tell-a-friend popup
   Scope: document level (markup renders outside the wrapper flow)
   Notes: Hidden by default, template JS shows it. Replaces live
          legacy rules (style.css ~842-868).
   ========================================================= */
div#js_job_black_friend {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

div#tellafriend.tellafriend {
    display: none;
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 94vw);
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
    z-index: 9999;
    overflow: hidden;
    /* font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
}

div#tellafriend.tellafriend div#tellafriend_headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid #e8f1fb;
    background: #f8fafc;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    box-sizing: border-box;
}

div#tellafriend.tellafriend div#tellafriend_headline img.closeimg {
    float: none;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    /* popup-close.png is a WHITE glyph made for the old dark header; on the
       modern light header it was invisible. Recolour it to a dark grey. */
    width: 16px;
    height: 16px;
    filter: brightness(0);
    opacity: .45;
    transition: opacity var(--jsjobs-transition-fast);
}
div#tellafriend.tellafriend div#tellafriend_headline img.closeimg:hover { opacity: 1; }

div#tellafriend.tellafriend div#borderfieldwrapper {
    display: block;
    width: 100%;
    max-height: min(440px, 60vh);
    overflow-y: auto;
    padding: 22px 20px;
    box-sizing: border-box;
}

div#tellafriend.tellafriend div#borderfieldwrapper::after {
    content: "";
    display: block;
    clear: both;
}

div#tellafriend.tellafriend div.fieldwrapper {
    float: inline-start;
    width: calc(50% - 20px);
    margin: 0 10px 10px;
}

div#tellafriend.tellafriend div.fieldwrapper.fullwidth {
    width: calc(100% - 20px);
}

div#tellafriend.tellafriend div.fieldwrapper div.fieldtitle {
    width: 100%;
    float: inline-start;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
}

div#tellafriend.tellafriend div.fieldwrapper div.fieldvalue {
    float: inline-start;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}

div#tellafriend.tellafriend div.fieldwrapper div.fieldvalue input,
div#tellafriend.tellafriend div.fieldwrapper div.fieldvalue textarea {
    float: none;
    width: 100%;
    min-height: 45px;
    padding: 8px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 13px;
    box-sizing: border-box;
    box-shadow: none;
}

div#tellafriend.tellafriend div.fieldwrapper.fullwidth.button {
    float: inline-start;
    width: calc(100% - 20px);
    text-align: center;
    padding: 14px 0 14px;
    margin: 8px 10px 0;
    border-top: 1px solid #e8f1fb;
}

div#tellafriend.tellafriend input[type="button"].js_job_tellafreind_button,
input.js_job_shortlist_button_save {
    display: inline-block;
    min-width: 120px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

div#tellafriend.tellafriend div#tellafriendsuccessmsg.tellafriendsuccessmsg {
    display: none;
}

@media (max-width: 640px) {
    div#tellafriend.tellafriend div.fieldwrapper {
        width: calc(100% - 20px);
    }
}

/* =========================================================
   Modern Shared: AJAX popup content (apply / shortlist / quick view)
   Scope: div#jspopup_work_area and div#jsjobs-listpopup .jsjob-contentarea
   Notes: HTML is built server-side in models/jobapply.php and
          controllers/jobshortlist.php and injected by JS. Popup sits
          outside #js_jobs_main_wrapper, so tokens are unavailable -
          raw values follow the token palette.
   ========================================================= */

/* --- Guest state: shared error partial inside the popup --- */
div#jspopup_work_area .js_job_error_messages_wrapper,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 4px;
    border: 0;
    box-shadow: none;
    background: transparent;
    text-align: center;
    box-sizing: border-box;
}

div#jspopup_work_area .js_job_error_messages_wrapper img.js_job_messages_image,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper img.js_job_messages_image {
    display: inline-block;
    max-width: 110px;
    max-height: 110px;
    height: auto;
    margin: 0 auto 14px;
}

div#jspopup_work_area .js_job_error_messages_wrapper .message2,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper .message2 {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

div#jspopup_work_area .js_job_error_messages_wrapper .footer,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper .footer {
    display: block;
    width: 100%;
    margin-top: 14px;
    background-color: transparent;
    background-image: none;
    color: inherit;
}

div#jspopup_work_area .js_job_error_messages_wrapper .footer a,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper .footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

div#jspopup_work_area .js_job_error_messages_wrapper .footer a.login,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper .footer a.login {
    background: #2563eb;
    color: #ffffff;
}

div#jspopup_work_area .js_job_error_messages_wrapper .footer a.register,
div#jsjobs-listpopup .jsjob-contentarea .js_job_error_messages_wrapper .footer a.register {
    background: #f1f5f9;
    border: 1px solid #dbe7f5;
    color: #0f172a;
}

/* --- Logged-in apply form --- */
div#jspopup_work_area .jsjobs_jobapply_wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

div#jspopup_work_area .jsjobs_jobapply_wrapper .js-col-md-6 {
    width: auto;
    min-width: 0;
    float: none;
}

div#jspopup_work_area .jsjobapply_title {
    margin: 0 0 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
}

div#jspopup_work_area .jsjobapply_value select,
div#jspopup_work_area .jsjobapply_value input[type="text"] {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    box-sizing: border-box;
}

div#jspopup_work_area .jsjobapply_value a#pop_cvltr {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

div#jspopup_work_area .js_job_form_button {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 0;
    width: 100%;
    text-align: start;
    float: none;
}

div#jspopup_work_area input.js_job_form_button,
div#jspopup_work_area input#js_job_applynow_button,
div#jspopup_work_area input#js_job_applynow_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

div#jspopup_work_area input#js_job_applynow_button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

div#jspopup_work_area input#js_job_applynow_close {
    background: #f1f5f9;
    border-color: #dbe7f5;
    color: #0f172a;
}

div#jspopup_work_area span.jsjobs_job_in_formation {
    display: block;
    width: 100%;
    margin: 6px 0 10px;
    padding: 10px 0 8px;
    border-top: 1px solid #e8f1fb;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
}

div#jspopup_work_area .js_job_data_jobapply {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 5px 0;
    border: 0;
    float: none;
    font-size: 13px;
}

div#jspopup_work_area .js_job_data_jobapply .js_job_data_apply_title {
    color: #64748b;
    font-weight: 800;
    white-space: nowrap;
}

div#jspopup_work_area .js_job_data_jobapply .js_job_data_apply_value {
    color: #0f172a;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --- Shortlist form --- */
div#jspopup_work_area .shortlist_box label,
div#jspopup_work_area .jsjobs_shortlist_box label {
    display: block;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
    float: none;
}

div#jspopup_work_area textarea.textarea_shortlist {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
}

div#jspopup_work_area .jsjobs_stars_wrapper {
    display: block;
    width: 100%;
    margin: 14px 0 6px;
}

div#jspopup_work_area div#jsjobs-shortlist_btn_margin {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

div#jspopup_work_area input.js_job_shortlist_button {
    display: inline-block;
    min-width: 100px;
    padding: 11px 17px;
    border: 1px solid #dbe7f5;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
}

@media (max-width: 640px) {
    div#jspopup_work_area .jsjobs_jobapply_wrapper {
        grid-template-columns: 1fr;
    }
}

/* Subcategory "Show More" content injected into #jsjobs-listpopup
   (jobcat page). Popup shell styles above; this is the inner layout. */
div#jsjobs-listpopup div#jsjobs_subcatpopups {
    display: block;
    width: 100%;
}

div#jsjobs-listpopup div#jsjobs_subcatpopups #jsjobs_scroll_area {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 18px 20px;
    max-height: min(440px, 60vh);
    overflow-y: auto;
    box-sizing: border-box;
}

div#jsjobs-listpopup a#jsjobs-subcat-popup-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e8f1fb;
    border-radius: 10px;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .16s ease, border-color .16s ease;
}

div#jsjobs-listpopup a#jsjobs-subcat-popup-a:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

div#jsjobs-listpopup a#jsjobs-subcat-popup-a .jsjobs-cat-title {
    flex: 1 1 auto;
    min-width: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

div#jsjobs-listpopup a#jsjobs-subcat-popup-a .jsjobs-cat-counter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 640px) {
    div#jsjobs-listpopup div#jsjobs_subcatpopups #jsjobs_scroll_area {
        grid-template-columns: 1fr;
    }
    #js_jobs_main_wrapper.jsjobs-modern-form-page #js_menu_wrapper .js_menu_link,
    #js_jobs_main_wrapper.jsjobs-modern-page #js_menu_wrapper .js_menu_link{
        flex: 1 1 auto;
    }
}

/* =========================================================
   Editor custom fields
   Rendered by customfields::editorValueForDisplay() wherever a custom field of
   type "editor" is shown (job detail, company detail, resume view, my resume).
   Listings get a stripped plain-text excerpt instead, so they never match here.
   ========================================================= */
#js_jobs_main_wrapper .jsjobs-customfield-editor {
    color: var(--jsjobs-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor > :first-child {
    margin-top: 0;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor > :last-child {
    margin-bottom: 0;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor p {
    margin: 0 0 10px;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor h1,
#js_jobs_main_wrapper .jsjobs-customfield-editor h2,
#js_jobs_main_wrapper .jsjobs-customfield-editor h3,
#js_jobs_main_wrapper .jsjobs-customfield-editor h4,
#js_jobs_main_wrapper .jsjobs-customfield-editor h5,
#js_jobs_main_wrapper .jsjobs-customfield-editor h6 {
    margin: 16px 0 8px;
    color: var(--jsjobs-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor strong,
#js_jobs_main_wrapper .jsjobs-customfield-editor b {
    font-weight: 800;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor ul,
#js_jobs_main_wrapper .jsjobs-customfield-editor ol {
    margin: 0 0 10px;
    padding-inline-start: 20px;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor li {
    margin-bottom: 4px;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor a {
    color: var(--jsjobs-accent);
    text-decoration: underline;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jsjobs-radius-sm, 8px);
}
#js_jobs_main_wrapper .jsjobs-customfield-editor blockquote {
    margin: 0 0 10px;
    padding: 6px 0 6px 12px;
    border-inline-start: 3px solid var(--jsjobs-border-soft);
    color: var(--jsjobs-muted);
}
#js_jobs_main_wrapper .jsjobs-customfield-editor table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}
#js_jobs_main_wrapper .jsjobs-customfield-editor td,
#js_jobs_main_wrapper .jsjobs-customfield-editor th {
    padding: 6px 8px;
    border: 1px solid var(--jsjobs-border-soft);
    text-align: start;
}