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

.job-details{
    padding:4rem 0;
    background:var(--bg);
}

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

.job-hero{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:2rem;

    padding:2rem;

    background:var(--bg-card);

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    margin-bottom:2rem;

    position:relative;
    overflow:hidden;
}

.job-hero::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--brand-primary),
        var(--brand-accent)
    );
}
.job-hero{

    display:grid;
    grid-template-columns:100px 1fr auto;
    gap:1.5rem;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            rgba(200,29,79,.05),
            rgba(255,138,61,.03)
        );

    backdrop-filter:blur(10px);
}
.job-company{

    display:inline-flex;

    align-items:center;

    padding:.5rem 1rem;

    background:rgba(200,29,79,.08);

    color:var(--brand-primary);

    border-radius:999px;

    font-size:.875rem;
    font-weight:600;

    margin-bottom:1rem;
}
.job-company-logo{

    width:100px;
    height:100px;

    flex-shrink:0;
}

.job-company-logo img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:20px;

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

    background:#fff;
}

.job-logo-placeholder{

    width:100%;
    height:100%;

    border-radius:20px;

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

    background:
        linear-gradient(
            135deg,
            var(--brand-primary),
            var(--brand-accent)
        );

    color:#fff;

    font-size:2rem;

    box-shadow:var(--shadow-md);
}

.job-hero-content{
    min-width:0;
}
.job-hero h1{

    font-size:2rem;
    font-weight:800;

    line-height:1.25;

    color:var(--text);

    margin-bottom:1rem;
}

.job-hero-meta{

    display:flex;
    flex-wrap:wrap;

    gap:1rem;
}

.job-hero-meta span{

    display:flex;
    align-items:center;
    gap:.5rem;

    color:var(--text-muted);

    font-size:.95rem;
}

.job-hero-meta i{
    color:var(--brand-primary);
}

/* =========================================================
   SALARY BOX
========================================================= */
.salary-box{

    min-width:240px;

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.12),
            rgba(22,163,74,.03)
        );

    text-align:center;
}

.salary-box small{

    display:block;

    color:var(--text-muted);

    margin-bottom:.5rem;

    text-transform:uppercase;

    letter-spacing:1px;
}

.salary-amount{

    color:var(--success);

    font-size:1.75rem;

    font-weight:800;

    line-height:1.3;
}

/* =========================================================
   MAIN CARDS
========================================================= */

.job-card{

    background:var(--bg-card);

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

    border-radius:var(--radius-md);

    padding:1.75rem;

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

    margin-bottom:1.5rem;
}

.job-card h3{

    font-size:1.25rem;
    font-weight:700;

    color:var(--text);

    margin-bottom:1rem;

    padding-bottom:.75rem;

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

.job-card p{

    color:var(--text-soft);

    line-height:1.8;

    margin-bottom:0;
}
.job-card{

    transition:var(--transition);
}

.job-card:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);
}
.job-sidebar ul li{

    display:flex;

    justify-content:space-between;

    gap:1rem;
}

.job-sidebar ul li strong{

    color:var(--text);
}
/* =========================================================
   SKILLS
========================================================= */

.skill-list{

    display:flex;
    flex-wrap:wrap;

    gap:.75rem;
}

.skill-list span{

    padding:.55rem 1rem;

    border-radius:999px;

    background:var(--bg-soft);

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

    color:var(--text-soft);

    font-size:.875rem;
    font-weight:500;

    transition:var(--transition);
}

.skill-list span:hover{

    background:rgba(200,29,79,.08);

    border-color:rgba(200,29,79,.20);

    color:var(--brand-primary);
}

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

.job-sidebar{

    background:var(--bg-card);

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

    border-radius:var(--radius-md);

    padding:1.5rem;

    margin-bottom:1.5rem;

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

    position:sticky;
    top:100px;
}

.job-sidebar h4{

    font-size:1.1rem;
    font-weight:700;

    color:var(--text);

    margin-bottom:1rem;

    padding-bottom:.75rem;

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

.job-sidebar ul{

    list-style:none;

    padding:0;
    margin:0;
}

.job-sidebar li{

    padding:.85rem 0;

    color:var(--text-soft);

    border-bottom:1px dashed var(--border);

    font-size:.95rem;
}

.job-sidebar li:last-child{
    border-bottom:none;
}

/* =========================================================
   LOCATION TAGS
========================================================= */

.location-tag{

    display:inline-flex;

    align-items:center;

    padding:.45rem .9rem;

    margin:.25rem;

    border-radius:999px;

    background:var(--bg-soft);

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

    color:var(--text-soft);

    font-size:.85rem;
    font-weight:500;
}
.location-tag{

    transition:var(--transition);
}

.location-tag:hover{

    background:rgba(200,29,79,.08);

    color:var(--brand-primary);

    border-color:rgba(200,29,79,.2);
}
/* =========================================================
   APPLY BUTTONS
========================================================= */

.job-sidebar .btn{

    border-radius:12px;

    padding:.85rem 1rem;

    font-weight:600;
}

.btn-brand{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

    color:#fff;
}

.btn-brand:hover{

    background:var(--brand-primary-dark);

    border-color:var(--brand-primary-dark);

    color:#fff;
}

/* =========================================================
   RELATED JOBS
========================================================= */
.related-loading{

    padding:2rem;

    background:var(--bg-card);

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

    border-radius:var(--radius-md);

    text-align:center;

    box-shadow:var(--shadow-sm);
}
#relatedJobs{

    margin-top:3rem;
}

.related-jobs-title{

    font-size:1.75rem;
    font-weight:700;

    color:var(--text);

    margin-bottom:1.5rem;
}

.related-job-card{

    background:var(--bg-card);

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

    border-radius:var(--radius-md);

    padding:1.5rem;

    transition:var(--transition);

    height:100%;
}

.related-job-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);
}

.related-job-card h5{

    font-size:1rem;
    font-weight:700;

    color:var(--text);

    margin-bottom:.75rem;
}

.related-job-card p{

    color:var(--text-muted);

    margin-bottom:1rem;
}

.related-job-card .salary{

    color:var(--success);

    font-weight:700;
}
.related-job-card{

    overflow:hidden;

    position:relative;
}

.related-job-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--brand-primary),
            var(--brand-accent)
        );
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:991px){

    .job-hero{

        grid-template-columns:1fr;
    }

    .job-company-logo{

        width:80px;
        height:80px;
    }

    .salary-box{

        width:100%;
    }

}

@media (max-width:576px){

    .job-company-logo{

        width:70px;
        height:70px;
    }

    .job-logo-placeholder{

        font-size:1.5rem;
    }

    .salary-amount{

        font-size:1.4rem;
    }

}
@media (max-width:991.98px){

    .job-hero{

        flex-direction:column;
    }

    .salary-box{

        width:100%;

        min-width:100%;
    }

    .job-sidebar{

        position:relative;
        top:auto;
    }

}

@media (max-width:767.98px){

    .job-details{
        padding:2rem 0;
    }

    .job-hero{

        padding:1.5rem;
    }

    .job-hero h1{

        font-size:1.6rem;
    }

    .job-hero-meta{

        flex-direction:column;
        gap:.75rem;
    }

    .job-card{

        padding:1.25rem;
    }

    .job-sidebar{

        padding:1.25rem;
    }

    .salary-box{

        font-size:1.25rem;
    }

}

@media (max-width:575.98px){

    .job-company{

        font-size:.8rem;
    }

    .job-hero h1{

        font-size:1.35rem;
    }

    .skill-list{

        gap:.5rem;
    }

    .skill-list span{

        font-size:.8rem;
        padding:.45rem .8rem;
    }

    .location-tag{

        font-size:.8rem;
    }

}