/* =====================================================
   SHQELA JOB LISTING
===================================================== */


/* Main Wrapper */

.shqela-jobs-list {

    max-width:1200px;

    margin:50px auto;

    padding:20px;

}





/* Header */

.shqela-jobs-header {

    margin-bottom:40px;

}



.shqela-jobs-header h2 {

    font-size:36px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;

}



.shqela-jobs-header p {

    color:#6b7280;

    font-size:17px;

}







/* Grid */

.shqela-jobs-grid {

    display:grid;

    grid-template-columns:

    repeat(3, 1fr);

    gap:28px;

}







/* Job Card */

.shqela-job-card {

    background:#ffffff;

    border-radius:24px;

    padding:28px;

    border:1px solid #e5e7eb;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.06);

    transition:.3s ease;

    display:flex;

    flex-direction:column;

}



.shqela-job-card:hover {

    transform:translateY(-6px);

    box-shadow:

    0 20px 45px rgba(0,0,0,0.12);

    border-color:#2563eb;

}







/* Card Header */

.shqela-job-card-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    margin-bottom:20px;

}




.shqela-job-title-area {

    display:flex;

    flex-direction:column;

    gap:8px;

}



.shqela-job-title-area h3 {

    margin:0;

    font-size:21px;

    line-height:1.4;

}



.shqela-job-title-area h3 a {

    color:#111827;

    text-decoration:none;

}



.shqela-job-title-area h3 a:hover {

    color:#2563eb;

}
/* Date Badge */

.shqela-job-date {

    background:#f3f4f6;

    color:#6b7280;

    padding:7px 12px;

    border-radius:20px;

    font-size:13px;

    white-space:nowrap;

}





/* New Badge */

.shqela-new-badge {

    display:inline-block;

    width:max-content;

    background:#dcfce7;

    color:#166534;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}





/* Description */

.shqela-job-description {

    color:#4b5563;

    font-size:15px;

    line-height:1.7;

    margin-bottom:25px;

}





/* Meta Area */

.shqela-job-meta {

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:20px 0;

    border-top:1px solid #f1f5f9;

    border-bottom:1px solid #f1f5f9;

    margin-bottom:20px;

}




.shqela-meta-item {

    display:flex;

    align-items:center;

    gap:10px;

    color:#374151;

    font-size:14px;

    font-weight:600;

}




.shqela-meta-icon {

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    border-radius:10px;

}







/* Skills */

.shqela-job-skills {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:25px;

}





.shqela-skill-tag {

    background:#f1f5f9;

    color:#334155;

    padding:7px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}








/* Footer */

.shqela-job-footer {

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}





.shqela-job-employer {

    display:flex;

    align-items:center;

    gap:12px;

}



.shqela-job-employer span {

    display:block;

    color:#9ca3af;

    font-size:12px;

}





.shqela-job-employer strong {

    display:block;

    color:#111827;

    font-size:14px;

}








/* Avatar */

.shqela-employer-avatar {

    width:45px;

    height:45px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #ffffff;

    box-shadow:

    0 3px 10px rgba(0,0,0,.12);

}








/* View Button */

.shqela-view-job {

    background:#2563eb;

    color:#ffffff!important;

    padding:12px 18px;

    border-radius:12px;

    text-decoration:none!important;

    font-weight:700;

    font-size:14px;

    transition:.3s ease;

}



.shqela-view-job:hover {

    background:#1d4ed8;

    transform:translateY(-2px);

}
/* Empty State */

.shqela-no-jobs {

    background:#ffffff;

    border-radius:24px;

    padding:50px;

    text-align:center;

    border:1px solid #e5e7eb;

    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}



.shqela-no-jobs h3 {

    font-size:26px;

    color:#111827;

    margin-bottom:10px;

}



.shqela-no-jobs p {

    color:#6b7280;

}







/* =====================================================
   TABLET
===================================================== */

@media(max-width:1024px){


    .shqela-jobs-grid {

        grid-template-columns:

        repeat(2, 1fr);

    }


}








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

@media(max-width:768px){



    .shqela-jobs-list {

        padding:15px;

        margin:30px auto;

    }




    .shqela-jobs-header h2 {

        font-size:28px;

    }




    .shqela-jobs-grid {

        grid-template-columns:1fr;

        gap:20px;

    }




    .shqela-job-card {

        padding:22px;

        border-radius:20px;

    }




    .shqela-job-card-header {

        flex-direction:column;

    }




    .shqela-job-footer {

        flex-direction:column;

        align-items:stretch;

    }




    .shqela-view-job {

        text-align:center;

        width:100%;

    }



}







/* =====================================================
   DARK THEME COMPATIBILITY
===================================================== */

body.dark-mode .shqela-job-card {

    background:#111827;

    border-color:#1f2937;

}



body.dark-mode .shqela-job-title-area h3 a,

body.dark-mode .shqela-job-employer strong {

    color:#ffffff;

}



body.dark-mode .shqela-job-description,

body.dark-mode .shqela-meta-item {

    color:#d1d5db;

}