*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    scroll-behavior: smooth;
}

#about,
#recruitment-process {
    scroll-margin-top: 95px;
}

html,body{
    overflow-x:hidden;
    width:100%;
}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
}

header{
    background:#003366;
    color:white;
    text-align:center;
    padding:25px;
}

header h1{
    margin:0;
    font-size:42px;
}

header p{
    font-size:18px;
}

nav{
    background:#00509d;
    padding:15px;
    text-align:center;
}

nav a{
    color:white;
    text-decoration:none;
    margin:20px;
    font-size:18px;
    font-weight:bold;
}

nav{
    background:#0056a3;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:18px;
    position:sticky;
    top:0;
    z-index:1000;
}
nav ul{
    display:flex;
    justify-content:center;
    align-items:center;
    list-style:none;
    gap:25px;
    margin:0;
    padding:0;
}

nav ul li{
    list-style:none;
}

nav ul li a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    transition:.3s;
}

nav ul li a:hover{
    color:#ffd700;
}
nav{
    background:#0056a3;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:18px;
    position:sticky;
    top:0;
    z-index:1000;
}

/* ADD THIS */

nav ul{
    display:flex;
    list-style:none;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:40px;
    margin:0;
    padding:0;
}

nav ul li{
    list-style:none;
}

nav ul li a{
    color:white;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
}
nav a{
    color:white;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    transition:.3s;
}

nav a:hover{
    color:#FFD700;
}

.hero{

height:700px;

background:url("../images/banner.jpg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.overlay{

background:rgba(0,0,0,.55);

width:100%;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.hero h2{
    font-size:60px;
    color:#fff;
    text-align:center;
    text-shadow:2px 2px 8px rgba(0,0,0,.6);
    max-width:900px;
    margin:auto;
    line-height:1.2;
}

.hero{
    height:650px;
    background:url("../images/banner.JPG") center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;
}

button{

background:#ff9900;

padding:15px 40px;

font-size:20px;

margin:10px;

border:none;

border-radius:8px;

color:white;

cursor:pointer;

}

.btn2{

background:#0066cc;

}

button:hover{

transform:scale(1.05);

transition:.3s;

}

.hero h2{
    font-size:42px;
    color:#003366;
}

.hero p{
    font-size:20px;
    color:#444;
}

button{
    background:#ff9900;
    color:white;
    border:none;
    padding:15px 35px;
    font-size:20px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#ff7700;
}
.about,
.vision,
.mission{
    background:white;
    width:80%;
    margin:40px auto;
    padding:40px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,.1);
}

.about h2,
.vision h2,
.mission h2{
    color:#003366;
    text-align:center;
}

.about p,
.vision p,
.mission p{
    font-size:18px;
    line-height:1.8;
    color:#444;
}
.hero h2{
    color:white !important;
    font-size:60px;
    text-shadow:3px 3px 10px black;
}

.hero p{
    color:white !important;
    font-size:28px;
    text-shadow:2px 2px 8px black;
}
@media(max-width:992px){

.hero{
    height:500px;
}

.hero h2{
    font-size:42px;
}

nav ul{
    flex-wrap:wrap;
}

}

@media(max-width:768px){

.hero{
    height:420px;
}

.hero h2{
    font-size:32px;
}

nav ul li{
    margin:10px;
}

}
/* ==========================
   VACANCIES PAGE
========================== */

.vacancies-page{
    max-width:1300px;
    margin:60px auto;
    padding:20px;
}

.vacancies-page h1{
    text-align:center;
    font-size:42px;
    color:#003366;
    margin-bottom:50px;
}

/* Grid Layout */
.job-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:30px;
}

/* Job Card */
.job-card{
    background:#fff;
    border-radius:15px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.3s;
    border-top:6px solid #0056a3;

    max-width:800px;
    margin:0 auto;
}

.job-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.18);
}

.job-card h2{
    color:#003366;
    margin-bottom:20px;
    font-size:28px;
}

.job-card p{
    margin:12px 0;
    font-size:17px;
    color:#444;
    line-height:1.6;
}

.job-card strong{
    color:#003366;
}

.apply-btn{
    display:inline-block;
    margin-top:25px;
    background:#ff9900;
    color:#fff;
    padding:14px 35px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.apply-btn:hover{
    background:#e67e00;
}
/* ==========================
   REGISTER PAGE
========================== */

.auth-page{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#f3f6fa;
}

.auth-card{

    width:500px;

    background:white;

    padding:40px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.auth-card h1{

    color:#003366;

    margin-bottom:15px;

}

.auth-card p{

    color:#666;

    margin-bottom:20px;

}

.auth-card input{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}

.auth-card button{

    width:100%;

}
/* ==========================
   CANDIDATE PROFILE PAGE
========================== */

.profile-page{
    min-height:100vh;
    background:#eef3f8;
    padding:50px 20px;
}

.profile-card{
    max-width:850px;
    margin:0 auto;
    background:#fff;
    padding:40px;
    border-radius:16px;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.profile-card h1{
    text-align:center;
    color:#003366;
    font-size:36px;
    margin-bottom:10px;
}

.profile-note{
    text-align:center;
    color:#666;
    line-height:1.6;
    margin-bottom:35px;
}

.profile-card .form-group{
    margin-bottom:22px;
}

.profile-card label{
    display:block;
    color:#003366;
    font-weight:bold;
    margin-bottom:8px;
}

.profile-card input,
.profile-card select,
.profile-card textarea{
    width:100%;
    padding:13px 14px;
    border:1px solid #cbd5df;
    border-radius:8px;
    font-size:16px;
}

.profile-card textarea{
    min-height:110px;
    resize:vertical;
}

.profile-card input[type="file"]{
    background:#f8fafc;
}

.profile-card small{
    display:block;
    margin-top:6px;
    color:#666;
}

.profile-actions{
    text-align:center;
    margin-top:25px;
}

.profile-actions a{
    color:#0056a3;
    font-weight:bold;
    text-decoration:none;
}
/* Candidate profile checkbox */

.checkbox-group{
    display:flex;
    align-items:center;
    gap:10px;
}

.profile-card .checkbox-group input[type="checkbox"]{
    width:auto;
    margin:0;
}

.profile-card .checkbox-group label{
    margin:0;
    cursor:pointer;
}
/* ==========================
   PROFILE SECTIONS
========================== */

.profile-section{
    margin-bottom:35px;
    padding-bottom:25px;
    border-bottom:1px solid #dce3ea;
}

.profile-section h2{
    color:#003366;
    font-size:23px;
    margin-bottom:22px;
}

.two-column-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.language-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.language-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.language-table th,
.language-table td{
    border:1px solid #d4dde6;
    padding:14px;
    text-align:left;
}

.language-table th{
    background:#0056a3;
    color:#fff;
}

.language-table td:first-child{
    width:35%;
    color:#003366;
    font-weight:bold;
}

.language-table select{
    width:100%;
    padding:11px;
    border:1px solid #cbd5df;
    border-radius:7px;
}

.passport-upload-section{
    border-bottom:none;
}

@media(max-width:768px){

    .two-column-grid{
        grid-template-columns:1fr;
        gap:0;
    }

}
/* ==========================
   PROFILE TABLES
========================== */

.profile-section{
    margin-bottom:36px;
    padding-bottom:28px;
    border-bottom:1px solid #dce3ea;
}

.profile-section h2{
    color:#003366;
    font-size:24px;
    margin-bottom:22px;
}

.two-column-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.education-table-wrapper,
.experience-table-wrapper,
.language-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.education-table,
.experience-table,
.language-table{
    width:100%;
    min-width:700px;
    border-collapse:collapse;
    background:#fff;
}

.education-table th,
.education-table td,
.experience-table th,
.experience-table td,
.language-table th,
.language-table td{
    border:1px solid #d4dde6;
    padding:12px;
    text-align:left;
    vertical-align:middle;
}

.education-table th,
.experience-table th,
.language-table th{
    background:#0056a3;
    color:#fff;
}

.education-table td:first-child,
.language-table td:first-child{
    color:#003366;
    font-weight:bold;
}

.education-table input,
.experience-table input,
.language-table select{
    width:100%;
    padding:10px;
    border:1px solid #cbd5df;
    border-radius:6px;
    font-size:15px;
}

.checkbox-group{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.profile-card .checkbox-group input[type="checkbox"]{
    width:auto;
    margin:0;
}

.profile-card .checkbox-group label{
    margin:0;
    cursor:pointer;
}

@media(max-width:768px){

    .two-column-grid{
        grid-template-columns:1fr;
        gap:0;
    }

}
/* ==========================
   PREMIUM CANDIDATE DASHBOARD
========================== */

.portal-body{
    margin:0;
    background:#f4f7fb;
    color:#17213b;
    font-family:Arial, Helvetica, sans-serif;
}

.portal-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    min-height:100vh;
}

.portal-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:26px 18px;
    background:
        linear-gradient(
            180deg,
            #062d59 0%,
            #00366c 55%,
            #002850 100%
        );
    color:#fff;
    overflow-y:auto;
}

.portal-brand{
    display:flex;
    align-items:center;
    gap:13px;
    padding:5px 7px 25px;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.portal-logo{
    width:55px;
    height:55px;
    object-fit:contain;
    background:#fff;
    padding:5px;
    border-radius:15px;
}

.portal-brand h2{
    margin:0;
    font-size:20px;
}

.portal-brand p{
    margin:5px 0 0;
    color:#bdd0e5;
    font-size:13px;
}

.portal-menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:9px;
    padding:24px 0;
    background:transparent;
    position:static;
}

.portal-menu-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    margin:0;
    padding:14px 15px;
    border-radius:10px;
    color:#dce9f7;
    text-decoration:none;
    font-size:15px;
    font-weight:bold;
    transition:.25s;
}

.portal-menu-link:hover,
.portal-menu-link.active{
    color:#fff;
    background:
        linear-gradient(
            90deg,
            #0877ff,
            #2d8cff
        );
    box-shadow:0 8px 18px rgba(0,102,255,.28);
}

.menu-icon{
    width:23px;
    text-align:center;
    font-size:21px;
}

.menu-badge{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    border-radius:50%;
    background:#ff3d45;
    color:#fff;
    font-size:11px;
}

.portal-logout{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    margin-top:5px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    background:
        linear-gradient(
            90deg,
            rgba(190,40,55,.75),
            rgba(210,55,70,.65)
        );
}

.portal-security{
    margin-top:auto;
    padding:20px;
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            rgba(21,100,190,.7),
            rgba(7,55,110,.8)
        );
    box-shadow:0 12px 25px rgba(0,0,0,.16);
}

.security-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:13px;
    border-radius:50%;
    background:#2c8aff;
    font-size:24px;
    font-weight:bold;
}

.portal-security h3{
    margin:0 0 9px;
    font-size:16px;
}

.portal-security p{
    margin:0;
    color:#d9e8f8;
    line-height:1.6;
    font-size:13px;
}

.portal-main{
    min-width:0;
    padding:0 34px 28px;
}

.portal-topbar{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    background:#fff;
    margin:0 -34px 0;
    padding:0 34px;
    border-bottom:1px solid #e4eaf1;
}

.mobile-menu-button{
    display:none;
    margin-right:auto;
    background:transparent;
    color:#17213b;
    border:0;
    padding:0;
    font-size:27px;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:25px;
}

.notification-button{
    position:relative;
    font-size:25px;
}

.notification-button span{
    position:absolute;
    top:-8px;
    right:-11px;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ff3d45;
    color:#fff;
    font-size:10px;
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:11px;
}

.topbar-user img,
.topbar-avatar{
    width:47px;
    height:47px;
    border-radius:50%;
    object-fit:cover;
}

.topbar-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            #7046ef,
            #9549ef
        );
    color:#fff;
    font-size:20px;
    font-weight:bold;
}

.topbar-user strong{
    display:block;
    font-size:14px;
}

.topbar-user small{
    display:block;
    margin-top:3px;
    color:#7b8798;
}

.welcome-banner{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:210px;
    margin:30px 0 22px;
    padding:35px 42px;
    border-radius:20px;
    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #eaf5ff 60%,
            #d8ecff 100%
        );
    box-shadow:0 10px 30px rgba(31,78,121,.1);
}

.welcome-content{
    position:relative;
    z-index:3;
}

.welcome-content span{
    color:#526178;
    font-size:17px;
}

.welcome-content h1{
    margin:8px 0 10px;
    color:#14203c;
    font-size:38px;
}

.welcome-content p{
    margin:0 0 22px;
    color:#627087;
    font-size:16px;
}

.welcome-button{
    display:inline-block;
    padding:11px 20px;
    border-radius:9px;
    background:#0877ff;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

.welcome-decoration{
    position:relative;
    z-index:2;
    width:250px;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.welcome-decoration img{
    position:relative;
    z-index:3;
    width:155px;
    height:155px;
    border-radius:50%;
    object-fit:cover;
    border:7px solid rgba(255,255,255,.8);
}

.welcome-avatar{
    position:relative;
    z-index:3;
    width:135px;
    height:135px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #6f44e9
        );
    color:#fff;
    font-size:58px;
    font-weight:bold;
    border:7px solid rgba(255,255,255,.8);
}

.decoration-circle{
    position:absolute;
    border-radius:50%;
}

.circle-one{
    width:180px;
    height:180px;
    background:rgba(63,144,255,.18);
}

.circle-two{
    right:-15px;
    bottom:5px;
    width:80px;
    height:80px;
    background:rgba(255,190,45,.55);
}

.portal-stat-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:30px;
}

.portal-stat-card{
    display:flex;
    gap:18px;
    min-width:0;
    padding:24px;
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 28px rgba(25,55,90,.09);
}

.stat-icon{
    flex:0 0 auto;
    width:57px;
    height:57px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:26px;
}

.purple-icon{
    color:#6d37e9;
    background:#eee7ff;
}

.green-icon{
    color:#06a84d;
    background:#dcf8e7;
}

.orange-icon{
    color:#f49400;
    background:#fff0cf;
}

.stat-content{
    min-width:0;
    flex:1;
}

.stat-content > span{
    color:#67758a;
    font-size:14px;
}

.stat-content strong{
    display:block;
    margin:7px 0;
    color:#17213b;
    font-size:34px;
}

.green-text{
    color:#06a84d !important;
}

.orange-text{
    color:#f08a00 !important;
}

.stat-content p{
    margin:10px 0 0;
    color:#718096;
    font-size:13px;
    line-height:1.5;
}

.stat-content a{
    color:#703ef0;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

.modern-progress{
    height:9px;
    margin:9px 0 13px;
    overflow:hidden;
    border-radius:99px;
    background:#e7ebf1;
}

.modern-progress-value{
    height:100%;
    border-radius:99px;
    background:
        linear-gradient(
            90deg,
            #7b3ff2,
            #a34ef1
        );
}

.portal-section{
    margin-bottom:27px;
}

.section-heading h2{
    margin:0 0 17px;
    font-size:25px;
}

.quick-action-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.quick-action-card{
    position:relative;
    min-height:190px;
    padding:22px;
    border-radius:16px;
    border:1px solid #e1e7ef;
    background:#fff;
    color:inherit;
    text-decoration:none;
    box-shadow:0 7px 22px rgba(20,50,85,.07);
    transition:.25s;
}

.quick-action-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 32px rgba(20,50,85,.13);
}

.quick-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    border-radius:50%;
    font-size:24px;
}

.blue-quick-icon{
    color:#0877ff;
    background:#e5f1ff;
}

.green-quick-icon{
    color:#06a84d;
    background:#dcf8e7;
}

.purple-quick-icon{
    color:#753de8;
    background:#eee7ff;
}

.orange-quick-icon{
    color:#f08a00;
    background:#fff0da;
}

.quick-action-card h3{
    margin:0 0 9px;
    color:#17213b;
    font-size:17px;
}

.quick-action-card p{
    margin:0;
    color:#68768a;
    font-size:13px;
    line-height:1.6;
}

.quick-action-card > span{
    position:absolute;
    right:20px;
    bottom:18px;
    color:#0877ff;
    font-size:23px;
}

.dashboard-bottom-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);
    gap:20px;
}

.portal-panel{
    overflow:hidden;
    border-radius:17px;
    background:#fff;
    box-shadow:0 8px 25px rgba(20,50,85,.08);
}

.panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:21px 24px;
    border-bottom:1px solid #e8edf3;
}

.panel-heading h2{
    margin:0;
    font-size:19px;
}

.panel-heading a{
    color:#0877ff;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
}

.latest-job-row{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto auto;
    align-items:center;
    gap:14px;
    padding:16px 23px;
    border-bottom:1px solid #edf1f5;
}

.latest-job-row:last-child{
    border-bottom:0;
}

.job-initial{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #7345e8
        );
    font-weight:bold;
}

.job-main-info h3{
    margin:0 0 5px;
    color:#17213b;
    font-size:15px;
}

.job-main-info p{
    margin:0;
    color:#758297;
    font-size:12px;
}

.job-salary{
    color:#4e5b70;
    font-size:12px;
    font-weight:bold;
}

.job-apply-link{
    padding:8px 13px;
    border-radius:7px;
    background:#e6f1ff;
    color:#0877ff;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
}

.empty-dashboard-message{
    padding:35px;
    color:#738096;
    text-align:center;
}

.information-panel{
    padding:24px;
}

.information-title{
    display:flex;
    align-items:center;
    gap:11px;
}

.information-icon{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #0877ff;
    border-radius:50%;
    color:#0877ff;
    font-weight:bold;
}

.information-title h2{
    margin:0;
    color:#075bc3;
    font-size:19px;
}

.information-panel ul{
    padding-left:21px;
    margin:20px 0;
}

.information-panel li{
    margin-bottom:11px;
    color:#536177;
    font-size:13px;
    line-height:1.5;
}

.information-button{
    display:block;
    padding:12px 14px;
    border-radius:8px;
    background:#e8f2ff;
    color:#0877ff;
    text-decoration:none;
    text-align:center;
    font-size:13px;
    font-weight:bold;
}

.portal-footer{
    padding:28px 0 5px;
    color:#758297;
    text-align:center;
    font-size:12px;
}

@media(max-width:1150px){

    .portal-stat-grid{
        grid-template-columns:1fr;
    }

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

    .dashboard-bottom-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:850px){

    .portal-layout{
        grid-template-columns:1fr;
    }

    .portal-sidebar{
        position:fixed;
        left:-290px;
        z-index:2000;
        width:270px;
        box-sizing:border-box;
        transition:.3s;
    }

    .portal-sidebar.sidebar-open{
        left:0;
    }

    .mobile-menu-button{
        display:block;
    }

    .portal-topbar{
        justify-content:space-between;
    }

    .welcome-decoration{
        display:none;
    }

}

@media(max-width:650px){

    .portal-main{
        padding:0 16px 20px;
    }

    .portal-topbar{
        margin:0 -16px;
        padding:0 16px;
    }

    .topbar-user div:last-child{
        display:none;
    }

    .welcome-banner{
        padding:28px 23px;
    }

    .welcome-content h1{
        font-size:29px;
    }

    .quick-action-grid{
        grid-template-columns:1fr;
    }

    .latest-job-row{
        grid-template-columns:40px minmax(0,1fr) auto;
    }

    .job-salary{
        display:none;
    }

}
/* ==========================
   MY APPLICATIONS PAGE
========================== */

.applications-body{
    margin:0;
    background:#f3f6fb;
    color:#17213b;
}

.applications-page{
    max-width:1180px;
    margin:0 auto;
    padding:45px 22px;
}

.applications-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-bottom:30px;
}

.applications-header h1{
    margin:0 0 8px;
    color:#003366;
    font-size:38px;
}

.applications-header p{
    margin:0;
    color:#69788c;
}

.applications-back-button{
    display:inline-block;
    padding:12px 20px;
    border-radius:9px;
    background:#0056a3;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

.applications-messages{
    margin-bottom:22px;
}

.application-message{
    padding:14px 18px;
    border-radius:9px;
    background:#e2f7ea;
    color:#08793e;
    font-weight:bold;
}

.applications-list{
    display:grid;
    gap:24px;
}

.application-tracker-card{
    padding:28px;
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,50,85,.09);
}

.application-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
    margin-bottom:25px;
}

.application-reference{
    display:block;
    color:#8090a3;
    font-size:13px;
    margin-bottom:7px;
}

.application-card-top h2{
    margin:0 0 7px;
    color:#17213b;
    font-size:25px;
}

.application-card-top p{
    margin:0;
    color:#6d7b8e;
}

.application-stage-badge{
    padding:9px 14px;
    border-radius:99px;
    background:#e7f1ff;
    color:#0877ff;
    font-size:13px;
    font-weight:bold;
    text-align:center;
}

.application-progress-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:9px;
    color:#65748a;
}

.application-progress-header strong{
    color:#703ef0;
}

.application-progress-bar{
    height:11px;
    overflow:hidden;
    border-radius:99px;
    background:#e6ebf2;
}

.application-progress-value{
    height:100%;
    border-radius:99px;
    background:linear-gradient(
        90deg,
        #0877ff,
        #7544eb
    );
}

.application-details-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:25px;
}

.application-details-grid div{
    padding:16px;
    border-radius:10px;
    background:#f7f9fc;
}

.application-details-grid span{
    display:block;
    margin-bottom:7px;
    color:#7a8798;
    font-size:12px;
}

.application-details-grid strong{
    color:#27344b;
    font-size:14px;
}

.application-admin-note{
    margin-top:22px;
    padding:18px;
    border-left:5px solid #f0a000;
    border-radius:9px;
    background:#fff8e6;
}

.application-admin-note strong{
    color:#8b5c00;
}

.application-admin-note p{
    margin:8px 0 0;
    color:#6e5a2e;
    line-height:1.6;
}

.application-action-box{
    margin-top:22px;
    padding:20px;
    border-radius:11px;
    background:#edf5ff;
}

.application-action-box h3{
    margin:0 0 9px;
    color:#0056a3;
}

.application-action-box p{
    color:#52647a;
    line-height:1.6;
}

.application-action-box a{
    display:inline-block;
    margin-top:7px;
    padding:10px 15px;
    border-radius:8px;
    background:#0877ff;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

.confirmed-box{
    background:#eaf9ef;
}

.confirmed-box h3{
    color:#08793e;
}

.no-applications-card{
    padding:55px 30px;
    border-radius:17px;
    background:#fff;
    text-align:center;
    box-shadow:0 10px 30px rgba(20,50,85,.09);
}

.no-applications-card h2{
    margin-top:0;
    color:#003366;
}

.no-applications-card p{
    color:#68778b;
    line-height:1.7;
}

.no-applications-card a{
    display:inline-block;
    margin-top:12px;
    padding:12px 20px;
    border-radius:9px;
    background:#0877ff;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

@media(max-width:700px){

    .applications-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .application-card-top{
        flex-direction:column;
    }

    .application-details-grid{
        grid-template-columns:1fr;
    }

}
/* ==========================
   PREMIUM APPLICATION TRACKER
========================== */

.tracker-body{
    margin:0;
    background:
        linear-gradient(
            135deg,
            #f5f8fc 0%,
            #eef4fb 100%
        );
    color:#17213b;
    font-family:Arial, Helvetica, sans-serif;
}

.tracker-page{
    width:min(1380px, calc(100% - 40px));
    margin:0 auto;
    padding:42px 0 60px;
}

.tracker-page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:30px;
}

.tracker-eyebrow{
    display:inline-block;
    margin-bottom:8px;
    color:#0877ff;
    font-size:13px;
    font-weight:bold;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.tracker-page-header h1{
    margin:0 0 9px;
    color:#092f58;
    font-size:40px;
}

.tracker-page-header p{
    max-width:680px;
    margin:0;
    color:#65758a;
    line-height:1.7;
}

.tracker-header-actions{
    display:flex;
    gap:12px;
}

.tracker-primary-button,
.tracker-secondary-button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:12px 18px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
}

.tracker-primary-button{
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #0059cc
        );
    color:#fff;
    box-shadow:0 9px 20px rgba(8,119,255,.22);
}

.tracker-secondary-button{
    border:1px solid #cfd9e5;
    background:#fff;
    color:#24415f;
}

.tracker-messages{
    margin-bottom:22px;
}

.tracker-message{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px 18px;
    border:1px solid #b9e9ca;
    border-radius:12px;
    background:#eaf9ef;
    color:#08783d;
    font-weight:bold;
}

.tracker-message span{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0caf58;
    color:#fff;
}

.premium-application-card{
    overflow:hidden;
    margin-bottom:35px;
    border:1px solid #dfe7f0;
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 55px rgba(20,50,85,.11);
}

.application-hero{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;
    align-items:center;
    gap:20px;
    padding:29px 32px;
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #eef6ff 65%,
            #e2f0ff 100%
        );
    border-bottom:1px solid #dfe8f2;
}

.application-job-icon{
    width:67px;
    height:67px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #7145e9
        );
    color:#fff;
    font-size:29px;
    font-weight:bold;
    box-shadow:0 10px 24px rgba(8,119,255,.24);
}

.australia-label{
    display:inline-block;
    margin-bottom:7px;
    color:#0877ff;
    font-size:12px;
    font-weight:bold;
}

.application-job-summary h2{
    margin:0 0 10px;
    color:#11213d;
    font-size:27px;
}

.application-job-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    color:#607087;
    font-size:13px;
}

.application-current-status{
    min-width:210px;
    padding:18px 20px;
    border:1px solid #d9e5f1;
    border-radius:14px;
    background:rgba(255,255,255,.86);
}

.application-current-status > span{
    display:block;
    margin-bottom:7px;
    color:#728097;
    font-size:12px;
}

.application-current-status strong{
    display:block;
    color:#0877ff;
    font-size:16px;
}

.current-status-indicator{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:11px;
    padding:6px 10px;
    border-radius:99px;
    background:#e6f1ff;
    color:#0877ff;
    font-size:11px;
    font-weight:bold;
}

.stage-progress-card{
    margin:25px 30px;
    padding:21px 23px;
    border:1px solid #e0e7f0;
    border-radius:15px;
    background:#f9fbfe;
}

.stage-progress-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.stage-progress-heading span{
    display:block;
    margin-bottom:5px;
    color:#738096;
    font-size:12px;
}

.stage-progress-heading strong{
    color:#22344f;
    font-size:15px;
}

.stage-progress-percentage{
    color:#7145e9;
    font-size:25px;
    font-weight:bold;
}

.stage-progress-track{
    height:11px;
    margin:15px 0 11px;
    overflow:hidden;
    border-radius:99px;
    background:#e1e7ef;
}

.stage-progress-fill{
    height:100%;
    border-radius:99px;
    background:
        linear-gradient(
            90deg,
            #0877ff,
            #7544eb,
            #a84de9
        );
    transition:width .6s ease;
}

.stage-progress-card > p{
    margin:0;
    color:#65758b;
    font-size:13px;
}

.application-content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(320px,.75fr);
    gap:25px;
    padding:0 30px 32px;
}

.recruitment-journey-panel,
.current-action-panel,
.labor-force-message,
.support-panel{
    border:1px solid #e0e7f0;
    border-radius:17px;
    background:#fff;
}

.recruitment-journey-panel{
    padding:25px;
}

.panel-title{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:24px;
}

.panel-title > div:first-child{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#e7f1ff;
    color:#0877ff;
    font-size:21px;
    font-weight:bold;
}

.panel-title h3{
    margin:0 0 5px;
    color:#18304d;
    font-size:19px;
}

.panel-title p{
    margin:0;
    color:#778599;
    font-size:13px;
}

.stage-list{
    position:relative;
}

.stage-item{
    position:relative;
    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    gap:14px;
    padding-bottom:21px;
}

.stage-item:last-child{
    padding-bottom:0;
}

.stage-item:not(:last-child)::before{
    content:"";
    position:absolute;
    left:21px;
    top:42px;
    bottom:0;
    width:3px;
    border-radius:99px;
    background:#e2e8f0;
}

.stage-item.stage-completed:not(:last-child)::before{
    background:#17b866;
}

.stage-item.stage-current:not(:last-child)::before{
    background:
        linear-gradient(
            #0877ff 0 40%,
            #e2e8f0 40%
        );
}

.stage-marker{
    position:relative;
    z-index:2;
}

.stage-marker span{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:3px solid #dbe3ed;
    background:#fff;
    color:#9ba8b8;
    font-size:17px;
    font-weight:bold;
}

.stage-completed .stage-marker span{
    border-color:#17b866;
    background:#17b866;
    color:#fff;
    box-shadow:0 6px 16px rgba(23,184,102,.2);
}

.stage-current .stage-marker span{
    border-color:#0877ff;
    background:#0877ff;
    color:#fff;
    box-shadow:
        0 0 0 6px rgba(8,119,255,.11),
        0 7px 18px rgba(8,119,255,.22);
}

.stage-copy{
    padding:3px 0 0;
}

.stage-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}

.stage-title-row h4{
    margin:0;
    color:#253750;
    font-size:15px;
}

.stage-pending .stage-title-row h4{
    color:#8794a6;
}

.stage-copy p{
    margin:7px 0 0;
    color:#778599;
    font-size:12px;
    line-height:1.5;
}

.stage-status-label{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:99px;
    font-size:10px;
    font-weight:bold;
}

.stage-status-label.completed{
    background:#dcf8e7;
    color:#078743;
}

.stage-status-label.current{
    background:#e4efff;
    color:#0877ff;
}

.stage-status-label.pending{
    background:#eef1f5;
    color:#8794a6;
}

.application-action-column{
    display:grid;
    align-content:start;
    gap:18px;
}

.current-action-panel{
    overflow:hidden;
}

.action-panel-heading{
    display:flex;
    align-items:center;
    gap:13px;
    padding:20px;
    background:
        linear-gradient(
            135deg,
            #0a72ed,
            #7044e8
        );
    color:#fff;
}

.action-symbol{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    font-size:23px;
    font-weight:bold;
}

.action-panel-heading span{
    display:block;
    margin-bottom:4px;
    color:#d9e8ff;
    font-size:11px;
}

.action-panel-heading h3{
    margin:0;
    font-size:17px;
}

.no-action-state,
.success-action-state,
.required-action-state,
.appointment-confirmation{
    padding:24px;
    text-align:center;
}

.action-state-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
    border-radius:50%;
    background:#e6f1ff;
    color:#0877ff;
    font-size:28px;
    font-weight:bold;
}

.success-action-state .action-state-icon{
    background:#dcf8e7;
    color:#09a653;
}

.no-action-state h4,
.success-action-state h4,
.required-action-state h4{
    margin:0 0 9px;
    color:#203550;
    font-size:18px;
}

.no-action-state p,
.success-action-state p,
.required-action-state p{
    margin:0;
    color:#6d7c90;
    font-size:13px;
    line-height:1.65;
}

.required-label,
.confirmed-label{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 10px;
    border-radius:99px;
    font-size:11px;
    font-weight:bold;
}

.required-label{
    background:#fff0d8;
    color:#cb7400;
}

.confirmed-label{
    background:#dcf8e7;
    color:#078743;
}

.action-primary-button{
    display:block;
    margin-top:18px;
    padding:12px 15px;
    border-radius:9px;
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #0061d8
        );
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    box-shadow:0 8px 18px rgba(8,119,255,.2);
}

.confirmation-detail{
    margin-bottom:12px;
    padding:13px;
    border-radius:10px;
    background:#f6f9fc;
    text-align:left;
}

.confirmation-detail span{
    display:block;
    margin-bottom:5px;
    color:#7b899b;
    font-size:11px;
}

.confirmation-detail strong{
    color:#263a54;
    font-size:13px;
}

.medical-instructions{
    margin-top:15px;
    padding:14px;
    border-left:4px solid #f2a000;
    border-radius:8px;
    background:#fff8e7;
    text-align:left;
}

.medical-instructions strong{
    color:#926300;
}

.medical-instructions p{
    margin:7px 0 0;
    color:#6e603a;
    font-size:12px;
    line-height:1.55;
}

.labor-force-message{
    padding:19px;
    background:#fff9e9;
    border-color:#f1dfa2;
}

.message-heading{
    display:flex;
    align-items:center;
    gap:9px;
    color:#8f6400;
    font-weight:bold;
    font-size:13px;
}

.message-heading span{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f0a000;
    color:#fff;
}

.labor-force-message p{
    margin:12px 0 0;
    color:#6d603e;
    font-size:13px;
    line-height:1.6;
}

.support-panel{
    padding:22px;
    text-align:center;
    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #eef5ff
        );
}

.support-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 13px;
    border-radius:50%;
    background:#e2efff;
    color:#0877ff;
    font-size:22px;
    font-weight:bold;
}

.support-panel h3{
    margin:0 0 8px;
    color:#203550;
}

.support-panel p{
    margin:0;
    color:#6d7c90;
    font-size:12px;
    line-height:1.6;
}

.support-panel a{
    display:inline-block;
    margin-top:14px;
    color:#0877ff;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

.premium-empty-applications{
    padding:70px 30px;
    border:1px solid #dfe7f0;
    border-radius:22px;
    background:#fff;
    text-align:center;
    box-shadow:0 18px 55px rgba(20,50,85,.09);
}

.empty-applications-icon{
    width:85px;
    height:85px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    border-radius:24px;
    background:
        linear-gradient(
            135deg,
            #e6f1ff,
            #eee7ff
        );
    color:#0877ff;
    font-size:37px;
}

.premium-empty-applications > span{
    color:#0877ff;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.premium-empty-applications h2{
    margin:12px 0 10px;
    color:#17304e;
    font-size:29px;
}

.premium-empty-applications p{
    max-width:560px;
    margin:0 auto;
    color:#6d7c90;
    line-height:1.7;
}

.premium-empty-applications a{
    display:inline-block;
    margin-top:23px;
    padding:13px 21px;
    border-radius:10px;
    background:#0877ff;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

@media(max-width:1050px){

    .application-content-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:780px){

    .tracker-page-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .tracker-header-actions{
        width:100%;
    }

    .tracker-primary-button,
    .tracker-secondary-button{
        flex:1;
    }

    .application-hero{
        grid-template-columns:60px minmax(0,1fr);
    }

    .application-current-status{
        grid-column:1 / -1;
        width:auto;
    }

}

@media(max-width:560px){

    .tracker-page{
        width:min(100% - 24px, 1380px);
        padding-top:25px;
    }

    .tracker-page-header h1{
        font-size:31px;
    }

    .tracker-header-actions{
        flex-direction:column;
    }

    .application-hero{
        padding:22px 18px;
    }

    .application-job-icon{
        width:53px;
        height:53px;
        border-radius:14px;
        font-size:23px;
    }

    .application-job-summary h2{
        font-size:21px;
    }

    .stage-progress-card{
        margin:18px;
    }

    .application-content-grid{
        padding:0 18px 20px;
    }

    .recruitment-journey-panel{
        padding:19px;
    }

    .stage-title-row{
        flex-direction:column;
        gap:7px;
    }

}
/* Fix My Applications header text visibility */

.tracker-page-header{
    background:linear-gradient(135deg, #003b75, #075da8);
    padding:28px 32px;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0, 51, 102, .18);
}

.tracker-page-header .tracker-eyebrow{
    color:#66b5ff;
}

.tracker-page-header h1{
    color:#ffffff !important;
}

.tracker-page-header p{
    color:#d7eaff !important;
}

.tracker-page-header .tracker-secondary-button{
    background:#ffffff;
    color:#003b75;
    border:none;
}

.tracker-page-header .tracker-primary-button{
    background:#0877ff;
    color:#ffffff;
}
.country-label{

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

    padding:6px 14px;

    background:#eef6ff;

    color:#0056b3;

    font-size:12px;

    font-weight:700;

    border-radius:30px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;

}
/* ==========================
   PREMIUM VACANCIES PAGE
========================== */

.vacancy-portal-body{
    margin:0;
    background:
        linear-gradient(
            135deg,
            #f5f8fc 0%,
            #eef4fb 100%
        );
    color:#17213b;
    font-family:Arial, Helvetica, sans-serif;
}

.vacancy-portal-page{
    width:min(1280px, calc(100% - 40px));
    margin:0 auto;
    padding:40px 0 60px;
}

.vacancy-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:34px 38px;
    border-radius:22px;
    background:
        linear-gradient(
            120deg,
            #003b75 0%,
            #075da8 55%,
            #0877ff 100%
        );
    color:#fff;
    box-shadow:0 16px 40px rgba(0,59,117,.18);
}

.vacancy-hero-label{
    display:inline-block;
    margin-bottom:10px;
    color:#9ed3ff;
    font-size:12px;
    font-weight:bold;
    letter-spacing:.09em;
}

.vacancy-hero h1{
    margin:0 0 10px;
    font-size:38px;
    color:#fff;
}

.vacancy-hero p{
    margin:0;
    max-width:650px;
    color:#dceeff;
    line-height:1.7;
}

.vacancy-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    margin-top:20px;
    font-size:13px;
    font-weight:bold;
}

.vacancy-dashboard-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:10px;
    background:#fff;
    color:#0056a3;
    text-decoration:none;
    font-weight:bold;
    white-space:nowrap;
}

.vacancy-search-panel{
    margin-top:25px;
    padding:25px;
    border:1px solid #e0e7f0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(20,50,85,.08);
}

.vacancy-search-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
}

.vacancy-search-heading h2{
    margin:0 0 6px;
    color:#18304d;
    font-size:22px;
}

.vacancy-search-heading p{
    margin:0;
    color:#748196;
    font-size:13px;
}

.vacancy-count{
    min-width:90px;
    padding:12px 16px;
    border-radius:13px;
    background:#eef6ff;
    text-align:center;
}

.vacancy-count strong{
    display:block;
    color:#0877ff;
    font-size:24px;
}

.vacancy-count span{
    display:block;
    margin-top:2px;
    color:#63748a;
    font-size:11px;
}

.vacancy-search-box{
    position:relative;
}

.vacancy-search-box input{
    width:100%;
    box-sizing:border-box;
    padding:14px 16px 14px 45px;
    border:1px solid #d8e1ec;
    border-radius:11px;
    background:#f8fbff;
    color:#1e3048;
    font-size:14px;
    outline:none;
    transition:.2s;
}

.vacancy-search-box input:focus{
    border-color:#0877ff;
    box-shadow:0 0 0 3px rgba(8,119,255,.10);
    background:#fff;
}

.vacancy-search-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#7a889b;
    font-size:18px;
}

.premium-vacancy-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px;
    margin-top:25px;
}

.premium-vacancy-card{
    overflow:hidden;
    border:1px solid #dfe7f0;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 34px rgba(20,50,85,.09);
    transition:.25s;
}

.premium-vacancy-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 44px rgba(20,50,85,.14);
}

.vacancy-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:18px 22px;
    border-bottom:1px solid #e8eef4;
    background:
        linear-gradient(
            110deg,
            #f8fbff 0%,
            #edf6ff 100%
        );
}

.vacancy-country{
    display:flex;
    align-items:center;
    gap:11px;
}

.vacancy-country-flag{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    font-size:25px;
}

.vacancy-country span{
    display:block;
    margin-bottom:3px;
    color:#8290a2;
    font-size:9px;
    font-weight:bold;
    letter-spacing:.08em;
}

.vacancy-country strong{
    color:#17385b;
    font-size:13px;
}

.vacancy-free-badge{
    padding:7px 10px;
    border-radius:99px;
    background:#def8e8;
    color:#098746;
    font-size:10px;
    font-weight:bold;
}

.vacancy-title-area{
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px 22px 16px;
}

.vacancy-job-letter{
    flex:0 0 auto;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:
        linear-gradient(
            135deg,
            #0877ff,
            #7046e8
        );
    color:#fff;
    font-size:23px;
    font-weight:bold;
    box-shadow:0 8px 18px rgba(8,119,255,.22);
}

.vacancy-title-area h2{
    margin:0 0 6px;
    color:#152943;
    font-size:22px;
}

.vacancy-title-area p{
    margin:0;
    color:#6e7c90;
    font-size:12px;
}

.vacancy-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:0 22px 18px;
}

.vacancy-info-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid #e5ebf2;
    border-radius:11px;
    background:#f8fafc;
}

.vacancy-info-icon{
    flex:0 0 auto;
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf3ff;
    font-size:16px;
}

.vacancy-info-item small{
    display:block;
    margin-bottom:4px;
    color:#8290a2;
    font-size:10px;
}

.vacancy-info-item strong{
    color:#2a3c55;
    font-size:12px;
}

.vacancy-description{
    padding:0 22px 18px;
}

.vacancy-description h3{
    margin:0 0 8px;
    color:#18304d;
    font-size:14px;
}

.vacancy-description p{
    margin:0;
    color:#69788d;
    font-size:12px;
    line-height:1.7;
}

.vacancy-card-trust{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    padding:0 22px 20px;
}

.vacancy-card-trust span{
    padding:6px 9px;
    border-radius:99px;
    background:#eef6ff;
    color:#0877ff;
    font-size:10px;
    font-weight:bold;
}

.vacancy-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:17px 22px;
    border-top:1px solid #e8eef4;
    background:#fbfcfe;
}

.vacancy-posted small{
    display:block;
    margin-bottom:3px;
    color:#8794a6;
    font-size:9px;
}

.vacancy-posted strong{
    color:#4b5c73;
    font-size:11px;
}

.premium-apply-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 17px;
    border-radius:9px;
    background:
        linear-gradient(
            135deg,
            #ff9800,
            #ff7a00
        );
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    box-shadow:0 8px 18px rgba(255,128,0,.24);
    transition:.2s;
}

.premium-apply-button:hover{
    transform:translateY(-2px);
    box-shadow:0 11px 24px rgba(255,128,0,.30);
}

.premium-apply-button span{
    font-size:17px;
}

.vacancy-empty-state,
.vacancy-search-empty{
    grid-column:1 / -1;
    padding:55px 30px;
    border:1px solid #dfe7f0;
    border-radius:18px;
    background:#fff;
    text-align:center;
    box-shadow:0 10px 28px rgba(20,50,85,.08);
}

.vacancy-empty-icon,
.vacancy-search-empty > div{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
    border-radius:20px;
    background:#eef6ff;
    font-size:28px;
}

.vacancy-empty-state h2,
.vacancy-search-empty h3{
    margin:0 0 8px;
    color:#18304d;
}

.vacancy-empty-state p,
.vacancy-search-empty p{
    margin:0;
    color:#6f7d91;
    line-height:1.6;
}

.vacancy-information-banner{
    display:flex;
    align-items:flex-start;
    gap:17px;
    margin-top:28px;
    padding:24px 26px;
    border:1px solid #cce9d7;
    border-radius:17px;
    background:
        linear-gradient(
            135deg,
            #f0fbf5,
            #e7f8ee
        );
}

.vacancy-information-icon{
    flex:0 0 auto;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#14ad5c;
    color:#fff;
    font-size:22px;
    font-weight:bold;
}

.vacancy-information-banner h2{
    margin:0 0 8px;
    color:#0a6f3b;
    font-size:18px;
}

.vacancy-information-banner p{
    margin:0;
    color:#4f6d5d;
    font-size:13px;
    line-height:1.7;
}

.vacancy-portal-footer{
    padding:30px 0 0;
    color:#7a8798;
    text-align:center;
    font-size:11px;
}

@media(max-width:900px){

    .premium-vacancy-grid{
        grid-template-columns:1fr;
    }

    .vacancy-hero{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:600px){

    .vacancy-portal-page{
        width:min(100% - 24px,1280px);
        padding-top:22px;
    }

    .vacancy-hero{
        padding:26px 20px;
    }

    .vacancy-hero h1{
        font-size:30px;
    }

    .vacancy-trust-row{
        flex-direction:column;
        gap:8px;
    }

    .vacancy-dashboard-button{
        width:100%;
        box-sizing:border-box;
    }

    .vacancy-search-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .vacancy-info-grid{
        grid-template-columns:1fr;
    }

    .vacancy-card-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .premium-apply-button{
        justify-content:center;
    }

}
/* =========================================
   VACANCIES PAGE - FINAL LAYOUT IMPROVEMENTS
========================================= */


/* CENTER MAIN VACANCY HEADING */

.vacancy-hero{
    position:relative;
    justify-content:center;
    text-align:center;
}

.vacancy-hero-content{
    width:100%;
    text-align:center;
}

.vacancy-hero-label{
    text-align:center;
}

.vacancy-hero h1{
    text-align:center;
}

.vacancy-hero p{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.vacancy-trust-row{
    justify-content:center;
}


/* KEEP BACK TO DASHBOARD BUTTON ON RIGHT */

.vacancy-dashboard-button{
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
}


/* VACANCY GRID */

.premium-vacancy-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    width:100%;
}


/* IF THERE IS ONLY ONE VACANCY,
   LET IT USE THE FULL AVAILABLE WIDTH */

.premium-vacancy-grid .premium-vacancy-card:only-child{
    grid-column:1 / -1;
    width:100%;
    box-sizing:border-box;
}


/* MAKE SINGLE / LARGE CARD CONTENT MORE BALANCED */

.premium-vacancy-grid .premium-vacancy-card:only-child
.vacancy-info-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}


/* DESCRIPTION READABILITY */

.premium-vacancy-grid .premium-vacancy-card:only-child
.vacancy-description p{
    max-width:900px;
}


/* TABLET */

@media(max-width:900px){

    .premium-vacancy-grid{
        grid-template-columns:1fr;
    }

    .premium-vacancy-grid .premium-vacancy-card:only-child
    .vacancy-info-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .vacancy-dashboard-button{
        position:static;
        transform:none;
        margin-top:20px;
    }

    .vacancy-hero{
        flex-direction:column;
        align-items:center;
    }

}


/* MOBILE */

@media(max-width:600px){

    .premium-vacancy-grid .premium-vacancy-card:only-child
    .vacancy-info-grid{
        grid-template-columns:1fr;
    }

    .vacancy-hero h1{
        font-size:28px;
    }

}
/* ======================================================
   VACANCY DETAIL SECTION - ALIGNMENT FIX
====================================================== */


/* ENGLISH LANGUAGE REQUIREMENT */

.vacancy-language-notice{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;

    margin:0 22px 20px !important;
    padding:16px 18px !important;

    border:1px solid #cfe2ff !important;
    border-radius:12px !important;

    background:#f4f8ff !important;

    box-sizing:border-box !important;
}

.vacancy-language-icon{
    flex:0 0 32px !important;

    width:32px !important;
    height:32px !important;

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

    border-radius:50% !important;

    background:#0877ff !important;
    color:#ffffff !important;

    font-size:14px !important;
    font-weight:700 !important;
}

.vacancy-language-notice > div:last-child{
    flex:1 !important;
    min-width:0 !important;
}

.vacancy-language-notice > div:last-child > strong{
    display:block !important;

    margin:0 0 6px !important;

    color:#143f70 !important;

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

.vacancy-language-notice p{
    margin:0 !important;

    color:#5b6f85 !important;

    font-size:12px !important;
    line-height:1.65 !important;
}


/* JOB DESCRIPTION */

.vacancy-description{
    margin:0 !important;
    padding:0 22px 20px !important;

    box-sizing:border-box !important;
}

.vacancy-description h3{
    margin:0 0 9px !important;

    color:#18304d !important;

    font-size:14px !important;
    font-weight:700 !important;
}

.vacancy-description p{
    margin:0 !important;

    color:#63758a !important;

    font-size:12px !important;
    line-height:1.75 !important;

    max-width:100% !important;
}


/* APPLICATION ELIGIBILITY */

.vacancy-eligibility-box{
    display:block !important;

    margin:0 22px 20px !important;
    padding:16px 18px !important;

    border:1px solid #f1dca8 !important;
    border-left:4px solid #f0a000 !important;

    border-radius:10px !important;

    background:#fff9eb !important;

    box-sizing:border-box !important;
}

.vacancy-eligibility-box > strong{
    display:block !important;

    margin:0 0 7px !important;

    color:#8a6100 !important;

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

.vacancy-eligibility-box p{
    margin:0 !important;

    color:#6e6248 !important;

    font-size:12px !important;
    line-height:1.65 !important;
}


/* BADGES BELOW ELIGIBILITY */

.vacancy-card-trust{
    display:flex !important;
    flex-wrap:wrap !important;

    align-items:center !important;

    gap:8px !important;

    padding:0 22px 20px !important;
}

.vacancy-card-trust span{
    display:inline-flex !important;
    align-items:center !important;

    padding:6px 10px !important;

    border-radius:20px !important;

    background:#eef6ff !important;
    color:#0877ff !important;

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


/* KEEP ALL SECTIONS SAME WIDTH */

.premium-vacancy-card
.vacancy-language-notice,
.premium-vacancy-card
.vacancy-description,
.premium-vacancy-card
.vacancy-eligibility-box,
.premium-vacancy-card
.vacancy-card-trust{
    width:auto !important;
}


/* MOBILE */

@media(max-width:600px){

    .vacancy-language-notice,
    .vacancy-eligibility-box{
        margin-left:16px !important;
        margin-right:16px !important;
    }

    .vacancy-description,
    .vacancy-card-trust{
        padding-left:16px !important;
        padding-right:16px !important;
    }

}
/* ======================================================
   RECRUITMENT PAYMENT / SCAM WARNING
====================================================== */

.recruitment-fraud-warning{
    display:flex;
    align-items:flex-start;
    gap:18px;

    margin:22px 30px;
    padding:20px 22px;

    border:2px solid #e53935;
    border-left:7px solid #c62828;
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #fff5f5,
            #ffeaea
        );

    box-shadow:
        0 10px 28px rgba(198,40,40,.12);
}

.fraud-warning-icon{
    flex:0 0 48px;

    width:48px;
    height:48px;

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

    border-radius:50%;

    background:#c62828;
    color:#ffffff;

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

.fraud-warning-content{
    flex:1;
}

.fraud-warning-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin-bottom:10px;
}

.fraud-warning-title-row h3{
    margin:0;

    color:#a91919;

    font-size:18px;
    font-weight:800;
    letter-spacing:.2px;
}

.fraud-warning-badge{
    flex:0 0 auto;

    padding:6px 11px;

    border-radius:30px;

    background:#c62828;
    color:#ffffff;

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

.recruitment-fraud-warning p{
    margin:6px 0;

    color:#5b3232;

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

.recruitment-fraud-warning p strong{
    color:#b71c1c;
}

.fraud-warning-final{
    margin-top:10px !important;

    font-weight:700;

    color:#a91919 !important;
}

@media(max-width:650px){

    .recruitment-fraud-warning{
        margin:18px;
        padding:18px;
    }

    .fraud-warning-title-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .fraud-warning-title-row h3{
        font-size:16px;
    }

}

/* ======================================================
   JOB CONFIRMATION - FINAL DASHBOARD STYLE
====================================================== */

.job-confirmation-card {
    margin-top: 0;
    padding: 18px;
    border: 1px solid #d8e4f2;
    border-radius: 0 0 14px 14px;
    background: #ffffff;
    box-shadow: none;
}


/* TOP */

.job-confirmation-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
}

.job-confirmation-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    border-radius: 50%;

    background: #0877ff;
    color: #ffffff;

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

.job-confirmation-label {
    display: inline-block;
    margin-bottom: 4px;

    color: #0877ff;

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

.job-confirmation-card h4 {
    margin: 0 0 6px;

    color: #092f58;

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

.job-confirmation-card p {
    margin: 0;

    color: #68798e;

    font-size: 12px;
    line-height: 1.6;
}


/* ======================================================
   JOB DETAILS
====================================================== */

.job-confirmation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin: 15px 0;
}

.job-confirmation-detail {
    min-height: 58px;

    padding: 11px 12px;

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

    background: #ffffff;
}
.job-confirmation-detail.job-responsibilities {
    grid-column: 1 / -1;
    width: auto;
}
.job-confirmation-detail span {
    display: block;
    margin-bottom: 5px;

    color: #70839b;

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

    text-transform: uppercase;
    letter-spacing: .4px;
}

.job-confirmation-detail strong {
    display: block;

    color: #092f58;

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

    line-height: 1.4;
}


/* ======================================================
   MESSAGE FROM LABOR FORCE AB
====================================================== */

.job-confirmation-message {
    margin-top: 13px;
    padding: 13px 14px;

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

    background: #eef6ff;
}

.job-confirmation-message strong {
    display: block;
    margin-bottom: 6px;

    color: #0862c7;

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

.job-confirmation-message p {
    color: #405d7d;
}


/* ======================================================
   ACCEPTANCE NOTICE
====================================================== */

.job-acceptance-notice {
    margin-top: 13px;
    padding: 13px 14px;

    border: 1px solid #f3dfb7;
    border-left: 4px solid #f0a000;
    border-radius: 9px;

    background: #fff9ed;
}

.job-acceptance-notice strong {
    display: block;

    color: #835b00;

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

.job-acceptance-notice p {
    margin: 6px 0 0;

    color: #665933;

    font-size: 11px;
    line-height: 1.55;
}


/* ======================================================
   ACCEPTANCE FORM
====================================================== */

.job-acceptance-form {
    margin-top: 14px;
}

.job-acceptance-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 12px;

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

    background: #ffffff;

    cursor: pointer;
}

.job-acceptance-checkbox:hover {
    border-color: #a9c9ee;
    background: #fbfdff;
}

.job-acceptance-checkbox input {
    width: 16px;
    height: 16px;

    margin-top: 1px;

    flex: 0 0 auto;
    cursor: pointer;
}

.job-acceptance-checkbox span {
    color: #40566f;

    font-size: 11px;
    line-height: 1.5;
}


/* ======================================================
   ACTION BUTTONS
====================================================== */

.job-confirmation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 13px;
}

.job-accept-button,
.job-question-button {
    min-height: 42px;

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

    padding: 0 15px;

    border-radius: 8px;

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

    text-decoration: none;

    transition: .2s ease;
}

.job-accept-button {
    border: none;

    background: linear-gradient(
        135deg,
        #16b850,
        #07963d
    );

    color: #ffffff;

    cursor: pointer;

    box-shadow: 0 5px 13px rgba(11, 164, 71, .18);
}

.job-accept-button:hover {
    transform: translateY(-1px);

    box-shadow: 0 7px 17px rgba(11, 164, 71, .23);
}

.job-question-button {
    border: 1px solid #cad7e6;

    background: #ffffff;

    color: #153d75;
}

.job-question-button:hover {
    border-color: #9fb7d0;

    background: #f7faff;
}


/* MOBILE */

@media (max-width: 700px) {

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

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

/* ======================================================
   JOB CONFIRMATION ACCEPTED
====================================================== */

.job-accepted-card {
    padding: 20px;
    border: 1px solid #bfe8d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f2fff7, #ffffff);
    box-shadow: 0 8px 24px rgba(25, 130, 78, 0.08);
}

.job-accepted-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ca55b, #078345);
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.job-accepted-label {
    display: inline-block;
    margin-bottom: 5px;
    color: #0a8a49;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.job-accepted-card h4 {
    margin: 0 0 7px;
    color: #17304f;
    font-size: 18px;
}

.job-accepted-card > p {
    margin: 0;
    color: #68798e;
    font-size: 12px;
    line-height: 1.65;
}


/* ACCEPTANCE RECORD */

.job-accepted-date,
.job-acceptance-record,
.job-process-lock-notice {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dcebe2;
    border-radius: 9px;
    background: #ffffff;
}

.job-accepted-date span {
    display: block;
    margin-bottom: 3px;
    color: #7a899b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.job-accepted-date strong,
.job-acceptance-record strong,
.job-process-lock-notice strong {
    display: block;
    color: #17643d;
    font-size: 12px;
}

.job-acceptance-record p,
.job-process-lock-notice p {
    margin: 5px 0 0;
    color: #64786c;
    font-size: 11px;
    line-height: 1.55;
}


/* MOBILE */

@media (max-width: 650px) {

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

    .job-confirmation-actions {
        flex-direction: column;
    }

    .job-accept-button,
    .job-question-button {
        width: 100%;
        box-sizing: border-box;
    }

}
/* ======================================================
   PASSPORT COPY UPLOAD
====================================================== */

.passport-copy-section {
    margin-top: 18px;
}

.passport-uploaded-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    padding: 17px 18px;
    border: 1px solid #bfe8d0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f2fff7, #ffffff);
}

.passport-upload-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.passport-check-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0aa45a;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.passport-upload-status strong {
    display: block;
    color: #17643d;
    font-size: 14px;
}

.passport-upload-status p {
    margin: 4px 0 0;
    color: #68798e;
    font-size: 12px;
}

.passport-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 8px;
    background: #e8f2ff;
    color: #0877ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

.passport-view-button:hover {
    background: #dbeaff;
}

.passport-replace-area,
.passport-new-upload {
    margin-top: 14px;
    padding: 15px;
    border: 1px dashed #c9d6e5;
    border-radius: 10px;
    background: #fafcff;
}

.passport-replace-area strong {
    display: block;
    margin-bottom: 5px;
    color: #314a64;
    font-size: 13px;
}

.passport-replace-area p,
.passport-new-upload p {
    margin: 0 0 10px;
    color: #718095;
    font-size: 12px;
    line-height: 1.5;
}

.passport-file-input {
    width: 100%;
}

.required-star {
    color: #d93025;
    font-weight: bold;
}

@media (max-width: 650px) {

    .passport-uploaded-card {
        flex-direction: column;
        align-items: flex-start;
    }

}
.passport-upload-button {
    margin-top: 12px;
    min-height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: #0877ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.passport-upload-button:hover {
    background: #0065dc;
    transform: translateY(-1px);
}

.passport-replace-area input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 10px;
}
/* ======================================================
   PROFILE ALERT MESSAGES
====================================================== */

.profile-message {
    margin: 15px 0;
    padding: 15px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.profile-message.error {
    background: #fff1f1;
    border: 1px solid #f1b5b5;
    border-left: 5px solid #d93025;
    color: #a32020;
}

.profile-message.success {
    background: #effcf4;
    border: 1px solid #b7e4c7;
    border-left: 5px solid #168447;
    color: #126437;
}

.profile-message.warning {
    background: #fff8e5;
    border: 1px solid #efd48a;
    border-left: 5px solid #e5a000;
    color: #795800;
}
/* ======================================================
   CANDIDATE NOTIFICATIONS PAGE
====================================================== */

.candidate-notification-page {
    min-height: 100vh;
    background: #f3f7fc;
    padding: 45px 20px;
}

.candidate-notification-container {
    max-width: 950px;
    margin: 0 auto;
}

.notification-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.notification-page-header h1 {
    margin: 0 0 7px;
    color: #062b5c;
    font-size: 30px;
}

.notification-page-header p {
    margin: 0;
    color: #66758a;
    font-size: 14px;
}

.notification-back-button {
    background: #0866e8;
    color: #ffffff;
    padding: 11px 17px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.notification-back-button:hover {
    background: #0758c7;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.candidate-notification-card {
    display: flex;
    gap: 17px;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    padding: 20px;
    box-shadow: 0 5px 18px rgba(18, 54, 92, 0.06);
}

.notification-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: #e8f2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.notification-content {
    width: 100%;
}

.notification-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.notification-title-row h3 {
    margin: 1px 0 8px;
    color: #082c59;
    font-size: 17px;
}

.notification-type-badge {
    background: #e8f2ff;
    color: #0866e8;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.notification-message {
    color: #53657c;
    line-height: 1.6;
    font-size: 14px;
    margin: 0 0 10px;
}

.notification-date {
    color: #8996a8;
    font-size: 12px;
}

.notification-empty {
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 14px;
    padding: 65px 25px;
    text-align: center;
}

.notification-empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.notification-empty h2 {
    color: #082c59;
    margin-bottom: 8px;
}

.notification-empty p {
    color: #718096;
}
/* Notification Read Status */
.notification-read-status {
    margin-top: 12px !important;
    color: #16a34a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
/* Small Mark as Read Button */
.notification-read-button {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
}
/* ==========================================================
   MY APPLICATIONS - NEW DASHBOARD DESIGN
========================================================== */


/* Hide the old standalone progress summary */
.stage-progress-card {
    display: none !important;
}


/* ==========================================================
   BLUE JOB + CURRENT STAGE HEADER
========================================================== */

.new-application-hero {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 30px;
    align-items: center;

    margin: 16px 0;
    padding: 26px 30px;

    background: linear-gradient(
        135deg,
        #073fa8 0%,
        #075be8 100%
    );

    border-radius: 16px;
    color: #ffffff;
}

.new-job-side {
    display: flex;
    align-items: center;
    gap: 20px;
}

.new-job-icon {
    width: 64px;
    height: 64px;

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

    flex-shrink: 0;

    background: #ffffff;
    color: #0877ff;

    border-radius: 14px;

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

.new-country-label {
    display: block;
    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.new-job-side h2 {
    margin: 0 0 10px;
    color: #ffffff;

    font-size: 27px;
}

.new-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    font-size: 13px;
}

.new-stage-side {
    padding-left: 30px;

    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.new-stage-side > span {
    display: block;

    font-size: 12px;
    opacity: 0.9;
}

.new-stage-side h3 {
    margin: 4px 0 7px;

    color: #ffffff;

    font-size: 24px;
}

.new-stage-side strong {
    font-size: 13px;
}

.new-stage-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 10px;
}

.new-stage-progress {
    height: 8px;
    flex: 1;

    background: rgba(255, 255, 255, 0.25);

    border-radius: 20px;
    overflow: hidden;
}

.new-stage-progress-fill {
    height: 100%;

    background: #16c96f;

    border-radius: 20px;
}

.new-stage-progress-row b {
    min-width: 42px;

    color: #ffffff;
    font-size: 15px;
}


/* ==========================================================
   MAIN TWO COLUMN DASHBOARD
========================================================== */

.application-content-grid {
    display: grid !important;
    grid-template-columns: 0.92fr 1.08fr !important;
    gap: 20px !important;
    align-items: start !important;
}

.recruitment-journey-panel,
.application-action-column {
    width: 100% !important;
    min-width: 0 !important;
}


/* Recruitment Progress header */

.recruitment-journey-panel .panel-title {
    margin: -1px -1px 18px;

    padding: 16px 20px;

    background: linear-gradient(
        135deg,
        #061f4c,
        #073a85
    );

    border-radius: 14px 14px 0 0;
}

.recruitment-journey-panel .panel-title h3,
.recruitment-journey-panel .panel-title p {
    color: #ffffff !important;
}


/* ==========================================================
   CURRENT ACTION / JOB CONFIRMATION
========================================================== */

.current-action-panel {
    overflow: hidden;
    border-radius: 14px !important;
}

.action-panel-heading {
    padding: 17px 20px !important;

    background: linear-gradient(
        135deg,
        #0753d7,
        #063ea8
    ) !important;

    color: #ffffff !important;
}

.action-panel-heading span,
.action-panel-heading h3 {
    color: #ffffff !important;
}


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

@media (max-width: 900px) {

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

    .new-stage-side {
        padding-left: 0;
        padding-top: 20px;

        border-left: none;
        border-top: 1px solid rgba(255,255,255,.25);
    }

    .application-content-grid {
        grid-template-columns: 1fr !important;
    }

}
/* ==========================================================
   MY APPLICATIONS - FULL WIDTH FIX
========================================================== */

.my-applications-page {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 24px 30px 50px !important;
    box-sizing: border-box !important;
}

.my-applications-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.applications-page-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

.application-card {
    width: 100% !important;
    max-width: none !important;
}
/* ==========================================================
   LATEST APPLICATION NOTIFICATION
========================================================== */

.application-update-banner {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;
    box-sizing: border-box;

    margin: 16px 0;
    padding: 15px 18px;

    background: #ffffff;
    border: 1px solid #dce6f2;
    border-radius: 12px;

    box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06);
}


/* ICON */

.application-update-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    background: #eaf3ff;
    color: #0877ff;

    border-radius: 50%;

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


/* GREEN ICON WHEN NOTHING IS PENDING */

.application-update-icon.no-update {
    background: #e6f8ee;
    color: #16a05d;
}


/* TEXT */

.application-update-content {
    flex: 1;
    min-width: 0;
}

.application-update-content span {
    display: block;

    margin-bottom: 3px;

    color: #0877ff;

    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.application-update-content strong {
    display: block;

    margin-bottom: 3px;

    color: #102b50;

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

.application-update-content p {
    margin: 0;

    color: #687b92;

    font-size: 12px;
    line-height: 1.5;
}


/* VIEW NOTIFICATION BUTTON */

.application-update-link {
    flex-shrink: 0;

    padding: 8px 13px;

    background: #0877ff;
    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none;

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

.application-update-link:hover {
    background: #0564d8;
}


/* MOBILE */

@media (max-width: 700px) {

    .application-update-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .application-update-link {
        margin-left: 58px;
    }
}
/* ==========================================================
   LARGE SMART NOTIFICATION CARD
========================================================== */

.dashboard-notification-card {
    display: flex;
    align-items: center;
    gap: 24px;

    width: 100%;
    box-sizing: border-box;

    margin: 0 0 22px;
    padding: 28px 30px;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f3f8ff 100%
    );

    border: 2px solid #0b6efd;
    border-radius: 18px;

    box-shadow: 0 8px 24px rgba(11, 110, 253, 0.12);
}


/* ICON */

.dashboard-notification-icon {
    width: 82px;
    height: 82px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #e5efff;
    color: #0b6efd;

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

.dashboard-no-notification {
    background: #e7f8ee;
    color: #16a34a;
}


/* TEXT AREA */

.dashboard-notification-content {
    flex: 1;
    min-width: 0;
}

.dashboard-notification-label {
    display: block;

    margin-bottom: 7px;

    color: #0b6efd;

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

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.dashboard-notification-content h2 {
    margin: 0 0 10px;

    color: #0c2b5b;

    font-size: 28px;
    line-height: 1.2;
}

.dashboard-notification-content p {
    margin: 0 0 8px;

    color: #334e70;

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

.dashboard-notification-content small {
    color: #71839a;
    font-size: 11px;
}


/* ACTION BUTTON */

.dashboard-notification-action {
    flex-shrink: 0;
}

.dashboard-notification-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 175px;

    padding: 13px 18px;

    background: linear-gradient(
        135deg,
        #0b6efd,
        #0757d8
    );

    color: #ffffff !important;

    border-radius: 9px;

    text-decoration: none;

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

    box-shadow: 0 5px 14px rgba(11, 110, 253, 0.22);

    transition: 0.2s ease;
}

.dashboard-notification-action a:hover {
    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(11, 110, 253, 0.30);
}


/* SMOOTH REDIRECTION */

html {
    scroll-behavior: smooth;
}


/* HIGHLIGHT TARGET SECTION */

#requested-documents:target,
#current-action:target,
#recruitment-progress:target,
.support-panel:target {
    animation: dashboardTargetHighlight 1.8s ease;
}

@keyframes dashboardTargetHighlight {

    0% {
        box-shadow: 0 0 0 5px rgba(11, 110, 253, 0.30);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 110, 253, 0);
    }
}


/* MOBILE */

@media (max-width: 800px) {

    .dashboard-notification-card {
        align-items: flex-start;
        flex-wrap: wrap;

        padding: 22px;
    }

    .dashboard-notification-icon {
        width: 62px;
        height: 62px;

        font-size: 26px;
    }

    .dashboard-notification-content h2 {
        font-size: 21px;
    }

    .dashboard-notification-action {
        width: 100%;
    }

    .dashboard-notification-action a {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ==========================================================
   BOTTOM TWO-COLUMN AREA
========================================================== */

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.dashboard-bottom-card {
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 18px !important;

    border: 1px solid #dce6f2 !important;
    border-radius: 16px !important;

    background: #ffffff !important;
}

@media (max-width: 900px) {

    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   REQUESTED DOCUMENTS HEADER
========================================================== */

.documents-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}

.documents-panel-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #e7f1ff;
    color: #0b6efd;

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

.documents-panel-header h3 {
    margin: 0 0 4px;

    color: #0b2d61;

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

.documents-panel-header p {
    margin: 0;

    color: #6c7f96;

    font-size: 11px;
    line-height: 1.5;
}
/* ==========================================================
   REQUESTED DOCUMENT CARDS - FINAL STYLE
========================================================== */

.document-request-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dce6f3;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}

.document-request-card:hover {
    border-color: #b8d0f0;
    box-shadow: 0 5px 16px rgba(15, 55, 100, 0.06);
}

.document-request-card h4 {
    margin: 0 0 12px;
    padding-right: 100px;

    color: #082b5c;
    font-size: 15px;
    font-weight: 800;
}

.document-request-card p {
    margin: 8px 0;

    color: #526b8b;
    font-size: 12px;
    line-height: 1.6;
}

.document-request-card a {
    color: #006cff;
    font-weight: 700;
    text-decoration: none;
}

.document-request-card a:hover {
    text-decoration: underline;
}


/* STATUS BADGE */

.document-request-card .document-status {
    position: absolute;
    top: 16px;
    right: 16px;

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

    padding: 5px 10px;
    border-radius: 20px;

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


/* APPROVED */

.document-request-card .document-status.approved {
    background: #dcf8e7;
    color: #079447;
}


/* UPLOADED */

.document-request-card .document-status.uploaded {
    background: #e5f0ff;
    color: #006cff;
}


/* REVISION REQUIRED */

.document-request-card .document-status.revision_required {
    background: #ffe5e5;
    color: #d62828;
}


/* REQUESTED */

.document-request-card .document-status.requested {
    background: #fff2d6;
    color: #b56a00;
}
.query-history-actions {
    margin-top: 14px;
}

.query-history-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    box-sizing: border-box;

    padding: 11px 14px;

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

    background: #ffffff;

    color: #0b5ee8;
    text-decoration: none;

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

.query-history-button:hover {
    background: #f4f8ff;
}
.documents-view-all {
    margin-top: 14px;
    text-align: center;
}

.documents-view-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;

    color: #086cff;
    text-decoration: none;

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

.documents-view-all a:hover {
    text-decoration: underline;
}
/* ======================================================
   JOB CONFIRMATION PDF DOWNLOAD BUTTON
====================================================== */

.job-confirmation-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 16px;
    padding: 11px 18px;

    border-radius: 9px;
    border: none;

    background: linear-gradient(135deg, #0877ff, #005ecb);
    color: #ffffff;

    text-decoration: none;
    font-size: 12px;
    font-weight: 800;

    box-shadow: 0 5px 14px rgba(8, 119, 255, 0.18);
    transition: 0.2s ease;
}

.job-confirmation-download-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #006ce8, #0054b8);
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(8, 119, 255, 0.24);
}

.job-confirmation-download-button:focus {
    outline: 3px solid rgba(8, 119, 255, 0.15);
    outline-offset: 2px;
}
/* =========================================
   QR JOB CONFIRMATION - LOGIN NOTICE
========================================= */

.login-confirmation-card {
    width: 100%;
    box-sizing: border-box;
    background: #f0fff7;
    border: 1px solid #b9ead0;
    border-left: 4px solid #16a765;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.login-confirmation-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #16a765;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.login-confirmation-content {
    flex: 1;
    min-width: 0;
}

.login-confirmation-title {
    color: #087443;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.login-confirmation-message {
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
/* =========================================================
   JOB CONFIRMATION - CONGRATULATIONS LOGIN DESIGN
========================================================= */

.auth-wrapper {
    width: min(760px, calc(100% - 32px));
    margin: auto;
}


/* Congratulations Card */

.job-congratulations-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;

    background: linear-gradient(
        135deg,
        #f8fffb 0%,
        #effcf4 50%,
        #f7fff9 100%
    );

    border: 1px solid #c8ead5;
    border-left: 5px solid #16a765;
    border-radius: 16px;

    padding: 30px 32px 24px;
    margin-bottom: 18px;

    box-shadow: 0 12px 35px rgba(16, 105, 65, 0.10);
}


/* Celebration Marks */

.job-confetti {
    position: absolute;
    top: 14px;
    left: 25px;
    right: 25px;

    display: flex;
    justify-content: space-between;

    pointer-events: none;
    opacity: 0.75;
}

.job-confetti span:nth-child(1),
.job-confetti span:nth-child(4) {
    color: #f59e0b;
}

.job-confetti span:nth-child(2),
.job-confetti span:nth-child(5) {
    color: #16a765;
}

.job-confetti span:nth-child(3),
.job-confetti span:nth-child(6) {
    color: #3b82f6;
}


/* Success Heading */

.job-success-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    margin-bottom: 24px;
}

.job-success-icon {
    width: 82px;
    height: 82px;
    min-width: 82px;

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

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #28c76f,
        #0d9d50
    );

    color: #ffffff;

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

    box-shadow:
        0 8px 20px rgba(22, 167, 101, 0.28),
        0 0 0 10px rgba(22, 167, 101, 0.09);
}

.job-success-heading {
    text-align: center;
}

.job-congratulations-text {
    color: #159447;

    font-size: 34px;
    line-height: 1;

    font-weight: 800;

    margin-bottom: 12px;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;
}

.job-accepted-heading {
    color: #123b2a;

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

    margin-bottom: 8px;
}

.job-success-heading p {
    margin: 0;

    color: #58665f;

    font-size: 13px;
}


/* Candidate Details Box */

.job-confirmation-details {
    display: grid;

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

    background: rgba(255, 255, 255, 0.86);

    border: 1px solid #dcebe2;
    border-radius: 13px;

    padding: 8px 18px;

    box-shadow: 0 5px 18px rgba(30, 80, 55, 0.07);
}

.job-confirmation-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 8px;

    min-width: 0;
}

.job-detail-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

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

    border-radius: 8px;

    background: #ecfaf1;

    font-size: 16px;
}

.job-confirmation-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.job-detail-label {
    color: #6b7c72;

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

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 3px;
}

.job-confirmation-item strong {
    color: #17251e;

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

    overflow-wrap: anywhere;
}


/* Login Instruction */

.job-confirmation-login-message {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 20px;

    color: #08783f;

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

    text-align: center;
}

.job-shield-icon {
    width: 29px;
    height: 29px;
    min-width: 29px;

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

    border-radius: 50%;

    background: #dff7e8;

    color: #0b8e48;

    font-weight: 900;
}


/* Candidate Login Card */

.auth-wrapper .auth-card {
    box-sizing: border-box;

    width: 100%;

    padding: 28px 32px;

    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
}

.auth-wrapper .auth-card h1 {
    margin: 0 0 6px;

    color: #073b70;

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

.login-subtitle {
    margin: 0 0 22px;

    color: #64748b;

    font-size: 13px;
}


/* Login Form */

.auth-wrapper .form-group {
    margin-bottom: 16px;
}

.auth-wrapper .form-group label {
    display: block;

    margin-bottom: 6px;

    color: #172033;

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

.auth-wrapper .form-group input {
    box-sizing: border-box;

    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid #cbd5e1;
    border-radius: 7px;

    background: #f8fbff;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.auth-wrapper .form-group input:focus {
    border-color: #1677e8;

    box-shadow:
        0 0 0 3px rgba(22, 119, 232, 0.10);
}


/* Login Button */

.candidate-login-btn {
    width: 100%;

    border: 0;
    border-radius: 7px;

    padding: 13px 20px;
    margin-top: 4px;

    background: linear-gradient(
        90deg,
        #0ca64f,
        #19b85d
    );

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.candidate-login-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(12, 166, 79, 0.20);
}


/* Register Link */

.login-register {
    margin-top: 20px;

    text-align: center;

    color: #475569;

    font-size: 13px;
}

.login-register a {
    color: #075fc5;

    font-weight: 700;

    text-decoration: none;
}

.login-register a:hover {
    text-decoration: underline;
}


/* Login Error */

.login-error {
    margin-bottom: 15px;

    padding: 10px 12px;

    background: #fff1f2;

    border: 1px solid #fecdd3;
    border-radius: 7px;

    color: #b42318;

    font-size: 12px;
}


/* Mobile */

@media (max-width: 650px) {

    .auth-wrapper {
        width: calc(100% - 20px);
    }

    .job-congratulations-card {
        padding: 25px 18px 20px;
    }

    .job-success-header {
        flex-direction: column;
        gap: 16px;
    }

    .job-congratulations-text {
        font-size: 29px;
    }

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

    .auth-wrapper .auth-card {
        padding: 24px 20px;
    }
}
/* =========================================
   PCC INSTRUCTIONS
========================================= */

.pcc-simple-list {
    margin: 14px auto;
    max-width: 520px;
    text-align: left;
}

.pcc-simple-list p {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 9px 0;
    line-height: 1.5;
}

.pcc-simple-list p span {
    color: #16a34a;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.pcc-online-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    background: #ffffff;
    color: #006cff;
    border: 1px solid #006cff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
}

.pcc-online-button:hover {
    background: #006cff;
    color: #ffffff;
    text-decoration: none;
}
/* PCC file upload alignment */

.pcc-upload-form {
    width: 100%;
    margin-top: 14px;
}

.pcc-file-left {
    width: 100%;
    text-align: left;
    margin-bottom: 16px;
}

.pcc-upload-button-center {
    width: 100%;
    text-align: center;
}
/* Center only the PCC Upload button */

.pcc-upload-button-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
}

.pcc-upload-button-center .action-primary-button {
    margin-left: 0;
    margin-right: 0;
}
/* =========================================
   PCC UPLOADED - IMPORTANT NOTES
========================================= */

.pcc-review-notes {
    margin-top: 18px;
    padding: 18px 20px;
    background: #f5f9ff;
    border: 1px solid #cfe0f7;
    border-radius: 12px;
    text-align: left;
}

.pcc-review-notes h4 {
    margin: 0 0 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #075ee8;
}

.pcc-note {
    padding: 9px 4px;
    border-bottom: 1px solid #dce8f7;
    font-size: 13px;
    line-height: 1.5;
    color: #183b66;
}

.pcc-note:last-child {
    border-bottom: none;
}
.pcc-verified-notes {
    list-style: none;
    padding-left: 0;
    margin: 14px 0 0;
}

.pcc-verified-notes li {
    margin: 8px 0;
    line-height: 1.5;
}
/* =========================================
   LATEST REQUESTED DOCUMENTS
========================================= */

.latest-document-list {
    margin-top: 8px;
}

.latest-document-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 9px;
}

.latest-document-item:last-child {
    margin-bottom: 0;
}

.latest-document-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.latest-document-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.latest-document-details strong {
    color: #0b2b5b;
    font-size: 14px;
}

.latest-document-details span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
/* =========================================
   REQUESTED DOCUMENTS - CLEAN LAYOUT
========================================= */

.latest-document-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.latest-document-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}

.latest-document-check {
    width: 22px;
    height: 22px;
    min-width: 22px;

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

    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;

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

.latest-document-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
}

.latest-document-name {
    font-size: 14px;
    font-weight: 700;
    color: #0b2b5b;
    line-height: 1.3;
}

.latest-document-instruction {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.4;
}
/* =========================================
   CONTRACT ISSUED - INFORMATION BOX
========================================= */

.current-stage-info-box {
    width: 92%;
    margin: 14px auto 16px;
    padding: 16px 20px;
    box-sizing: border-box;

    background: #f5f9ff;
    border: 1px solid #cfe0f7;
    border-radius: 12px;

    text-align: left;
}

.current-stage-info-box h4 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.current-stage-info-box p {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 12px;
}

.current-stage-info-box p:last-child {
    margin-bottom: 0;
}
/* =========================================
   PREMIUM FINAL COMPLETION CARD
========================================= */

.completion-thankyou-card {
    margin-top: 22px;
    padding: 30px 24px;

    text-align: center;

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

    background:
        linear-gradient(
            180deg,
            #f0fff6 0%,
            #ffffff 58%,
            #f8fbff 100%
        );

    box-shadow:
        0 10px 30px rgba(20, 90, 60, 0.10);
}


/* ICON */

.completion-thankyou-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 14px;

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

    border-radius: 50%;

    background: #dff7e8;

    font-size: 32px;

    box-shadow:
        0 5px 15px rgba(20, 140, 75, 0.12);
}


/* SMALL TOP LABEL */

.completion-thankyou-label {
    display: inline-block;

    padding: 6px 12px;
    margin-bottom: 10px;

    border-radius: 30px;

    background: #dff7e8;
    color: #087443;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}


/* CONGRATULATIONS */

.completion-thankyou-card h3 {
    margin: 4px 0 10px;

    color: #12345b;

    font-size: 25px;
    font-weight: 900;
}


/* 100% BADGE */

.completion-percentage-badge {
    display: inline-block;

    margin-bottom: 16px;
    padding: 8px 16px;

    border-radius: 30px;

    background: #0ca35a;
    color: #ffffff;

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

    box-shadow:
        0 5px 14px rgba(12, 163, 90, 0.18);
}


/* MAIN MESSAGE */

.completion-main-message {
    max-width: 590px;

    margin: 0 auto 7px;

    color: #40576f;

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

.completion-main-message strong {
    color: #12345b;
}


/* GOOD WISH */

.completion-wish {
    max-width: 590px;

    margin: 0 auto;

    color: #68798e;

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


/* REFERRAL / THANK YOU BOX */

.completion-referral-box {
    margin-top: 22px;
    padding: 20px;

    border: 1px solid #cfe3fa;
    border-radius: 14px;

    background: #f4f9ff;
}

.completion-referral-icon {
    width: 38px;
    height: 38px;

    margin: 0 auto 9px;

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

    border-radius: 50%;

    background: #e5f1ff;
    color: #0877ff;

    font-size: 17px;
    font-weight: 900;
}

.completion-referral-box h4 {
    margin: 0 0 9px;

    color: #12345b;

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

.completion-referral-box p {
    max-width: 590px;

    margin: 0 auto 10px;

    color: #607287;

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

.completion-referral-box strong {
    display: block;

    color: #174f87;

    font-size: 11px;
    line-height: 1.6;
}


/* BRAND SIGNOFF */

.completion-brand-signoff {
    margin-top: 22px;
    padding-top: 17px;

    border-top: 1px solid #dbe8df;
}

.completion-brand-signoff strong {
    display: block;

    color: #12345b;

    font-size: 17px;
    font-weight: 900;
}

.completion-brand-signoff span {
    display: block;

    margin-top: 5px;

    color: #718096;

    font-size: 11px;
    font-style: italic;
}
/* ==========================================================
   SHORTLISTED CELEBRATION
========================================================== */

.shortlisted-celebration-card {
    text-align: center;
    padding: 26px 28px 24px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
    border-radius: 14px;
}

.shortlisted-confetti {
    color: #ff9800;
    font-size: 15px;
    letter-spacing: 7px;
    margin-bottom: 6px;
}

.shortlisted-celebration-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #dff8ea,
            #c8f1dc
        );
    font-size: 34px;
    box-shadow: 0 8px 20px rgba(25, 135, 84, 0.12);
}

.shortlisted-celebration-label {
    display: inline-block;
    margin-bottom: 5px;
    color: #0b6efd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.shortlisted-celebration-card h4 {
    margin: 0 0 3px;
    color: #198754;
    font-size: 24px;
    font-weight: 800;
}

.shortlisted-celebration-card h3 {
    margin: 0 0 12px;
    color: #102a43;
    font-size: 18px;
    font-weight: 800;
}

.shortlisted-main-message {
    max-width: 560px;
    margin: 0 auto 9px;
    color: #334e68;
    font-size: 13px;
    line-height: 1.7;
}

.shortlisted-secondary-message {
    max-width: 600px;
    margin: 0 auto 18px;
    color: #627d98;
    font-size: 12px;
    line-height: 1.65;
}

.shortlisted-next-update {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border: 1px solid #ccebd9;
    border-radius: 10px;
    background: #effaf4;
}

.shortlisted-update-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #19a96b;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.shortlisted-next-update strong {
    display: block;
    color: #137a4c;
    font-size: 12px;
    margin-bottom: 2px;
}

.shortlisted-next-update span {
    display: block;
    color: #32785a;
    font-size: 11px;
}
/* ==========================================================
   SHORTLISTED CONTINUE BUTTON
========================================================== */

.shortlisted-continue-form {
    margin-top: 18px;
    text-align: center;
}

.shortlisted-continue-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    padding: 13px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        #0b6efd,
        #0756bd
    );
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(11, 110, 253, 0.18);
    transition: all 0.2s ease;
}

.shortlisted-continue-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 110, 253, 0.25);
}
/* ==========================================================
   PREMIUM JOB CONFIRMATION DOCUMENT AREA
========================================================== */

.job-confirmation-document {
    margin-top: 18px;
    padding: 18px;

    border: 1px solid #d8e6f6;
    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #f3f8ff 100%
    );
}

.job-document-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 16px;
}

.job-document-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

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

    border-radius: 7px;

    background: #e5f1ff;
    color: #0877ff;

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

.job-document-heading strong {
    display: block;

    color: #12345b;

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

.job-document-heading p {
    margin: 4px 0 0;

    color: #66798e;

    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================
   DOWNLOAD + REFERENCE + PASSWORD ROW
========================================================== */

.job-document-security-row {
    display: grid;

    grid-template-columns:
        minmax(210px, 1.15fr)
        minmax(180px, 1fr)
        minmax(145px, .75fr);

    align-items: stretch;

    border: 1px solid #d7e4f3;
    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;
}

.job-confirmation-download-button {
    min-height: 66px;

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

    margin: 9px;

    padding: 0 16px;

    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #0877ff,
        #075dcc
    );

    color: #ffffff;

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

    text-decoration: none;

    box-shadow: 0 5px 14px rgba(8, 119, 255, .18);
}

.job-confirmation-download-button:hover {
    transform: translateY(-1px);
}

.job-document-reference,
.job-document-password {
    min-width: 0;

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

    padding: 11px 18px;

    border-left: 1px solid #e2eaf4;
}

.job-document-reference > span,
.job-document-password > span {
    display: block;

    margin-bottom: 6px;

    color: #60738a;

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

.job-reference-value,
.job-password-value {
    display: flex;
    align-items: center;
    gap: 9px;
}

.job-reference-value strong,
.job-password-value strong {
    color: #122f51;

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

    white-space: nowrap;
}

.job-copy-button,
.job-password-eye {
    width: 34px;
    height: 34px;
    min-width: 34px;

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

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

    background: #f7fbff;
    color: #0877ff;

    font-size: 15px;

    cursor: pointer;
}

.job-copy-button:hover,
.job-password-eye:hover {
    border-color: #8ebdf7;
    background: #edf6ff;
}


/* ==========================================================
   BIG ACCEPTANCE CHECKBOX
========================================================== */

.job-acceptance-checkbox {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 14px;
    padding: 13px 14px;

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

    background: #ffffff;

    cursor: pointer;
}

.job-acceptance-checkbox input[type="checkbox"] {
    width: 25px;
    height: 25px;
    min-width: 25px;

    margin: 0;

    accent-color: #0877ff;

    cursor: pointer;
}

.job-acceptance-checkbox span {
    color: #17304f;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}


/* ==========================================================
   RESPONSIVE JOB CONFIRMATION
========================================================== */

@media (max-width: 850px) {

    .job-document-security-row {
        grid-template-columns: 1fr;
    }

    .job-document-reference,
    .job-document-password {
        border-left: none;
        border-top: 1px solid #e2eaf4;
    }

}
/* ==========================================================
   JOB CONFIRMATION LETTER - FINAL RESPONSIVE DESIGN
========================================================== */

.job-confirmation-document {
    margin-top: 18px;
    padding: 18px;

    border: 1px solid #d8e6f6;
    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #f3f8ff 100%
    );
}


/* Heading */

.job-document-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 15px;
}

.job-document-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

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

    border-radius: 7px;

    background: #e5f1ff;
    color: #0877ff;

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

.job-document-heading strong {
    display: block;

    color: #12345b;

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

.job-document-heading p {
    margin: 4px 0 0;

    color: #66798e;

    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================
   DOWNLOAD + PASSWORD
========================================================== */

.job-document-security-row-simple {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.5fr)
        minmax(160px, 0.8fr);

    align-items: stretch;

    border: 1px solid #d7e4f3;
    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;
}


/* Download button */

.job-document-security-row-simple
.job-confirmation-download-button {

    min-height: 62px;

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

    margin: 9px;

    padding: 0 16px;

    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #0877ff,
        #075dcc
    );

    color: #ffffff;

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

    text-decoration: none;

    box-shadow:
        0 5px 14px rgba(8, 119, 255, .18);
}


/* Password area */

.job-document-password-simple {
    min-width: 0;

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

    padding: 11px 18px;

    border-left: 1px solid #e2eaf4;
}

.job-document-password-simple > span {
    display: block;

    margin-bottom: 7px;

    color: #60738a;

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

.job-password-value {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
}

.job-password-value strong {
    color: #122f51;

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

    letter-spacing: 2px;

    white-space: nowrap;
}


/* Eye button */

.job-password-eye {
    width: 38px;
    height: 36px;
    min-width: 38px;

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

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

    background: #f7fbff;
    color: #0877ff;

    font-size: 16px;

    cursor: pointer;
}

.job-password-eye:hover {
    border-color: #8ebdf7;
    background: #edf6ff;
}


/* ==========================================================
   BIG ACCEPTANCE CHECKBOX
========================================================== */

.job-acceptance-checkbox {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 14px;
    padding: 13px 14px;

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

    background: #ffffff;

    cursor: pointer;
}

.job-acceptance-checkbox input[type="checkbox"] {
    width: 26px;
    height: 26px;
    min-width: 26px;

    margin: 0;

    accent-color: #0877ff;

    cursor: pointer;
}

.job-acceptance-checkbox span {
    color: #17304f;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}


/* ==========================================================
   TABLET / NARROW DESKTOP
========================================================== */

@media (max-width: 900px) {

    .job-document-security-row-simple {
        grid-template-columns: 1fr;
    }

    .job-document-password-simple {
        border-left: none;
        border-top: 1px solid #e2eaf4;
    }

    .job-document-security-row-simple
    .job-confirmation-download-button {
        min-height: 48px;
    }

}


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

@media (max-width: 600px) {

    .job-confirmation-document {
        padding: 13px;
    }

    .job-document-heading {
        gap: 9px;
    }

    .job-document-security-row-simple {
        display: block;
    }

    .job-document-security-row-simple
    .job-confirmation-download-button {

        margin: 8px;

        min-height: 46px;

        padding: 10px 12px;

        font-size: 10px;
    }

    .job-document-password-simple {

        padding: 12px;

        border-left: none;
        border-top: 1px solid #e2eaf4;
    }

    .job-password-value strong {
        font-size: 12px;
    }

    .job-acceptance-checkbox {
        align-items: flex-start;
        padding: 12px;
    }

    .job-acceptance-checkbox input[type="checkbox"] {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

}
/* ==========================================================
   JOB CONFIRMATION ACCEPTED - PASSWORD SECTION
========================================================== */

.accepted-document-box {
    margin-top: 16px;
}

.accepted-password-box {
    margin-top: 10px;
    padding: 14px;

    border: 1px solid #d5e4f5;
    border-radius: 10px;

    background: #f8fbff;
}

.accepted-password-label {
    display: block;
    margin-bottom: 7px;

    color: #60738a;

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

.accepted-password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    padding: 10px 12px;

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

    background: #ffffff;
}

.accepted-password-row strong {
    color: #12345b;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 2px;
}


/* Eye Button */

.accepted-password-row .job-password-eye {
    width: 38px;
    height: 36px;
    min-width: 38px;

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

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

    background: #f7fbff;
    color: #0877ff;

    font-size: 16px;

    cursor: pointer;
}

.accepted-password-row .job-password-eye:hover {
    border-color: #8ebdf7;
    background: #edf6ff;
}


/* Password Reminder */

.accepted-password-reminder {
    margin-top: 10px;
    padding: 10px 12px;

    border-left: 4px solid #f0a000;
    border-radius: 7px;

    background: #fff8e6;
}

.accepted-password-reminder strong {
    display: block;

    color: #8a5b00;

    font-size: 10px;
}

.accepted-password-reminder p {
    margin: 4px 0 0;

    color: #78643a;

    font-size: 10px;
    line-height: 1.55;
}


/* ==========================================================
   CONTINUE TO MEDICAL CENTRE SELECTION
========================================================== */

.job-confirmed-continue-form {
    margin-top: 16px;
}

.job-confirmed-continue-button {
    width: 100%;
    min-height: 46px;

    padding: 10px 16px;

    border: none;
    border-radius: 9px;

    background: linear-gradient(
        135deg,
        #0877ff,
        #005ecb
    );

    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(8, 119, 255, 0.18);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.job-confirmed-continue-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 17px rgba(8, 119, 255, 0.24);
}


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

@media (max-width: 600px) {

    .accepted-password-box {
        padding: 11px;
    }

    .accepted-password-row {
        padding: 9px 10px;
    }

    .accepted-password-row strong {
        font-size: 12px;
    }

    .accepted-password-reminder {
        padding: 9px 10px;
    }

    .job-confirmed-continue-button {
        font-size: 11px;
    }
}
/* =========================================
   MY RECRUITMENT DOCUMENTS
========================================= */

.recruitment-documents-panel {
    grid-column: 1 / -1;
    margin-bottom: 20px;
    padding: 22px;

    border: 1px solid #dbe6f3;
    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(20, 55, 90, 0.06);
}

.recruitment-documents-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 18px;
}

.recruitment-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 15px 16px;

    border: 1px solid #e0e8f2;
    border-radius: 12px;

    background: #f9fbfe;
}

.recruitment-document-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recruitment-document-info strong {
    color: #17304f;
    font-size: 12px;
    font-weight: 800;
}

.document-available {
    color: #087443;
    font-size: 10px;
    font-weight: 800;
}

.document-pending {
    color: #8a97a6;
    font-size: 10px;
    font-weight: 700;
}

.recruitment-document-button {
    flex-shrink: 0;

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

    min-height: 36px;
    padding: 0 13px;

    border-radius: 8px;

    background: #0877ff;
    color: #ffffff;

    text-decoration: none;

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

.recruitment-document-button:hover {
    background: #0069df;
    color: #ffffff;
}

@media (max-width: 750px) {

    .recruitment-documents-grid {
        grid-template-columns: 1fr;
    }

    .recruitment-document-item {
        align-items: flex-start;
        flex-direction: column;
    }
}
.password-toggle-button {
    width: 38px;
    height: 38px;

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

    padding: 0;

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

    background: #ffffff;

    cursor: pointer;
}

.password-eye-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    font-size: 20px !important;
    line-height: 1 !important;

    color: #0d6efd !important;
}
/* ==================================================
   VACANCY BROWSER
================================================== */

.vacancy-browser-section {
    padding: 65px 25px 80px;
    background: #f5f8fc;
}

.vacancy-browser-container {
    max-width: 1180px;
    margin: 0 auto;
}

.vacancy-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.vacancy-section-label {
    display: block;

    margin-bottom: 7px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.vacancy-section-heading h2 {
    margin: 0 0 6px;

    color: #102f57;

    font-size: 28px;
    font-weight: 900;
}

.vacancy-section-heading p {
    margin: 0;

    color: #6d8195;

    font-size: 12px;
}

.view-all-jobs-button {
    flex-shrink: 0;

    padding: 10px 15px;

    border-radius: 8px;

    background: #e8f2ff;
    color: #0877ff;

    text-decoration: none;

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


/* SEARCH */

.vacancy-search-bar {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;

    margin-bottom: 20px;
    padding: 12px;

    border: 1px solid #dce5ef;
    border-radius: 13px;

    background: #ffffff;

    box-shadow: 0 7px 22px rgba(20, 55, 90, 0.06);
}

.vacancy-search-field {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 12px;

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

    background: #f9fbfd;
}

.vacancy-search-field input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #27445f;

    font-size: 11px;
}

.vacancy-search-button {
    min-width: 125px;

    border: none;
    border-radius: 8px;

    background: #0877ff;
    color: #ffffff;

    cursor: pointer;

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


/* GRID */

.vacancy-browser-grid {
    display: grid;

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

    gap: 15px;
    align-items: start;
}


/* FILTER SIDEBAR */

.vacancy-filter-column {
    display: grid;
    gap: 14px;
}

.vacancy-filter-box {
    padding: 17px;

    border: 1px solid #dce5ef;
    border-radius: 12px;

    background: #ffffff;
}

.vacancy-filter-box h3 {
    margin: 0 0 13px;

    color: #173b60;

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

.category-filter-button {
    width: 100%;

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

    margin-bottom: 4px;
    padding: 9px 10px;

    border: none;
    border-radius: 7px;

    background: transparent;

    color: #496078;

    cursor: pointer;

    text-align: left;

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

.category-filter-button:hover,
.category-filter-button.active {
    background: #eaf3ff;
    color: #0877ff;
}

.category-filter-button strong {
    font-size: 9px;
}

.vacancy-trust-list p {
    margin: 0 0 9px;

    color: #566d83;

    font-size: 9px;
    line-height: 1.5;
}


/* JOB LIST */

.vacancy-job-list {
    display: grid;
    gap: 11px;

    max-height: 670px;
    overflow-y: auto;

    padding-right: 4px;
}

.homepage-job-card {
    padding: 15px;

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

    background: #ffffff;

    cursor: pointer;

    transition: 0.15s ease;
}

.homepage-job-card:hover,
.homepage-job-card.selected {
    border-color: #0877ff;

    box-shadow:
        0 6px 16px
        rgba(8,119,255,0.10);
}

.homepage-job-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.new-job-label {
    display: inline-block;

    margin-bottom: 6px;
    padding: 3px 7px;

    border-radius: 5px;

    background: #e8f4ff;
    color: #0877ff;

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

.homepage-job-card h3 {
    margin: 0 0 5px;

    color: #163555;

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

.homepage-job-location {
    margin: 0;

    color: #667b90;

    font-size: 10px;
}

.homepage-job-symbol {
    width: 36px;
    height: 36px;
    min-width: 36px;

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

    border-radius: 9px;

    background: #eef5ff;
    color: #0877ff;

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

.homepage-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 11px 0;
}

.homepage-job-tags span {
    padding: 4px 7px;

    border-radius: 5px;

    background: #f0f3f6;
    color: #53687c;

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

.homepage-job-summary {
    margin: 0;

    color: #5f7286;

    font-size: 9px;
    line-height: 1.6;
}

.homepage-job-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 12px;
}

.homepage-job-footer > span {
    color: #8794a3;

    font-size: 8px;
}

.job-card-open-button {
    border: none;

    background: transparent;

    color: #0877ff;

    cursor: pointer;

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


/* DETAIL PANEL */

.vacancy-detail-column {
    position: sticky;
    top: 96px;
}

.homepage-job-detail {
    display: none;

    padding: 23px;

    border: 1px solid #dce5ef;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 7px 22px
        rgba(20, 55, 90, 0.06);
}

.homepage-job-detail.active {
    display: block;
}

.job-detail-label {
    display: inline-block;

    margin-bottom: 8px;
    padding: 4px 8px;

    border-radius: 5px;

    background: #eaf3ff;
    color: #0877ff;

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

.homepage-job-detail h2 {
    margin: 0 0 5px;

    color: #102f57;

    font-size: 22px;
    font-weight: 900;
}

.homepage-job-detail h4 {
    margin: 0;

    color: #647a91;

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

.job-detail-actions {
    display: flex;
    gap: 8px;

    margin-top: 18px;
}

.job-detail-primary-button,
.job-detail-secondary-button {
    min-height: 40px;

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

    padding: 0 14px;

    border-radius: 7px;

    text-decoration: none;

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

.job-detail-primary-button {
    background: #0877ff;
    color: #ffffff;
}

.job-detail-secondary-button {
    border: 1px solid #bcd3ea;

    background: #ffffff;
    color: #24527d;
}

.job-detail-divider {
    height: 1px;

    margin: 20px 0;

    background: #e3eaf1;
}

.job-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.job-detail-facts div {
    padding: 10px;

    border-radius: 7px;

    background: #f7f9fc;
}

.job-detail-facts span {
    display: block;

    margin-bottom: 4px;

    color: #8290a0;

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

.job-detail-facts strong {
    color: #304a64;

    font-size: 10px;
}

.job-detail-description {
    margin-top: 18px;
}

.job-detail-description h3 {
    margin: 0 0 7px;

    color: #244766;

    font-size: 11px;
}

.job-detail-description p {
    margin: 0;

    color: #61758a;

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

.job-detail-safety {
    margin-top: 18px;
    padding: 12px;

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

    background: #effbf4;
}

.job-detail-safety strong {
    color: #087443;

    font-size: 9px;
}

.job-detail-safety p {
    margin: 5px 0 0;

    color: #577467;

    font-size: 8px;
    line-height: 1.5;
}

.no-homepage-jobs {
    padding: 30px;

    text-align: center;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    background: #ffffff;
}
@media (max-width: 1000px) {

    .vacancy-browser-grid {
        grid-template-columns: 190px 1fr;
    }

    .vacancy-detail-column {
        grid-column: 1 / -1;
        position: static;
    }

}

@media (max-width: 700px) {

    .vacancy-search-bar {
        grid-template-columns: 1fr;
    }

    .vacancy-browser-grid {
        grid-template-columns: 1fr;
    }

    .vacancy-filter-column {
        order: 1;
    }

    .vacancy-job-list {
        order: 2;
        max-height: none;
    }

    .vacancy-detail-column {
        order: 3;
    }

    .vacancy-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* ==================================================
   HOW RECRUITMENT WORKS
================================================== */

.recruitment-process-section {
    padding: 75px 25px;
    background: #ffffff;
}

.recruitment-process-container {
    max-width: 1180px;
    margin: 0 auto;
}

.recruitment-process-heading {
    max-width: 650px;
    margin: 0 auto 38px;
    text-align: center;
}

.recruitment-process-heading span {
    display: block;
    margin-bottom: 8px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.recruitment-process-heading h2 {
    margin: 0 0 10px;

    color: #102f57;

    font-size: 30px;
    font-weight: 900;
}

.recruitment-process-heading p {
    margin: 0;

    color: #6d8195;

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

.recruitment-process-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.process-step {
    position: relative;

    min-height: 245px;
    padding: 22px 16px;

    border: 1px solid #dfe7f0;
    border-radius: 14px;

    background: #f9fbfe;

    text-align: center;

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

.process-step:hover {
    transform: translateY(-4px);

    border-color: #b9d6f7;

    box-shadow:
        0 9px 22px
        rgba(20, 60, 100, 0.08);
}

.process-step-number {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    background: #0877ff;
    color: #ffffff;

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

.process-step-icon {
    width: 52px;
    height: 52px;

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

    margin: 12px auto 18px;

    border-radius: 14px;

    background: #e9f3ff;

    font-size: 23px;
}

.process-step h3 {
    margin: 0 0 9px;

    color: #153b60;

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

.process-step p {
    margin: 0;

    color: #687d92;

    font-size: 9px;
    line-height: 1.65;
}


@media (max-width: 1050px) {

    .recruitment-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 650px) {

    .recruitment-process-grid {
        grid-template-columns: 1fr;
    }

    .process-step {
        min-height: auto;
    }

}
/* ==================================================
   WHY CHOOSE LABOR FORCE AB
================================================== */

.why-choose-section {
    padding: 75px 25px 85px;
    background: #f5f8fc;
}

.why-choose-container {
    max-width: 1180px;
    margin: 0 auto;
}

.why-choose-heading {
    max-width: 680px;
    margin: 0 auto 35px;

    text-align: center;
}

.why-choose-heading span {
    display: block;

    margin-bottom: 8px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.why-choose-heading h2 {
    margin: 0 0 10px;

    color: #102f57;

    font-size: 30px;
    font-weight: 900;
}

.why-choose-heading p {
    margin: 0;

    color: #6d8195;

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


/* CARDS */

.why-choose-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 28px;
}

.why-choose-card {
    min-height: 205px;

    padding: 22px;

    border: 1px solid #dce5ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(20, 55, 90, 0.05);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.why-choose-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 9px 24px
        rgba(20, 55, 90, 0.08);
}

.why-choose-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 16px;

    border-radius: 12px;

    background: #e9f3ff;
    color: #0877ff;

    font-size: 20px;
    font-weight: 900;
}

.why-choose-card h3 {
    margin: 0 0 9px;

    color: #153b60;

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

.why-choose-card p {
    margin: 0;

    color: #687d92;

    font-size: 10px;
    line-height: 1.65;
}


/* SAFETY NOTICE */

.homepage-safety-notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 24px;

    border: 1px solid #ef4444;
    border-left: 5px solid #dc2626;
    border-radius: 14px;

    background: #fff5f5;
}


.homepage-safety-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;

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

    border-radius: 50%;

    background: #dc2626;
    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
}

.homepage-safety-label {
    display: block;

    margin-bottom: 5px;

    color: #dc2626;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.homepage-safety-content h3 {
    margin: 0 0 10px;

    color: #991b1b;

    font-size: 19px;
    font-weight: 900;
}

.homepage-safety-content p {
    margin: 0 0 7px;

    color: #7f1d1d;

    font-size: 10px;
    line-height: 1.6;
}

.homepage-safety-content strong {
    display: block;

    margin-top: 9px;

    color: #b91c1c;

    font-size: 10px;
    line-height: 1.55;
}


/* RESPONSIVE */

@media (max-width: 950px) {

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

}

@media (max-width: 600px) {

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .homepage-safety-notice {
        flex-direction: column;
    }

}
.homepage-safety-wrapper {
    max-width: 1180px;
    margin: 35px auto;
    padding: 0 25px;
}

/* ==================================================
   ABOUT LABOR FORCE AB
================================================== */

.homepage-about-section {
    padding: 85px 25px;
    background: #ffffff;
}

.homepage-about-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, 0.8fr);

    gap: 55px;
    align-items: center;
}

.homepage-about-label {
    display: block;

    margin-bottom: 9px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.homepage-about-content h2 {
    max-width: 650px;

    margin: 0 0 20px;

    color: #102f57;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 900;
}

.homepage-about-content > p {
    max-width: 700px;

    margin: 0 0 12px;

    color: #60758b;

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


/* COMPANY INFORMATION */

.homepage-about-company {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 25px;
}

.homepage-about-company div {
    padding: 13px;

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

    background: #f8fafc;
}

.homepage-about-company span {
    display: block;

    margin-bottom: 4px;

    color: #8795a4;

    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.homepage-about-company strong {
    color: #294762;

    font-size: 10px;
    line-height: 1.5;
}


/* STATISTICS */

.homepage-about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.about-stat-card {
    min-height: 115px;

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

    padding: 18px;

    border: 1px solid #dce6f0;
    border-radius: 13px;

    background: #f7faff;

    text-align: center;
}

.about-stat-card strong {
    display: block;

    margin-bottom: 6px;

    color: #0877ff;

    font-size: 20px;
    font-weight: 900;
}

.about-stat-card span {
    color: #62778c;

    font-size: 9px;
    line-height: 1.5;
}


/* HIGHLIGHT */

.homepage-about-highlight {
    grid-column: 1 / -1;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-top: 3px;
    padding: 17px;

    border-radius: 12px;

    background: #083b70;
}

.about-highlight-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;

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

    border-radius: 50%;

    background: #17bf73;
    color: white;

    font-weight: 900;
}

.homepage-about-highlight h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 12px;
}

.homepage-about-highlight p {
    margin: 0;

    color: #d8e8f7;

    font-size: 9px;
    line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 850px) {

    .homepage-about-container {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .homepage-about-company,
    .homepage-about-stats {
        grid-template-columns: 1fr;
    }

    .homepage-about-highlight {
        grid-column: auto;
    }

}
/* ==================================================
   INDUSTRIES WE RECRUIT FOR
================================================== */

.industries-section {
    padding: 80px 25px;
    background: #f4f8fc;
}

.industries-container {
    max-width: 1180px;
    margin: 0 auto;
}


/* HEADING */

.industries-heading {
    max-width: 680px;
    margin: 0 auto 38px;
    text-align: center;
}

.industries-label {
    display: block;
    margin-bottom: 8px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.industries-heading h2 {
    margin: 0 0 10px;

    color: #102f57;

    font-size: 30px;
    font-weight: 900;
}

.industries-heading p {
    margin: 0;

    color: #687d92;

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


/* ==================================================
   INDUSTRY GRID
================================================== */

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


/* INDUSTRY CARD */

.industry-card {
    min-height: 190px;

    padding: 22px;

    border: 1px solid #dbe5ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 18px
        rgba(20, 55, 90, 0.04);

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

.industry-card:hover {
    transform: translateY(-4px);

    border-color: #0877ff;

    box-shadow:
        0 10px 28px
        rgba(8, 119, 255, 0.10);
}


/* ICON */

.industry-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 17px;

    border-radius: 12px;

    background: #eaf4ff;

    font-size: 21px;
}


/* CARD TEXT */

.industry-card h3 {
    margin: 0 0 8px;

    color: #12385f;

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

.industry-card p {
    margin: 0;

    color: #6c8094;

    font-size: 10px;
    line-height: 1.65;
}


/* ==================================================
   VACANCY CTA
================================================== */

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

    gap: 30px;

    margin-top: 25px;
    padding: 24px 28px;

    border-radius: 14px;

    background: #073d73;

    box-shadow:
        0 8px 25px
        rgba(7, 61, 115, 0.12);
}

.industries-cta span {
    display: block;

    margin-bottom: 5px;

    color: #6eb7ff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.industries-cta h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.industries-cta p {
    margin: 0;

    color: #d3e5f7;

    font-size: 10px;
}


/* CTA BUTTON */

.industries-cta-button {
    flex-shrink: 0;

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

    padding: 13px 20px;

    border-radius: 8px;

    background: #0877ff;
    color: #ffffff;

    text-decoration: none;

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

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.industries-cta-button:hover {
    transform: translateY(-2px);
    background: #0068df;
}


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

@media (max-width: 950px) {

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

}

@media (max-width: 600px) {

    .industries-section {
        padding: 60px 18px;
    }

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

    .industries-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .industries-cta-button {
        width: 100%;
    }

}
/* ==================================================
   LABOR FORCE AB - PROFESSIONAL FOOTER
================================================== */

.site-footer {
    margin-top: 0;
    padding: 60px 25px 0;

    background: #082f59;
    color: #ffffff;
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;

    gap: 45px;

    padding-bottom: 40px;
}


/* ==================================================
   COMPANY
================================================== */

.footer-company h2 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 900;
}

.footer-company-type {
    display: block;

    margin-bottom: 17px;

    color: #66b1ff;

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

.footer-company > p {
    max-width: 390px;

    margin: 0 0 20px;

    color: #c3d4e5;

    font-size: 10px;
    line-height: 1.75;
}


/* COMPANY REGISTRATION */

.footer-registration {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 13px;

    border-left: 3px solid #1681ff;
}

.footer-registration strong {
    color: #ffffff;
    font-size: 10px;
}

.footer-registration span {
    color: #9fb7ce;
    font-size: 9px;
}


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

.footer-column h3 {
    position: relative;

    margin: 0 0 19px;
    padding-bottom: 10px;

    color: #ffffff;

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

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

    position: absolute;
    left: 0;
    bottom: 0;

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: #1681ff;
}

.footer-column > a {
    display: block;

    width: fit-content;

    margin-bottom: 11px;

    color: #b9ccdf;

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

    text-decoration: none;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}

.footer-column > a:hover {
    color: #ffffff;
    transform: translateX(3px);
}


/* ==================================================
   COMPANY INFORMATION
================================================== */

.footer-info-item {
    margin-bottom: 17px;
}

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

    margin-bottom: 5px;

    color: #7798b7;

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.footer-info-item strong {
    color: #d9e6f2;

    font-size: 9px;
    line-height: 1.65;
}


/* ==================================================
   SAFETY NOTICE
================================================== */

.footer-safety {
    max-width: 1180px;
    margin: 0 auto 25px;

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

    padding: 16px 19px;

    border: 1px solid rgba(255, 118, 118, 0.35);
    border-radius: 10px;

    background: rgba(177, 32, 32, 0.15);
}

.footer-safety-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;

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

    border-radius: 50%;

    background: #dc2626;
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.footer-safety strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

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

.footer-safety p {
    margin: 0;

    color: #c9d8e7;

    font-size: 8.5px;
    line-height: 1.6;
}


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

.footer-bottom {
    max-width: 1180px;
    margin: 0 auto;

    min-height: 58px;

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

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    color: #819db7;

    font-size: 8.5px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

    text-decoration: none;

    font-size: 8.5px;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}


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

@media (max-width: 900px) {

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

}

@media (max-width: 600px) {

    .site-footer {
        padding: 45px 20px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-safety {
        align-items: flex-start;
    }

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

        padding: 18px 0;
    }

}
/* ==================================================
   HOMEPAGE CONTACT SECTION
================================================== */

.homepage-contact-section {
    padding: 85px 6%;
    background: #ffffff;
}

.homepage-contact-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}


/* LEFT SIDE */

.homepage-contact-info {
    padding-top: 10px;
}

.contact-section-label {
    display: block;
    margin-bottom: 12px;

    color: #0877ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.homepage-contact-info h2 {
    margin: 0 0 16px;

    color: #082f5c;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 900;
}

.contact-intro {
    max-width: 520px;
    margin: 0 0 30px;

    color: #637b91;
    font-size: 14px;
    line-height: 1.75;
}


/* CONTACT INFORMATION CARDS */

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 13px;
    padding: 17px 18px;

    background: #f6f9fd;
    border: 1px solid #dce7f2;
    border-radius: 12px;
}

.contact-info-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;

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

    background: #e7f2ff;
    border-radius: 11px;

    font-size: 19px;
}

.contact-info-card span {
    display: block;
    margin-bottom: 5px;

    color: #7a8ea2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-info-card strong {
    color: #123a61;
    font-size: 13px;
    line-height: 1.55;
}


/* SAFETY BOX */

.contact-safety-note {
    display: flex;
    gap: 14px;
    align-items: center;

    margin-top: 20px;
    padding: 17px 18px;

    background: #eefbf5;
    border: 1px solid #bdebd4;
    border-radius: 12px;
}

.contact-safety-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

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

    border-radius: 50%;

    background: #16b86d;
    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
}

.contact-safety-note strong {
    display: block;
    margin-bottom: 3px;

    color: #087247;
    font-size: 13px;
}

.contact-safety-note p {
    margin: 0;

    color: #537665;
    font-size: 11px;
    line-height: 1.5;
}


/* ==================================================
   CONTACT FORM
================================================== */

.homepage-contact-form-box {
    padding: 32px;

    background: #f7faff;
    border: 1px solid #d9e6f2;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(18, 55, 90, 0.08);
}

.contact-form-heading span {
    display: block;
    margin-bottom: 8px;

    color: #0877ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.contact-form-heading h3 {
    margin: 0 0 8px;

    color: #082f5c;
    font-size: 25px;
    font-weight: 900;
}

.contact-form-heading p {
    margin: 0 0 25px;

    color: #6c8196;
    font-size: 12px;
    line-height: 1.6;
}


/* FORM */

.homepage-contact-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-form-field label {
    color: #244867;
    font-size: 11px;
    font-weight: 800;
}

.contact-form-field input,
.contact-form-field textarea {
    width: 100%;

    padding: 13px 14px;

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

    background: #ffffff;
    color: #163b5d;

    font-family: inherit;
    font-size: 12px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-form-field input {
    height: 46px;
}

.contact-form-field textarea {
    min-height: 125px;
    resize: vertical;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
    border-color: #0877ff;

    box-shadow:
        0 0 0 3px rgba(8, 119, 255, 0.10);
}


/* SEND BUTTON */

.contact-submit-button {
    min-height: 48px;

    border: none;
    border-radius: 9px;

    background: #0877ff;
    color: #ffffff;

    cursor: pointer;

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

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.contact-submit-button:hover {
    background: #0068df;
    transform: translateY(-1px);
}


/* FORM SECURITY NOTE */

.contact-form-note {
    margin: 17px 0 0;
    padding-top: 15px;

    border-top: 1px solid #dce6ef;

    color: #8293a4;
    font-size: 10px;
    line-height: 1.6;
}


/* ==================================================
   CONTACT MOBILE
================================================== */

@media (max-width: 850px) {

    .homepage-contact-section {
        padding: 60px 20px;
    }

    .homepage-contact-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .homepage-contact-form-box {
        padding: 24px;
    }

    .homepage-contact-info h2 {
        font-size: 28px;
    }
}
.contact-form-messages {
    margin-bottom: 18px;
}

.contact-form-message {
    padding: 13px 15px;
    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.contact-form-message.success {
    border: 1px solid #b9e8cc;
    background: #eaf9f0;
    color: #087a43;
}

.contact-form-message.error {
    border: 1px solid #f0c1c1;
    background: #fff1f1;
    color: #b42323;
}
/* ==================================================
   DOCUMENT RISK CHECK PAGE
================================================== */

.document-risk-body {
    margin: 0;
    background: #f5f8fc;
    color: #16324f;
    font-family: Arial, Helvetica, sans-serif;
}


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

.document-risk-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height: 82px;

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

    padding: 0 7%;

    background: #ffffff;
    border-bottom: 1px solid #e4ebf3;

    box-shadow:
        0 4px 18px
        rgba(20, 50, 80, 0.07);
}

.document-risk-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    text-decoration: none;
}

.document-risk-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.document-risk-brand strong {
    display: block;

    color: #07366a;

    font-size: 18px;
    font-weight: 900;
}

.document-risk-brand span {
    display: block;

    margin-top: 3px;

    color: #6d8196;

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

.document-risk-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-risk-home-link,
.document-risk-jobs-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    border-radius: 8px;

    text-decoration: none;

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

.document-risk-home-link {
    color: #294965;
}

.document-risk-home-link:hover {
    color: #0877ff;
}

.document-risk-jobs-link {
    background: #0877ff;
    color: #ffffff;

    box-shadow:
        0 5px 15px
        rgba(8, 119, 255, 0.18);
}

.document-risk-jobs-link:hover {
    background: #0068df;
}


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

.document-risk-hero {
    padding: 58px 7%;

    background:
        linear-gradient(
            115deg,
            #073665 0%,
            #0755a3 58%,
            #0877ff 100%
        );

    color: #ffffff;
}

.document-risk-hero-inner {
    max-width: 1180px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.document-risk-hero-content {
    max-width: 720px;
}

.document-risk-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #9dd0ff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.9px;
}

.document-risk-hero h1 {
    margin: 0 0 14px;

    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
}

.document-risk-hero p {
    max-width: 700px;

    margin: 0;

    color: #dcecff;

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


/* HERO BADGE */

.document-risk-hero-badge {
    min-width: 245px;

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

    padding: 17px 20px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 13px;

    background: rgba(255,255,255,0.10);

    backdrop-filter: blur(6px);
}

.document-risk-hero-badge > span {
    width: 43px;
    height: 43px;

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

    border-radius: 11px;

    background: rgba(255,255,255,0.14);

    font-size: 20px;
}

.document-risk-hero-badge strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
}

.document-risk-hero-badge small {
    display: block;

    margin-top: 4px;

    color: #c9e3ff;

    font-size: 9px;
}


/* ==================================================
   IMPORTANT NOTICE
================================================== */

.document-risk-notice-wrapper {
    padding: 24px 7% 0;
}

.document-risk-notice {
    max-width: 1180px;
    margin: 0 auto;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 17px 19px;

    border: 1px solid #f2cf95;
    border-radius: 12px;

    background: #fff8ea;
}

.document-risk-notice-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;

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

    border-radius: 50%;

    background: #f59e0b;
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.document-risk-notice strong {
    display: block;

    margin-bottom: 4px;

    color: #9a5b00;

    font-size: 12px;
}

.document-risk-notice p {
    margin: 0;

    color: #765925;

    font-size: 10.5px;
    line-height: 1.6;
}


/* ==================================================
   MAIN LAYOUT
================================================== */

.document-risk-main {
    padding: 30px 7% 70px;
}

.document-risk-grid {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);

    gap: 24px;
    align-items: start;
}


/* ==================================================
   UPLOAD CARD
================================================== */

.document-upload-card {
    padding: 30px;

    background: #ffffff;

    border: 1px solid #dce7f2;
    border-radius: 17px;

    box-shadow:
        0 12px 32px
        rgba(20, 55, 90, 0.08);
}

.document-upload-heading {
    margin-bottom: 25px;
}

.document-upload-heading > span {
    display: block;

    margin-bottom: 7px;

    color: #0877ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.document-upload-heading h2 {
    margin: 0 0 7px;

    color: #0c3763;

    font-size: 25px;
    font-weight: 900;
}

.document-upload-heading p {
    margin: 0;

    color: #6d8196;

    font-size: 11px;
}


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

.document-risk-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.document-risk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 16px;
}

.document-risk-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.document-risk-field label {
    color: #244867;

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

.document-risk-field input,
.document-risk-field select {
    width: 100%;
    height: 46px;

    padding: 0 13px;

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

    background: #ffffff;
    color: #163b5d;

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.document-risk-field input:focus,
.document-risk-field select:focus {
    border-color: #0877ff;

    box-shadow:
        0 0 0 3px
        rgba(8, 119, 255, 0.09);
}


/* ==================================================
   DROP ZONE
================================================== */

.document-drop-zone {
    position: relative;

    min-height: 235px;

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

    padding: 30px;

    border: 2px dashed #b9d5ef;
    border-radius: 14px;

    background: #f7fbff;

    text-align: center;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.document-drop-zone:hover {
    border-color: #0877ff;
    background: #f1f7ff;
}

.document-drop-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 12px;

    border-radius: 15px;

    background: #e8f3ff;

    font-size: 27px;
}

.document-drop-zone h3 {
    margin: 0 0 6px;

    color: #123c65;

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

.document-drop-zone p {
    margin: 0 0 17px;

    color: #8497a9;

    font-size: 10px;
}

.document-drop-zone input[type="file"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    overflow: hidden;
}

.document-browse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 17px;

    border-radius: 8px;

    background: #0877ff;
    color: #ffffff !important;

    cursor: pointer;

    font-size: 10px !important;
    font-weight: 900 !important;
}

.document-browse-button:hover {
    background: #0068df;
}


/* ==================================================
   SECURITY NOTE
================================================== */

.document-security-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 14px 15px;

    border: 1px solid #d6e8f8;
    border-radius: 10px;

    background: #f3f9ff;
}

.document-security-note span {
    font-size: 16px;
}

.document-security-note p {
    margin: 0;

    color: #55728e;

    font-size: 10px;
    line-height: 1.6;
}


/* ==================================================
   SUBMIT BUTTON
================================================== */

.document-risk-submit {
    width: 100%;
    min-height: 50px;

    border: none;
    border-radius: 9px;

    background: #0877ff;
    color: #ffffff;

    cursor: pointer;

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

    box-shadow:
        0 6px 15px
        rgba(8, 119, 255, 0.18);
}

.document-risk-submit:hover {
    background: #0068df;
}


/* ==================================================
   RIGHT COLUMN
================================================== */

.document-risk-info-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.document-risk-info-card,
.document-risk-result-preview,
.document-risk-help-card {
    padding: 24px;

    background: #ffffff;

    border: 1px solid #dce7f2;
    border-radius: 15px;

    box-shadow:
        0 8px 24px
        rgba(20, 55, 90, 0.05);
}

.document-risk-info-label {
    display: block;

    margin-bottom: 8px;

    color: #0877ff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.document-risk-info-card h2 {
    margin: 0 0 18px;

    color: #123c65;

    font-size: 18px;
    font-weight: 900;
}


/* CHECK LIST */

.document-risk-check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-risk-check-list div {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #547088;

    font-size: 10.5px;
    line-height: 1.45;
}

.document-risk-check-list span {
    width: 20px;
    height: 20px;
    min-width: 20px;

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

    border-radius: 50%;

    background: #e7f8ef;
    color: #0b9b58;

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


/* ==================================================
   RESULT PREVIEW
================================================== */

.document-risk-result-preview h3 {
    margin: 0 0 7px;

    color: #123c65;

    font-size: 16px;
    font-weight: 900;
}

.document-risk-result-preview > p {
    margin: 0 0 18px;

    color: #687f95;

    font-size: 10.5px;
    line-height: 1.6;
}

.risk-preview-scale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 7px;
}

.risk-preview-scale div {
    padding: 12px 7px;

    border-radius: 9px;

    background: #f5f8fc;

    text-align: center;
}

.risk-preview-scale strong {
    display: block;

    margin-bottom: 4px;

    color: #173c5e;

    font-size: 10px;
}

.risk-preview-scale span {
    color: #7a8da0;

    font-size: 8.5px;
}


/* ==================================================
   HELP CARD
================================================== */

.document-risk-help-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: #eef6ff;
}

.document-risk-help-card > span {
    width: 36px;
    height: 36px;
    min-width: 36px;

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

    border-radius: 50%;

    background: #0877ff;
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.document-risk-help-card strong {
    display: block;

    margin-bottom: 4px;

    color: #123c65;

    font-size: 11px;
}

.document-risk-help-card p {
    margin: 0;

    color: #5d7790;

    font-size: 9.5px;
    line-height: 1.55;
}


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

@media (max-width: 900px) {

    .document-risk-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .document-risk-hero-badge {
        width: 100%;
    }

    .document-risk-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 650px) {

    .document-risk-header {
        padding: 0 18px;
    }

    .document-risk-brand strong {
        font-size: 15px;
    }

    .document-risk-brand span {
        display: none;
    }

    .document-risk-home-link {
        display: none;
    }

    .document-risk-hero {
        padding: 45px 20px;
    }

    .document-risk-notice-wrapper,
    .document-risk-main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .document-risk-hero h1 {
        font-size: 30px;
    }

    .document-risk-row {
        grid-template-columns: 1fr;
    }

    .document-upload-card {
        padding: 22px;
    }

    .risk-preview-scale {
        grid-template-columns: 1fr;
    }

}