@font-face {
    font-family: 'Satoshi-Regular';
    src: url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff2') format('woff2'),
        url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff') format('woff'),
        url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    /* Font metric overrides to prevent CLS when font loads */
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Satoshi-Bold';
    src: url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Bold.woff2') format('woff2'),
        url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Bold.woff') format('woff'),
        url('/assets/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
    /* Font metric overrides to prevent CLS when font loads */
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}

.application-container {
    max-width: 500px;
    margin: 50px auto;
}

.form-header {
    margin-bottom: 30px;
}

.disclosure {
    font-size: 0.75rem;
    color: #6c757d;
}

.container {
    position: fixed;
    width: 100%;
    align-items: end;
}

.banner-image {
    width: 100%;
    height: auto;
}

.content {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.logo {
    max-width: 70px;
    margin: 0px;
}

.text {
    font-weight: bold;
}

.form-container {
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5);
    /* Red shadow border */
}

.search-bar {
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.search-bar input {
    border: none;
    box-shadow: none;
}

.search-bar input:focus {
    outline: none;
    box-shadow: none;
}

.search-bar .divider {
    height: 24px;
    width: 1px;
    background-color: #dee2e6;
}

.search-bar .icon {
    color: #6c757d;
    margin-right: .5rem;
    margin-left: .5rem;
}

.floating-apply-btn {
    position: fixed;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-container.discipline .dropdown-menu,
.dropdown-container.states .dropdown-menu {
    width: 100%;
    padding: 15px;
    max-height: 40vh;
    overflow: scroll;
}

.dropdown-toggle.discipline,
.dropdown-container.states .dropdown-menu {
    overflow: scroll;
}

.dropdown-menu {
    width: 100%;
    padding: 0.5em;
    max-height: 40vh;
    overflow: auto;
}

.checkLabel {
    margin-left: 0.5em;
}

.dropdownSpan {
    display: inline-block;
    width: 90%;
    overflow-x: auto;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* ========================================
   Global Loader Styles - Consistent sizing
   ======================================== */
:root {
    --loader-size-lg: 60px;      /* Full page loader */
    --loader-size-md: 40px;      /* Pane loaders */
    --loader-size-sm: 28px;      /* Compact loaders */
    --loader-border-lg: 5px;
    --loader-border-md: 4px;
    --loader-border-sm: 3px;
    --loader-speed: 0.8s;
}

.loader {
    border: var(--loader-border-lg) solid #f3f3f3;
    /* border-top-color is set via inline style with company color */
    border-radius: 50%;
    width: var(--loader-size-lg);
    height: var(--loader-size-lg);
    animation: spin var(--loader-speed) linear infinite;
    margin: auto;
}

/* Full page loader container - always centered */
.loaderHolder {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


input::placeholder {
    color: #D3D3D3 !important;
}

input::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #D3D3D3 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.announcement-banner {
    background-color: #6a1b9a;
    /* Purple background similar to the image */
    padding: 10px 20px;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ensure it stays above other elements */
}


.jobTitle {
    font-size: 20px;
    margin-top: 6px;
    font-weight: bold
}

#redirectOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0072fecf;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

#loader-2 span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: white;
    margin: 35px 5px;
}

#loader-2 span:nth-child(1) {
    animation: bounce 1s ease-in-out infinite;
}

#loader-2 span:nth-child(2) {
    animation: bounce 1s ease-in-out 0.33s infinite;
}

#loader-2 span:nth-child(3) {
    animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce {

    0%,
    75%,
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    25% {
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

.loader1 {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}

#topMainNavbar {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding-top: 0.5em;
}

.navbar {
    border-bottom: 2px solid lightgrey !important;
    padding-top: 1em;
    padding-bottom: 0;
    background: white;
}

.navbar-content {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    width: 100%;
    background: white;
}

.navbar .form-control:focus {
    border-color: none;
    box-shadow: none;
}

.navbarLogo {
    max-width: 100%;
    max-height: 50px;
    display: block;
    height: auto;
    margin: 0px auto;
}

.navbar-brand {
    padding: 0 2em;
    width: 25%;
}

.navbar-search {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.navbar .btn:hover {
    border: none;
}

.navbar-menu {
    width: 25%;
    padding: 0 5%;
}

.dfaic {
    display: flex;
    align-items: center;
}

.search-container {
    box-shadow: 0 0 5px 1px lightgrey;
    color: grey;
    border-radius: 0.4em;
    padding: 0 0.5em;
    width: 70%;
    background-color: white;
}

.sort-by-container {
    /* margin-left: auto; */
}



.customScroll {
    overflow-y: auto;
}

.customScroll::-webkit-scrollbar {
    width: 6px;
}

.customScroll::-webkit-scrollbar-track {
    background: white;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.customScroll::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 10px;
}

.customScroll::-webkit-scrollbar-thumb:hover {
    background: gray;
}

.pac-container {
    z-index: 10000 !important;
}

#desktopJobsOuterContainer {
    width: 100%;
    border: none;
    /* border-right: 1px solid #ddd; */

    /* temp for single pane jobs list */
    /* border-left: 1px solid #ddd; */
    height: calc(100vh - 100px);
}


@media (min-width: 991px) {
    #desktopJobsOuterContainer {
        width: 80% !important;
    }
}


#desktopFiltersContainer {
    width: 20%;
    padding-right: 1em;
}

#desktopJobDetailsContainer {
    border: none;
    border-right: 1px solid #ddd;
    position: static;
    height: calc(100vh - 60px);
    overflow: auto;
}

#chatApplyContainer {
    height: calc(100vh - 60px);
    overflow: auto;
    position: sticky;
    top: 100px;
}

.main-container {
    /* border-left: 1px solid #ddd; */
    /* border-right: 1px solid #ddd; */
    display: flex;
    margin-top: 120px;
    /* Height of the navbar */
    justify-content: center;
}

.main-container-mobile {
    margin-top: 120px;
    /* Height of the navbar */

}

.navbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.6em;
}

.card-body {
    padding: 1.5rem 1rem;
}

.job-banner img {
    width: 100%;
    height: auto;
}

.header-img {
    position: absolute;
    transform: translate(0, -50%);
    left: 3%;
    width: 20%;
}

.header-img img {
    width: 100%;
    height: auto;
    border: 1px solid lightgrey;
}

.header-container {
    /* display: flex; */
}

.header-text {
    margin-left: calc(20% + 30px);
    padding: 0.5rem;
    font-size: 0.9em;
}

.job-details-container,
.job-full-details-container {
    padding: 1rem;
}

.header-title {
    font-size: 1.4em;
    font-weight: bold;
}

.card-title {
    font-weight: bold;
    font-size: 1.2em;
}

.job-card-logo-container {
    width: 16.6667%;
}

.card-title-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 0.5rem;
}

.job-container {
    display: block;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;
    z-index: 2;
}
.v2-job-container {
    display: block;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;
    z-index: 2;
}

.apply-button-container {
    display: flex;
    width: 100%;
    align-items: space-between;
}
#job-form-container {
    margin-top: 1.5em;
}

.job-info-tag {
    background-color: #e7e7e7;
    color: #343434;
    border-radius: 6px;
    font-size: 0.8em;
    padding: 4px 8px;
    margin: 0 0.5em;
}

.backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 25px;
}

.card-container {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    max-width: 1440px;
    margin: 0 auto;
    cursor: pointer;
}
.chat-user-logo {
    height: 75px;
    width: 75px;
    align-self: center;
    justify-self: center;
    border-radius: 100%;
}

#v2BannerContainer {
    height: 3em;
    min-height: 3em; /* Explicit min-height to prevent CLS */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0.5em 0;
    contain: layout style; /* Containment for better rendering performance */
}
.v2NavbarLogo {
    width: 200px;
    height: 50px;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
.job-container {
    position: relative;
    z-index: 2;
}
.v2-job-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    justify-self: center;
}

#v2BackgroundImgContainer {
    position: relative;
    color: white !important;
    padding: 2em 5%;
    width: 100%;
    min-height: 600px; /* Fixed min-height for stability */
    height: auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    justify-self: center;
    align-self: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#v2BackgroundImgContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.apply-form-container {
    color: #333;
}
/* Base styles for job description container - prevent CLS */
.job-desc-container {
    min-height: 300px; /* Reserve space to prevent CLS */
    contain: layout style; /* Isolate layout shifts */
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}
.v2-job-desc {
    color: white;
}
.section {
    margin-bottom: 3em;
}
.sectionHeadline, .sectionIcon {
    font-size: 2em;
    font-weight: bold;
}
.sectionIcon {
    margin-right: 0.5em;
}
.iframeContainer {
    max-width: 100%; 
    overflow: hidden;
    aspect-ratio: 16/9;
}
.iframeContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.actionBtn {
    font-size: 1em;
    font-weight: 600;
    min-height: 38px; /* Prevent CLS by reserving button height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-brand {
        width: auto;
    }

    .navbar-menu {
        margin-left: auto;
    }

    .header-text {
        margin-left: calc(20% + 15px);
        padding: 0.5rem;
    }

    .main-container {
        font-size: 0.9em;
    }
}

@media (min-width: 768px) {
    .desktopContainer {
        display: block !important;
    }

    .mobileContainer {
        display: none !important;
    }

    .job-container {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        padding: 1em;
    }
    .v2-job-container {
        display: flex;
        align-items: flex-start;
    }
    .apply-form-container {
        width: 42%;
        position: sticky;
        top: 6.5em;
        max-height: 90vh;
        overflow-y: auto;
    }
    .job-desc-container {
        width: 60%;
        min-height: 400px; /* Reserve space to prevent CLS */
        contain: layout style; /* Isolate layout shifts */
    }
    .v2-job-desc-container {
        width: 60%;
    }
    .lp-details-container  {
        padding-right: 3em;
    }
}

@media (max-width: 767.98px) {
    .desktopContainer {
        display: none !important;
    }

    .mobileContainer {
        display: block !important;
    }

    .navbar {
        padding-top: 0;
        border-bottom: none !important;
    }

    .navbar-brand {
        margin: 0;
        padding: 0;
    }

    .navbarLogo {
        margin: 0 0 0 1em;
        max-height: 40px;
    }

    .navbar-search {
        width: 100%;
        margin-top: 0.4em;
    }

    .search-container {
        width: 90%;
    }

    .user-location-container {
        width: 60%;
        display: flex;
        align-items: center;
        margin-top: 5dvh;
    }

    .sort-by-container {
        width: 40%;
        color: grey;
        display: flex;
        justify-content: flex-end;
    }
    .card-container {
        padding: 0 3%;
    }

    .card-body {
        padding: 1rem 0.75rem;
    }

    .job-card-logo-container {
        width: 10%;
    }
    .v2-job-desc-container {
        padding: 5%;
        min-height: 400px; /* Prevents CLS by reserving space for typical content */
        contain-intrinsic-size: auto 400px; /* Hint browser about expected size */
        content-visibility: auto; /* Improves rendering performance */
    }
    #v2BackgroundImgContainer { 
        background-size: cover;
        min-height: 500px; /* Fixed height on mobile for stability */
    }
    #v2BannerContainer {
        padding: 0 5%;
        min-height: 3em; /* Ensure consistent height on mobile */
    }
}

@media (max-width: 575.98px) {
    .navbar-brand {
        width: 75%;
    }

    .navbar-menu {
        width: 25%;
    }

    .job-card-logo-container {
        width: 20%;
    }
}

@media (min-width: 1400px) {
    .main-container {
        /* margin: 0 5vw; */
    }

    .job-card-logo-container {
        width: 10%;
    }
}
@media (max-width: 1200px) {
    #v2BannerContainer {
        padding: 0 5%;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.full-viewport {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#desktopJobsOuterContainer {
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#careerwebContainer {
    display: flex !important;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#jobOuterContainer,
#details-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

chat-widget {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

#chat-input {
    margin-bottom: 20px !important;
}

#chat-messages{
    padding-bottom: 2px !important;
}


/* custom forms */
.required:after,input[class="required"]::after {
    content:" *";
    color: red;
}

.input-error,.submit-error {
    box-shadow: 0 0 12px #ff000078 !important;
}

/* Adjust chat-container position based on screen size */
#chat-container {
    height: 100%;
    position: relative;
    overflow: hidden;
    border-left: 1px solid #f2f5f8;
}

@media (max-width: 767.98px) {
    #chat-container {
        position: fixed;
        height: fit-content;
        z-index: 10000;
    }
}

/* Button Choices for formBuilder.js (displayAs="buttons") */

.form-group[displayas="buttons"] .form-check {
    display: inline-block;
    margin-right: 0;
    width: 50%;
}

.form-group[displayas="buttons"] .form-check-input[type="radio"],
.form-group[displayas="buttons"] .form-check-input[type="checkbox"] {
    display: none;
}

.form-group[displayas="buttons"] .form-check-label {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background: #fff;
    color: #007bff;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    margin-bottom: 4px;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.form-group[displayas="buttons"] .form-check-input[type="radio"]:checked + .form-check-label,
.form-group[displayas="buttons"] .form-check-input[type="checkbox"]:checked + .form-check-label {
    background: #007bff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.form-group[displayas="buttons"] .form-check-label:hover {
    background: #e6f0ff;
    color: #0056b3;
}

/* Optional: Focus style for accessibility */
.form-group[displayas="buttons"] .form-check-input[type="radio"]:focus + .form-check-label,
.form-group[displayas="buttons"] .form-check-input[type="checkbox"]:focus + .form-check-label {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* ========================================
   Inline Location Edit Styles
   ======================================== */
.user-location-container {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.job-result-text {
    color: #666;
    font-size: 0.8em;
    margin-bottom: 4px;
}

.location-edit-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    cursor: pointer;
    padding: 4px 0;
}

.location-edit-row:hover .user-location-text {
    color: #007bff;
}

.location-icon {
    font-size: 0.9em;
    margin-top: 2px;
    flex-shrink: 0;
}

.user-location-wrapper {
    flex: 1;
    min-width: 0;
}

.user-location-text {
    font-weight: 500;
    color: #333;
    font-size: 0.9em;
    line-height: 1.4;
    word-wrap: break-word;
}

.user-location-placeholder {
    color: #888;
    font-size: 0.9em;
}

.user-location-input {
    font-size: 16px !important;
    padding: 6px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    width: 100% !important;
}

.user-location-input:focus {
    border-color: #007bff !important;
    outline: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .user-location-container {
        padding: 8px 10px;
    }

    .job-result-text {
        font-size: 0.75em;
    }

    .user-location-text {
        font-size: 0.85em;
    }
}

/* ========================================
   Pane-Specific Loaders
   ======================================== */
.pane-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    /* Default hidden - JS sets display:flex when showing */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

/* Pane loaders use medium size */
.pane-loader .loader {
    width: var(--loader-size-md);
    height: var(--loader-size-md);
    border-width: var(--loader-border-md);
    margin: 0; /* Override auto margin for flex centering */
}

#jobOuterContainer {
    position: relative;
}

#jobsListLoader {
    border-radius: 8px;
}

#details-container {
    position: relative;
}

/* Details container loader - inherits from .pane-loader, JS controls display */
#desktopJobDetailsContainerLoader {
    /* display is controlled by JavaScript - flex when shown, none when hidden */
    align-items: center;
    justify-content: center;
}

#desktopJobDetailsContainerLoader .loader {
    width: var(--loader-size-md);
    height: var(--loader-size-md);
    border-width: var(--loader-border-md);
    margin: 0;
}

/* Smaller loader for inline/compact areas */
.pane-loader.compact .loader {
    width: var(--loader-size-sm);
    height: var(--loader-size-sm);
    border-width: var(--loader-border-sm);
}

/* Empty states — paired panels rendered when a search returns zero jobs.
   The list-side panel (.cw-empty-state--list) lives in #jobContainer and
   keeps the jobs rail honest at col-md-3. The details-side panel
   (.cw-empty-state--details) lives in #desktopJobDetailsContainer and
   gives the col-md-6 details pane a "No Job Details Found" placeholder
   instead of collapsing to a blank gutter. Shared base sizes and a small
   variant override for the narrower list rail. */
.cw-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    margin: 0 auto;
    max-width: 460px;
    /* Pin to most of the pane height so the panel reads as composed empty
       state, not a stub at the top of an empty container. */
    min-height: calc(100% - 24px);
}

.cw-empty-state-icon {
    font-size: 56px;
    line-height: 1;
    color: #c3c8cf;
    margin-bottom: 22px;
}

.cw-empty-state-title {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 10px;
    color: #1a1814;
}

.cw-empty-state-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #6b665c;
    margin: 0 0 26px;
}

.cw-empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 6px;
    padding: 11px 22px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.cw-empty-state-cta:hover,
.cw-empty-state-cta:focus-visible {
    opacity: 0.92;
    transform: translateY(-1px);
}
.cw-empty-state-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* List-rail variant — col-md-3 is narrow on desktop, so trim padding and
   typography so the panel doesn't overflow horizontally. */
.cw-empty-state--list {
    padding: 36px 16px;
}
.cw-empty-state--list .cw-empty-state-icon { font-size: 42px; margin-bottom: 16px; }
.cw-empty-state--list .cw-empty-state-title { font-size: 1.05rem; }
.cw-empty-state--list .cw-empty-state-body { font-size: 0.85rem; margin-bottom: 20px; }
.cw-empty-state--list .cw-empty-state-cta { padding: 9px 16px; font-size: 0.85rem; }

/* Details-pane variant — wider container, so the type can breathe. */
.cw-empty-state--details {
    max-width: 520px;
}

@media (max-width: 767.98px) {
    .cw-empty-state {
        padding: 36px 18px;
        min-height: 60vh;
    }
    .cw-empty-state--list { padding: 28px 14px; min-height: 50vh; }
    .cw-empty-state-icon { font-size: 44px; margin-bottom: 16px; }
    .cw-empty-state-title { font-size: 1.15rem; }
    .cw-empty-state-body { font-size: 0.9rem; margin-bottom: 20px; }
}

/* ============================================
   CW V2 — SPACING SYSTEM (Phase 3)
   8px baseline ladder. Every padding / margin / gap
   in the cw-* layer derives from this scale so the
   rhythm between nav → tabs → location → cards →
   bottom CTA stays consistent across viewports.
   --cw-rail is the horizontal gutter that frames
   the page content (20px desktop, 12px mobile).
   ============================================ */
:root {
    --cw-space-1:  4px;
    --cw-space-2:  8px;
    --cw-space-3: 12px;
    --cw-space-4: 16px;
    --cw-space-5: 20px;
    --cw-space-6: 24px;
    --cw-space-7: 32px;
    --cw-rail:    20px;
    --cw-tap:     44px;
}
@media (max-width: 767.98px) {
    :root {
        --cw-rail: 14px;
    }
}

/* ============================================
   CW V2 — TOP NAV (Phase 3)
   Scoped to #topMainNavbar so v1 desktop/mobile
   views and v2_jobs_view (non-revamped) still use
   the legacy .navbar / .search-container chrome.
   Reuses the :root --revamp-* tokens from v2_revamp.css.
   ============================================ */

#topMainNavbar {
    border-bottom: 1px solid var(--revamp-border-light) !important;
    background: #fff;
    padding: var(--cw-space-3) 0;
}

#topMainNavbar .navbar-content {
    gap: var(--cw-space-4);
    padding: 0 var(--cw-rail);
    /* Beat Tailwind .md:ml-9 (margin-left: 2.25rem) on the markup so the
       logo aligns to the same --cw-rail as the rest of the page rather
       than sitting 36px in from the viewport edge. */
    margin-left: 0 !important;
    width: 100%;
}

#topMainNavbar .navbar-brand {
    padding: 0;
    width: auto;
    flex: 0 0 auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

#topMainNavbar .navbarLogo {
    max-height: 36px;
    max-width: 180px;
    width: auto;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* Search — V2 pill: rounded-full, soft border, brand focus ring */
#topMainNavbar .navbar-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

#topMainNavbar .search-container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--cw-space-4);
    height: var(--cw-tap);
    background: var(--revamp-bg-tertiary, #f1f3f5);
    border: 1px solid transparent;
    border-radius: var(--revamp-radius-full, 9999px);
    box-shadow: none;
    color: var(--revamp-text-secondary, #4b5563);
    gap: 10px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

#topMainNavbar .search-container:hover {
    background: #eef0f3;
}

#topMainNavbar .search-container:focus-within {
    background: #fff;
    border-color: var(--brand-color, #da2528);
    box-shadow: 0 0 0 3px rgba(218, 37, 40, 0.12);
}

#topMainNavbar .search-container .icon {
    font-size: 14px;
    color: var(--revamp-text-tertiary, #9ca3af);
    flex-shrink: 0;
}

#topMainNavbar .search-container .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100%;
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--revamp-text-primary, #111827);
}

#topMainNavbar .search-container .form-control::placeholder {
    color: var(--revamp-text-tertiary, #9ca3af);
    font-weight: 400;
}

#topMainNavbar .search-container .form-control:focus {
    outline: none;
    box-shadow: none !important;
}

/* Right-side actions cluster (Filters + future buttons) */
#topMainNavbar .cw-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--cw-space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

/* Filter pill — V2 outline chrome, matches the search-pill scale */
#topMainNavbar .cw-nav-filter-btn,
.cw-nav-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-space-2);
    height: var(--cw-tap);
    padding: 0 var(--cw-space-5);
    background: #fff;
    border: 1px solid var(--revamp-border-medium, #d1d5db);
    border-radius: var(--revamp-radius-full, 9999px);
    color: var(--revamp-text-primary, #111827);
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

#topMainNavbar .cw-nav-filter-btn svg,
.cw-nav-filter-btn svg {
    flex-shrink: 0;
    color: var(--revamp-text-secondary, #4b5563);
}

#topMainNavbar .cw-nav-filter-btn:hover,
.cw-nav-filter-btn:hover {
    background: var(--revamp-bg-tertiary, #f1f3f5);
    border-color: var(--revamp-border-medium, #d1d5db);
    color: var(--revamp-text-primary, #111827);
}

#topMainNavbar .cw-nav-filter-btn:focus-visible,
.cw-nav-filter-btn:focus-visible {
    outline: none;
    border-color: var(--brand-color, #da2528);
    box-shadow: 0 0 0 3px rgba(218, 37, 40, 0.12);
}

/* Mobile — keep nav usable on narrow viewports.
   Single horizontal rail driven by .navbar-content (--cw-rail);
   outer #topMainNavbar carries vertical padding only so the logo
   and filter pill flush to the same edge as the cards below.
   The search input lives on a second row (it flex-wraps under
   the logo+filter row) and gets explicit bottom margin so it
   isn't kissing the mobile tab strip underneath.
   Longhand padding-left/right !important is required to beat the
   Bootstrap CDN .navbar default that survives the shorthand here. */
@media (max-width: 767.98px) {
    /* body-prefix to outrank v2_revamp.css mobile #topMainNavbar rule
       (specificity (0,1,0,0) with !important shorthand at later source
       order) — we need (0,1,0,1) to win the cascade for these props. */
    body #topMainNavbar {
        padding-top: var(--cw-space-3) !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
    }
    body #topMainNavbar .navbar-content {
        gap: var(--cw-space-3);
        padding-left: var(--cw-rail) !important;
        padding-right: var(--cw-rail) !important;
        flex-wrap: wrap;
        row-gap: var(--cw-space-3);
    }
    #topMainNavbar .navbar-brand {
        margin-right: auto;
    }
    #topMainNavbar .navbarLogo {
        max-height: 28px;
        max-width: 140px;
    }
    #topMainNavbar .navbar-search {
        order: 3;
        flex: 1 0 100%;
        position: relative;
        padding-top: var(--cw-space-3);
        /* Full-bleed: claw back the navbar-content rail with negative
           L/R margin, then re-add as padding on the search itself so
           the hairline divider stretches edge-to-edge. !important to
           beat v2_revamp.css:135 `.navbar-search { margin: 0 auto
           !important }` which would zero out the bottom margin. */
        margin: 0 calc(-1 * var(--cw-rail)) var(--cw-space-3) !important;
        padding-left: var(--cw-rail);
        padding-right: var(--cw-rail);
        border-top: 1px solid var(--revamp-border-light, #e5e7eb);
    }
    #topMainNavbar .search-container {
        max-width: none;
        height: 40px;
        padding: 0 var(--cw-space-4);
    }
    #topMainNavbar .cw-nav-actions {
        margin-left: 0;
    }
    #topMainNavbar .cw-nav-filter-btn,
    .cw-nav-filter-btn {
        height: 40px;
        padding: 0 var(--cw-space-4);
        font-size: 13px;
    }
    .cw-job-card-title {
        font-size: 14px;
    }
}

/* ============================================
   CW V2 — FILTERS MODAL (Phase 3)
   #desktopFiltersModal — V2 chrome on the Bootstrap
   modal: rounded card, Plus Jakarta Sans header,
   pill close button, dropdown-search uses the same
   pill chrome as #topMainNavbar search, primary
   action button picks up brand color.
   ============================================ */

#desktopFiltersModal .modal-dialog {
    max-width: 540px;
    margin: var(--cw-space-7) auto;
}

#desktopFiltersModal .modal-content {
    border: 1px solid var(--revamp-border-light, #e5e7eb);
    border-radius: var(--revamp-radius-lg, 16px);
    box-shadow: var(--revamp-shadow-xl, 0 20px 60px rgba(0,0,0,0.15));
    overflow: hidden;
}

/* Backdrop blur for premium feel — Safari + Chrome support */
#desktopFiltersModal + .modal-backdrop,
.modal-backdrop[data-bs-target="#desktopFiltersModal"],
body.modal-open .modal-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(17, 24, 39, 0.45);
}

#desktopFiltersModal .modal-header {
    border-bottom: 1px solid var(--revamp-border-light, #e5e7eb);
    padding: var(--cw-space-5) var(--cw-space-6);
    background: #fff;
}

#desktopFiltersModal .modal-title {
    font-family: var(--revamp-font-heading, 'Plus Jakarta Sans'), sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--revamp-text-primary, #111827);
    margin: 0;
}

#desktopFiltersModal .btn-close {
    border-radius: var(--revamp-radius-full, 9999px);
    padding: var(--cw-space-2);
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}

#desktopFiltersModal .btn-close:hover {
    opacity: 1;
    background: var(--revamp-bg-tertiary, #f1f3f5);
}

#desktopFiltersModal .modal-body {
    padding: var(--cw-space-6);
    background: #fff;
}

#desktopFiltersModal .modal-body .form-group {
    margin-bottom: var(--cw-space-5);
}

#desktopFiltersModal .modal-body .form-group:last-child {
    margin-bottom: 0;
}

/* Visual divider before the first dropdown-based filter ("Job Category")
   to separate the LOCATION group from the JOB-attribute group. Uses a
   negative-margin pseudo so it spans the full modal-body gutter. */
#desktopFiltersModal .modal-body .form-group.dropdown-container:first-of-type {
    position: relative;
    padding-top: var(--cw-space-5);
}

#desktopFiltersModal .modal-body .form-group.dropdown-container:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--cw-space-6));
    right: calc(-1 * var(--cw-space-6));
    height: 1px;
    background: var(--revamp-border-light, #e5e7eb);
}

#desktopFiltersModal .modal-body label {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--revamp-text-secondary, #4b5563);
    margin: 0 0 var(--cw-space-2) !important;
}

#desktopFiltersModal .modal-body .form-control {
    border: 1px solid var(--revamp-border-medium, #d1d5db);
    border-radius: var(--revamp-radius-sm, 8px);
    padding: var(--cw-space-3) var(--cw-space-4);
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#desktopFiltersModal .modal-body .form-control:focus {
    border-color: var(--brand-color, #da2528);
    box-shadow: 0 0 0 3px rgba(218, 37, 40, 0.12);
    outline: none;
}

#desktopFiltersModal .dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: var(--revamp-text-secondary, #4b5563);
}

#desktopFiltersModal .dropdown-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: 0 0 2px var(--cw-space-2);
    border: 0;
    border-right: 1.5px solid var(--revamp-text-secondary, #4b5563);
    border-bottom: 1.5px solid var(--revamp-text-secondary, #4b5563);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

#desktopFiltersModal .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-bottom: -4px;
}

/* When a value is selected, the dropdownSpan replaces "Select" — bump
   to primary text color so applied filters read as committed values. */
#desktopFiltersModal .dropdown-toggle .dropdownSpan {
    color: var(--revamp-text-primary, #111827);
    font-weight: 500;
}

#desktopFiltersModal .dropdown-menu {
    border: 1px solid var(--revamp-border-light, #e5e7eb);
    border-radius: var(--revamp-radius-md, 12px);
    box-shadow: var(--revamp-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    padding: var(--cw-space-3);
    margin-top: var(--cw-space-1);
    max-height: 280px;
    overflow-y: auto;
}

#desktopFiltersModal .dropdown-search {
    border-radius: var(--revamp-radius-full, 9999px) !important;
    background: var(--revamp-bg-tertiary, #f1f3f5);
    border: 1px solid transparent;
    padding: var(--cw-space-2) var(--cw-space-4);
    font-size: 13px;
    margin-bottom: var(--cw-space-2) !important;
}

/* Checkbox list items inside the dropdown — clean row with hover state */
#desktopFiltersModal .dropdown-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#desktopFiltersModal .dropdown-menu li label.checkLabel {
    display: flex;
    align-items: center;
    gap: var(--cw-space-3);
    padding: var(--cw-space-2) var(--cw-space-3);
    margin: 0;
    border-radius: var(--revamp-radius-sm, 8px);
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--revamp-text-primary, #111827);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.12s;
}

#desktopFiltersModal .dropdown-menu li:hover label.checkLabel {
    background: var(--revamp-bg-tertiary, #f1f3f5);
}

#desktopFiltersModal .dropdown-menu li input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-color, #da2528);
    cursor: pointer;
    flex-shrink: 0;
}

#desktopFiltersModal .dropdown-search:focus {
    background: #fff;
    border-color: var(--brand-color, #da2528);
    box-shadow: 0 0 0 3px rgba(218, 37, 40, 0.12);
}

#desktopFiltersModal .modal-footer {
    border-top: 1px solid var(--revamp-border-light, #e5e7eb);
    padding: var(--cw-space-4) var(--cw-space-6);
    gap: var(--cw-space-2);
    background: var(--revamp-bg-primary, #f8f9fa);
    justify-content: flex-end !important;
}

#desktopFiltersModal .modal-footer .btn {
    height: var(--cw-tap);
    padding: 0 var(--cw-space-5);
    border-radius: var(--revamp-radius-full, 9999px);
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}

#desktopFiltersModal .modal-footer .btn-secondary {
    background: transparent;
    color: var(--revamp-text-secondary, #4b5563);
    border: 1px solid var(--revamp-border-medium, #d1d5db);
}

#desktopFiltersModal .modal-footer .btn-secondary:hover {
    background: var(--revamp-bg-tertiary, #f1f3f5);
    color: var(--revamp-text-primary, #111827);
}

#desktopFiltersModal .modal-footer .btn:not(.btn-secondary):hover {
    filter: brightness(0.92);
}

/* Mobile — modal slides up from the bottom as a bottom-sheet, full-bleed
   width, rounded only on the top. Tap-friendly footer + body padding. */
@media (max-width: 575.98px) {
    #desktopFiltersModal .modal-dialog {
        max-width: 100%;
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        transition: transform 0.25s ease;
    }
    #desktopFiltersModal.show .modal-dialog {
        transform: translateY(0);
    }
    #desktopFiltersModal .modal-content {
        border-radius: var(--revamp-radius-lg, 16px) var(--revamp-radius-lg, 16px) 0 0;
        max-height: 90vh;
    }
    #desktopFiltersModal .modal-header,
    #desktopFiltersModal .modal-body,
    #desktopFiltersModal .modal-footer {
        padding-left: var(--cw-space-5);
        padding-right: var(--cw-space-5);
    }
    #desktopFiltersModal .modal-body .form-group.dropdown-container:first-of-type::before {
        left: calc(-1 * var(--cw-space-5));
        right: calc(-1 * var(--cw-space-5));
    }
}

/* ============================================
   CW V2 — MOBILE TABS + BOTTOM CTA (Phase 3)
   .cw-mobile-tabs (Jobs/Details/Chat) and the
   floating .cw-mobile-cta bar. Visible only on
   narrow viewports; chrome aligned with the rest
   of the CW V2 surface.
   ============================================ */

.cw-mobile-tabs {
    display: none;
}

@media (max-width: 767.98px) {
    .cw-mobile-tabs {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 30;
        background: #fff;
        border-bottom: 1px solid var(--revamp-border-light, #e5e7eb);
        padding: 0 var(--cw-rail);
        gap: 0;
    }

    .cw-mtab {
        flex: 1 1 0;
        padding: var(--cw-space-3) var(--cw-space-2);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-family: var(--revamp-font-body, 'Inter'), sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--revamp-text-tertiary, #9ca3af);
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
        margin-bottom: -1px;
    }

    .cw-mtab:hover {
        color: var(--revamp-text-secondary, #4b5563);
    }

    .cw-mtab.active {
        color: var(--brand-color, #da2528);
        border-bottom-color: var(--brand-color, #da2528);
    }

    /* Bottom CTA bar — Call (outline) + Chat (brand fill) */
    .cw-mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        gap: var(--cw-space-2);
        padding: var(--cw-space-3) var(--cw-rail) calc(var(--cw-space-3) + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--revamp-border-light, #e5e7eb);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    }

    .cw-mcta-btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--cw-space-2);
        height: 52px;
        padding: 0 var(--cw-space-3);
        border-radius: 14px;
        font-family: var(--revamp-font-heading, 'Plus Jakarta Sans'), sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition: filter 0.15s, background 0.15s;
        border: 1px solid transparent;
    }

    .cw-mcta-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .cw-mcta-call {
        background: var(--revamp-bg-tertiary, #f1f3f5);
        border-color: transparent;
        color: var(--revamp-text-primary, #111827);
    }

    .cw-mcta-call:hover {
        background: #e9ecef;
        color: var(--revamp-text-primary, #111827);
    }

    .cw-mcta-chat,
    .cw-mcta-apply {
        /* brand bg + text color come from inline style on the button */
    }

    .cw-mcta-chat:hover,
    .cw-mcta-apply:hover {
        filter: brightness(0.92);
    }

    /* Bottom padding on the page so the fixed CTA bar doesn't overlay
       the last bit of content. 52 (button) + 12*2 (padding) + ~8 safe-area
       buffer ≈ 84. */
    body {
        padding-bottom: calc(52px + var(--cw-space-6) + env(safe-area-inset-bottom));
    }
}

/* ============================================
   CW V2 — APPLY CARD DISCLAIMER (Phase 3)
   v2_revamp.css:1479 paints .cw-apply-card .discInfo at 10px /
   --revamp-text-tertiary (#9ca3af) — washes out against the
   white card, mirrors the LP V2 issue we just fixed. Bump to
   readable 11px slate-700 + brand-color link, scoped to the
   careerweb V2 detail surface so the LP V2 fix isn't disturbed.
   ============================================ */

.cw-detail-container .cw-apply-card .discInfo,
.cw-detail-container .cw-apply-card #discInfo {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
}

.cw-detail-container .cw-apply-card .discInfo a,
.cw-detail-container .cw-apply-card #discInfo a {
    color: var(--brand-color, #da2528) !important;
    font-weight: 500;
    text-decoration: underline;
}

/* ============================================
   CW V2 — JOB DETAILS SECTION (Phase 3)
   Eyebrow + section title + body for the long-form
   JD on the detail XHR view. Mirrors the legacy
   jobApplicationForm.php "Full Job Details" reading
   rhythm: small caps eyebrow, Plus Jakarta Sans
   section title, then the htmlPurify'd body with
   nested paragraph + heading rhythm.
   ============================================ */
.cw-jd-section {
    padding: var(--cw-space-6) var(--cw-space-6) calc(var(--cw-space-6) + 4px) !important;
}

.cw-jd-eyebrow {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-color, #da2528);
    margin: 0 0 var(--cw-space-2);
}

.cw-jd-title {
    font-family: var(--revamp-font-heading, 'Plus Jakarta Sans'), sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--revamp-text-primary, #111827);
    margin: 0 0 var(--cw-space-4);
    padding: 0 0 var(--cw-space-3);
    border-bottom: 1px solid var(--revamp-border-light, #e5e7eb);
}

.cw-jd-body {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--revamp-text-secondary, #4b5563);
}

/* Typography rhythm INSIDE the htmlPurify'd description so injected
   <h3>, <h4>, <ul>, <li>, <strong> all sit on the same scale and the
   reading column doesn't feel pasted-in. */
.cw-jd-body h1,
.cw-jd-body h2,
.cw-jd-body h3 {
    font-family: var(--revamp-font-heading, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 700;
    color: var(--revamp-text-primary, #111827);
    margin: var(--cw-space-5) 0 var(--cw-space-2);
    line-height: 1.3;
}

.cw-jd-body h1 { font-size: 18px; }
.cw-jd-body h2 { font-size: 17px; }
.cw-jd-body h3 { font-size: 16px; }

.cw-jd-body h4,
.cw-jd-body h5,
.cw-jd-body h6 {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--revamp-text-primary, #111827);
    margin: var(--cw-space-4) 0 var(--cw-space-2);
}

.cw-jd-body p {
    margin: 0 0 var(--cw-space-3);
}

.cw-jd-body p:last-child {
    margin-bottom: 0;
}

.cw-jd-body ul,
.cw-jd-body ol {
    margin: 0 0 var(--cw-space-3);
    padding-left: var(--cw-space-5);
}

.cw-jd-body li {
    margin-bottom: var(--cw-space-1);
}

.cw-jd-body li::marker {
    color: var(--brand-color, #da2528);
}

.cw-jd-body strong,
.cw-jd-body b {
    color: var(--revamp-text-primary, #111827);
    font-weight: 600;
}

.cw-jd-body a {
    color: var(--brand-color, #da2528);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cw-jd-body hr {
    border: none;
    border-top: 1px solid var(--revamp-border-light, #e5e7eb);
    margin: var(--cw-space-5) 0;
}

/* Multiple stacked sections (Job Description + Physical Requirements)
   share margin-bottom so they breathe between cards without doubling. */
.cw-jd-section + .cw-jd-section {
    margin-top: var(--cw-space-4);
}

/* ============================================
   CW V2 — Mobile bottom-bar Apply button (Phase 3)
   Lives inside .cw-mobile-cta. Hidden by default; revealed
   via JS after the detail XHR injects a form (data-apply-by-form
   == 1). Brand-fill pill matching the existing .cw-mcta-chat
   chrome — sits between Call and Chat in the fixed bottom bar.
   ============================================ */
.cw-mcta-btn.cw-mcta-apply {
    /* inherits .cw-mcta-btn flex/height/radius from the @media
       (max-width: 767.98px) block above. Brand bg/color come via
       inline style at the element. */
}

@media (max-width: 767.98px) {
    .cw-jd-section {
        padding: var(--cw-space-5) var(--cw-space-4) calc(var(--cw-space-5) + 4px) !important;
    }
    .cw-jd-title {
        font-size: 19px;
    }
    .cw-jd-body {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ============================================
   CW V2 — DETAIL HERO BANNER (Phase 3)
   v2_revamp.css locks the banner wrapper + image to a
   fixed 200px (180 mobile) height. That ignores the
   actual image aspect (~1960×400 ≈ 4.9:1) so the image
   either stretches or gets aggressively cropped at the
   pane width. Switch to aspect-ratio with a clamped
   height range so it scales with the column width while
   never collapsing below a usable hero size.
   ============================================ */
.cw-detail-container .cw-banner-wrapper {
    height: auto !important;
    aspect-ratio: 1960 / 400;
    max-height: 280px;
    min-height: 140px;
}

.cw-detail-container .cw-banner-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1960 / 400;
    object-fit: cover !important;
    object-position: center !important;
}

@media (max-width: 767.98px) {
    .cw-detail-container .cw-banner-wrapper {
        max-height: 200px;
        min-height: 120px;
    }
}

/* ============================================
   CW V2 — DETAIL CONTENT-AREA RAIL (Phase 3)
   v2_revamp.css gives .cw-content-area 20px L/R padding. Combined
   with .cw-desc-card / .cw-apply-card internal padding (20-24px),
   the center pane was eating 40-44px of horizontal real estate on
   each side. Trim the outer rail to a tighter inset so the cards
   reclaim the pane width while keeping a hairline of breathing
   from the column dividers.
   ============================================ */
.cw-detail-container .cw-content-area {
    padding-left: var(--cw-space-2) !important;
    padding-right: var(--cw-space-2) !important;
}

@media (max-width: 767.98px) {
    .cw-detail-container .cw-content-area {
        padding-left: var(--cw-space-3) !important;
        padding-right: var(--cw-space-3) !important;
    }
}

/* ============================================
   CW V2 — LOCATION ROW (Phase 3, editorial)
   The "Job Search Results for: / Enter your location"
   block sits at the top of the jobs list. Treat it as
   a section eyebrow: small uppercase caption + bigger
   editable location below. Scoped inside #jobOuterContainer
   so the legacy rules at line 986 only apply to v1 views.
   ============================================ */

#jobOuterContainer .user-location-container {
    padding: 0 0 var(--cw-space-4);
    border-bottom: none;
    margin-bottom: var(--cw-space-3);
}

#jobOuterContainer .job-result-text {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--revamp-text-tertiary, #9ca3af);
    margin: 0 0 var(--cw-space-2);
}

#jobOuterContainer .location-edit-row {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-space-2);
    padding: var(--cw-space-2) var(--cw-space-3);
    margin: 0;
    border-radius: var(--revamp-radius-full, 9999px);
    background: transparent;
    border: 1px solid var(--revamp-border-light, #e5e7eb);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

#jobOuterContainer .location-edit-row:hover {
    border-color: var(--brand-color, #da2528);
    background: var(--revamp-bg-tertiary, #f1f3f5);
}

#jobOuterContainer .location-icon {
    margin: 0;
    font-size: 12px;
}

#jobOuterContainer .user-location-text,
#jobOuterContainer .user-location-placeholder {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--revamp-text-primary, #111827);
}

#jobOuterContainer .user-location-placeholder {
    color: var(--revamp-text-secondary, #4b5563);
}

#jobOuterContainer .location-edit-row:hover .user-location-text {
    color: var(--brand-color, #da2528);
}

@media (max-width: 767.98px) {
    #jobOuterContainer .user-location-container {
        padding: 0 0 var(--cw-space-3);
        margin-bottom: var(--cw-space-3);
    }
    #jobOuterContainer .job-result-text {
        font-size: 10px;
    }
}

/* ============================================
   CW V2 — LEFT SIDEBAR JOB CARDS (Phase 3)
   Replaces the legacy .card-container chrome for
   the careerweb V2 results list. v1 entry points
   keep using .card-container (untouched).
   ============================================ */

#jobOuterContainer {
    padding: var(--cw-space-5) var(--cw-rail) var(--cw-space-3) !important;
    background: var(--revamp-bg-primary, #f8f9fa);
}

.cw-job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cw-space-3);
    background: #fff;
    border: 1px solid var(--revamp-border-light, #e5e7eb);
    border-left: 3px solid transparent;
    border-radius: var(--revamp-radius-md, 12px);
    padding: var(--cw-space-4) var(--cw-space-5);
    margin-bottom: var(--cw-space-3);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow: var(--revamp-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.cw-job-card:hover {
    border-color: var(--revamp-border-medium, #d1d5db);
    border-left-color: var(--brand-color, #da2528);
    box-shadow: var(--revamp-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}

.cw-job-card.is-selected,
.cw-job-card.cw-card-active,
.cw-job-card[data-selected="true"] {
    border-color: var(--brand-color, #da2528);
    border-left-color: var(--brand-color, #da2528);
    box-shadow: var(--revamp-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    background: #fff;
}

.cw-job-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--cw-space-3);
}

.cw-job-card-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--revamp-radius-sm, 8px);
    overflow: hidden;
    background: var(--revamp-bg-tertiary, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cw-space-1);
}

.cw-job-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cw-job-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.cw-job-card-title {
    font-family: var(--revamp-font-heading, 'Plus Jakarta Sans'), sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--revamp-text-primary, #111827);
    margin: 0 0 var(--cw-space-1);
    /* clamp to 2 lines so long titles don't push the card */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cw-job-card-company {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--revamp-text-secondary, #4b5563);
    margin: 0 0 var(--cw-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cw-job-card-loc {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.cw-job-card-desc {
    font-family: var(--revamp-font-body, 'Inter'), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--revamp-text-secondary, #4b5563);
    margin: 0;
    /* 3-line clamp so the preview stays tight */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pills inside the new card — tighten the row spacing */
.cw-job-card .cw-job-pills {
    margin: 0;
    gap: var(--cw-space-2);
}

@media (max-width: 767.98px) {
    /* v2_revamp.css scopes `#careerwebContainer > #jobOuterContainer
       { padding: 0 !important }` at specificity (0,2,0,0). Match the
       same chain length here so this rule wins by source-order, and
       restore the horizontal breathing the cards need. */
    #desktopJobsOuterContainer #careerwebContainer #jobOuterContainer {
        padding: var(--cw-space-3) var(--cw-rail) var(--cw-space-4) !important;
    }
    /* The Bootstrap .mt-2 utility on the layout wrapper pushes the
       location row 45px below the sticky mobile tabs. Trim that gap
       so the list area starts immediately under the tabs. */
    #jobOuterContainer .user-location-container {
        margin-top: 0 !important;
        padding: 0 0 var(--cw-space-3) !important;
    }
    .cw-job-card {
        padding: var(--cw-space-4);
        margin-bottom: var(--cw-space-3);
    }
    .cw-job-card-logo {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    .cw-job-card-title {
        font-size: 14px;
    }
}