/* ==========================================================
   PUBLIC WEBSITE - GLOBAL
========================================================== */
/* Common*/
/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

:root {
    --font-primary: "Inter", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,
body {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #26332f;
}

/* Main page titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: #173f35;
    letter-spacing: -0.025em;
}

h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

h3 {
    font-size: 19px;
    font-weight: 650;
    line-height: 1.3;
}

h4 {
    font-size: 16px;
    font-weight: 650;
}

h5,
h6 {
    font-weight: 600;
}

/* Normal content */
p,
span,
div,
td,
th,
label,
input,
select,
textarea,
button,
a {
    font-family: var(--font-primary);
}

/* Form labels */
.form-label,
label {
    font-size: 13px;
    font-weight: 600;
    color: #40524c;
}

/* Inputs */
.form-control,
.form-select {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}

/* Buttons */
.btn {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Tables */
.table {
    font-size: 13.5px;
}

.table th {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64736e;
}

.table td {
    font-weight: 400;
    color: #293a35;
}

/* Sidebar */
.sidebar,
.sidebar a,
.sidebar-menu a {
    font-family: var(--font-primary);
}

.sidebar-menu a {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.sidebar-menu a.active {
    font-weight: 650;
}

.sidebar-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* Dashboard KPI numbers */
.stat-number,
.metric-value,
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #173f35;
}

/* Small / secondary information */
.text-muted,
small,
.small {
    font-size: 12.5px;
    line-height: 1.5;
}

/* Candidate / job card titles */
.candidate-name,
.job-title,
.card-title {
    font-weight: 650;
    letter-spacing: -0.018em;
}

/* Badges */
.badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Common ends */

:root {
    --public-green-950: #063d2c;
    --public-green-900: #07543b;
    --public-green-800: #087052;
    --public-green-700: #0a8a64;
    --public-green-600: #13a778;

    --public-green-100: #dff6ec;
    --public-green-50: #effbf6;

    --public-white: #ffffff;

    --public-grey-950: #17201d;
    --public-grey-800: #34423d;
    --public-grey-700: #50605a;
    --public-grey-600: #697873;
    --public-grey-500: #84918c;
    --public-grey-300: #d9e0dd;
    --public-grey-200: #e8edeb;
    --public-grey-100: #f3f6f5;
    --public-grey-50: #f8faf9;

    --public-border: #e1e8e5;

    --public-shadow-sm:
        0 4px 18px rgba(18, 58, 44, 0.06);

    --public-shadow-md:
        0 12px 35px rgba(18, 58, 44, 0.10);

    --public-radius: 14px;
}


.public-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   TOP BAR
========================================================== */

.public-topbar {
    background:
        linear-gradient(
            90deg,
            var(--public-green-950),
            var(--public-green-900)
        );

    color: rgba(255,255,255,.88);
    font-size: 12px;
}


.topbar-inner {
    min-height: 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.topbar-left {
    display: flex;
    align-items: center;
    gap: 13px;
}


.topbar-left span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}


.topbar-left i {
    color: #8fe0bd;
}


.topbar-divider {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,.20);
}


.topbar-right {
    color: #cce8dc;
}


/* ==========================================================
   NAVBAR
========================================================== */

.public-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255,255,255,.97);

    border-bottom: 1px solid var(--public-border);

    box-shadow: 0 3px 16px rgba(25,60,48,.04);

    backdrop-filter: blur(14px);
}


.navbar-inner {
    height: 76px;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* ==========================================================
   BRAND
========================================================== */

.public-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--public-grey-950);
    text-decoration: none;

    flex-shrink: 0;
}


.brand-mark {
    width: 43px;
    height: 43px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 18px;

    background:
        linear-gradient(
            145deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    box-shadow:
        0 8px 20px rgba(10,138,100,.22);
}


.brand-copy {
    display: flex;
    flex-direction: column;
}


.brand-name {
    font-size: 17px;
    line-height: 1.25;

    font-weight: 800;

    color: var(--public-green-950);
}


.brand-tagline {
    margin-top: 3px;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .7px;

    color: var(--public-grey-500);
}


/* ==========================================================
   NAVIGATION LINKS
========================================================== */

.public-nav-links {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 4px;
}


.public-nav-link {
    position: relative;

    padding: 28px 11px 26px;

    text-decoration: none;

    color: var(--public-grey-700);

    font-size: 13px;
    font-weight: 600;

    transition: .2s ease;
}


.public-nav-link:hover {
    color: var(--public-green-800);
}


.public-nav-link::after {
    content: "";

    position: absolute;

    left: 11px;
    right: 11px;
    bottom: 18px;

    height: 2px;

    border-radius: 10px;

    background: var(--public-green-700);

    transform: scaleX(0);

    transition: transform .2s ease;
}


.public-nav-link:hover::after,
.public-nav-link.active::after {
    transform: scaleX(1);
}


.public-nav-link.active {
    color: var(--public-green-800);
}


/* ==========================================================
   NAV ACTIONS
========================================================== */

.public-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}


.header-login-btn,
.header-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    height: 40px;

    padding: 0 14px;

    border: 1px solid var(--public-grey-200);
    border-radius: 10px;

    color: var(--public-grey-800);

    background: var(--public-white);

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition: .2s ease;
}


.header-login-btn:hover,
.header-dashboard-btn:hover {
    color: var(--public-green-800);

    border-color: #b9dfcf;

    background: var(--public-green-50);
}


.header-jobs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    height: 40px;

    padding: 0 17px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color: white;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(10,138,100,.18);

    transition: .2s ease;
}


.header-jobs-btn:hover {
    color: white;

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(10,138,100,.25);
}


/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid var(--public-grey-200);
    border-radius: 10px;

    background: white;

    color: var(--public-green-900);

    font-size: 17px;
}


.public-mobile-menu {
    display: none;

    padding: 10px 20px 18px;

    border-top: 1px solid var(--public-grey-100);

    background: white;
}


.public-mobile-menu.open {
    display: block;
}


.public-mobile-menu a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 10px;

    border-radius: 9px;

    text-decoration: none;

    color: var(--public-grey-800);

    font-size: 13px;
    font-weight: 600;
}


.public-mobile-menu a:hover {
    color: var(--public-green-800);
    background: var(--public-green-50);
}


.public-mobile-menu a i {
    width: 20px;
    color: var(--public-green-700);
}


.mobile-menu-separator {
    height: 1px;

    margin: 8px 0;

    background: var(--public-grey-100);
}


/* ==========================================================
   FOOTER CTA
========================================================== */

.footer-cta {
    padding: 48px 0;

    background:
        linear-gradient(
            120deg,
            #dff6ec,
            #f3fbf7 55%,
            #e9f7f1
        );

    border-top: 1px solid #d7eee4;
}


.footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.footer-cta-content {
    max-width: 660px;
}


.footer-cta-label {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--public-green-700);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.footer-cta h2 {
    margin: 0 0 10px;

    color: var(--public-green-950);

    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;

    letter-spacing: -.6px;
}


.footer-cta p {
    margin: 0;

    max-width: 620px;

    color: var(--public-grey-600);

    line-height: 1.7;
}


.footer-cta-actions {
    display: flex;
    gap: 10px;

    flex-shrink: 0;
}


.footer-primary-btn,
.footer-secondary-btn {
    min-height: 45px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.footer-primary-btn {
    color: white;

    background: var(--public-green-800);

    box-shadow:
        0 8px 20px rgba(8,112,82,.18);
}


.footer-primary-btn:hover {
    color: white;
    background: var(--public-green-900);
}


.footer-secondary-btn {
    color: var(--public-green-900);

    background: white;

    border: 1px solid #cce6db;
}


.footer-secondary-btn:hover {
    color: var(--public-green-900);
    background: var(--public-green-50);
}


/* ==========================================================
   MAIN FOOTER
========================================================== */

.footer-main {
    padding: 62px 0 54px;

    background:
        linear-gradient(
            135deg,
            #073f30,
            #06382b 55%,
            #052f25
        );

    color: white;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(270px, 1.6fr)
        1fr
        1fr
        minmax(250px, 1.25fr);

    gap: 55px;
}


.footer-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    color: white;

    text-decoration: none;
}


.footer-brand-mark {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.13);

    color: #9ce5c5;
}


.footer-brand strong {
    display: block;

    font-size: 16px;
}


.footer-brand span {
    display: block;

    margin-top: 3px;

    color: #9fc5b6;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.footer-description {
    margin: 20px 0;

    max-width: 350px;

    color: #b7d0c6;

    font-size: 13px;
    line-height: 1.8;
}


.footer-social {
    display: flex;
    gap: 8px;
}


.footer-social a {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #d8eee5;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.09);

    text-decoration: none;

    transition: .2s ease;
}


.footer-social a:hover {
    color: var(--public-green-950);
    background: #a8e8cc;

    transform: translateY(-2px);
}


/* ==========================================================
   FOOTER COLUMNS
========================================================== */

.footer-column h3 {
    position: relative;

    margin: 5px 0 22px;

    padding-bottom: 12px;

    color: white;

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: #72d3aa;
}


.footer-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.footer-column li {
    margin-bottom: 11px;
}


.footer-column li a {
    color: #b8d1c7;

    text-decoration: none;

    font-size: 13px;

    transition: .2s ease;
}


.footer-column li a:hover {
    color: white;
    padding-left: 3px;
}


/* ==========================================================
   FOOTER CONTACT
========================================================== */

.footer-contact-item {
    display: flex;

    gap: 12px;

    margin-bottom: 18px;
}


.contact-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(123,220,177,.10);

    color: #8be0bb;
}


.footer-contact-item span {
    display: block;

    margin-bottom: 3px;

    color: #8fb6a7;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.footer-contact-item strong,
.footer-contact-item a {
    color: #d5e8e0;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom {
    background: #042b21;

    border-top: 1px solid rgba(255,255,255,.06);
}


.footer-bottom-inner {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.footer-bottom p {
    margin: 0;

    color: #8fb3a5;

    font-size: 11px;
}


.footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 10px;
}


.footer-bottom-links a {
    color: #9ebdaf;

    font-size: 11px;

    text-decoration: none;
}


.footer-bottom-links span {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #688d7e;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .public-nav-links {
        display: none;
    }

    .public-nav-actions {
        margin-left: auto;
    }

    .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .footer-contact {
        grid-column: span 3;
    }
}


@media (max-width: 768px) {

    .public-container {
        width: min(100% - 28px, 1180px);
    }

    .public-topbar {
        display: none;
    }

    .navbar-inner {
        height: 68px;
    }

    .brand-name {
        font-size: 15px;
    }

    .brand-tagline {
        display: none;
    }

    .public-nav-actions {
        display: none;
    }

    .mobile-menu-button {
        margin-left: auto;
    }

    .footer-cta {
        padding: 38px 0;
    }

    .footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }

    .footer-cta-actions {
        width: 100%;
    }

    .footer-primary-btn,
    .footer-secondary-btn {
        flex: 1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 40px 30px;
    }

    .footer-company,
    .footer-contact {
        grid-column: span 2;
    }

    .footer-bottom-inner {
        padding: 18px 0;

        flex-direction: column;

        justify-content: center;

        text-align: center;
    }
}


@media (max-width: 520px) {

    .brand-mark {
        width: 39px;
        height: 39px;
    }

    .footer-cta-actions {
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-company,
    .footer-contact {
        grid-column: auto;
    }
}

/* ==========================================================
   PUBLIC HOME PAGE
   PROFESSIONAL CORPORATE THEME
   Matches: app/templates/public/home.html
========================================================== */


/* ==========================================================
   GLOBAL HOME CONTAINER
========================================================== */

.corp-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   HERO SECTION
========================================================== */

.corp-hero {
    position: relative;

    overflow: hidden;

    padding:
        74px 0 86px;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #f8fcfa 43%,
            #edf8f2 72%,
            #e4f4eb 100%
        );

    border-bottom:
        1px solid #deece5;
}


.corp-hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -250px;
    top: -300px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, 0.06);

    pointer-events: none;
}


.corp-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(19, 167, 120, 0.045);

    pointer-events: none;
}


.corp-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(420px, .98fr);

    align-items: center;

    gap: 75px;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.corp-hero-content {
    max-width: 650px;
}


.corp-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 19px;

    padding:
        7px 11px;

    border:
        1px solid #d5eadf;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.72);

    color:
        var(--public-green-800);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;
}


.corp-eyebrow i {
    color:
        var(--public-green-700);
}


.corp-hero-content h1 {
    margin:
        0;

    max-width:
        690px;

    color:
        var(--public-grey-950);

    font-size:
        clamp(44px, 5.2vw, 70px);

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -2.3px;
}


.corp-hero-content h1 span {
    color:
        var(--public-green-800);
}


.corp-hero-content > p {
    max-width:
        570px;

    margin:
        23px 0 0;

    color:
        var(--public-grey-600);

    font-size:
        15px;

    line-height:
        1.85;
}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.corp-hero-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top:
        29px;
}


.corp-btn {
    min-height:
        46px;

    padding:
        0 19px;

    display:
        inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        8px;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        750;

    transition:
        .2s ease;
}


.corp-btn-primary {
    border:
        1px solid
        var(--public-green-800);

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color:
        white;

    box-shadow:
        0 8px 21px
        rgba(10,138,100,.18);
}


.corp-btn-primary:hover {
    color:
        white;

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 27px
        rgba(10,138,100,.24);
}


.corp-btn-white {
    border:
        1px solid #cfe2d9;

    background:
        white;

    color:
        var(--public-green-900);

    box-shadow:
        0 4px 14px
        rgba(18,58,44,.04);
}


.corp-btn-white:hover {
    color:
        var(--public-green-900);

    border-color:
        #acd5c2;

    background:
        var(--public-green-50);
}


/* ==========================================================
   HERO TRUST
========================================================== */

.corp-hero-trust {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        30px;
}


.corp-avatar-stack {
    display:
        flex;

    align-items:
        center;
}


.corp-avatar-stack span {
    width:
        34px;

    height:
        34px;

    margin-left:
        -7px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border:
        3px solid white;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #d9f2e5,
            #c4ead8
        );

    color:
        var(--public-green-900);

    font-size:
        9px;

    font-weight:
        800;
}


.corp-avatar-stack span:first-child {
    margin-left:
        0;
}


.corp-avatar-stack span:last-child {
    background:
        var(--public-green-800);

    color:
        white;
}


.corp-hero-trust strong {
    display:
        block;

    color:
        var(--public-grey-800);

    font-size:
        11px;
}


.corp-hero-trust small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--public-grey-500);

    font-size:
        9px;
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.corp-hero-visual {
    position:
        relative;
}


.corp-image-frame {
    position:
        relative;

    min-height:
        450px;

    overflow:
        hidden;

    border:
        1px solid #d3e7dd;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #f8fcfa,
            #dbf1e6
        );

    box-shadow:
        0 20px 50px
        rgba(13,78,54,.10);
}


.corp-image-frame::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(7,84,59,0) 40%,
            rgba(7,84,59,.17)
        );

    pointer-events:
        none;
}


.corp-image-frame img {
    display:
        block;

    width:
        100%;

    height:
        450px;

    object-fit:
        cover;
}


.corp-hero-badge {
    position:
        absolute;

    z-index:
        3;

    left:
        24px;

    bottom:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        240px;

    padding:
        14px;

    border:
        1px solid
        rgba(255,255,255,.70);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.91);

    box-shadow:
        0 12px 30px
        rgba(15,73,52,.13);

    backdrop-filter:
        blur(12px);
}


.corp-badge-icon {
    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--public-green-100);

    color:
        var(--public-green-800);
}


.corp-hero-badge strong {
    display:
        block;

    color:
        var(--public-grey-950);

    font-size:
        11px;
}


.corp-hero-badge span {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--public-grey-500);

    font-size:
        9px;
}


/* ==========================================================
   FLOATING STATS
========================================================== */

.corp-stats-wrap {
    position:
        relative;

    z-index:
        5;

    margin-top:
        -38px;
}


.corp-stats-card {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow:
        hidden;

    border:
        1px solid #dce9e3;

    border-radius:
        17px;

    background:
        white;

    box-shadow:
        0 16px 40px
        rgba(18,58,44,.08);
}


.corp-stat {
    min-height:
        102px;

    padding:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border-right:
        1px solid
        var(--public-grey-100);
}


.corp-stat:last-child {
    border-right:
        0;
}


.corp-stat-icon {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);
}


.corp-stat strong {
    display:
        block;

    color:
        var(--public-green-950);

    font-size:
        20px;

    font-weight:
        800;
}


.corp-stat span {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--public-grey-500);

    font-size:
        10px;
}


/* ==========================================================
   GENERAL SECTIONS
========================================================== */

.corp-section {
    padding:
        88px 0;
}


.corp-section-heading {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        31px;
}


.corp-section-label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--public-green-700);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        1.05px;

    text-transform:
        uppercase;
}


.corp-section-heading h2,
.corp-support-intro h2 {
    margin:
        0;

    color:
        var(--public-grey-950);

    font-size:
        clamp(27px, 3vw, 38px);

    font-weight:
        800;

    letter-spacing:
        -.9px;
}


.corp-section-heading p,
.corp-support-intro p {
    max-width:
        630px;

    margin:
        10px 0 0;

    color:
        var(--public-grey-600);

    font-size:
        13px;

    line-height:
        1.75;
}


.corp-view-all {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    flex-shrink:
        0;

    padding-bottom:
        3px;

    color:
        var(--public-green-800);

    border-bottom:
        1px solid
        #acd8c4;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        750;
}


.corp-view-all:hover {
    color:
        var(--public-green-950);
}


/* ==========================================================
   JOBS SECTION
========================================================== */

.corp-jobs-section {
    background:
        #ffffff;
}


.corp-job-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        18px;
}


.corp-job-card {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        285px;

    padding:
        21px;

    border:
        1px solid
        var(--public-border);

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        0 5px 18px
        rgba(18,58,44,.035);

    transition:
        .2s ease;
}


.corp-job-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #bee0d0;

    box-shadow:
        0 15px 34px
        rgba(18,58,44,.09);
}


.corp-job-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.corp-job-icon {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size:
        15px;
}


.corp-new-badge {
    display:
        inline-flex;

    align-items:
        center;

    height:
        22px;

    padding:
        0 8px;

    border-radius:
        999px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-800);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .3px;

    text-transform:
        uppercase;
}


.corp-job-body {
    flex:
        1;

    margin-top:
        18px;
}


.corp-job-body h3 {
    margin:
        0;

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.4;
}


.corp-job-body h3 a {
    color:
        var(--public-grey-950);

    text-decoration:
        none;
}


.corp-job-body h3 a:hover {
    color:
        var(--public-green-800);
}


.corp-job-category {
    margin-top:
        5px;

    color:
        var(--public-green-700);

    font-size:
        10px;

    font-weight:
        650;
}


.corp-job-meta {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        19px;
}


.corp-job-meta span {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--public-grey-600);

    font-size:
        10px;
}


.corp-job-meta i {
    width:
        14px;

    color:
        var(--public-grey-500);
}


.corp-job-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        20px;

    padding-top:
        16px;

    border-top:
        1px solid
        var(--public-grey-100);
}


.corp-job-salary {
    color:
        var(--public-grey-800);

    font-size:
        10px;

    font-weight:
        700;
}


.corp-job-arrow {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        9px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-800);

    text-decoration:
        none;

    transition:
        .2s ease;
}


.corp-job-arrow:hover {
    color:
        white;

    background:
        var(--public-green-800);

    transform:
        translateX(2px);
}


/* ==========================================================
   EMPTY JOBS
========================================================== */

.corp-empty-jobs {
    grid-column:
        1 / -1;

    padding:
        55px 25px;

    border:
        1px dashed
        #cadbd3;

    border-radius:
        16px;

    background:
        var(--public-grey-50);

    text-align:
        center;
}


.corp-empty-icon {
    width:
        52px;

    height:
        52px;

    margin:
        0 auto 15px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);
}


.corp-empty-jobs h3 {
    margin:
        0;

    color:
        var(--public-grey-950);

    font-size:
        17px;
}


.corp-empty-jobs p {
    margin:
        8px 0 20px;

    color:
        var(--public-grey-500);

    font-size:
        11px;
}


/* ==========================================================
   CANDIDATE CTA
========================================================== */

.corp-candidate-section {
    padding:
        15px 0 82px;

    background:
        white;
}


.corp-candidate-card {
    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        60px minmax(0,1fr) auto;

    align-items:
        center;

    gap:
        20px;

    padding:
        28px 31px;

    border:
        1px solid
        #cfe8dc;

    border-radius:
        18px;

    background:
        linear-gradient(
            110deg,
            #effaf4 0%,
            #e5f5ec 55%,
            #f8fcfa 100%
        );
}


.corp-candidate-card::after {
    content: "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -115px;

    top:
        -125px;

    border-radius:
        50%;

    background:
        rgba(10,138,100,.07);
}


.corp-candidate-icon {
    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        15px;

    background:
        white;

    color:
        var(--public-green-800);

    font-size:
        18px;

    box-shadow:
        var(--public-shadow-sm);
}


.corp-candidate-copy {
    position:
        relative;

    z-index:
        2;
}


.corp-candidate-copy > span {
    color:
        var(--public-green-700);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1px;
}


.corp-candidate-copy h3 {
    margin:
        5px 0 0;

    color:
        var(--public-green-950);

    font-size:
        20px;

    font-weight:
        800;
}


.corp-candidate-copy p {
    margin:
        6px 0 0;

    max-width:
        620px;

    color:
        var(--public-grey-600);

    font-size:
        11px;

    line-height:
        1.65;
}


.corp-candidate-actions {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        8px;
}


/* ==========================================================
   CAREER SUPPORT
========================================================== */

.corp-support-section {
    background:
        var(--public-grey-50);

    border-top:
        1px solid
        var(--public-grey-100);
}


.corp-support-grid {
    display:
        grid;

    grid-template-columns:
        1.35fr
        repeat(3, 1fr);

    gap:
        20px;
}


.corp-support-intro {
    padding-right:
        25px;
}


.corp-support-item {
    padding:
        24px;

    border:
        1px solid
        var(--public-border);

    border-radius:
        15px;

    background:
        white;

    box-shadow:
        0 4px 16px
        rgba(18,58,44,.035);
}


.corp-support-icon {
    width:
        43px;

    height:
        43px;

    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        center;
    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size:
        15px;
}


.corp-support-item h3 {
    margin:
        0;

    color:
        var(--public-grey-950);

    font-size:
        13px;

    font-weight:
        800;
}


.corp-support-item p {
    margin:
        8px 0 0;

    color:
        var(--public-grey-600);

    font-size:
        10px;

    line-height:
        1.7;
}


/* ==========================================================
   HOME RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .corp-hero-grid {
        grid-template-columns:
            1fr 420px;

        gap:
            40px;
    }

    .corp-job-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .corp-support-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .corp-support-intro {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 850px) {

    .corp-hero {
        padding:
            55px 0 70px;
    }

    .corp-hero-grid {
        grid-template-columns:
            1fr;
    }

    .corp-hero-content {
        max-width:
            100%;
    }

    .corp-image-frame,
    .corp-image-frame img {
        height:
            390px;

        min-height:
            390px;
    }

    .corp-stats-wrap {
        margin-top:
            -24px;
    }

    .corp-stats-card {
        grid-template-columns:
            repeat(2,1fr);
    }

    .corp-stat:nth-child(2) {
        border-right:
            0;
    }

    .corp-stat:nth-child(1),
    .corp-stat:nth-child(2) {
        border-bottom:
            1px solid
            var(--public-grey-100);
    }

    .corp-candidate-card {
        grid-template-columns:
            55px 1fr;
    }

    .corp-candidate-actions {
        grid-column:
            2;

        flex-wrap:
            wrap;
    }
}


@media (max-width: 650px) {

    .corp-container {
        width:
            min(100% - 28px, 1180px);
    }

    .corp-hero-content h1 {
        font-size:
            42px;

        letter-spacing:
            -1.5px;
    }

    .corp-section {
        padding:
            62px 0;
    }

    .corp-section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .corp-job-grid {
        grid-template-columns:
            1fr;
    }

    .corp-support-grid {
        grid-template-columns:
            1fr;
    }

    .corp-support-intro {
        grid-column:
            auto;
    }

    .corp-candidate-card {
        grid-template-columns:
            1fr;

        text-align:
            left;
    }

    .corp-candidate-actions {
        grid-column:
            auto;
    }

    .corp-stats-card {
        grid-template-columns:
            1fr;
    }

    .corp-stat {
        border-right:
            0;

        border-bottom:
            1px solid
            var(--public-grey-100);
    }

    .corp-stat:last-child {
        border-bottom:
            0;
    }
}


@media (max-width: 480px) {

    .corp-hero {
        padding-top:
            42px;
    }

    .corp-hero-content h1 {
        font-size:
            36px;
    }

    .corp-hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .corp-btn {
        width:
            100%;
    }

    .corp-image-frame,
    .corp-image-frame img {
        height:
            330px;

        min-height:
            330px;
    }

    .corp-hero-badge {
        left:
            14px;

        right:
            14px;

        bottom:
            14px;

        min-width:
            0;
    }

    .corp-candidate-actions {
        flex-direction:
            column;
    }
}


/* ==========================================================
   PUBLIC JOB SEARCH PAGE
   Premium Corporate Career Portal
   Applies to: app/templates/public/jobs.html
========================================================== */

.career-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ==========================================================
   PAGE HEADER
========================================================== */

.career-page-head {
    position: relative;
    overflow: hidden;
    padding: 52px 0 50px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(19, 167, 120, .10),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f6fbf8 46%,
            #e9f6ef 100%
        );

    border-bottom: 1px solid #dcece4;
}

.career-page-head::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -110px;
    top: -180px;

    border-radius: 50%;

    background: rgba(10, 138, 100, .055);

    pointer-events: none;
}

.career-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 22px;

    color: var(--public-grey-500);

    font-size: 11px;
    font-weight: 600;
}

.career-breadcrumb a {
    color: var(--public-green-800);
    text-decoration: none;
}

.career-breadcrumb a:hover {
    color: var(--public-green-950);
}

.career-breadcrumb i {
    font-size: 8px;
    color: #9aacA5;
}

.career-page-head .eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;

    color: var(--public-green-700);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.career-page-head h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--public-green-950);

    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;

    letter-spacing: -1.3px;
}

.career-page-head p {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 11px 0 0;

    color: var(--public-grey-600);

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================================
   MAIN SEARCH AREA
========================================================== */

.career-section.search-page {
    padding: 42px 0 78px;

    background:
        linear-gradient(
            180deg,
            #f8fbf9 0,
            #ffffff 340px
        );

    min-height: 700px;
}


/* ==========================================================
   AI SEMANTIC SEARCH PANEL
========================================================== */

.semantic-search-panel {
    position: relative;

    overflow: hidden;

    padding: 27px 28px 25px;

    border: 1px solid #cfe8dc;
    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #effaf4 0%,
            #e6f6ed 52%,
            #f8fcfa 100%
        );

    box-shadow:
        0 12px 32px rgba(18, 58, 44, .065);
}

.semantic-search-panel::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -110px;
    top: -130px;

    border-radius: 50%;

    background: rgba(10, 138, 100, .07);

    pointer-events: none;
}

.semantic-heading {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}

.semantic-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: white;

    color: var(--public-green-700);

    font-size: 16px;

    box-shadow:
        0 5px 16px rgba(18, 58, 44, .08);
}

.semantic-heading strong {
    display: block;

    color: var(--public-green-950);

    font-size: 15px;
    font-weight: 800;
}

.semantic-heading small {
    display: block;

    margin-top: 4px;

    color: var(--public-grey-600);

    font-size: 11px;
}


/* ==========================================================
   SEMANTIC INPUT
========================================================== */

.semantic-input-row {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;
}

.semantic-input-row input {
    width: 100%;
    height: 50px;

    padding: 0 17px;

    outline: none;

    border: 1px solid #d5e5de;
    border-radius: 11px;

    background: white;

    color: var(--public-grey-950);

    font-size: 13px;

    box-shadow:
        inset 0 1px 2px rgba(18, 58, 44, .025);

    transition: .2s ease;
}

.semantic-input-row input::placeholder {
    color: #98a6a1;
}

.semantic-input-row input:focus {
    border-color: #79c8a7;

    box-shadow:
        0 0 0 4px rgba(19, 167, 120, .09);
}


/* ==========================================================
   PRIMARY CAREER BUTTON
========================================================== */

.btn-career-primary {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 19px;

    border: 1px solid var(--public-green-800);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color: white !important;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(10, 138, 100, .18);

    transition: .2s ease;
}

.btn-career-primary:hover {
    color: white !important;

    transform: translateY(-1px);

    box-shadow:
        0 11px 27px rgba(10, 138, 100, .25);
}


/* ==========================================================
   SEARCH EXAMPLES
========================================================== */

.search-examples {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 14px;
}

.search-examples::before {
    content: "Try:";

    margin-right: 2px;

    color: var(--public-grey-500);

    font-size: 10px;
    font-weight: 700;
}

.search-examples button {
    padding: 6px 10px;

    border: 1px solid #cfe5da;
    border-radius: 999px;

    background: rgba(255, 255, 255, .75);

    color: var(--public-green-800);

    font-size: 9px;
    font-weight: 650;

    cursor: pointer;

    transition: .18s ease;
}

.search-examples button:hover {
    border-color: #9dd2bb;

    background: white;

    color: var(--public-green-950);

    transform: translateY(-1px);
}


/* ==========================================================
   ADVANCED SEARCH
========================================================== */

.advanced-panel {
    margin-top: 17px;

    overflow: hidden;

    border: 1px solid var(--public-border);
    border-radius: 15px;

    background: white;

    box-shadow:
        0 5px 18px rgba(18, 58, 44, .035);
}

.advanced-panel-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 17px 20px;

    border: 0;

    background: white;

    color: var(--public-grey-800);

    cursor: pointer;

    text-align: left;
}

.advanced-panel-toggle > span {
    display: grid;

    grid-template-columns:
        32px
        auto;

    align-items: center;

    column-gap: 10px;
}

.advanced-panel-toggle > span > i {
    grid-row: 1 / 3;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--public-green-50);

    color: var(--public-green-700);
}

.advanced-panel-toggle strong {
    color: var(--public-grey-950);

    font-size: 12px;
    font-weight: 750;
}

.advanced-panel-toggle small {
    margin-top: 2px;

    color: var(--public-grey-500);

    font-size: 9px;
}

.advanced-panel-toggle > i {
    color: var(--public-grey-500);

    transition: transform .2s ease;
}

.advanced-panel-toggle[aria-expanded="true"] > i {
    transform: rotate(180deg);
}


/* ==========================================================
   ADVANCED FORM
========================================================== */

.advanced-search-form {
    padding: 22px 20px 20px;

    border-top: 1px solid var(--public-grey-100);

    background:
        linear-gradient(
            180deg,
            #fbfdfc,
            white
        );
}

.advanced-search-form label {
    display: block;

    margin-bottom: 6px;

    color: var(--public-grey-700);

    font-size: 10px;
    font-weight: 750;
}

.advanced-search-form .form-control,
.advanced-search-form .form-select {
    min-height: 43px;

    border: 1px solid #dce5e1;
    border-radius: 9px;

    background-color: white;

    color: var(--public-grey-800);

    font-size: 12px;

    box-shadow: none;
}

.advanced-search-form .form-control:focus,
.advanced-search-form .form-select:focus {
    border-color: #8bcdb0;

    box-shadow:
        0 0 0 3px rgba(19, 167, 120, .08);
}

.advanced-search-form small {
    display: block;

    margin-top: 6px;

    color: var(--public-grey-500);

    font-size: 9px;
}

.advanced-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 19px;
}

.btn-career-secondary {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 17px;

    border: 1px solid #d8e3de;
    border-radius: 9px;

    background: white;

    color: var(--public-grey-700);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.btn-career-secondary:hover {
    border-color: #b7d9ca;

    background: var(--public-green-50);

    color: var(--public-green-900);
}


/* ==========================================================
   AI INTERPRETATION
========================================================== */

.intent-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 17px;

    padding: 12px 15px;

    border: 1px solid #d5e9df;
    border-radius: 11px;

    background: #f5fbf8;
}

.intent-strip > span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-right: 2px;

    color: var(--public-grey-600);

    font-size: 10px;
    font-weight: 650;
}

.intent-strip > span i {
    color: var(--public-green-700);
}

.intent-strip b {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    padding: 0 9px;

    border: 1px solid #cce5da;
    border-radius: 999px;

    background: white;

    color: var(--public-green-800);

    font-size: 9px;
    font-weight: 700;
}


/* ==========================================================
   RESULTS HEADER
========================================================== */

.results-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: 40px;
    margin-bottom: 17px;
}

.results-toolbar .eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--public-green-700);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1px;
}

.results-toolbar h2 {
    margin: 0;

    color: var(--public-grey-950);

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -.5px;
}

.mode-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 0 11px;

    border: 1px solid #d1e7dc;
    border-radius: 999px;

    background: var(--public-green-50);

    color: var(--public-green-800);

    font-size: 9px;
    font-weight: 750;
}


/* ==========================================================
   JOB RESULTS LIST
========================================================== */

.search-result-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.search-result-card {
    position: relative;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        125px;

    align-items: start;

    gap: 17px;

    padding: 20px 21px;

    border: 1px solid var(--public-border);
    border-radius: 14px;

    background: white;

    box-shadow:
        0 4px 15px rgba(18, 58, 44, .032);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.search-result-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: transparent;

    transition: .2s ease;
}

.search-result-card:hover {
    border-color: #badfce;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(18, 58, 44, .075);
}

.search-result-card:hover::before {
    background: var(--public-green-600);
}


/* ==========================================================
   RESULT ICON
========================================================== */

.result-logo {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #e8f7ef,
            #d8f0e5
        );

    color: var(--public-green-800);

    font-size: 15px;
}


/* ==========================================================
   RESULT MAIN CONTENT
========================================================== */

.result-main {
    min-width: 0;
}

.result-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.result-title-row h3 {
    margin: 0;

    color: var(--public-grey-950);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;
}

.result-title-row > div:first-child > span {
    display: block;

    margin-top: 4px;

    color: var(--public-green-700);

    font-size: 10px;
    font-weight: 650;
}


/* ==========================================================
   MATCH RING
========================================================== */

.match-ring {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 3px solid #cce9dc;
    border-radius: 50%;

    background: #f7fcf9;

    color: var(--public-green-800);
}

.match-ring strong {
    line-height: 1;

    font-size: 10px;
    font-weight: 800;
}

.match-ring small {
    margin-top: 2px;

    color: var(--public-grey-500);

    font-size: 7px;
}


/* ==========================================================
   JOB META
========================================================== */

.result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px 18px;

    margin-top: 13px;
}

.result-meta span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--public-grey-600);

    font-size: 10px;
}

.result-meta i {
    width: 12px;

    color: #82958e;

    text-align: center;
}


/* ==========================================================
   JOB TAGS
========================================================== */

.job-tag-row {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 12px;
}

.job-tag-row span {
    display: inline-flex;
    align-items: center;

    min-height: 23px;

    padding: 0 8px;

    border: 1px solid #e1e9e5;
    border-radius: 6px;

    background: #f8faf9;

    color: var(--public-grey-600);

    font-size: 8px;
    font-weight: 650;
}


/* ==========================================================
   AI MATCH REASONS
========================================================== */

.match-reasons {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 10px;
}

.match-reasons span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 8px;

    border-radius: 6px;

    background: var(--public-green-50);

    color: var(--public-green-800);

    font-size: 8px;
    font-weight: 650;
}

.match-reasons i {
    font-size: 7px;
}


/* ==========================================================
   RESULT ACTION SIDE
========================================================== */

.result-side {
    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.result-side > small {
    color: var(--public-grey-500);

    font-size: 9px;

    white-space: nowrap;
}

.btn-career-outline {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border: 1px solid #acd6c3;
    border-radius: 8px;

    background: white;

    color: var(--public-green-800) !important;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;

    transition: .18s ease;
}

.btn-career-outline:hover {
    border-color: var(--public-green-800);

    background: var(--public-green-800);

    color: white !important;
}


/* ==========================================================
   EMPTY RESULT
========================================================== */

.career-empty {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 35px;

    border: 1px dashed #cbdcd4;
    border-radius: 15px;

    background: #fafcfb;

    text-align: center;
}

.career-empty i {
    margin-bottom: 14px;

    color: #9bb5a9;

    font-size: 30px;
}

.career-empty strong {
    color: var(--public-grey-800);

    font-size: 13px;
    font-weight: 750;
}

.career-empty span {
    margin-top: 6px;

    color: var(--public-grey-500);

    font-size: 10px;
}


/* ==========================================================
   PAGINATION
========================================================== */

.career-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 30px;
}

.career-pagination a {
    min-width: 35px;
    height: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 9px;

    border: 1px solid #dce5e1;
    border-radius: 8px;

    background: white;

    color: var(--public-grey-700);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    transition: .18s ease;
}

.career-pagination a:hover {
    border-color: #aad6c2;

    background: var(--public-green-50);

    color: var(--public-green-900);
}

.career-pagination a.active {
    border-color: var(--public-green-800);

    background: var(--public-green-800);

    color: white;

    box-shadow:
        0 5px 13px rgba(10, 138, 100, .17);
}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media (max-width: 900px) {

    .search-result-card {
        grid-template-columns:
            46px
            minmax(0, 1fr);
    }

    .result-side {
        grid-column: 2;

        min-height: auto;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

}


/* ==========================================================
   RESPONSIVE - MOBILE
========================================================== */

@media (max-width: 650px) {

    .career-container {
        width: min(100% - 28px, 1180px);
    }

    .career-page-head {
        padding: 37px 0 38px;
    }

    .career-page-head h1 {
        font-size: 31px;
    }

    .career-section.search-page {
        padding: 28px 0 55px;
    }

    .semantic-search-panel {
        padding: 20px 17px;
        border-radius: 14px;
    }

    .semantic-heading {
        align-items: flex-start;
    }

    .semantic-input-row {
        grid-template-columns: 1fr;
    }

    .semantic-input-row .btn-career-primary {
        width: 100%;
    }

    .advanced-panel-toggle {
        padding: 15px;
    }

    .advanced-search-form {
        padding: 18px 15px;
    }

    .advanced-actions {
        flex-direction: column-reverse;
    }

    .advanced-actions .btn {
        width: 100%;
    }

    .results-toolbar {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

        margin-top: 30px;
    }

    .search-result-card {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 17px;
    }

    .result-logo {
        width: 40px;
        height: 40px;
    }

    .result-title-row {
        gap: 10px;
    }

    .result-side {
        grid-column: auto;

        padding-top: 13px;

        border-top: 1px solid var(--public-grey-100);
    }

    .btn-career-outline {
        min-width: 100px;
    }

}


/* ==========================================================
   EXTRA SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .career-page-head h1 {
        font-size: 28px;
    }

    .search-examples::before {
        width: 100%;
    }

    .result-title-row {
        flex-direction: column;
    }

    .match-ring {
        width: auto;
        height: 25px;

        flex: none;
        flex-direction: row;

        gap: 3px;

        padding: 0 8px;

        border-width: 1px;
        border-radius: 999px;
    }

    .match-ring small {
        margin-top: 0;
    }

    .result-side {
        align-items: stretch;
        flex-direction: column;

        gap: 9px;
    }

    .result-side > small {
        white-space: normal;
    }

    .btn-career-outline {
        width: 100%;
    }

}

/* ==========================================================
   PREMIUM JOB DETAIL PAGE
   Applies to: app/templates/public/job_detail.html
========================================================== */

.jd-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 0 42px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(19, 167, 120, .10),
            transparent 25%
        ),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f7fbf9 47%,
            #eaf7f0 100%
        );

    border-bottom: 1px solid #dcece4;
}

.jd-hero::after {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    right: -120px;
    top: -200px;

    border-radius: 50%;

    background: rgba(10, 138, 100, .05);

    pointer-events: none;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.jd-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 29px;

    color: var(--public-grey-500);

    font-size: 10.5px;
    font-weight: 600;
}

.jd-breadcrumb a {
    color: var(--public-green-800);
    text-decoration: none;
}

.jd-breadcrumb a:hover {
    color: var(--public-green-950);
}

.jd-breadcrumb i {
    font-size: 7px;
    color: #a3b1ac;
}


/* ==========================================================
   HERO GRID
========================================================== */

.jd-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    align-items: end;

    gap: 60px;
}

.jd-hero-main {
    min-width: 0;
}


/* ==========================================================
   OPENING LABEL
========================================================== */

.jd-opening-label {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 13px;

    color: var(--public-green-700);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1.05px;

    text-transform: uppercase;
}

.jd-opening-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--public-green-600);

    box-shadow:
        0 0 0 4px rgba(19, 167, 120, .10);
}


/* ==========================================================
   TITLE
========================================================== */

.jd-title {
    max-width: 850px;

    margin: 0;

    color: var(--public-grey-950);

    font-size: clamp(31px, 4vw, 47px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.4px;
}

.jd-category-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

    color: var(--public-green-800);

    font-size: 11px;
    font-weight: 650;
}

.jd-category-separator {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #9bb9ac;
}


/* ==========================================================
   JOB META
========================================================== */

.jd-meta-grid {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;
}

.jd-meta-item {
    min-width: 155px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 13px;

    border: 1px solid #dceae4;

    border-radius: 11px;

    background: rgba(255,255,255,.78);

    box-shadow:
        0 3px 12px rgba(18,58,44,.025);
}

.jd-meta-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--public-green-50);

    color: var(--public-green-700);

    font-size: 11px;
}

.jd-meta-item small {
    display: block;

    color: var(--public-grey-500);

    font-size: 8px;
    font-weight: 650;

    letter-spacing: .35px;

    text-transform: uppercase;
}

.jd-meta-item strong {
    display: block;

    margin-top: 2px;

    color: var(--public-grey-800);

    font-size: 10.5px;
    font-weight: 700;

    line-height: 1.4;
}


/* ==========================================================
   HERO APPLY
========================================================== */

.jd-hero-action {
    padding-bottom: 4px;
}

.jd-action-caption {
    margin-bottom: 9px;

    color: var(--public-grey-600);

    font-size: 10px;

    text-align: center;
}

.jd-apply-primary {
    min-height: 48px;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color: white;

    text-decoration: none;

    font-size: 12px;
    font-weight: 750;

    box-shadow:
        0 9px 22px rgba(10,138,100,.18);

    transition: .2s ease;
}

.jd-apply-primary:hover {
    color: white;

    transform: translateY(-1px);

    box-shadow:
        0 12px 27px rgba(10,138,100,.24);
}

.jd-action-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 9px;

    color: var(--public-grey-500);

    font-size: 8.5px;
}

.jd-action-note i {
    color: var(--public-green-600);
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.jd-main-section {
    padding: 42px 0 80px;

    background: #f8faf9;
}

.jd-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    align-items: start;

    gap: 25px;
}

.jd-content {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* ==========================================================
   CONTENT CARDS
========================================================== */

.jd-content-card {
    padding: 27px 29px;

    border: 1px solid var(--public-border);

    border-radius: 15px;

    background: white;

    box-shadow:
        0 4px 16px rgba(18,58,44,.035);
}

.jd-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    padding-bottom: 17px;

    border-bottom:
        1px solid var(--public-grey-100);
}

.jd-heading-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--public-green-50);

    color: var(--public-green-700);

    font-size: 13px;
}

.jd-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: var(--public-green-700);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .85px;

    text-transform: uppercase;
}

.jd-section-heading h2 {
    margin: 0;

    color: var(--public-grey-950);

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

    letter-spacing: -.25px;
}


/* ==========================================================
   JOB DESCRIPTION TEXT
========================================================== */

.jd-prose {
    color: #50605a;

    font-size: 12.5px;

    line-height: 1.85;

    white-space: pre-line;
}

.jd-prose p {
    margin-bottom: 13px;
}

.jd-prose ul,
.jd-prose ol {
    margin: 10px 0 14px;

    padding-left: 20px;
}

.jd-prose li {
    margin-bottom: 7px;
}

.jd-prose strong {
    color: var(--public-grey-800);

    font-weight: 700;
}

.jd-empty-content {
    padding: 20px;

    border-radius: 10px;

    background: var(--public-grey-50);

    color: var(--public-grey-500);

    font-size: 11px;
}


/* ==========================================================
   PROFILE GRID
========================================================== */

.jd-profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 12px;
}

.jd-profile-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    min-height: 90px;

    padding: 15px;

    border: 1px solid var(--public-grey-100);

    border-radius: 11px;

    background: #fbfcfc;
}

.jd-profile-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--public-green-50);

    color: var(--public-green-700);

    font-size: 11px;
}

.jd-profile-item span {
    display: block;

    margin-bottom: 5px;

    color: var(--public-grey-500);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .4px;

    text-transform: uppercase;
}

.jd-profile-value {
    color: var(--public-grey-800);

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.jd-sidebar-sticky {
    position: sticky;

    top: 96px;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.jd-recruiter-panel {
    padding: 22px;

    border: 1px solid #d9e9e2;

    border-radius: 15px;

    background: white;

    box-shadow:
        0 8px 25px rgba(18,58,44,.055);
}

.jd-recruiter-panel-head {
    display: flex;
    align-items: center;

    gap: 11px;
}

.jd-recruiter-head-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--public-green-100);

    color: var(--public-green-800);

    font-size: 13px;
}

.jd-recruiter-panel-head span {
    display: block;

    color: var(--public-green-700);

    font-size: 7.5px;
    font-weight: 850;

    letter-spacing: .75px;

    text-transform: uppercase;
}

.jd-recruiter-panel-head h3 {
    margin: 2px 0 0;

    color: var(--public-grey-950);

    font-size: 14px;
    font-weight: 800;
}

.jd-recruiter-intro {
    margin: 14px 0 18px;

    color: var(--public-grey-500);

    font-size: 10px;

    line-height: 1.65;
}


/* ==========================================================
   RECRUITERS
========================================================== */

.jd-recruiter-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.jd-recruiter {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 12px;

    border: 1px solid var(--public-grey-100);

    border-radius: 10px;

    background: #fbfcfc;
}

.jd-recruiter-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #dff6ec,
            #c9ecdc
        );

    color: var(--public-green-900);

    font-size: 13px;
    font-weight: 800;
}

.jd-recruiter-info {
    min-width: 0;
}

.jd-recruiter-info > strong {
    display: block;

    color: var(--public-grey-950);

    font-size: 10.5px;
    font-weight: 750;
}

.jd-recruiter-info > small {
    display: block;

    margin: 2px 0 7px;

    color: var(--public-grey-500);

    font-size: 8.5px;
}

.jd-contact {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 5px;

    color: var(--public-grey-600);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.4;
}

.jd-contact span {
    overflow: hidden;

    text-overflow: ellipsis;
}

.jd-contact i {
    width: 12px;

    color: var(--public-green-700);

    font-size: 8px;
}

.jd-contact:hover {
    color: var(--public-green-800);
}

.jd-no-recruiter {
    padding: 18px;

    border-radius: 10px;

    background: var(--public-grey-50);

    text-align: center;
}

.jd-no-recruiter i {
    color: var(--public-green-600);

    font-size: 20px;
}

.jd-no-recruiter p {
    margin: 8px 0 0;

    color: var(--public-grey-500);

    font-size: 9px;

    line-height: 1.6;
}


/* ==========================================================
   SIDEBAR APPLY
========================================================== */

.jd-recruiter-divider {
    height: 1px;

    margin: 18px 0;

    background: var(--public-grey-100);
}

.jd-sidebar-apply {
    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 9px;

    background: var(--public-green-800);

    color: white;

    text-decoration: none;

    font-size: 10.5px;
    font-weight: 750;

    transition: .2s ease;
}

.jd-sidebar-apply:hover {
    color: white;

    background: var(--public-green-900);
}

.jd-secure-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 6px;

    margin-top: 10px;

    color: var(--public-grey-500);

    font-size: 7.8px;

    line-height: 1.5;

    text-align: center;
}

.jd-secure-note i {
    margin-top: 2px;

    color: var(--public-green-600);
}


/* ==========================================================
   HELP PANEL
========================================================== */

.jd-help-panel {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 15px;

    border: 1px solid #d7eade;

    border-radius: 12px;

    background:
        linear-gradient(
            120deg,
            #effaf4,
            #f8fcfa
        );
}

.jd-help-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: white;

    color: var(--public-green-700);

    font-size: 11px;
}

.jd-help-panel strong {
    display: block;

    color: var(--public-green-950);

    font-size: 9.5px;
}

.jd-help-panel p {
    margin: 4px 0 0;

    color: var(--public-grey-600);

    font-size: 8.5px;

    line-height: 1.55;
}

.jd-back-jobs {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px;

    color: var(--public-grey-600);

    text-decoration: none;

    font-size: 9px;
    font-weight: 650;
}

.jd-back-jobs:hover {
    color: var(--public-green-800);
}


/* ==========================================================
   BOTTOM CTA
========================================================== */

.jd-bottom-cta {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        47px minmax(0,1fr) auto;

    align-items: center;

    gap: 17px;

    padding: 23px 25px;

    border: 1px solid #cce7da;

    border-radius: 15px;

    background:
        linear-gradient(
            110deg,
            #eaf8f1,
            #f7fcf9
        );
}

.jd-bottom-cta::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    top: -100px;

    border-radius: 50%;

    background: rgba(10,138,100,.06);
}

.jd-bottom-cta-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: white;

    color: var(--public-green-700);

    font-size: 14px;

    box-shadow: var(--public-shadow-sm);
}

.jd-bottom-cta-copy {
    position: relative;
    z-index: 2;
}

.jd-bottom-cta-copy > span {
    color: var(--public-green-700);

    font-size: 7.5px;
    font-weight: 850;

    letter-spacing: .8px;
}

.jd-bottom-cta-copy h3 {
    margin: 3px 0 0;

    color: var(--public-green-950);

    font-size: 14px;
    font-weight: 800;
}

.jd-bottom-cta-copy p {
    margin: 4px 0 0;

    color: var(--public-grey-600);

    font-size: 9px;
}

.jd-bottom-apply {
    position: relative;
    z-index: 2;

    min-height: 40px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 9px;

    background: var(--public-green-800);

    color: white;

    text-decoration: none;

    font-size: 10px;
    font-weight: 750;

    white-space: nowrap;
}

.jd-bottom-apply:hover {
    color: white;

    background: var(--public-green-900);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .jd-layout {
        grid-template-columns:
            minmax(0,1fr)
            290px;
    }

    .jd-hero-grid {
        grid-template-columns:
            minmax(0,1fr)
            250px;

        gap: 35px;
    }
}


@media (max-width: 850px) {

    .jd-hero {
        padding:
            28px 0 37px;
    }

    .jd-hero-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .jd-hero-action {
        max-width: 310px;
    }

    .jd-layout {
        grid-template-columns: 1fr;
    }

    .jd-sidebar-sticky {
        position: static;
    }

    .jd-profile-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 650px) {

    .jd-title {
        font-size: 31px;
    }

    .jd-meta-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .jd-meta-item {
        min-width: 0;
    }

    .jd-content-card {
        padding: 22px 19px;
    }

    .jd-profile-grid {
        grid-template-columns: 1fr;
    }

    .jd-bottom-cta {
        grid-template-columns:
            45px minmax(0,1fr);
    }

    .jd-bottom-apply {
        grid-column: 1 / -1;

        width: 100%;
    }
}


@media (max-width: 480px) {

    .jd-main-section {
        padding:
            28px 0 55px;
    }

    .jd-breadcrumb {
        margin-bottom: 22px;
    }

    .jd-title {
        font-size: 27px;

        letter-spacing: -.7px;
    }

    .jd-meta-grid {
        grid-template-columns: 1fr;
    }

    .jd-hero-action {
        max-width: none;
    }

    .jd-content-card {
        padding: 20px 16px;

        border-radius: 12px;
    }

    .jd-recruiter-panel {
        padding: 18px;
    }

    .jd-bottom-cta {
        grid-template-columns: 1fr;

        padding: 20px;
    }

    .jd-bottom-cta-icon {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================
   CANDIDATE LOGIN / OTP PORTAL
   Premium Corporate Authentication UI

   Template:
   app/templates/candidate/login.html

   IMPORTANT:
   Keep this section near the END of public_portal.css
   so these styles override older auth styles.
========================================================== */


/* ==========================================================
   1. AUTH PAGE
========================================================== */

.candidate-auth-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: calc(100vh - 111px);

    display: flex;
    align-items: center;

    padding: 72px 0 82px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(19, 167, 120, 0.08) 0,
            rgba(19, 167, 120, 0) 28%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(8, 112, 82, 0.07) 0,
            rgba(8, 112, 82, 0) 30%
        ),
        linear-gradient(
            135deg,
            #f8fcfa 0%,
            #f3faf6 42%,
            #eef8f3 100%
        );
}


/* Decorative background */

.candidate-auth-page::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    top: -280px;
    right: -190px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(19, 167, 120, 0.08),
            rgba(8, 112, 82, 0.025)
        );
}


.candidate-auth-page::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 340px;
    height: 340px;

    left: -180px;
    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, 0.045);
}


/* ==========================================================
   2. PAGE CONTAINER
========================================================== */

.candidate-auth-page .career-container {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   3. MAIN AUTH SHELL
========================================================== */

.candidate-auth-page .auth-shell {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(390px, 0.96fr);

    min-height: 535px;

    overflow: hidden;

    border:
        1px solid
        rgba(207, 232, 220, 0.95);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 70px rgba(18, 58, 44, 0.10),
        0 8px 24px rgba(18, 58, 44, 0.045);
}


/* subtle top highlight */

.candidate-auth-page .auth-shell::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(19, 167, 120, 0.35),
            transparent
        );
}


/* ==========================================================
   4. LEFT INFORMATION PANEL
========================================================== */

.candidate-auth-page .auth-side {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 58px 62px;

    background:
        linear-gradient(
            145deg,
            #eaf8f1 0%,
            #f0faf5 47%,
            #e3f4eb 100%
        );

    border-right:
        1px solid
        rgba(203, 229, 216, 0.85);
}


/* Decorative circle */

.candidate-auth-page .auth-side::before {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    top: -155px;
    right: -145px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, 0.065);

    pointer-events: none;
}


/* second decoration */

.candidate-auth-page .auth-side::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: -105px;
    bottom: -110px;

    border-radius: 50%;

    border:
        34px solid
        rgba(19, 167, 120, 0.035);

    pointer-events: none;
}


/* ==========================================================
   5. CANDIDATE PORTAL EYEBROW
========================================================== */

.candidate-auth-page .auth-side .eyebrow {
    position: relative;
    z-index: 2;

    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

    padding: 7px 11px;

    border:
        1px solid
        #c6e6d7;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    color:
        var(--public-green-800, #087052);

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 4px 12px
        rgba(18, 58, 44, 0.035);
}


.candidate-auth-page .auth-side .eyebrow::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--public-green-600, #13a778);

    box-shadow:
        0 0 0 4px
        rgba(19, 167, 120, 0.10);
}


/* ==========================================================
   6. LEFT HEADING
========================================================== */

.candidate-auth-page .auth-side h1 {
    position: relative;
    z-index: 2;

    max-width: 470px;

    margin: 0;

    color:
        var(--public-green-950, #063d2c);

    font-size: clamp(34px, 3.7vw, 47px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


/* ==========================================================
   7. LEFT DESCRIPTION
========================================================== */

.candidate-auth-page .auth-side > p {
    position: relative;
    z-index: 2;

    max-width: 470px;

    margin: 18px 0 0;

    color:
        var(--public-grey-600, #697873);

    font-size: 13.5px;

    line-height: 1.75;
}


/* ==========================================================
   8. FEATURE POINTS
========================================================== */

.candidate-auth-page .auth-points {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 11px;

    margin-top: 34px;
}


.candidate-auth-page .auth-points > div {
    display: grid;

    grid-template-columns:
        43px
        minmax(0, 1fr);

    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    border:
        1px solid
        rgba(197, 227, 213, 0.80);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.66);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.candidate-auth-page .auth-points > div:hover {
    transform: translateX(3px);

    background:
        rgba(255, 255, 255, 0.92);

    border-color:
        #acd9c5;

    box-shadow:
        0 8px 20px
        rgba(18, 58, 44, 0.055);
}


/* Feature icons */

.candidate-auth-page .auth-points > div > i {
    width: 43px;
    height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4fbf7
        );

    border:
        1px solid
        #d7ece2;

    color:
        var(--public-green-700, #0a8a64);

    font-size: 15px;

    box-shadow:
        0 4px 12px
        rgba(18, 58, 44, 0.05);
}


/* Feature text */

.candidate-auth-page .auth-points span {
    min-width: 0;
}


.candidate-auth-page .auth-points strong {
    display: block;

    color:
        var(--public-green-950, #063d2c);

    font-size: 12px;
    font-weight: 750;

    line-height: 1.4;
}


.candidate-auth-page .auth-points small {
    display: block;

    margin-top: 3px;

    color:
        var(--public-grey-600, #697873);

    font-size: 10.5px;

    line-height: 1.45;
}


/* ==========================================================
   9. RIGHT LOGIN AREA
========================================================== */

.candidate-auth-page .auth-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 58px 60px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 70%,
            #fbfdfc 100%
        );
}


/* subtle right panel decoration */

.candidate-auth-page .auth-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -95px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(19, 167, 120, 0.035);

    pointer-events: none;
}


/* ==========================================================
   10. LOGIN ICON
========================================================== */

.candidate-auth-page .auth-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 23px;

    border:
        1px solid
        #cde8db;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #effaf4,
            #e0f4e9
        );

    color:
        var(--public-green-800, #087052);

    font-size: 20px;

    box-shadow:
        0 8px 20px
        rgba(10, 138, 100, 0.10);
}


/* ==========================================================
   11. LOGIN HEADING
========================================================== */

.candidate-auth-page .auth-card h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color:
        var(--public-green-950, #063d2c);

    font-size: 27px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.7px;
}


/* Login description */

.candidate-auth-page .auth-card > p {
    position: relative;
    z-index: 2;

    max-width: 410px;

    margin: 10px 0 28px;

    color:
        var(--public-grey-600, #697873);

    font-size: 12.5px;

    line-height: 1.7;
}


/* ==========================================================
   12. FORM
========================================================== */

.candidate-auth-page .auth-card form {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* ==========================================================
   13. FORM LABEL
========================================================== */

.candidate-auth-page .auth-card label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--public-grey-800, #34423d);

    font-size: 11.5px;
    font-weight: 700;

    letter-spacing: 0.01em;
}


/* ==========================================================
   14. EMAIL INPUT WRAPPER
========================================================== */

.candidate-auth-page .input-icon-wrap {
    position: relative;

    width: 100%;
}


/* Input icon */

.candidate-auth-page .input-icon-wrap > i {
    position: absolute;

    z-index: 3;

    top: 50%;
    left: 16px;

    transform: translateY(-50%);

    color:
        #7a8d85;

    font-size: 14px;

    pointer-events: none;

    transition:
        color 0.2s ease;
}


/* ==========================================================
   15. EMAIL INPUT
========================================================== */

.candidate-auth-page .input-icon-wrap input {
    width: 100%;
    height: 50px;

    padding:
        0 16px
        0 44px;

    outline: none;

    border:
        1px solid
        #d8e2de;

    border-radius: 11px;

    background:
        #fbfdfc;

    color:
        var(--public-grey-950, #17201d);

    font-family:
        var(--font-primary);

    font-size: 13px;
    font-weight: 450;

    line-height: normal;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.candidate-auth-page .input-icon-wrap input::placeholder {
    color:
        #9aa7a2;

    opacity: 1;
}


/* Hover */

.candidate-auth-page .input-icon-wrap input:hover {
    border-color:
        #bfd9cd;

    background:
        #ffffff;
}


/* Focus */

.candidate-auth-page .input-icon-wrap input:focus {
    border-color:
        var(--public-green-700, #0a8a64);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(10, 138, 100, 0.09);
}


.candidate-auth-page .input-icon-wrap:focus-within > i {
    color:
        var(--public-green-700, #0a8a64);
}


/* Browser autofill */

.candidate-auth-page
.input-icon-wrap
input:-webkit-autofill,

.candidate-auth-page
.input-icon-wrap
input:-webkit-autofill:hover,

.candidate-auth-page
.input-icon-wrap
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--public-grey-950, #17201d);

    -webkit-box-shadow:
        0 0 0 1000px
        #ffffff inset;

    transition:
        background-color 5000s ease-in-out 0s;
}


/* ==========================================================
   16. SEND VERIFICATION BUTTON
========================================================== */

.candidate-auth-page .btn-career-primary {
    width: 100%;

    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    border:
        1px solid
        var(--public-green-800, #087052);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800, #087052),
            var(--public-green-600, #13a778)
        );

    color: #ffffff;

    font-family:
        var(--font-primary);

    font-size: 12.5px;
    font-weight: 750;

    letter-spacing: -0.01em;

    box-shadow:
        0 9px 22px
        rgba(10, 138, 100, 0.18);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.candidate-auth-page .btn-career-primary:hover {
    color: #ffffff;

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            var(--public-green-900, #07543b),
            var(--public-green-700, #0a8a64)
        );

    box-shadow:
        0 13px 28px
        rgba(10, 138, 100, 0.23);
}


.candidate-auth-page .btn-career-primary:active {
    transform: translateY(0);

    box-shadow:
        0 6px 15px
        rgba(10, 138, 100, 0.16);
}


.candidate-auth-page .btn-career-primary:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(10, 138, 100, 0.15),
        0 10px 24px
        rgba(10, 138, 100, 0.20);
}


/* Bootstrap mt-3 consistency */

.candidate-auth-page .auth-card .mt-3 {
    margin-top: 14px !important;
}


/* ==========================================================
   17. SECURITY MESSAGE
========================================================== */

.candidate-auth-page .auth-security {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 18px;

    padding-top: 17px;

    border-top:
        1px solid
        var(--public-grey-100, #f3f6f5);

    color:
        var(--public-grey-500, #84918c);

    font-size: 10px;

    line-height: 1.5;
}


.candidate-auth-page .auth-security i {
    color:
        var(--public-green-700, #0a8a64);

    font-size: 10px;
}


/* ==========================================================
   18. HONEYPOT FIELD
========================================================== */

.candidate-auth-page .hp-field {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================
   19. OPTIONAL FORM ERROR STATES

   These are ready if you later render:
   .auth-error
   .auth-success
========================================================== */

.candidate-auth-page .auth-error,
.candidate-auth-page .auth-success {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 10px;

    font-size: 11px;

    line-height: 1.55;
}


.candidate-auth-page .auth-error {
    border:
        1px solid
        #f1c8c8;

    background:
        #fff6f6;

    color:
        #9a3535;
}


.candidate-auth-page .auth-success {
    border:
        1px solid
        #bfe3d2;

    background:
        #effaf4;

    color:
        #087052;
}


/* ==========================================================
   20. OPTIONAL LOADING STATE

   JS can add .is-loading to the button.
========================================================== */

.candidate-auth-page
.btn-career-primary.is-loading {
    pointer-events: none;

    opacity: 0.82;
}


.candidate-auth-page
.btn-career-primary.is-loading::before {
    content: "";

    width: 14px;
    height: 14px;

    border:
        2px solid
        rgba(255, 255, 255, 0.45);

    border-top-color:
        #ffffff;

    border-radius: 50%;

    animation:
        candidateAuthSpin
        0.7s linear infinite;
}


@keyframes candidateAuthSpin {

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   21. LARGE SCREEN
========================================================== */

@media (min-width: 1400px) {

    .candidate-auth-page {
        padding:
            88px 0 96px;
    }


    .candidate-auth-page .auth-shell {
        min-height:
            550px;
    }

}


/* ==========================================================
   22. TABLET
========================================================== */

@media (max-width: 900px) {

    .candidate-auth-page {
        min-height: auto;

        padding:
            50px 0 62px;
    }


    .candidate-auth-page .auth-shell {
        grid-template-columns:
            1fr;

        max-width:
            680px;

        margin:
            0 auto;
    }


    .candidate-auth-page .auth-side {
        padding:
            42px 44px;

        border-right:
            0;

        border-bottom:
            1px solid
            #d8ebe2;
    }


    .candidate-auth-page .auth-side h1 {
        max-width:
            550px;

        font-size:
            37px;
    }


    .candidate-auth-page .auth-side > p {
        max-width:
            560px;
    }


    .candidate-auth-page .auth-points {
        display:
            grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap:
            9px;
    }


    .candidate-auth-page .auth-points > div {
        grid-template-columns:
            1fr;

        align-items:
            flex-start;

        min-height:
            128px;
    }


    .candidate-auth-page .auth-card {
        padding:
            45px 44px;
    }

}


/* ==========================================================
   23. MOBILE
========================================================== */

@media (max-width: 650px) {

    .candidate-auth-page {
        padding:
            30px 0 45px;

        background:
            linear-gradient(
                180deg,
                #f1faf5 0%,
                #f8fcfa 100%
            );
    }


    .candidate-auth-page .career-container {
        width:
            min(100% - 26px, 1080px);
    }


    .candidate-auth-page .auth-shell {
        border-radius:
            18px;

        box-shadow:
            0 15px 38px
            rgba(18, 58, 44, 0.09);
    }


    .candidate-auth-page .auth-side {
        padding:
            32px 26px;
    }


    .candidate-auth-page .auth-side .eyebrow {
        margin-bottom:
            15px;
    }


    .candidate-auth-page .auth-side h1 {
        font-size:
            31px;

        letter-spacing:
            -1px;
    }


    .candidate-auth-page .auth-side > p {
        margin-top:
            13px;

        font-size:
            12px;
    }


    .candidate-auth-page .auth-points {
        grid-template-columns:
            1fr;

        margin-top:
            24px;
    }


    .candidate-auth-page .auth-points > div {
        grid-template-columns:
            40px minmax(0, 1fr);

        min-height:
            0;

        padding:
            11px 12px;
    }


    .candidate-auth-page .auth-points > div > i {
        width:
            40px;

        height:
            40px;
    }


    .candidate-auth-page .auth-card {
        padding:
            35px 26px 32px;
    }


    .candidate-auth-page .auth-icon {
        width:
            50px;

        height:
            50px;

        margin-bottom:
            18px;
    }


    .candidate-auth-page .auth-card h2 {
        font-size:
            24px;
    }


    .candidate-auth-page .auth-card > p {
        margin-bottom:
            23px;
    }

}


/* ==========================================================
   24. SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .candidate-auth-page {
        padding:
            20px 0 34px;
    }


    .candidate-auth-page .career-container {
        width:
            min(100% - 20px, 1080px);
    }


    .candidate-auth-page .auth-side {
        padding:
            28px 21px;
    }


    .candidate-auth-page .auth-side h1 {
        font-size:
            28px;
    }


    .candidate-auth-page .auth-card {
        padding:
            30px 21px 28px;
    }


    .candidate-auth-page .input-icon-wrap input {
        height:
            48px;
    }


    .candidate-auth-page .btn-career-primary {
        min-height:
            48px;
    }

}


/* ==========================================================
   25. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .candidate-auth-page *,
    .candidate-auth-page *::before,
    .candidate-auth-page *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}
/* ==========================================================
   CANDIDATE RESUME UPLOAD
   PREMIUM PUBLIC PORTAL
========================================================== */

.candidate-resume-page {
    background: #f8faf9;
}


/* ==========================================================
   CONTAINER
========================================================== */

.candidate-resume-page .career-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   PAGE HERO
========================================================== */

.resume-page-hero {
    position: relative;
    overflow: hidden;

    padding: 52px 0 54px;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f5fbf8 45%,
            #e9f7f0 100%
        );

    border-bottom: 1px solid #dcebe4;
}


.resume-page-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    top: -210px;

    border-radius: 50%;

    background: rgba(10, 138, 100, .055);

    pointer-events: none;
}


.resume-page-hero-inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.resume-hero-copy {
    max-width: 690px;
}


.resume-eyebrow {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 15px;

    padding: 7px 11px;

    border: 1px solid #cce8db;
    border-radius: 999px;

    background: rgba(255,255,255,.75);

    color: var(--public-green-800);

    font-size: 9.5px;
    font-weight: 800;

    letter-spacing: .9px;

    text-transform: uppercase;
}


.resume-hero-copy h1 {
    margin: 0;

    max-width: 650px;

    color: var(--public-green-950);

    font-size: clamp(34px, 4vw, 49px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.resume-hero-copy h1 span {
    color: var(--public-green-700);
}


.resume-hero-copy > p {
    max-width: 650px;

    margin: 16px 0 0;

    color: var(--public-grey-600);

    font-size: 13px;
    line-height: 1.75;
}


/* HERO STATUS */

.resume-hero-status {
    min-width: 310px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px 17px;

    border: 1px solid #d3e9de;
    border-radius: 14px;

    background: rgba(255,255,255,.82);

    box-shadow:
        0 10px 28px rgba(18,58,44,.06);

    backdrop-filter: blur(10px);
}


.resume-status-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: var(--public-green-50);

    color: var(--public-green-700);

    font-size: 16px;
}


.resume-hero-status strong {
    display: block;

    color: var(--public-green-950);

    font-size: 11px;
    font-weight: 750;
}


.resume-hero-status span {
    display: block;

    margin-top: 3px;

    color: var(--public-grey-500);

    font-size: 9.5px;
}


/* ==========================================================
   MAIN SECTION
========================================================== */

.resume-main-section {
    padding: 54px 0 76px;
}


.resume-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.45fr);

    align-items: stretch;

    overflow: hidden;

    border: 1px solid #dce8e2;
    border-radius: 22px;

    background: white;

    box-shadow:
        0 20px 55px rgba(18,58,44,.08);
}


/* ==========================================================
   LEFT INFORMATION PANEL
========================================================== */

.resume-info-panel {
    position: relative;

    overflow: hidden;

    padding: 42px 36px;

    background:
        linear-gradient(
            150deg,
            #e9f7ef 0%,
            #f1faf5 55%,
            #e2f3ea 100%
        );

    border-right: 1px solid #d4e9df;
}


.resume-info-panel::before {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -140px;
    top: -140px;

    border-radius: 50%;

    background: rgba(10,138,100,.06);
}


.resume-info-top {
    position: relative;
    z-index: 2;
}


.resume-info-icon {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid #cbe6d8;
    border-radius: 14px;

    background: white;

    color: var(--public-green-700);

    font-size: 18px;

    box-shadow:
        0 7px 20px rgba(18,58,44,.06);
}


.resume-info-label {
    display: block;

    margin-bottom: 8px;

    color: var(--public-green-700);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}


.resume-info-top h2 {
    margin: 0;

    color: var(--public-green-950);

    font-size: 28px;
    font-weight: 800;

    line-height: 1.17;

    letter-spacing: -.7px;
}


.resume-info-top > p {
    margin: 14px 0 0;

    color: var(--public-grey-600);

    font-size: 11px;
    line-height: 1.7;
}


/* ==========================================================
   FEATURE LIST
========================================================== */

.resume-feature-list {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 29px;
}


.resume-feature {
    display: grid;

    grid-template-columns:
        40px
        minmax(0,1fr);

    align-items: center;

    gap: 11px;

    padding: 11px 12px;

    border: 1px solid rgba(195,225,211,.78);
    border-radius: 12px;

    background: rgba(255,255,255,.67);

    transition: .2s ease;
}


.resume-feature:hover {
    transform: translateX(3px);

    background: rgba(255,255,255,.94);

    border-color: #acd7c4;
}


.resume-feature-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d8ebe2;
    border-radius: 10px;

    background: white;

    color: var(--public-green-700);

    font-size: 14px;
}


.resume-feature strong {
    display: block;

    color: var(--public-green-950);

    font-size: 11px;
    font-weight: 750;
}


.resume-feature span {
    display: block;

    margin-top: 2px;

    color: var(--public-grey-600);

    font-size: 9.5px;

    line-height: 1.45;
}


/* ==========================================================
   PRIVACY
========================================================== */

.resume-privacy-box {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 10px;

    margin-top: 26px;

    padding: 13px;

    border: 1px solid #c9e3d6;
    border-radius: 12px;

    background: rgba(255,255,255,.57);
}


.resume-privacy-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: white;

    color: var(--public-green-700);

    font-size: 11px;
}


.resume-privacy-box strong {
    display: block;

    color: var(--public-green-950);

    font-size: 9.5px;
}


.resume-privacy-box p {
    margin: 3px 0 0;

    color: var(--public-grey-600);

    font-size: 8.5px;

    line-height: 1.5;
}


/* ==========================================================
   RIGHT UPLOAD PANEL
========================================================== */

.resume-upload-panel {
    padding: 42px 44px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 80%,
            #fbfdfc 100%
        );
}


.resume-upload-panel-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 25px;
}


.resume-step-label {
    display: block;

    margin-bottom: 6px;

    color: var(--public-green-700);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .9px;
}


.resume-upload-panel-head h2 {
    margin: 0;

    color: var(--public-green-950);

    font-size: 24px;
    font-weight: 800;

    letter-spacing: -.5px;
}


.resume-upload-panel-head p {
    max-width: 570px;

    margin: 7px 0 0;

    color: var(--public-grey-600);

    font-size: 10.5px;
    line-height: 1.65;
}


.resume-ai-badge {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border: 1px solid #cde8db;
    border-radius: 999px;

    background: var(--public-green-50);

    color: var(--public-green-800);

    font-size: 9px;
    font-weight: 750;
}


/* ==========================================================
   DROPZONE
========================================================== */

.premium-resume-dropzone {
    position: relative;

    min-height: 275px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 31px 25px;

    border: 1.5px dashed #add7c3;
    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #fbfefc 0%,
            #f3faf6 100%
        );

    text-align: center;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.premium-resume-dropzone:hover,
.premium-resume-dropzone.is-dragging {
    border-color: var(--public-green-700);

    background: #eff9f4;

    box-shadow:
        inset 0 0 0 1px rgba(10,138,100,.05),
        0 10px 28px rgba(18,58,44,.055);
}


.premium-resume-dropzone.is-dragging {
    transform: scale(1.006);
}


.premium-resume-dropzone.has-file {
    border-color: #89c9ac;

    background: #f4fbf7;
}


.premium-resume-dropzone input[type="file"] {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}


/* ICON */

.dropzone-icon-wrap {
    position: relative;

    margin-bottom: 17px;
}


.dropzone-icon-wrap::before {
    content: "";

    position: absolute;

    width: 82px;
    height: 82px;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: rgba(19,167,120,.06);
}


.dropzone-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #cce7da;
    border-radius: 16px;

    background: white;

    color: var(--public-green-700);

    font-size: 21px;

    box-shadow:
        0 9px 24px rgba(18,58,44,.08);
}


.dropzone-content h3 {
    margin: 0;

    color: var(--public-green-950);

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


.dropzone-content p {
    margin: 6px 0 0;

    color: var(--public-grey-500);

    font-size: 10px;
}


.dropzone-content p span {
    color: var(--public-green-700);

    font-weight: 750;
}


/* FILE TYPE BADGES */

.resume-file-types {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 17px;
}


.resume-file-types span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border: 1px solid #dce7e2;
    border-radius: 7px;

    background: white;

    color: var(--public-grey-700);

    font-size: 8.5px;
    font-weight: 700;
}


.resume-file-types i {
    color: var(--public-green-700);
}


.premium-resume-dropzone > small {
    margin-top: 12px;

    color: var(--public-grey-500);

    font-size: 8.5px;
}


/* ==========================================================
   SELECTED FILE
========================================================== */

.selected-resume-file {
    display: grid;

    grid-template-columns:
        43px
        minmax(0,1fr)
        auto
        30px;

    align-items: center;

    gap: 11px;

    margin-top: 12px;

    padding: 11px 12px;

    border: 1px solid #cce5d8;
    border-radius: 11px;

    background: #f6fbf8;
}


.selected-resume-file[hidden] {
    display: none !important;
}


.selected-file-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: white;

    color: var(--public-green-700);

    font-size: 16px;

    box-shadow:
        0 4px 12px rgba(18,58,44,.05);
}


.selected-file-details {
    min-width: 0;
}


.selected-file-details strong {
    display: block;

    overflow: hidden;

    color: var(--public-grey-950);

    font-size: 10.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.selected-file-details span {
    display: block;

    margin-top: 3px;

    color: var(--public-grey-500);

    font-size: 8.5px;
}


.selected-file-status {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--public-green-700);

    font-size: 8.5px;
    font-weight: 750;
}


.selected-file-remove {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dfe7e3;
    border-radius: 8px;

    background: white;

    color: var(--public-grey-500);

    cursor: pointer;
}


.selected-file-remove:hover {
    border-color: #e4c6c6;

    background: #fff7f7;

    color: #a84c4c;
}


/* ==========================================================
   REQUIREMENTS
========================================================== */

.resume-upload-requirements {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin: 13px 2px 0;
}


.resume-upload-requirements div {
    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--public-grey-500);

    font-size: 8.5px;
}


.resume-upload-requirements i {
    color: var(--public-green-600);

    font-size: 8px;
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.resume-parse-button {
    width: 100%;
    min-height: 48px;

    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color: white;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 8px 21px rgba(10,138,100,.19);

    transition: .2s ease;
}


.resume-parse-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 27px rgba(10,138,100,.25);
}


.resume-parse-button:disabled {
    cursor: wait;

    opacity: .86;

    transform: none;
}


.button-normal {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}


.button-loading {
    display: none;

    align-items: center;

    gap: 8px;
}


.resume-parse-button.is-loading .button-normal {
    display: none;
}


.resume-parse-button.is-loading .button-loading {
    display: flex;
}


.resume-spinner {
    width: 14px;
    height: 14px;

    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;

    border-radius: 50%;

    animation: resumeSpin .7s linear infinite;
}


@keyframes resumeSpin {

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   PROCESS SECTION
========================================================== */

.resume-process-section {
    margin-top: 32px;

    padding-top: 27px;

    border-top: 1px solid var(--public-grey-100);
}


.resume-process-title {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.resume-process-title span {
    flex-shrink: 0;

    color: var(--public-grey-500);

    font-size: 8.5px;
    font-weight: 800;

    letter-spacing: .9px;
}


.resume-process-title div {
    width: 100%;
    height: 1px;

    background: var(--public-grey-100);
}


.resume-process-grid {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 8px;
}


.resume-process-step {
    position: relative;

    min-height: 135px;

    padding: 14px 12px;

    border: 1px solid #e0e9e5;
    border-radius: 11px;

    background: #fbfdfc;
}


.process-number {
    position: absolute;

    right: 9px;
    top: 8px;

    color: #c3d2cc;

    font-size: 8px;
    font-weight: 800;
}


.process-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius: 9px;

    background: var(--public-green-50);

    color: var(--public-green-700);

    font-size: 12px;
}


.resume-process-step strong {
    display: block;

    color: var(--public-green-950);

    font-size: 9.5px;
    font-weight: 750;
}


.resume-process-step p {
    margin: 5px 0 0;

    color: var(--public-grey-500);

    font-size: 8px;

    line-height: 1.5;
}


.resume-process-arrow {
    color: #b9c9c2;

    font-size: 8px;
}


/* ==========================================================
   PROFILE NOTE
========================================================== */

.resume-existing-profile-note {
    display: flex;

    gap: 9px;

    margin-top: 19px;

    padding: 11px 12px;

    border: 1px solid #d9e8e1;
    border-radius: 10px;

    background: #fafcfb;
}


.resume-existing-profile-note > i {
    margin-top: 2px;

    color: var(--public-green-700);

    font-size: 11px;
}


.resume-existing-profile-note strong {
    display: block;

    color: var(--public-grey-800);

    font-size: 9px;
}


.resume-existing-profile-note span {
    display: block;

    margin-top: 2px;

    color: var(--public-grey-500);

    font-size: 8.5px;

    line-height: 1.5;
}


/* ==========================================================
   ALERTS
========================================================== */

.resume-alert {
    display: flex;

    gap: 10px;

    margin-bottom: 17px;

    padding: 11px 12px;

    border-radius: 10px;
}


.resume-alert > i {
    margin-top: 2px;
}


.resume-alert strong,
.resume-alert span {
    display: block;
}


.resume-alert strong {
    font-size: 9.5px;
}


.resume-alert span {
    margin-top: 2px;

    font-size: 8.5px;
}


.resume-alert-error {
    border: 1px solid #efcccc;

    background: #fff7f7;

    color: #984343;
}


.resume-alert-success {
    border: 1px solid #c4e3d4;

    background: #f0faf5;

    color: var(--public-green-800);
}


/* ==========================================================
   HONEYPOT
========================================================== */

.candidate-resume-page .hp-field {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    .resume-page-hero-inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }


    .resume-hero-status {
        min-width: 0;
        width: 100%;
        max-width: 450px;
    }


    .resume-layout {
        grid-template-columns: 1fr;
    }


    .resume-info-panel {
        border-right: 0;
        border-bottom: 1px solid #d4e9df;
    }


    .resume-feature-list {
        display: grid;

        grid-template-columns:
            repeat(2,1fr);
    }


    .resume-process-grid {
        grid-template-columns:
            repeat(4,1fr);

        gap: 8px;
    }


    .resume-process-arrow {
        display: none;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .candidate-resume-page .career-container {
        width: min(100% - 26px, 1180px);
    }


    .resume-page-hero {
        padding: 38px 0 40px;
    }


    .resume-hero-copy h1 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .resume-main-section {
        padding: 28px 0 55px;
    }


    .resume-layout {
        border-radius: 17px;
    }


    .resume-info-panel {
        padding: 30px 21px;
    }


    .resume-info-top h2 {
        font-size: 24px;
    }


    .resume-feature-list {
        grid-template-columns: 1fr;
    }


    .resume-upload-panel {
        padding: 29px 19px;
    }


    .resume-upload-panel-head {
        flex-direction: column;

        gap: 13px;
    }


    .premium-resume-dropzone {
        min-height: 250px;

        padding: 27px 15px;
    }


    .selected-resume-file {
        grid-template-columns:
            40px
            minmax(0,1fr)
            30px;
    }


    .selected-file-status {
        display: none;
    }


    .resume-upload-requirements {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }


    .resume-process-grid {
        grid-template-columns:
            repeat(2,1fr);

        gap: 8px;
    }


    .resume-process-step {
        min-height: 125px;
    }

}

/* ==========================================================
   CANDIDATE PROFILE REVIEW
   PREMIUM PUBLIC PORTAL UI

   Template:
   app/templates/candidate/profile.html

   IMPORTANT:
   Keep this section at the END of public_portal.css
========================================================== */


/* ==========================================================
   1. PROFILE PAGE BACKGROUND
========================================================== */

.career-section {
    padding: 42px 0 78px;

    background:
        linear-gradient(
            180deg,
            #f7faf8 0%,
            #ffffff 420px
        );

    min-height: 600px;
}


/* ==========================================================
   2. PROFILE CONTAINER
========================================================== */

.career-container {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   3. PROFILE CARD
========================================================== */

.candidate-panel.profile-form {
    position: relative;

    overflow: hidden;

    padding: 30px;

    border: 1px solid
        var(--public-border, #e1e8e5);

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 82%,
            #fbfdfc 100%
        );

    box-shadow:
        0 12px 36px
        rgba(18, 58, 44, 0.07);
}


/* top accent */

.candidate-panel.profile-form::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--public-green-900, #07543b),
            var(--public-green-600, #13a778)
        );
}


/* ==========================================================
   4. PANEL HEADER
========================================================== */

.profile-form .panel-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin: -4px 0 28px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        var(--public-grey-100, #f3f6f5);
}


.profile-form .panel-head > div {
    min-width: 0;
}


.profile-form .panel-head .eyebrow {
    display: block;

    margin-bottom: 6px;

    color:
        var(--public-green-700, #0a8a64);

    font-size: 9.5px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.profile-form .panel-head h2 {
    margin: 0;

    color:
        var(--public-green-950, #063d2c);

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -.55px;
}


/* ==========================================================
   5. PROFILE SECTION HEADERS
========================================================== */

.profile-section-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    padding: 13px 15px;

    border: 1px solid #d8ebe2;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #effaf4 0%,
            #f6fbf8 100%
        );
}


.profile-section-title > i {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #ffffff;

    color:
        var(--public-green-700, #0a8a64);

    font-size: 14px;

    border: 1px solid #d7ebe1;

    box-shadow:
        0 4px 12px
        rgba(18, 58, 44, 0.05);
}


.profile-section-title > span {
    min-width: 0;
}


.profile-section-title strong {
    display: block;

    color:
        var(--public-green-950, #063d2c);

    font-size: 12.5px;
    font-weight: 750;

    line-height: 1.35;
}


.profile-section-title small {
    display: block;

    margin-top: 2px;

    color:
        var(--public-grey-500, #84918c);

    font-size: 9.5px;

    line-height: 1.45;
}


/* ==========================================================
   6. FORM LABELS
========================================================== */

.profile-form label {
    display: block;

    margin-bottom: 6px;

    color:
        var(--public-grey-700, #50605a);

    font-size: 10.5px;
    font-weight: 700;

    letter-spacing: .01em;
}


/* ==========================================================
   7. INPUTS
========================================================== */

.profile-form .form-control,
.profile-form .form-select {
    min-height: 45px;

    padding: 10px 12px;

    border:
        1px solid
        #dce5e1;

    border-radius: 9px;

    background:
        #fbfcfc;

    color:
        var(--public-grey-950, #17201d);

    font-family:
        var(--font-primary);

    font-size: 12px;
    font-weight: 450;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.profile-form .form-control:hover,
.profile-form .form-select:hover {
    border-color:
        #bdd9cc;

    background:
        #ffffff;
}


.profile-form .form-control:focus,
.profile-form .form-select:focus {
    border-color:
        var(--public-green-600, #13a778);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(19, 167, 120, .10);

    outline: none;
}


.profile-form .form-control::placeholder {
    color: #a2aea9;
}


/* ==========================================================
   8. TEXTAREA
========================================================== */

.profile-form textarea.form-control {
    min-height: 125px;

    resize: vertical;

    line-height: 1.65;
}


/* ==========================================================
   9. INVALID FIELD
========================================================== */

.profile-form .form-control.is-invalid,
.profile-form .form-select.is-invalid {
    border-color: #d98282;

    background-color: #fffafa;
}


.profile-form .form-control.is-invalid:focus,
.profile-form .form-select.is-invalid:focus {
    border-color: #c96565;

    box-shadow:
        0 0 0 3px
        rgba(201, 101, 101, .10);
}


.profile-form .invalid-feedback {
    margin-top: 5px;

    color: #b55353;

    font-size: 9.5px;
    font-weight: 550;
}


/* ==========================================================
   10. PARSED INFORMATION
========================================================== */

.parsed-preview {
    padding: 17px 18px;

    border:
        1px solid
        #dce9e3;

    border-radius: 12px;

    background:
        #fafcfb;
}


.parsed-preview > strong {
    display: block;

    margin-bottom: 10px;

    color:
        var(--public-green-950, #063d2c);

    font-size: 11px;
    font-weight: 750;
}


.parsed-preview > div {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.parsed-preview > div > span {
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding: 4px 9px;

    border:
        1px solid
        #cfe8dc;

    border-radius: 999px;

    background:
        var(--public-green-50, #effbf6);

    color:
        var(--public-green-800, #087052);

    font-size: 9.5px;
    font-weight: 650;
}


.parsed-preview > small {
    display: block;

    color:
        var(--public-grey-500, #84918c);

    font-size: 10px;

    line-height: 1.6;
}


/* ==========================================================
   11. FORM ACTION AREA
========================================================== */

.profile-form-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    margin-top: 30px;

    padding-top: 22px;

    border-top:
        1px solid
        var(--public-grey-100, #f3f6f5);
}


/* ==========================================================
   12. COMMON CANDIDATE BUTTONS
========================================================== */

.btn-career-primary,
.btn-career-secondary,
.btn-career-outline {
    min-height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 15px;

    border-radius: 9px;

    font-family:
        var(--font-primary);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


/* PRIMARY */

.btn-career-primary {
    border:
        1px solid
        var(--public-green-800, #087052);

    background:
        linear-gradient(
            135deg,
            var(--public-green-800, #087052),
            var(--public-green-600, #13a778)
        );

    color: #ffffff;

    box-shadow:
        0 7px 18px
        rgba(10, 138, 100, .17);
}


.btn-career-primary:hover {
    color: #ffffff;

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            var(--public-green-900, #07543b),
            var(--public-green-700, #0a8a64)
        );

    box-shadow:
        0 10px 24px
        rgba(10, 138, 100, .22);
}


/* SECONDARY */

.btn-career-secondary {
    border:
        1px solid
        #dce5e1;

    background:
        #f7f9f8;

    color:
        var(--public-grey-700, #50605a);
}


.btn-career-secondary:hover {
    border-color:
        #c7d9d1;

    background:
        #eef4f1;

    color:
        var(--public-green-900, #07543b);
}


/* OUTLINE */

.btn-career-outline {
    border:
        1px solid
        #c8e2d6;

    background:
        #ffffff;

    color:
        var(--public-green-800, #087052);
}


.btn-career-outline:hover {
    border-color:
        #9ecfba;

    background:
        var(--public-green-50, #effbf6);

    color:
        var(--public-green-900, #07543b);

    transform:
        translateY(-1px);
}


/* ==========================================================
   13. BUTTON ICONS
========================================================== */

.btn-career-primary i,
.btn-career-secondary i,
.btn-career-outline i {
    font-size: 10px;
}


/* ==========================================================
   14. BETTER GRID SPACING
========================================================== */

.profile-form .row.g-3 {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 15px;
}


/* ==========================================================
   15. FORM GROUP MICRO INTERACTION
========================================================== */

.profile-form .row > div {
    position: relative;
}


.profile-form .row > div:focus-within label {
    color:
        var(--public-green-800, #087052);
}


/* ==========================================================
   16. PAGE HERO PROFILE-SPECIFIC ENHANCEMENT
========================================================== */

.career-page-head {
    position: relative;

    overflow: hidden;

    padding: 46px 0 47px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(19, 167, 120, .08),
            transparent 26%
        ),
        linear-gradient(
            110deg,
            #ffffff 0%,
            #f7fbf9 48%,
            #eaf7f0 100%
        );

    border-bottom:
        1px solid
        #dcece4;
}


.career-page-head::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -110px;
    top: -170px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, .045);

    pointer-events: none;
}


.career-page-head .career-container {
    position: relative;
    z-index: 2;
}


.career-page-head .eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 9px;

    color:
        var(--public-green-700, #0a8a64);

    font-size: 9.5px;
    font-weight: 800;

    letter-spacing: 1.05px;

    text-transform: uppercase;
}


.career-page-head h1 {
    margin: 0;

    color:
        var(--public-green-950, #063d2c);

    font-size:
        clamp(31px, 4vw, 42px);

    font-weight: 800;

    letter-spacing: -1.1px;

    line-height: 1.15;
}


.career-page-head p {
    max-width: 650px;

    margin: 10px 0 0;

    color:
        var(--public-grey-600, #697873);

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   17. ACCESSIBILITY / KEYBOARD FOCUS
========================================================== */

.btn-career-primary:focus-visible,
.btn-career-secondary:focus-visible,
.btn-career-outline:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(19, 167, 120, .13);
}


/* ==========================================================
   18. TABLET
========================================================== */

@media (max-width: 900px) {

    .candidate-panel.profile-form {
        padding: 25px;
    }


    .profile-form .panel-head {
        align-items: flex-start;

        gap: 15px;
    }

}


/* ==========================================================
   19. MOBILE
========================================================== */

@media (max-width: 650px) {

    .career-container {
        width:
            min(100% - 26px, 1180px);
    }


    .career-page-head {
        padding:
            36px 0 38px;
    }


    .career-page-head h1 {
        font-size:
            30px;
    }


    .career-section {
        padding:
            28px 0 55px;
    }


    .candidate-panel.profile-form {
        padding:
            20px 17px;

        border-radius:
            15px;
    }


    .profile-form .panel-head {
        flex-direction:
            column;

        align-items:
            stretch;

        margin-bottom:
            22px;

        padding-bottom:
            19px;
    }


    .profile-form .panel-head h2 {
        font-size:
            20px;
    }


    .profile-form .panel-head .btn {
        width:
            100%;
    }


    .profile-section-title {
        padding:
            11px 12px;
    }


    .profile-section-title > i {
        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;
    }


    .profile-form-actions {
        flex-direction:
            column-reverse;

        align-items:
            stretch;
    }


    .profile-form-actions .btn {
        width:
            100%;
    }

}


/* ==========================================================
   20. EXTRA SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .career-page-head h1 {
        font-size:
            27px;
    }


    .candidate-panel.profile-form {
        padding:
            18px 14px;
    }


    .profile-section-title {
        align-items:
            flex-start;
    }


    .profile-section-title > i {
        width:
            33px;

        height:
            33px;

        flex-basis:
            33px;
    }

}


/* ==========================================================
   21. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .profile-form *,
    .profile-form *::before,
    .profile-form *::after {
        transition-duration:
            .01ms !important;
    }

}

/* ==========================================================
   CANDIDATE DASHBOARD
   PREMIUM PUBLIC PORTAL UI

   Template:
   app/templates/candidate/dashboard.html

   Keep this section at END of public_portal.css
========================================================== */


/* ==========================================================
   DASHBOARD HERO
========================================================== */

.candidate-dashboard-hero {
    position: relative;
    overflow: hidden;

    padding: 48px 0 50px;

    border-bottom: 1px solid #dcebe4;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f4fbf7 45%,
            #e7f6ee 100%
        );
}


.candidate-dashboard-hero::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -150px;
    top: -210px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, .055);

    pointer-events: none;
}


.candidate-dashboard-hero::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -120px;

    border-radius: 50%;

    border:
        35px solid
        rgba(19, 167, 120, .025);

    pointer-events: none;
}


.candidate-dashboard-hero-inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.candidate-dashboard-welcome {
    max-width: 720px;
}


.candidate-dashboard-eyebrow {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 14px;

    padding: 7px 11px;

    border: 1px solid #cce8db;
    border-radius: 999px;

    background:
        rgba(255,255,255,.76);

    color:
        var(--public-green-800);

    font-size: 9.5px;
    font-weight: 800;

    letter-spacing: .9px;
    text-transform: uppercase;
}


.candidate-dashboard-eyebrow i {
    color:
        var(--public-green-700);
}


.candidate-dashboard-welcome h1 {
    margin: 0;

    color:
        var(--public-grey-950);

    font-size:
        clamp(31px, 4vw, 45px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.3px;
}


.candidate-dashboard-welcome h1 span {
    color:
        var(--public-green-800);
}


.candidate-dashboard-welcome p {
    max-width: 600px;

    margin: 12px 0 0;

    color:
        var(--public-grey-600);

    font-size: 12.5px;

    line-height: 1.7;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.candidate-dashboard-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}


.candidate-dashboard-actions form {
    margin: 0;
}


.btn-dashboard-primary,
.btn-dashboard-secondary {
    min-height: 43px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 750;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.btn-dashboard-primary {
    border:
        1px solid
        var(--public-green-800);

    background:
        linear-gradient(
            135deg,
            var(--public-green-800),
            var(--public-green-600)
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(10,138,100,.17);
}


.btn-dashboard-primary:hover {
    color: #ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 26px
        rgba(10,138,100,.23);
}


.btn-dashboard-secondary {
    border:
        1px solid #d5e2dc;

    background: #ffffff;

    color:
        var(--public-grey-700);

    cursor: pointer;
}


.btn-dashboard-secondary:hover {
    border-color:
        #b9d9ca;

    background:
        var(--public-green-50);

    color:
        var(--public-green-900);
}


/* ==========================================================
   DASHBOARD BODY
========================================================== */

.candidate-dashboard-page {
    min-height: 650px;

    padding: 38px 0 78px;

    background:
        linear-gradient(
            180deg,
            #f7faf8 0,
            #ffffff 380px
        );
}


/* ==========================================================
   ALERTS
========================================================== */

.candidate-dashboard-alert {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    padding: 13px 16px;

    border-radius: 11px;

    font-size: 11px;
}


.candidate-dashboard-alert > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;
}


.candidate-dashboard-alert strong,
.candidate-dashboard-alert small {
    display: block;
}


.candidate-dashboard-alert strong {
    font-size: 11px;
    font-weight: 750;
}


.candidate-dashboard-alert small {
    margin-top: 2px;

    font-size: 9.5px;
}


.candidate-dashboard-alert.success {
    border: 1px solid #cce8db;

    background: #f0faf5;

    color:
        var(--public-green-900);
}


.candidate-dashboard-alert.success > span {
    background: #dcf3e8;

    color:
        var(--public-green-700);
}


.candidate-dashboard-alert.info {
    border: 1px solid #d9e5e0;

    background: #f7faf9;

    color:
        var(--public-grey-700);
}


.candidate-dashboard-alert.info > span {
    background: #edf4f1;

    color:
        var(--public-green-700);
}


/* ==========================================================
   KPI GRID
========================================================== */

.candidate-kpis {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 15px;

    margin-bottom: 24px;
}


.candidate-kpi-card {
    position: relative;

    min-height: 190px;

    padding: 19px;

    overflow: hidden;

    border:
        1px solid
        var(--public-border);

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 5px 18px
        rgba(18,58,44,.035);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.candidate-kpi-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #bddfcf;

    box-shadow:
        0 12px 28px
        rgba(18,58,44,.075);
}


.candidate-kpi-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -55px;
    top: -55px;

    border-radius: 50%;

    background:
        rgba(19,167,120,.035);

    pointer-events: none;
}


.candidate-kpi-top {
    min-height: 42px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 15px;
}


.candidate-kpi-card .kpi-icon {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size: 14px;
}


.kpi-status-dot {
    width: 8px;
    height: 8px;

    margin-top: 4px;

    border-radius: 50%;

    background:
        var(--public-green-600);

    box-shadow:
        0 0 0 4px
        rgba(19,167,120,.09);
}


.candidate-kpi-label {
    display: block;

    margin-bottom: 3px;

    color:
        var(--public-grey-500);

    font-size: 9.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .55px;
}


.candidate-kpi-value {
    display: block;

    color:
        var(--public-green-950);

    font-size: 24px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.6px;
}


.candidate-kpi-card > a {
    position: absolute;

    left: 19px;
    bottom: 17px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color:
        var(--public-green-700);

    font-size: 9.5px;

    font-weight: 700;

    text-decoration: none;
}


.candidate-kpi-card > a i {
    font-size: 8px;

    transition:
        transform .2s ease;
}


.candidate-kpi-card > a:hover {
    color:
        var(--public-green-950);
}


.candidate-kpi-card > a:hover i {
    transform:
        translateX(2px);
}


/* ==========================================================
   PROFILE COMPLETION
========================================================== */

.candidate-progress {
    width: 100%;
    height: 6px;

    margin-top: 13px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #edf2f0;
}


.candidate-progress-bar {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--public-green-700),
            var(--public-green-600)
        );
}


.candidate-progress-caption {
    display: block;

    margin-top: 8px;

    color:
        var(--public-grey-500);

    font-size: 8.5px;

    line-height: 1.45;
}


/* ==========================================================
   MAIN DASHBOARD GRID
========================================================== */

.candidate-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, .75fr);

    gap: 20px;

    align-items: start;
}


/* ==========================================================
   PANELS
========================================================== */

.candidate-panel {
    overflow: hidden;

    border:
        1px solid
        var(--public-border);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 6px 22px
        rgba(18,58,44,.045);
}


.candidate-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding: 21px 22px 18px;

    border-bottom:
        1px solid
        var(--public-grey-100);
}


.candidate-panel-eyebrow {
    display: block;

    margin-bottom: 5px;

    color:
        var(--public-green-700);

    font-size: 8.5px;

    font-weight: 850;

    letter-spacing: .9px;

    text-transform: uppercase;
}


.candidate-panel-head h2 {
    margin: 0;

    color:
        var(--public-green-950);

    font-size: 18px;

    font-weight: 800;

    letter-spacing: -.4px;
}


.candidate-panel-head p {
    margin: 5px 0 0;

    color:
        var(--public-grey-500);

    font-size: 9.5px;
}


.candidate-panel-action {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    color:
        var(--public-green-700);

    font-size: 9.5px;

    font-weight: 700;

    text-decoration: none;
}


.candidate-panel-action:hover {
    color:
        var(--public-green-950);
}


/* ==========================================================
   APPLICATION LIST
========================================================== */

.application-cards {
    padding: 6px 20px 12px;
}


.application-card {
    display: grid;

    grid-template-columns:
        43px
        minmax(0,1fr)
        105px
        105px
        34px;

    align-items: center;

    gap: 13px;

    padding: 15px 2px;

    border-bottom:
        1px solid
        var(--public-grey-100);
}


.application-card:last-child {
    border-bottom: 0;
}


.application-job-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size: 13px;
}


.application-job {
    min-width: 0;
}


.application-job strong {
    display: block;

    overflow: hidden;

    color:
        var(--public-grey-950);

    font-size: 11px;

    font-weight: 750;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.application-job span {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 5px;

    overflow: hidden;

    color:
        var(--public-grey-500);

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.application-job span i {
    color:
        var(--public-green-600);
}


.application-date small,
.application-date strong {
    display: block;
}


.application-date small {
    color:
        var(--public-grey-500);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.application-date strong {
    margin-top: 3px;

    color:
        var(--public-grey-700);

    font-size: 9.5px;

    font-weight: 700;
}


/* ==========================================================
   APPLICATION STATUS
========================================================== */

.application-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding: 0 9px;

    border:
        1px solid #d5e7de;

    border-radius: 999px;

    background:
        #f2faf6;

    color:
        var(--public-green-800);

    font-size: 8.5px;

    font-weight: 750;

    white-space: nowrap;
}


.application-status.status-rejected {
    border-color: #f0d6d6;

    background: #fff5f5;

    color: #a95050;
}


.application-status.status-selected,
.application-status.status-shortlisted {
    border-color: #c5e8d7;

    background: #ecfaf3;

    color:
        #087052;
}


.application-status.status-interview {
    border-color: #d6e4ee;

    background: #f2f7fb;

    color: #47728c;
}


.application-view {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        var(--public-grey-50);

    color:
        var(--public-green-700);

    text-decoration: none;

    transition:
        .2s ease;
}


.application-view:hover {
    color: #ffffff;

    background:
        var(--public-green-800);

    transform:
        translateX(2px);
}


/* ==========================================================
   CAREER TOOLS
========================================================== */

.candidate-links {
    padding: 9px 17px 14px;
}


.candidate-links > a {
    display: grid;

    grid-template-columns:
        39px
        minmax(0,1fr)
        15px;

    align-items: center;

    gap: 11px;

    padding: 13px 4px;

    border-bottom:
        1px solid
        var(--public-grey-100);

    color:
        var(--public-grey-800);

    text-decoration: none;

    transition:
        .2s ease;
}


.candidate-links > a:last-child {
    border-bottom: 0;
}


.candidate-links > a:hover {
    padding-left: 7px;

    color:
        var(--public-green-800);
}


.candidate-tool-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size: 12px;
}


.candidate-tool-copy {
    min-width: 0;
}


.candidate-tool-copy strong {
    display: block;

    color:
        var(--public-grey-950);

    font-size: 10.5px;

    font-weight: 750;
}


.candidate-tool-copy small {
    display: block;

    margin-top: 3px;

    color:
        var(--public-grey-500);

    font-size: 8.5px;

    line-height: 1.45;
}


.candidate-links > a > .fa-chevron-right {
    color:
        var(--public-grey-300);

    font-size: 8px;
}


.candidate-links > a:hover > .fa-chevron-right {
    color:
        var(--public-green-600);
}


/* ==========================================================
   PROFILE TIP
========================================================== */

.candidate-profile-tip {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0 17px 17px;

    padding: 13px;

    border:
        1px solid #d4e9df;

    border-radius: 11px;

    background:
        linear-gradient(
            120deg,
            #effaf4,
            #f7fcf9
        );
}


.candidate-profile-tip > span {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #ffffff;

    color:
        var(--public-green-700);
}


.candidate-profile-tip strong {
    display: block;

    color:
        var(--public-green-950);

    font-size: 9.5px;

    font-weight: 750;
}


.candidate-profile-tip p {
    margin: 4px 0 0;

    color:
        var(--public-grey-600);

    font-size: 8.5px;

    line-height: 1.5;
}


/* ==========================================================
   EMPTY APPLICATIONS
========================================================== */

.candidate-empty-applications {
    padding: 50px 25px;

    text-align: center;
}


.candidate-empty-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        var(--public-green-50);

    color:
        var(--public-green-700);

    font-size: 17px;
}


.candidate-empty-applications > strong {
    display: block;

    color:
        var(--public-grey-950);

    font-size: 13px;

    font-weight: 750;
}


.candidate-empty-applications > p {
    max-width: 390px;

    margin: 7px auto 17px;

    color:
        var(--public-grey-500);

    font-size: 9.5px;

    line-height: 1.6;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .candidate-kpis {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .candidate-dashboard-grid {
        grid-template-columns:
            1fr;
    }


    .candidate-tools-panel {
        max-width: none;
    }

}


/* ==========================================================
   APPLICATION RESPONSIVE
========================================================== */

@media (max-width: 800px) {

    .candidate-dashboard-hero-inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 22px;
    }


    .application-card {
        grid-template-columns:
            42px
            minmax(0,1fr)
            auto;
    }


    .application-date {
        grid-column:
            2 / 3;
    }


    .application-status-wrap {
        grid-column:
            2 / 3;
    }


    .application-view {
        grid-column: 3;
        grid-row: 1;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .candidate-dashboard-hero {
        padding: 36px 0 38px;
    }


    .candidate-dashboard-welcome h1 {
        font-size: 31px;

        letter-spacing: -.8px;
    }


    .candidate-dashboard-actions {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }


    .candidate-dashboard-actions form {
        width: 100%;
    }


    .candidate-dashboard-actions .btn-dashboard-primary,
    .candidate-dashboard-actions .btn-dashboard-secondary {
        width: 100%;
    }


    .candidate-dashboard-page {
        padding: 28px 0 55px;
    }


    .candidate-kpis {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .candidate-kpi-card {
        min-height: 178px;
    }


    .candidate-panel-head {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }


    .candidate-panel-action {
        width: 100%;

        justify-content: center;

        min-height: 38px;

        border:
            1px solid #d4e7de;

        border-radius: 9px;

        background:
            var(--public-green-50);
    }


    .application-cards {
        padding:
            5px 14px 12px;
    }


    .application-card {
        padding:
            15px 0;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .candidate-dashboard-hero .career-container,
    .candidate-dashboard-page .career-container {
        width:
            min(100% - 22px, 1180px);
    }


    .candidate-dashboard-welcome h1 {
        font-size: 28px;
    }


    .candidate-panel-head {
        padding:
            19px 17px 16px;
    }


    .candidate-links {
        padding:
            8px 13px 12px;
    }


    .candidate-profile-tip {
        margin:
            0 13px 14px;
    }

}

/* ==========================================================
   CANDIDATE EMAIL OTP VERIFICATION
   PREMIUM CORPORATE UI

   Template:
   app/templates/candidate/verify_otp.html

   IMPORTANT:
   Keep this section at the END of public_portal.css
========================================================== */


/* ==========================================================
   1. PAGE
========================================================== */

.candidate-auth-page {
    position: relative;
    overflow: hidden;

    min-height: calc(100vh - 140px);

    display: flex;
    align-items: center;

    padding: 72px 0 82px;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(19, 167, 120, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(10, 138, 100, 0.045),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            #ffffff 45%,
            #edf8f2 100%
        );
}


/* Decorative circle */

.candidate-auth-page::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -240px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(10, 138, 100, 0.055);

    pointer-events: none;
}


.candidate-auth-page::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -190px;
    left: -120px;

    border-radius: 50%;

    border:
        48px solid
        rgba(19, 167, 120, 0.025);

    pointer-events: none;
}


/* ==========================================================
   2. CONTAINER
========================================================== */

.candidate-auth-page .career-container {
    position: relative;
    z-index: 2;

    width: min(100% - 40px, 1080px);

    margin: 0 auto;
}


/* ==========================================================
   3. OTP CARD
========================================================== */

.candidate-auth-page .otp-card {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    padding: 48px 48px 42px;

    overflow: hidden;

    border:
        1px solid
        #dce9e3;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 76%,
            #fbfdfc 100%
        );

    box-shadow:
        0 24px 60px
        rgba(18, 58, 44, 0.10);

    text-align: center;
}


/* Top green accent */

.candidate-auth-page .otp-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--public-green-900, #07543b),
            var(--public-green-600, #13a778)
        );
}


/* subtle card decoration */

.candidate-auth-page .otp-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -95px;
    bottom: -105px;

    border-radius: 50%;

    background:
        rgba(19, 167, 120, 0.035);

    pointer-events: none;
}


/* ==========================================================
   4. SECURITY ICON
========================================================== */

.candidate-auth-page .otp-card .auth-icon {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #cce8db;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #effaf4,
            #dff6ec
        );

    color:
        var(--public-green-800, #087052);

    font-size: 23px;

    box-shadow:
        0 10px 24px
        rgba(10, 138, 100, 0.10);
}


/* Inner glow */

.candidate-auth-page .otp-card .auth-icon::after {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 12px;

    border:
        1px solid
        rgba(10, 138, 100, 0.08);
}


/* ==========================================================
   5. EYEBROW
========================================================== */

.candidate-auth-page .otp-card .eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;

    margin-bottom: 13px;

    padding: 0 11px;

    border:
        1px solid
        #cce8db;

    border-radius: 999px;

    background:
        var(--public-green-50, #effbf6);

    color:
        var(--public-green-700, #0a8a64);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==========================================================
   6. TITLE
========================================================== */

.candidate-auth-page .otp-card h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    color:
        var(--public-green-950, #063d2c);

    font-size: 30px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.8px;
}


/* ==========================================================
   7. DESCRIPTION
========================================================== */

.candidate-auth-page .otp-card > p {
    position: relative;
    z-index: 2;

    max-width: 390px;

    margin: 12px auto 27px;

    color:
        var(--public-grey-600, #697873);

    font-size: 12.5px;

    line-height: 1.7;
}


.candidate-auth-page .otp-card > p strong {
    color:
        var(--public-green-900, #07543b);

    font-weight: 750;

    word-break: break-word;
}


/* ==========================================================
   8. FORM
========================================================== */

.candidate-auth-page .otp-card form {
    position: relative;
    z-index: 2;

    margin-top: 4px;
}


/* ==========================================================
   9. OTP INPUT
========================================================== */

.candidate-auth-page .otp-input {
    width: 100%;
    height: 62px;

    padding: 0 20px;

    border:
        1px solid
        #cfdcd6;

    border-radius: 13px;

    outline: none;

    background:
        #fbfdfc;

    color:
        var(--public-green-950, #063d2c);

    font-family:
        var(--font-primary);

    font-size: 25px;
    font-weight: 750;

    letter-spacing: 10px;

    text-align: center;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease;
}


.candidate-auth-page .otp-input::placeholder {
    color:
        #c3cec9;

    opacity: 1;

    letter-spacing: 10px;
}


/* hover */

.candidate-auth-page .otp-input:hover {
    border-color:
        #b8d8ca;

    background:
        #ffffff;
}


/* focus */

.candidate-auth-page .otp-input:focus {
    border-color:
        var(--public-green-700, #0a8a64);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(10, 138, 100, 0.09);
}


/* ==========================================================
   10. VERIFY BUTTON
========================================================== */

.candidate-auth-page
.otp-card
.btn-career-primary {
    width: 100%;

    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 20px;

    border:
        1px solid
        var(--public-green-800, #087052);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--public-green-800, #087052),
            var(--public-green-600, #13a778)
        );

    color: #ffffff;

    font-size: 12.5px;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(10, 138, 100, 0.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.candidate-auth-page
.otp-card
.btn-career-primary:hover {
    color: #ffffff;

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            var(--public-green-900, #07543b),
            var(--public-green-700, #0a8a64)
        );

    box-shadow:
        0 13px 28px
        rgba(10, 138, 100, 0.23);
}


.candidate-auth-page
.otp-card
.btn-career-primary:active {
    transform:
        translateY(0);
}


.candidate-auth-page
.otp-card
.btn-career-primary:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(10, 138, 100, 0.14),
        0 10px 25px
        rgba(10, 138, 100, 0.20);
}


/* Bootstrap mt-3 */

.candidate-auth-page
.otp-card
.mt-3 {
    margin-top:
        15px !important;
}


/* ==========================================================
   11. ERROR ALERT
========================================================== */

.candidate-auth-page
.otp-card
.career-alert {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin:
        -5px 0 19px;

    padding:
        11px 13px;

    border-radius:
        10px;

    text-align:
        left;

    font-size:
        11px;

    line-height:
        1.55;
}


.candidate-auth-page
.otp-card
.career-alert.danger {
    border:
        1px solid
        #efcaca;

    background:
        #fff6f6;

    color:
        #973737;
}


.candidate-auth-page
.otp-card
.career-alert.danger i {
    margin-top:
        2px;

    color:
        #c14949;
}


/* ==========================================================
   12. RESEND LINK
========================================================== */

.candidate-auth-page .otp-resend {
    position: relative;
    z-index: 2;

    width: fit-content;

    margin:
        22px auto 0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        var(--public-grey-600, #697873);

    font-size:
        10.5px;

    font-weight:
        650;

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.candidate-auth-page .otp-resend i {
    color:
        var(--public-green-700, #0a8a64);

    font-size:
        10px;

    transition:
        transform .25s ease;
}


.candidate-auth-page .otp-resend:hover {
    color:
        var(--public-green-800, #087052);
}


.candidate-auth-page .otp-resend:hover i {
    transform:
        rotate(-30deg);
}


/* ==========================================================
   13. HONEYPOT
========================================================== */

.candidate-auth-page
.otp-card
.hp-field {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


/* ==========================================================
   14. OPTIONAL OTP STATUS / SECURITY FOOTER

   Ready for future use without changing current template.
========================================================== */

.candidate-auth-page .otp-security {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top:
        19px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--public-grey-100, #f3f6f5);

    color:
        var(--public-grey-500, #84918c);

    font-size:
        9.5px;
}


.candidate-auth-page .otp-security i {
    color:
        var(--public-green-700, #0a8a64);
}


/* ==========================================================
   15. RESPONSIVE - TABLET
========================================================== */

@media (max-width: 768px) {

    .candidate-auth-page {
        min-height:
            auto;

        padding:
            55px 0 65px;
    }


    .candidate-auth-page
    .career-container {
        width:
            min(100% - 30px, 1080px);
    }


    .candidate-auth-page
    .otp-card {
        max-width:
            500px;

        padding:
            42px 36px 37px;
    }

}


/* ==========================================================
   16. RESPONSIVE - MOBILE
========================================================== */

@media (max-width: 520px) {

    .candidate-auth-page {
        padding:
            35px 0 50px;
    }


    .candidate-auth-page
    .career-container {
        width:
            min(100% - 24px, 1080px);
    }


    .candidate-auth-page
    .otp-card {
        padding:
            35px 21px 31px;

        border-radius:
            18px;
    }


    .candidate-auth-page
    .otp-card
    .auth-icon {
        width:
            56px;

        height:
            56px;

        margin-bottom:
            17px;

        border-radius:
            16px;

        font-size:
            20px;
    }


    .candidate-auth-page
    .otp-card h1 {
        font-size:
            26px;
    }


    .candidate-auth-page
    .otp-card > p {
        margin-bottom:
            23px;

        font-size:
            11.5px;
    }


    .candidate-auth-page
    .otp-input {
        height:
            58px;

        padding-left:
            15px;

        padding-right:
            15px;

        font-size:
            22px;

        letter-spacing:
            8px;
    }


    .candidate-auth-page
    .otp-input::placeholder {
        letter-spacing:
            8px;
    }


    .candidate-auth-page
    .otp-card
    .btn-career-primary {
        min-height:
            49px;
    }

}


/* ==========================================================
   17. EXTRA SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

    .candidate-auth-page
    .otp-card {
        padding:
            31px 17px 28px;
    }


    .candidate-auth-page
    .otp-card h1 {
        font-size:
            24px;
    }


    .candidate-auth-page
    .otp-input {
        font-size:
            20px;

        letter-spacing:
            6px;
    }


    .candidate-auth-page
    .otp-input::placeholder {
        letter-spacing:
            6px;
    }

}


/* ==========================================================
   18. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .candidate-auth-page
    .otp-card *,

    .candidate-auth-page
    .otp-card *::before,

    .candidate-auth-page
    .otp-card *::after {
        transition-duration:
            .01ms !important;
    }

}

/* ==========================================================
   PREMIUM ACTION HERO
   Homepage Hero Upgrade
========================================================== */

.corp-action-hero {
    position: relative;
    overflow: hidden;
    padding: 62px 0 86px;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(55, 160, 110, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(23, 92, 64, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7fbf8 0%,
            #edf7f1 48%,
            #f8faf9 100%
        );
}


/* Decorative background */

.corp-action-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    left: -210px;
    top: -190px;

    border-radius: 50%;

    border: 70px solid rgba(28, 111, 76, 0.035);

    pointer-events: none;
}


.corp-action-hero::after {
    content: "";
    position: absolute;

    width: 240px;
    height: 240px;

    right: 4%;
    bottom: -155px;

    border-radius: 50%;

    background:
        rgba(39, 132, 91, 0.055);

    pointer-events: none;
}


/* ==========================================================
   HERO GRID
========================================================== */

.corp-action-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(380px, 0.88fr)
        minmax(500px, 1.12fr);

    gap: 76px;

    align-items: center;
}


/* ==========================================================
   LEFT ACTION PANEL
========================================================== */

.corp-action-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 18px;

    max-width: 520px;
}


/* ==========================================================
   ACTION CARDS
========================================================== */

.corp-action-card {
    position: relative;

    min-height: 126px;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        48px;

    align-items: center;

    gap: 20px;

    padding: 25px 26px;

    border-radius: 22px;

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* SEARCH JOBS */

.corp-action-card-search {
    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.10);

    background:
        linear-gradient(
            135deg,
            #0d5a3b 0%,
            #15744e 55%,
            #1f8a60 100%
        );

    box-shadow:
        0 18px 42px rgba(10, 78, 51, 0.22);
}


.corp-action-card-search::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -60px;
    top: -72px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.07);
}


/* UPLOAD RESUME */

.corp-action-card-resume {
    color: #153d2e;

    background:
        rgba(255,255,255,0.94);

    border:
        1px solid rgba(24, 109, 75, 0.13);

    box-shadow:
        0 14px 36px rgba(20, 72, 51, 0.10);
}


/* Hover */

.corp-action-card:hover {
    transform: translateY(-5px);
}


.corp-action-card-search:hover {
    color: #ffffff;

    box-shadow:
        0 24px 52px rgba(10, 78, 51, 0.28);
}


.corp-action-card-resume:hover {
    color: #153d2e;

    border-color:
        rgba(25, 126, 84, 0.30);

    box-shadow:
        0 22px 48px rgba(20, 72, 51, 0.15);
}


/* ==========================================================
   ACTION ICON
========================================================== */

.corp-action-icon {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    font-size: 25px;
}


.corp-action-card-search .corp-action-icon {
    color: #ffffff;

    background:
        rgba(255,255,255,0.13);

    border:
        1px solid rgba(255,255,255,0.15);
}


.corp-action-card-resume .corp-action-icon {
    color: #14734d;

    background:
        linear-gradient(
            135deg,
            #e8f6ee,
            #dff2e8
        );

    border:
        1px solid #d5ebdf;
}


/* ==========================================================
   ACTION CONTENT
========================================================== */

.corp-action-card-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.corp-action-kicker {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.45px;

    text-transform: uppercase;
}


.corp-action-card-search
.corp-action-kicker {
    color:
        rgba(255,255,255,0.72);
}


.corp-action-card-resume
.corp-action-kicker {
    color: #6d8379;
}


.corp-action-card-content strong {
    font-size: 27px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.5px;
}


/* ==========================================================
   ARROW
========================================================== */

.corp-action-arrow {
    position: relative;
    z-index: 2;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.corp-action-card-search
.corp-action-arrow {
    color: #ffffff;

    background:
        rgba(255,255,255,0.13);
}


.corp-action-card-resume
.corp-action-arrow {
    color: #14734d;

    background: #edf7f1;
}


.corp-action-card:hover
.corp-action-arrow {
    transform: translateX(4px);
}


/* ==========================================================
   TRUST DECORATION
========================================================== */

.corp-action-trust {
    display: flex;

    align-items: center;

    gap: 16px;

    padding:
        8px 4px 0;
}


.corp-action-trust-icons {
    display: flex;
    align-items: center;
}


.corp-action-trust-icons span {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-left: -7px;

    border-radius: 50%;

    color: #176f4c;

    background: #ffffff;

    border: 3px solid #eef7f2;

    box-shadow:
        0 5px 15px rgba(21, 91, 62, 0.09);

    font-size: 12px;
}


.corp-action-trust-icons span:first-child {
    margin-left: 0;
}


.corp-action-trust-line {
    height: 1px;

    flex: 1;

    max-width: 145px;

    background:
        linear-gradient(
            90deg,
            rgba(25, 113, 77, 0.25),
            transparent
        );
}


/* ==========================================================
   RIGHT VISUAL ENHANCEMENT
========================================================== */

.corp-action-hero
.corp-image-frame {
    position: relative;

    border-radius: 30px;

    padding: 10px;

    background:
        rgba(255,255,255,0.72);

    border:
        1px solid rgba(255,255,255,0.90);

    box-shadow:
        0 28px 65px rgba(17, 76, 53, 0.14);

    backdrop-filter: blur(12px);
}


.corp-action-hero
.corp-image-frame img {
    width: 100%;

    display: block;

    border-radius: 23px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .corp-action-hero-grid {
        grid-template-columns:
            minmax(330px, 0.9fr)
            minmax(420px, 1.1fr);

        gap: 42px;
    }

}


@media (max-width: 860px) {

    .corp-action-hero {
        padding:
            42px 0 72px;
    }

    .corp-action-hero-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .corp-action-panel {
        max-width: 100%;
    }

    .corp-hero-visual {
        max-width: 680px;

        width: 100%;

        margin: 0 auto;
    }

}


@media (max-width: 576px) {

    .corp-action-hero {
        padding:
            28px 0 58px;
    }

    .corp-action-card {
        min-height: 105px;

        grid-template-columns:
            56px
            minmax(0, 1fr)
            38px;

        gap: 14px;

        padding: 20px 17px;

        border-radius: 18px;
    }

    .corp-action-icon {
        width: 54px;
        height: 54px;

        border-radius: 15px;

        font-size: 20px;
    }

    .corp-action-card-content strong {
        font-size: 21px;
    }

    .corp-action-kicker {
        font-size: 8px;

        letter-spacing: 1px;
    }

    .corp-action-arrow {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .corp-action-trust {
        display: none;
    }

    .corp-action-hero
    .corp-image-frame {
        border-radius: 22px;

        padding: 7px;
    }

    .corp-action-hero
    .corp-image-frame img {
        border-radius: 17px;
    }

}

/* ============================================================
   COMPANY LOGO
   ============================================================ */

.public-brand-logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    margin: 0;
    padding: 0;

    text-decoration: none;
}


/* Main logo */

.public-company-logo {
    display: block;

    width: auto;
    height: 48px;

    max-width: 285px;

    object-fit: contain;

    object-position: left center;
}


/* ============================================================
   NAVBAR ALIGNMENT
   ============================================================ */

.navbar-inner {
    display: flex;
    align-items: center;

    min-height: 76px;

    gap: 26px;
}


/* Keep menu in available middle space */

.public-nav-links {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-left: auto;
}


.public-nav-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1199.98px) {

    .public-company-logo {
        height: 42px;
        max-width: 245px;
    }

    .navbar-inner {
        gap: 18px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 991.98px) {

    .public-company-logo {
        height: 40px;
        max-width: 220px;
    }

    .public-nav-links,
    .public-nav-actions {
        display: none;
    }

    .navbar-inner {
        min-height: 70px;
    }

}


@media (max-width: 575.98px) {

    .public-company-logo {
        height: 34px;
        max-width: 190px;
    }

}

/* ============================================================
   CANDIDATE APPLY PAGE
   Professional Corporate Theme
   ============================================================ */


/* ============================================================
   PAGE HEADER
   ============================================================ */

.career-page-head {
    padding: 34px 0 28px;

    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #f7fcf9 45%,
            #edf8f2 100%
        );

    border-bottom: 1px solid #dfece5;
}


.career-container {
    max-width: 1320px;
}


.career-page-head .eyebrow,
.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #0f7b51;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .12em;

    line-height: 1;

    text-transform: uppercase;
}


.career-page-head h1 {
    margin: 9px 0 0;

    color: #17231e;

    font-size: clamp(28px, 3vw, 38px);

    font-weight: 820;

    line-height: 1.15;

    letter-spacing: -.035em;
}


.career-page-head p {
    margin: 7px 0 0;

    color: #6f7d76;

    font-size: 11px;

    line-height: 1.6;
}


/* ============================================================
   PAGE SECTION
   ============================================================ */

.career-section {
    padding: 34px 0 72px;

    background: #f7f9f8;
}


/* ============================================================
   MAIN PROFILE PANEL
   ============================================================ */

.candidate-panel {
    padding: 24px;

    border: 1px solid #e1e9e5;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 26px rgba(17, 66, 48, .055);
}


/* ============================================================
   PANEL HEADER
   ============================================================ */

.panel-head {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

    padding-bottom: 18px;

    border-bottom: 1px solid #edf1ef;
}


.panel-head h2 {
    margin: 6px 0 0;

    color: #17231e;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.02em;
}


.panel-head > a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 0 11px;

    border: 1px solid #cfe2d8;

    border-radius: 8px;

    background: #f8fcfa;

    color: #0f7b51;

    font-size: 9px;

    font-weight: 750;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.panel-head > a:hover {
    border-color: #a8cdbb;

    background: #eaf7f0;

    color: #07543b;
}


/* ============================================================
   CANDIDATE PROFILE GRID
   ============================================================ */

.apply-data-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.apply-data-grid > div {
    min-width: 0;

    padding: 13px 14px;

    border: 1px solid #e2eae6;

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfc 100%
        );
}


.apply-data-grid > div:hover {
    border-color: #c9dfd4;

    background: #f8fcfa;
}


.apply-data-grid span {
    display: block;

    margin-bottom: 5px;

    color: #849087;

    font-size: 8px;

    font-weight: 650;

    letter-spacing: .025em;

    text-transform: uppercase;
}


.apply-data-grid strong {
    display: block;

    overflow: hidden;

    color: #263a31;

    font-size: 10px;

    font-weight: 730;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   FORM
   ============================================================ */

.candidate-panel form {
    margin-top: 24px !important;

    padding-top: 22px;

    border-top: 1px solid #edf1ef;
}


.candidate-panel form > label {
    display: block;

    margin-bottom: 7px;

    color: #40534a;

    font-size: 9px;

    font-weight: 750;
}


.candidate-panel form > label small {
    margin-left: 3px;

    color: #909c96;

    font-size: 8px;

    font-weight: 500;
}


.candidate-panel textarea.form-control {
    min-height: 145px;

    padding: 12px 13px;

    resize: vertical;

    border: 1px solid #dbe4df;

    border-radius: 10px;

    background: #ffffff;

    color: #283a32;

    font-size: 10px;

    line-height: 1.65;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.candidate-panel textarea.form-control::placeholder {
    color: #9ba6a0;
}


.candidate-panel textarea.form-control:focus {
    border-color: #75b99a;

    outline: 0;

    box-shadow:
        0 0 0 3px rgba(15, 123, 81, .08);
}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.profile-form-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    margin-top: 18px;
}


/* Primary */

.btn-career-primary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 40px;

    padding: 0 16px;

    border: 1px solid #0f7b51;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #0f7b51,
            #07543b
        );

    color: #ffffff;

    font-size: 10px;

    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(15, 123, 81, .15);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.btn-career-primary:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #0b6745,
            #064631
        );

    color: #ffffff;

    box-shadow:
        0 9px 22px rgba(15, 123, 81, .18);
}


.btn-career-primary:focus-visible {
    outline: 2px solid rgba(15, 123, 81, .35);

    outline-offset: 2px;
}


/* Secondary */

.btn-career-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 15px;

    border: 1px solid #cedbd4;

    border-radius: 9px;

    background: #ffffff;

    color: #46584f;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.btn-career-secondary:hover {
    border-color: #a9cdbb;

    background: #f2faf6;

    color: #07543b;
}


/* ============================================================
   RIGHT SIDEBAR CARD
   ============================================================ */

.aside-card {
    padding: 22px;

    border: 1px solid #e0e9e4;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(17, 66, 48, .05);
}


.application-summary {
    position: sticky;

    top: 96px;
}


.application-summary h3 {
    margin: 8px 0 0;

    color: #17231e;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -.02em;
}


.application-summary > p {
    margin: 6px 0 0;

    color: #6f7d76;

    font-size: 9px;

    font-weight: 600;
}


/* ============================================================
   SUMMARY LIST
   ============================================================ */

.summary-list {
    margin-top: 18px;

    overflow: hidden;

    border: 1px solid #e5ece8;

    border-radius: 11px;

    background: #fbfdfc;
}


.summary-list > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 12px 13px;

    border-bottom: 1px solid #e8eeeb;
}


.summary-list > div:last-child {
    border-bottom: 0;
}


.summary-list span {
    color: #849087;

    font-size: 8px;

    font-weight: 650;
}


.summary-list strong {
    color: #2a4035;

    font-size: 9px;

    font-weight: 750;

    text-align: right;
}


/* ============================================================
   SECURITY INFO
   ============================================================ */

.apply-security {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 17px;

    padding: 12px;

    border: 1px solid #d7eadf;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f4fbf7,
            #ebf7f0
        );

    color: #536a5f;
}


.apply-security i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #0f7b51;

    font-size: 10px;
}


.apply-security span {
    font-size: 8px;

    line-height: 1.55;
}


/* ============================================================
   HONEYPOT
   ============================================================ */

.hp-field {
    position: absolute !important;

    left: -10000px !important;

    top: auto !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1199.98px) {

    .application-summary {
        position: static;
    }

}


@media (max-width: 991.98px) {

    .career-section {
        padding:
            28px 0 58px;
    }


    .apply-data-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    .career-page-head {
        padding:
            26px 0 22px;
    }


    .career-page-head h1 {
        font-size: 26px;
    }


    .candidate-panel,
    .aside-card {
        padding: 18px;

        border-radius: 14px;
    }


    .panel-head {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .panel-head > a {
        align-self: flex-start;
    }


    .apply-data-grid {
        grid-template-columns: 1fr;
    }


    .apply-data-grid strong {
        white-space: normal;
    }


    .profile-form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .btn-career-primary,
    .btn-career-secondary {
        width: 100%;
    }


    .summary-list > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }


    .summary-list strong {
        text-align: left;
    }

}