/* ============================================================================
   CoreHRx Jobs — UI layer
   ----------------------------------------------------------------------------
   Presentation only. Loaded AFTER jobs/assets/css/style.css so it restyles the
   public job site (shell, search, job/company cards, buttons, footer) without
   touching markup, ids, classes or scripts — every handler and selector in
   web_script.js keeps working exactly as before.

   Design language: the dense, calm card layout of LinkedIn / Naukri —
   white surfaces on a light grey page, hairline borders, restrained shadows,
   pill controls, one accent colour (CoreHRx orange) instead of gradients.
   ========================================================================== */

:root {
    --jb-bg: #FFFFFF;
    --jb-surface: #ffffff;
    --jb-surface-2: #FFFFFF;
    --jb-border: #E2E4E7;
    --jb-border-strong: #C9CDD2;
    --jb-text: #1b1830;
    --jb-text-2: #3a3654;
    --jb-muted: #6b6880;
    --jb-faint: #9b97ad;
    --jb-accent: #1F6FC5;
    --jb-accent-2: #4E95E0;
    --jb-accent-dark: #185DA8;
    --jb-accent-soft: #E3EFFB;
    --jb-lav: #1F6FC5;
    --jb-lav-soft: #E3EFFB;
    --jb-green: #0a7c42;
    --jb-green-soft: #e7f7ee;
    --jb-radius: 20px;
    --jb-radius-sm: 12px;
    --jb-shadow-1: 0 6px 18px rgba(15, 35, 64, .08);
    --jb-shadow-2: 0 18px 44px rgba(15, 35, 64, .12);
    --jb-shadow-3: 0 28px 68px rgba(15, 35, 64, .18);
    --jb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background:
        radial-gradient(900px 500px at 8% -6%, #EEF4FB 0%, transparent 60%),
        radial-gradient(880px 520px at 94% -4%, #EEF4FB 0%, transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 46%, #FFFFFF 100%);
    background-attachment: fixed;
    color: var(--jb-text);
    font-family: var(--jb-font);
    -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────── Header shell ─────────────────────────── */

.nk-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--jb-surface);
    border-bottom: 1px solid var(--jb-border);
    box-shadow: var(--jb-shadow-1);
}

.nk-header {
    width: min(1180px, 94vw);
    margin: 0 auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 0;
}

.nk-left {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

.nk-logo img,
.nk-logo .corehrx-logo {
    height: 30px;
    width: auto;
    display: block;
}

/* Nav items: quiet by default, accent underline on hover/active (LinkedIn) */
.nk-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nk-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--jb-radius-sm);
    color: var(--jb-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.nk-nav a:hover {
    color: var(--jb-text);
    background: var(--jb-surface-2);
}

.nk-nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -9px;
    height: 2px;
    border-radius: 2px;
    background: var(--jb-accent);
    opacity: 0;
    transition: opacity .15s ease;
}

.nk-nav a:hover::after,
.nk-nav a.active::after {
    opacity: 1;
}

/* Centered search: soft filled pill, ring on focus */
.nk-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.nk-search {
    width: min(460px, 100%);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 6px 0 14px;
    background: #F5F6F7;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nk-search:focus-within {
    background: var(--jb-surface);
    border-color: var(--jb-accent);
    box-shadow: 0 0 0 3px rgba(31, 111, 197, .14);
}

.nk-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--jb-text);
    font-size: 13.5px;
    font-weight: 500;
}

.nk-search input::placeholder {
    color: var(--jb-faint);
}

.nk-search button {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--jb-accent);
    color: #fff;
    font-size: 12.5px;
    transition: background .15s ease;
}

.nk-search button:hover {
    background: var(--jb-accent-dark);
}

/* Auth buttons: ghost + solid pill pair */
.nk-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.withoutloginbtnwrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-without-login {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--jb-border-strong);
    background: transparent;
    color: var(--jb-text-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    transition: all .15s ease;
}

.btn-without-login:hover {
    border-color: var(--jb-accent);
    color: var(--jb-accent);
    background: var(--jb-accent-soft);
}

.btn-without-login.fullfill-btn {
    border-color: var(--jb-accent);
    background: var(--jb-accent);
    color: #fff;
}

.btn-without-login.fullfill-btn:hover {
    border-color: var(--jb-accent-dark);
    background: var(--jb-accent-dark);
    color: #fff;
}

.profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--jb-border);
    border-radius: 999px;
    background: var(--jb-surface);
    cursor: pointer;
    transition: all .15s ease;
}

.profile-pill:hover {
    border-color: var(--jb-border-strong);
    box-shadow: var(--jb-shadow-1);
}

.profile-pill .profile-img img {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}

/* ─────────────────────────── Profile slide-over ─────────────────────────── */

.profile-panel-headerpanel {
    background: var(--jb-surface);
    box-shadow: var(--jb-shadow-3);
}

.panel-header-headerpanel {
    border-bottom: 1px solid var(--jb-border);
    font-weight: 700;
    color: var(--jb-text);
}

.profile-link-headerpanel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--jb-accent);
    background: var(--jb-accent);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.profile-link-headerpanel:hover {
    background: var(--jb-accent-dark);
    border-color: var(--jb-accent-dark);
}

.upgrade-box-headerpanel {
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-radius-sm);
    background: var(--jb-surface);
    transition: all .15s ease;
}

.upgrade-box-headerpanel:hover {
    border-color: var(--jb-accent);
    background: var(--jb-accent-soft);
}

/* ─────────────────────────── Footer ─────────────────────────── */

.footerSection {
    margin-top: 32px;
    padding: 22px 0;
    background: var(--jb-surface);
    border-top: 1px solid var(--jb-border);
    text-align: center;
}

.footerCopy {
    margin: 0;
    color: var(--jb-muted);
    font-size: 13px;
}

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 1024px) {
    .nk-header {
        gap: 12px;
    }

    .nk-search {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .nk-header {
        min-height: 54px;
        gap: 10px;
    }

    .nk-left {
        gap: 12px;
    }

    .nk-logo img,
    .nk-logo .corehrx-logo {
        height: 26px;
    }

    .btn-without-login {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12.5px;
    }
}

/* ============================================================================
   Inner pages — job listing / search, job detail, company listing & detail,
   register & login, onboarding, account.
   ----------------------------------------------------------------------------
   Those templates each ship their own <style> built on a small token set
   (--jl-*, --jd-*, --cl-*, --co-*) declared on .indexpage-contantJP1 (or :root
   for company detail). Re-pointing those tokens here — at higher specificity —
   restyles each page's surfaces, borders, text and shadows without rewriting a
   single page rule, so every layout, id, handler and Smarty block is untouched.
   The component rules below only soften shapes on top of that.
   ========================================================================== */

.jb-page .indexpage-contantJP1 {
    --jl-bg: transparent;      --jd-bg: transparent;      --cl-bg: transparent;
    --jl-surface: #ffffff;     --jd-surface: #ffffff;     --cl-surface: #ffffff;
    --jl-border: var(--jb-border);
    --jd-border: var(--jb-border);
    --cl-border: var(--jb-border);
    --jl-text: var(--jb-text); --jd-text: var(--jb-text); --cl-text: var(--jb-text);
    --jl-muted: var(--jb-muted);
    --jd-muted: var(--jb-muted);
    --cl-muted: var(--jb-muted);
    --jl-accent: var(--jb-accent);
    --jd-accent: var(--jb-accent);
    --cl-accent: var(--jb-accent);
    --jl-accent-dark: var(--jb-accent-dark);
    --jd-accent-dark: var(--jb-accent-dark);
    --jl-shadow-sm: var(--jb-shadow-1);
    --jd-shadow-sm: var(--jb-shadow-1);
    --cl-shadow-sm: var(--jb-shadow-1);
    --jl-shadow-md: var(--jb-shadow-2);
    --jd-shadow-md: var(--jb-shadow-2);
    --cl-shadow-md: var(--jb-shadow-2);
    background: transparent;
}

/* company detail declares its tokens on :root; body wins for its own subtree */
body.jb-page {
    --co-bg: transparent;
    --co-surface: #ffffff;
    --co-surface-2: var(--jb-lav-soft);
    --co-border: var(--jb-border);
    --co-text: var(--jb-text);
    --co-muted: var(--jb-muted);
    --co-accent: var(--jb-accent);
    --co-accent-dark: var(--jb-accent-dark);
    --co-shadow-sm: var(--jb-shadow-1);
    --co-shadow-md: var(--jb-shadow-2);
    --co-shadow-lg: var(--jb-shadow-3);
}

/* ── Cards on every inner page ────────────────────────────────────── */
.jb-page #set_job_list_html .job-card,
.jb-page .job-card,
.jb-page .company-list-item,
.jb-page .industry-card,
.jb-page .card,
.jb-page .company-filters,
.jb-page .form-card-RS {
    border-radius: 20px !important;
    border: 1px solid var(--jb-border) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: var(--jb-shadow-1) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.jb-page #set_job_list_html .job-card:hover,
.jb-page .job-card:hover,
.jb-page .company-list-item:hover,
.jb-page .industry-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--jb-shadow-2) !important;
    border-color: #D6E4F5 !important;
}

.jb-page .job-title,
.jb-page .company-name {
    letter-spacing: -.015em;
}

.jb-page #set_job_list_html .job-card:hover .job-title,
.jb-page .job-card:hover .job-title {
    color: var(--jb-accent);
}

.jb-page .job-logo img,
.jb-page .company-logo img,
.jb-page .related-job-logo img {
    border-radius: 14px;
}

/* meta rows + tag chips */
.jb-page .job-meta li {
    color: var(--jb-text-2);
}

.jb-page .job-meta i {
    color: var(--jb-lav);
    opacity: .85;
}

.jb-page .job-tags span,
.jb-page .job-tags-l span,
.jb-page .company-tags .tag,
.jb-page .chip {
    border-radius: 999px !important;
    background: var(--jb-lav-soft) !important;
    border: 1px solid rgba(31, 111, 197, .16) !important;
    color: #1A5FAA !important;
    font-weight: 600;
}

.jb-page .posted {
    color: var(--jb-faint);
}

/* ── Filters rail ─────────────────────────────────────────────────── */
.jb-page .company-filters {
    padding: 18px !important;
}

.jb-page .filter-section {
    border-bottom: 1px solid var(--jb-border);
}

.jb-page .filter-section h4 {
    color: var(--jb-text);
    letter-spacing: -.01em;
}

.jb-page .filter-section label {
    color: var(--jb-text-2);
    border-radius: 10px;
    transition: background .14s ease, color .14s ease;
}

.jb-page .filter-section label:hover {
    background: var(--jb-lav-soft);
    color: #1A5FAA;
}

.jb-page .filter-checkbox input[type="checkbox"],
.jb-page .filter-section input[type="checkbox"],
.jb-page .filter-section input[type="radio"] {
    accent-color: var(--jb-accent);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.jb-page .btn-primary,
.jb-page .apply-job-btn,
.jb-page .primary-btn-onbody,
.jb-page .btn-ap.submit-btn-ap {
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--jb-accent), var(--jb-accent-2)) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(31, 111, 197, .28);
    transition: transform .16s ease, box-shadow .16s ease;
}

.jb-page .btn-primary:hover,
.jb-page .apply-job-btn:hover,
.jb-page .primary-btn-onbody:hover,
.jb-page .btn-ap.submit-btn-ap:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(31, 111, 197, .36);
}

.jb-page .btn-outline,
.jb-page .backp,
.jb-page .open-filters,
.jb-page .slider-btn,
.jb-page .btn-ap.cancel-btn-ap {
    border: 1px solid var(--jb-border-strong) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--jb-text) !important;
    font-weight: 700;
    transition: all .16s ease;
}

.jb-page .btn-outline:hover,
.jb-page .backp:hover,
.jb-page .open-filters:hover,
.jb-page .slider-btn:hover,
.jb-page .btn-ap.cancel-btn-ap:hover {
    border-color: var(--jb-lav) !important;
    background: var(--jb-lav-soft) !important;
    color: #1A5FAA !important;
}

.jb-page .save-job.active i,
.jb-page .save-job-btn.active i,
.jb-page .save-job:hover i {
    color: var(--jb-accent);
}

/* ── Tabs (company detail / job detail) ─────────────────────────────
   The page rules match on .company-tabs .tab-link, i.e. the same weight as a
   two-class selector, and they load after this file — so these need !important
   rather than just the .jb-page prefix. */
.jb-page .tab-link,
.jb-page .company-tabs .tab-link {
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    color: #63778F;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease;
}

.jb-page .tab-link:hover,
.jb-page .company-tabs .tab-link:hover {
    background: none !important;
    color: #0F2340 !important;
}

.jb-page .tab-link.active,
.jb-page .company-tabs .tab-link.active {
    background: none !important;
    border-bottom-color: #1F6FC5 !important;
    color: #0F2340 !important;
}

/* ── Inputs, selects, OTP boxes ───────────────────────────────────── */
.jb-page .input-box-RS input,
.jb-page .input-box-RS select,
.jb-page .form-group-onbody input,
.jb-page .form-group-onbody select,
.jb-page .form-group-onbody textarea,
.jb-page .custom-select .selected {
    border: 1px solid var(--jb-border) !important;
    border-radius: 12px !important;
    background: var(--jb-surface-2) !important;
    color: var(--jb-text) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.jb-page .input-box-RS input:focus,
.jb-page .input-box-RS select:focus,
.jb-page .form-group-onbody input:focus,
.jb-page .form-group-onbody select:focus,
.jb-page .form-group-onbody textarea:focus {
    outline: none;
    background: #fff !important;
    border-color: rgba(31, 111, 197, .45) !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 197, .12);
}

.jb-page .otp-input {
    border: 1px solid var(--jb-border) !important;
    border-radius: 12px !important;
    background: var(--jb-surface-2) !important;
    color: var(--jb-text);
    font-weight: 700;
}

.jb-page .otp-input:focus {
    outline: none;
    background: #fff !important;
    border-color: var(--jb-accent) !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 197, .14);
}

/* ── Auth / onboarding shells ─────────────────────────────────────── */
.jb-page .form-card-RS {
    padding: 28px !important;
    box-shadow: var(--jb-shadow-2) !important;
}

.jb-page .sub-RS {
    color: var(--jb-muted);
}

.jb-page .status-box-RS {
    border: 1px solid var(--jb-border);
    border-radius: 14px;
    background: var(--jb-surface-2);
}

.jb-page .status-box-RS.active-RS {
    border-color: rgba(31, 111, 197, .35);
    background: var(--jb-lav-soft);
}

.jb-page .login-step-onbody.active-onbody,
.jb-page .done-onbody {
    color: var(--jb-lav);
}

/* ── Account page rails ───────────────────────────────────────────── */
.jb-page .left-sidebar,
.jb-page .sidebar-links {
    border-radius: 20px;
}

.jb-page .sidebar-links a:hover {
    background: var(--jb-lav-soft);
    color: #1A5FAA;
}

/* ── Modals (apply-job popup is shared by every page) ─────────────── */
.jb-page .modal-box {
    border-radius: 20px !important;
    box-shadow: var(--jb-shadow-3) !important;
}

.jb-page .resume-preview-card-ap,
.jb-page .upload-box-ap {
    border-radius: 14px !important;
    border: 1px dashed var(--jb-border-strong) !important;
    background: var(--jb-surface-2) !important;
}

.jb-page .upload-box-ap:hover {
    border-color: var(--jb-lav) !important;
    background: var(--jb-lav-soft) !important;
}

/* ── Select2 multi-select chips on the inner pages (tags, city filters) ──
   Select2 renders the remove control BEFORE the label and pins it with
   "position: absolute; left: 0", which is why the × sat on the chip's left edge
   sitting over the text: an out-of-flow box ignores `order` entirely. Putting
   it back in flow is what actually moves it after the label.
   The rendered list is also "display: inline" with no padding by default, so
   the chips spilled over the control's rounded left edge — it becomes a padded
   flex row here so they wrap tidily inside the control instead. */
/* In 4.1.0-rc.0 the inline search box is a SIBLING of the chip list, not a
   child of it, so flexing the list alone still dropped the search onto a row
   of its own and left an empty band under the chips. Flex the control instead
   and let the list pass its chips through, so chips and search share one
   wrapping row. The clear-all button is absolutely positioned, so it stays out
   of this flow. */
.jb-page .select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    min-height: 44px;
}

.jb-page .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: contents !important;
    margin: 0;
    padding: 0 !important;
    list-style: none;
}

/* the inline search field is a flex item now. Keep its basis small so it tucks
   in beside the last chip and grows into whatever room is left on that row —
   with a wide basis it wrapped onto a line of its own and left an empty band
   under the chips. */
.jb-page .select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 28px;
    min-width: 28px;
    margin: 0 !important;
}

.jb-page .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    height: 26px;
    min-width: 60px;
    font-size: 13px;
}
.jb-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: 26px;
    margin: 0 !important;
    padding: 0 5px 0 11px !important;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(31, 111, 197, .22) !important;
    border-radius: 999px !important;
    background: var(--jb-lav-soft) !important;
    color: #1A5FAA !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.jb-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    order: 2;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 999px;
    background: rgba(31, 111, 197, .16) !important;
    color: #5b4fd0 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}

.jb-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.jb-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: var(--jb-accent) !important;
    color: #fff !important;
    transform: scale(1.06);
    outline: none;
}

/* the dropdown these chips come from was still stock Select2 — square corners,
   no shadow and the built-in blue highlight, which read as a different product
   next to the rest of the filters. It is appended to the field's own parent
   (see script.js dropdownParent), so it sits inside .jb-page and needs no
   separate hook. */
.jb-page .select2-container--default .select2-dropdown {
    border: 1px solid var(--jb-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--jb-shadow-2);
    padding: 6px;
    overflow: hidden;
    background: var(--jb-surface);
}

.jb-page .select2-container--default .select2-results__option {
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--jb-text-2);
}

.jb-page .select2-container--default .select2-results__option--highlighted,
.jb-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--jb-lav-soft) !important;
    color: #1A5FAA !important;
}

.jb-page .select2-container--default .select2-results__option--selected,
.jb-page .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--jb-accent-soft);
    color: #1A5FAA;
    font-weight: 600;
}

.jb-page .select2-container--default .select2-results > .select2-results__options {
    max-height: 260px;
    scrollbar-width: thin;
}

/* focus ring on the control, to match the other filter inputs */
.jb-page .select2-container--default.select2-container--focus .select2-selection--multiple,
.jb-page .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: rgba(31, 111, 197, .45) !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 197, .12) !important;
}

/* ── Job listing + search: filter rail scrolls on its own ─────────────
   (/jobs/search/ renders the same template, recruitment_job_listing.tpl,
   under body.jb-search_page, so every rule here covers both.)
   The rail is sticky (top: 86px, below the 71px sticky header) but taller than
   most screens — ~1,150px against a 900px window — so once it stuck, the lower
   filters (Job Type, Employment Type, Tags) sat below the fold with no way to
   reach them: scrolling moved the job list, not the rail. Capping it to the
   visible height gives it its own scrollbar; overscroll-behavior stops the page
   from taking over when the rail hits its end. Desktop only — below 992px the
   rail is a static slide-over panel (see web_script.js). */
@media (min-width: 992px) {
    .jb-page.jb-job_listing_page .company-filters,
    .jb-page.jb-search_page .company-filters {
        /* sticks at 86px, but starts ~21px lower before the page scrolls —
           leave room for both so the rail never runs past the fold */
        max-height: calc(100vh - 86px - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--jb-border-strong) transparent;
    }

    .jb-page.jb-job_listing_page .company-filters::-webkit-scrollbar,
    .jb-page.jb-search_page .company-filters::-webkit-scrollbar {
        width: 6px;
    }

    .jb-page.jb-job_listing_page .company-filters::-webkit-scrollbar-thumb,
    .jb-page.jb-search_page .company-filters::-webkit-scrollbar-thumb {
        background: var(--jb-border-strong);
        border-radius: 999px;
    }

    .jb-page.jb-job_listing_page .company-filters::-webkit-scrollbar-track,
    .jb-page.jb-search_page .company-filters::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Company page, Jobs tab: the same rail, but it pins at 132px (below the header
   AND the sticky tab bar) and only pins above 1100px, where the page switches to
   one column — so it gets its own offset and breakpoint. */
@media (min-width: 1101px) {
    .jb-page.jb-company_profile_page .company-filters {
        max-height: calc(100vh - 132px - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--jb-border-strong) transparent;
    }

    .jb-page.jb-company_profile_page .company-filters::-webkit-scrollbar {
        width: 6px;
    }

    .jb-page.jb-company_profile_page .company-filters::-webkit-scrollbar-thumb {
        background: var(--jb-border-strong);
        border-radius: 999px;
    }

    .jb-page.jb-company_profile_page .company-filters::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Select2 renders each filter's dropdown inside the field's parent and positions
   it against the nearest POSITIONED ancestor. Without this, that ancestor is the
   sticky, scrolling filter rail — and Select2 does not allow for a container's
   own scrollTop, so the dropdown landed higher by exactly how far the rail was
   scrolled: detached from the field on a 900px screen, and fully off the top of
   the screen (y ≈ -340) on ~650px laptop viewports, where it looked like the Tags
   filter simply would not open. Making each section the positioning context means
   the offset is measured from a box that moves with the scroll. The mobile
   slide-over is a scroll container too, so this is not limited to desktop. */
.jb-page.jb-job_listing_page .filter-section,
.jb-page.jb-search_page .filter-section,
.jb-page.jb-company_profile_page .filter-section {
    position: relative;
}

/* Select2 judges "room above" against the window, not the rail, so on short
   screens (≤640px tall) a full-height list opening upward ran past the rail's
   top edge and hid its first options. A shorter list fits inside the rail. */
/* A dropdown that opens upward has to stay below the rail's pinned top (86px on
   the job list, 132px on the company page, under the tab bar). Select2 only
   checks room against the window, so on screens up to ~760px tall a full
   260px list could open above the rail and hide its first options. 190px keeps
   it inside the rail from ~590px up; the rule below takes over for shorter. */
@media (max-height: 760px) {
    .jb-page.jb-job_listing_page .select2-container--default .select2-results > .select2-results__options,
    .jb-page.jb-search_page .select2-container--default .select2-results > .select2-results__options,
    .jb-page.jb-company_profile_page .select2-container--default .select2-results > .select2-results__options {
        max-height: 190px;
    }
}

@media (max-height: 640px) {
    .jb-page.jb-job_listing_page .select2-container--default .select2-results > .select2-results__options,
    .jb-page.jb-search_page .select2-container--default .select2-results > .select2-results__options,
    .jb-page.jb-company_profile_page .select2-container--default .select2-results > .select2-results__options {
        max-height: 170px;
    }
}

/* ── Register: mobile row ─────────────────────────────────────────────
   "Get OTP" (and "Verified" after the code is accepted) is overlaid on the
   right end of the phone input, which reserves no room for it — keep the
   typed number clear of it. The validation message itself is handled in the
   template: it now renders into #mobile_error_slot below the row instead of
   being injected into the flex row beside the input. */
.jb-page .phone-field-RS input[type="tel"] {
    padding-right: 92px !important;
}

.jb-page #mobile_error_slot:empty {
    display: none;
}

/* ── OTP boxes (login / register) ──────────────────────────────────────
   style.css styles these through
   ".naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs input"
   (five classes + element), so these selectors match that depth and add the
   .jb-page hook to outrank it — no !important needed for the geometry.
   Markup is untouched: still four inputs, same classes, same JS. */
.jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs,
.jb-page .otpwrapper-RS .otp-inputs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 18px auto 10px;
}

.jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs input,
.jb-page .otpwrapper-RS .otp-inputs input {
    width: 58px;
    height: 64px;
    padding: 0;
    border: 1.5px solid var(--jb-border);
    border-radius: 16px;
    background: var(--jb-surface-2);
    box-shadow: inset 0 1px 2px rgba(15, 35, 64, .05);
    color: var(--jb-text);
    font-family: var(--jb-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    caret-color: var(--jb-accent);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs input:hover,
.jb-page .otpwrapper-RS .otp-inputs input:hover {
    border-color: var(--jb-border-strong);
    background: #fff;
}

.jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs input:focus,
.jb-page .otpwrapper-RS .otp-inputs input:focus {
    outline: none;
    transform: translateY(-1px);
    border-color: var(--jb-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(31, 111, 197, .14), 0 8px 18px rgba(31, 111, 197, .14);
}

/* resend / timer line under the boxes */
.jb-page .otpwrapper-RS #resend_otp,
.jb-page .otpwrapper-RS .otp-timer {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs,
    .jb-page .otpwrapper-RS .otp-inputs {
        gap: 10px;
    }

    .jb-page .naukri-wrapper-RS .form-card-RS form .otpwrapper-RS .otp-inputs input,
    .jb-page .otpwrapper-RS .otp-inputs input {
        width: 52px;
        height: 58px;
        font-size: 23px;
    }
}

/* ── 4-box OTP on the login step (#login_otp_boxes) ───────────────── */
.jb-page .otp-boxes-jb {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 16px auto 6px;
}

.jb-page .otp-box-jb {
    width: 58px;
    height: 64px;
    padding: 0;
    border: 1.5px solid var(--jb-border);
    border-radius: 16px;
    background: var(--jb-surface-2);
    box-shadow: inset 0 1px 2px rgba(15, 35, 64, .05);
    color: var(--jb-text);
    font-family: var(--jb-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    caret-color: var(--jb-accent);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.jb-page .otp-box-jb:hover {
    border-color: var(--jb-border-strong);
    background: #fff;
}

.jb-page .otp-box-jb:focus {
    outline: none;
    transform: translateY(-1px);
    border-color: var(--jb-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(31, 111, 197, .14), 0 8px 18px rgba(31, 111, 197, .14);
}

@media (max-width: 480px) {
    .jb-page .otp-boxes-jb { gap: 10px; }
    .jb-page .otp-box-jb { width: 52px; height: 58px; font-size: 23px; }
}

/* ============================================================================
   Profile slide-over (the right-hand panel behind the avatar button)
   ----------------------------------------------------------------------------
   Only the inside is restyled. position / width / right / transition stay with
   style.css, because script.js slides the panel by toggling .active-headerpanel
   against its right:-380px offset — changing the width there would break it.
   ========================================================================== */

.jb-page .overlay-headerpanel {
    background: rgba(20, 16, 40, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.jb-page .profile-panel-headerpanel {
    display: flex;
    flex-direction: column;
    border-radius: 22px 0 0 22px;
    border-left: 1px solid var(--jb-border);
    background: #fff;
    box-shadow: -18px 0 48px rgba(15, 35, 64, .22);
    overflow: hidden;
}

/* header row */
.jb-page .profile-panel-headerpanel .panel-header-headerpanel {
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--jb-border);
    background: linear-gradient(120deg, var(--jb-peach, #E3EFFB), var(--jb-lav-soft));
    color: var(--jb-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.jb-page .profile-panel-headerpanel .panel-header-headerpanel i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: var(--jb-muted);
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.jb-page .profile-panel-headerpanel .panel-header-headerpanel i:hover {
    background: #fff;
    color: var(--jb-accent);
}

/* identity block */
.jb-page .profile-panel-headerpanel .profile-info-headerpanel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 18px 22px;
}

.jb-page .profile-panel-headerpanel .profile-pic-headerpanel {
    width: 86px;
    height: 86px;
    margin: 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--jb-accent), var(--jb-lav));
    box-shadow: 0 10px 24px rgba(15, 35, 64, .18);
}

.jb-page .profile-panel-headerpanel .profile-pic-headerpanel img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 3px solid #fff;
    object-fit: cover;
    background: #fff;
}

.jb-page .profile-panel-headerpanel .profile-info-headerpanel h3 {
    margin: 14px 0 2px;
    color: var(--jb-text);
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.jb-page .profile-panel-headerpanel .profile-info-headerpanel p {
    margin: 2px 0;
    color: var(--jb-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    word-break: break-word;
}

.jb-page .profile-panel-headerpanel .profile-link-headerpanel {
    display: flex;
    width: 100%;
    margin: 16px 0 6px;
    min-height: 44px;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--jb-accent), var(--jb-accent-2)) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(31, 111, 197, .28);
    transition: transform .16s ease, box-shadow .16s ease;
}

.jb-page .profile-panel-headerpanel .profile-link-headerpanel:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(31, 111, 197, .36);
}

/* nav rows + logout */
.jb-page .profile-panel-headerpanel .mobile-nav {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--jb-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jb-page .profile-panel-headerpanel .upgrade-box-headerpanel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--jb-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--jb-text) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.jb-page .profile-panel-headerpanel .upgrade-box-headerpanel i {
    color: var(--jb-faint);
    font-size: 12px;
    transition: transform .15s ease, color .15s ease;
}

.jb-page .profile-panel-headerpanel .upgrade-box-headerpanel:hover {
    transform: translateX(2px);
    border-color: rgba(31, 111, 197, .35) !important;
    background: var(--jb-lav-soft) !important;
    color: #1A5FAA !important;
}

.jb-page .profile-panel-headerpanel .upgrade-box-headerpanel:hover i {
    color: var(--jb-lav);
    transform: translateX(2px);
}

/* logout reads as the destructive row */
.jb-page .profile-panel-headerpanel #user_logout_btn {
    margin-top: 14px;
}

.jb-page .profile-panel-headerpanel #user_logout_btn:hover {
    border-color: rgba(217, 45, 32, .35) !important;
    background: #fef3f2 !important;
    color: #b42318 !important;
}

.jb-page .profile-panel-headerpanel #user_logout_btn:hover i {
    color: #b42318;
}

@media (max-width: 900px) {
    .jb-page .profile-panel-headerpanel {
        border-radius: 18px 0 0 18px;
    }

    .jb-page .profile-panel-headerpanel .profile-info-headerpanel {
        padding: 20px 14px;
    }

    .jb-page .profile-panel-headerpanel .profile-pic-headerpanel {
        width: 72px;
        height: 72px;
    }
}

/* ============================================================================
   Mobile hardening
   ----------------------------------------------------------------------------
   These rows are flex without flex-wrap in the page stylesheets, so on a narrow
   screen their children are squeezed or pushed past the viewport. Allowing them
   to wrap changes nothing on desktop (they fit on one line there).
   ========================================================================== */

.jb-page .results-header,
.jb-page .results-controls,
.jb-page .job-actions,
.jb-page .job-footer,
.jb-page .job-meta,
.jb-page .job-tags,
.jb-page .job-tags-l,
.jb-page .company-tags,
.jb-page .company-badges,
.jb-page .jb-join-actions {
    flex-wrap: wrap;
}

.jb-page .results-header,
.jb-page .job-actions,
.jb-page .job-footer {
    gap: 10px;
}

.jb-page .results-controls {
    gap: 8px;
}

/* long values (emails, company names, URLs) must not stretch their container */
.jb-page .job-title,
.jb-page .company-name,
.jb-page .jb-jc-title,
.jb-page .jb-cc-name,
.jb-page #user_detail {
    overflow-wrap: anywhere;
}

.jb-page .job-main-c,
.jb-page .job-main,
.jb-page .company-info,
.jb-page .jb-jc-id,
.jb-page .jb-cc-id {
    min-width: 0;
}

@media (max-width: 640px) {
    /* stack the sort / result-count bar instead of cramming it */
    .jb-page .results-header {
        align-items: flex-start;
    }

    .jb-page .results-controls,
    .jb-page .results-controls .custom-select,
    .jb-page .sort-select {
        width: 100%;
    }

    /* apply / save on a job detail become full-width rows */
    .jb-page .job-actions .btn,
    .jb-page .job-actions .apply-job-btn,
    .jb-page .job-actions .save-job-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* the slider frames use negative side margins; keep them inside the viewport */
    .jb-page .featured-slider,
    .jb-page .job-listing-row-keyJP {
        margin-left: 0;
        margin-right: 0;
    }

    .jb-page .featured-slider .slick-prev,
    .jb-page .job-listing-row-keyJP .slick-prev,
    .jb-page .featured-slider .slick-next,
    .jb-page .job-listing-row-keyJP .slick-next {
        display: none !important;
    }
}

/* ── Parsley validation messages (registration form) ──────────────── */
.jb-page .parsley-errors-list {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.jb-page .parsley-errors-list li {
    color: #d92d20;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.jb-page input.parsley-error,
.jb-page select.parsley-error,
.jb-page textarea.parsley-error {
    border-color: #f04438 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, .12) !important;
}

.jb-page input.parsley-success,
.jb-page select.parsley-success {
    border-color: rgba(10, 124, 66, .45) !important;
}

/* ============================================================================
   Company detail — /company/{slug}/{enc_id}/
   ----------------------------------------------------------------------------
   Three stylesheets reach this page: jobs/assets/css/style.css, the template's
   own <style> block, and this file (loaded last). The first two disagreed about
   the tab body layout and about which tab reads as selected, so the rules below
   settle those conflicts first and then finish the page in the jobs theme.
   Presentation only — no markup, id, handler or Smarty block is involved.
   ========================================================================== */

/* ── Layout: drop the phantom aside column ────────────────────────────
   Both page stylesheets lay the tab body out as "1fr 320px", but the aside is
   conditional (it only exists when the company has awards), so on most
   companies the job list was squeezed into two thirds of the shell with dead
   space beside it. (The Jobs tab is different — its second column is the
   .company-filters rail, which is always rendered, so it keeps both columns.)
   style.css meant to cover that with ".single-col .grid", except both classes
   sit on the SAME element, so that descendant selector never matched anything.
   :has() hands the second track back only when a second column was actually
   rendered; browsers without :has() simply stack it underneath. */
.jb-page.jb-company_profile_page .company-tabs .grid,
.jb-page.jb-company_profile_page .company-tabs .grid.single-col {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.jb-page.jb-company_profile_page .company-tabs .grid:has(> .col.aside, > .company-filters),
.jb-page.jb-company_profile_page .company-tabs .grid.single-col:has(> .col.aside, > .company-filters) {
    grid-template-columns: minmax(0, 1fr) 320px;
}

/* the page collapses to one column at 1100px; these selectors outweigh that
   rule, so they have to honour the same breakpoint themselves */
@media (max-width: 1100px) {

    .jb-page.jb-company_profile_page .company-tabs .grid,
    .jb-page.jb-company_profile_page .company-tabs .grid.single-col,
    .jb-page.jb-company_profile_page .company-tabs .grid:has(> .col.aside, > .company-filters),
    .jb-page.jb-company_profile_page .company-tabs .grid.single-col:has(> .col.aside, > .company-filters) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── One content shell for the whole page ─────────────────────────────
   The hero card sized itself with "min(1160px, 94vw)" while the tab body below
   it used .company-tabs (max-width 1200) + .tabs-inner (100%), so the two never
   lined up — and the template's "padding: 18px 0 28px" replaced style.css's
   "padding: 20px", which left the tab body with NO horizontal gutter at all.
   Above 1200px that went unnoticed; at any narrower window the job cards ran
   edge to edge while the hero card above them stayed inset.
   Both now resolve to the same width inside the same gutter, at every size. */
.jb-page.jb-company_profile_page .company-tabs {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

.jb-page.jb-company_profile_page .company-tabs .tabs-inner {
    width: min(1160px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* The hero card is absolutely positioned (style.css centres it with a
   transform), so a plain "100%" resolves against the hero's PADDING box and
   swallows its 24px gutters — subtract them explicitly. Below 769px the page
   drops the card back into normal flow at width:100%, where it already lines
   up with the gutter above, so this only applies to the positioned case. */
@media (min-width: 769px) {
    .jb-page.jb-company_profile_page .company-hero .company-card {
        width: min(1160px, 100% - 48px);
    }

    /* that card is pinned at bottom: -80px, so it hangs 80px past the hero —
       but the tab body only cleared 40px, which is why the tab pills sat on
       top of the card's bottom edge. Clear the overhang and leave a gap.
       Below 769px the card returns to normal flow and the page sets its own
       margin-top, so this stays out of the mobile case. */
    .jb-page.jb-company_profile_page .company-tabs {
        margin-top: 108px;
    }
}

/* keep the tab body's gutter equal to the hero's own padding on small screens */
@media (max-width: 768px) {
    .jb-page.jb-company_profile_page .company-tabs {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 560px) {
    .jb-page.jb-company_profile_page .company-tabs {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── Hero + floating company card ─────────────────────────────────── */
.jb-page.jb-company_profile_page .company-hero::before {
    background: linear-gradient(118deg,
            rgba(27, 24, 48, .82) 0%,
            rgba(15, 35, 64, .62) 46%,
            rgba(31, 111, 197, .42) 100%);
}

.jb-page.jb-company_profile_page .company-card {
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--jb-shadow-3) !important;
    gap: 22px;
    padding: 24px 28px;
}

/* logos are wide as often as they are square — contain them on a white tile
   instead of cropping the middle out with object-fit: cover */
.jb-page.jb-company_profile_page .company-card .company-logo img {
    width: 88px;
    height: 88px;
    padding: 8px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--jb-border);
    border-radius: 20px;
    box-shadow: var(--jb-shadow-1);
}

.jb-page.jb-company_profile_page .company-meta h2 {
    font-size: clamp(22px, 2.5vw, 32px);
    color: var(--jb-text);
}

.jb-page.jb-company_profile_page .company-tagline {
    color: var(--jb-muted);
    font-size: 14.5px;
}

.jb-page.jb-company_profile_page .company-card .company-badges .badge {
    background: var(--jb-lav-soft);
    border: 1px solid rgba(31, 111, 197, .16);
    color: #1A5FAA;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
}

/* ── Tab rail ─────────────────────────────────────────────────────────
   style.css draws a full-width underlined nav with a dark ::after marker under
   the selected tab, while the template draws a rounded pill bar — the page
   ended up wearing both. Settle on the pill rail and drop the marker.
   The second half matters as much: the markup carries aria-selected="true" on
   the first tab and the switcher only moves the .active class, so any rule
   keyed on [aria-selected] left Overview looking selected while another tab
   was open. Selected state is .active alone here; the template's JS now keeps
   aria-selected in step for screen readers. */
.jb-page.jb-company_profile_page .company-tabs .tab-nav {
    display: flex;
    gap: 4px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #E2E4E7;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: blur(8px);
    margin-bottom: 22px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.jb-page.jb-company_profile_page .company-tabs .tab-nav::-webkit-scrollbar {
    display: none;
}

.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link {
    border: 0;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #63778F;
}

.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link:hover {
    background: none !important;
    color: #0F2340 !important;
}

.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link.active {
    background: none !important;
    border-bottom-color: #1F6FC5 !important;
    color: #0F2340 !important;
    box-shadow: none;
}

/* the dark bar under the selected tab belongs to the old underline nav */
.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link.active::after,
.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link[aria-selected="true"]::after {
    display: none;
}

/* aria-selected alone must not read as selected — see note above */
.jb-page.jb-company_profile_page .company-tabs .tab-nav .tab-link[aria-selected="true"]:not(.active) {
    background: transparent !important;
    color: var(--jb-muted) !important;
    box-shadow: none;
}

/* ── Section headings inside the tabs ─────────────────────────────── */
.jb-page.jb-company_profile_page .company-tabs .col.main > h3 {
    margin: 4px 0 14px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--jb-text);
}

/* ── Job cards ────────────────────────────────────────────────────────
   The title and the logo are already links to the same job; stretching the
   title's hit area over the card makes the whole card clickable the way the
   home-page cards are, without touching the markup or nesting the Save button
   inside an anchor. The footer is lifted back above that overlay so Save keeps
   working. */
.jb-page.jb-company_profile_page .company-tabs .job-card {
    position: relative;
    padding: 20px;
}

.jb-page.jb-company_profile_page .company-tabs .job-card a {
    text-decoration: none;
    color: inherit;
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-main > a:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--jb-border);
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--jb-text);
    transition: color .15s ease;
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-logo img {
    width: 56px;
    height: 56px;
    padding: 6px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--jb-border);
    border-radius: 16px;
}

/* first meta row (experience, location) stays plain text with muted icons;
   the second one is a label/value list, which reads better as chips */
.jb-page.jb-company_profile_page .company-tabs .job-card .job-meta.mt15 {
    gap: 8px;
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-meta.mt15 li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--jb-surface-2);
    border: 1px solid var(--jb-border);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12.5px;
    color: var(--jb-text-2);
}

.jb-page.jb-company_profile_page .company-tabs .job-card .job-meta.mt15 li span {
    color: var(--jb-faint);
    font-weight: 600;
}

/* On narrow screens style.css turns .job-meta into a column and the template
   turns .job-footer into one, so the label chips stretched to the full card
   width and the posted-date / Save row ended up stacked and centred. Let the
   chips size to their content, and keep the footer a single spread row — it
   fits comfortably even at 360px. */
@media (max-width: 768px) {
    .jb-page.jb-company_profile_page .company-tabs .job-card .job-meta {
        align-items: flex-start;
    }

    .jb-page.jb-company_profile_page .company-tabs .job-card .job-meta li {
        max-width: 100%;
    }

    .jb-page.jb-company_profile_page .company-tabs .job-card .job-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ── "view more" ──────────────────────────────────────────────────── */
.jb-page.jb-company_profile_page .view-btn-div-as {
    margin-top: 18px;
}

.jb-page.jb-company_profile_page .view-btn-as {
    background: #fff;
    border: 1px solid var(--jb-border-strong);
    color: var(--jb-text-2);
    border-radius: 999px;
    min-height: 42px;
    padding: 0 22px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: capitalize;
    box-shadow: var(--jb-shadow-1);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.jb-page.jb-company_profile_page .view-btn-as:hover {
    background: var(--jb-lav-soft);
    border-color: rgba(31, 111, 197, .3);
    color: #1A5FAA;
}

/* ── Narrow screens ───────────────────────────────────────────────── */
@media (max-width: 720px) {
    .jb-page.jb-company_profile_page .company-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 18px;
    }

    .jb-page.jb-company_profile_page .company-card .company-badges {
        justify-content: center;
    }

    .jb-page.jb-company_profile_page .company-card .company-logo img {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }
}