/* =========================================
   JOB DETAILS PAGE (jd- prefix)
   ========================================= */

.job-details-page-wrapper {
    padding-bottom: 50px;
    background-color: var(--secondary-bg-color);
}

.jd-breadcrumb {
    padding: 20px 0;
    font-size: 0.9rem;
    color: #666;
}
.jd-breadcrumb i { font-size: 0.7rem; margin: 0 8px; }

.jd-grid-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Header Card Style */


.jd-main-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    line-height: 1.3;
}

.jd-quick-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.jd-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jd-info-item i {
    font-size: 1.4rem;
    color: var(--primary-color);
    background: #fff;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.jd-info-item span {
    display: block;
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
}

.deadline-text { color: #d9534f; }

/* Action Area & Buttons */
.jd-action-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.jd-tag {
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}
.jd-tag-cat { background: #e0f2fe; color: #0369a1; margin-right: 10px; }
.jd-tag-status { background: #dcfce7; color: #15803d; }


/* Description Content Area */
.jd-description-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.jd-box-title {
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.jd-content-render {
    line-height: 1.8;
    color: #444;
}

/* Sidebar Custom Social Links */
.jd-social-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jd-soc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
}
.telegram { background: #229ED9; }
.whatsapp { background: #25D366; }

/* =============================
   MOBILE VIEW OPTIMIZATION
   ============================= */
@media (max-width: 992px) {
    .jd-grid-container {
        grid-template-columns: 1fr;
    }
    
    .jd-quick-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jd-action-area {
        flex-direction: column;
        align-items: stretch;
    }

    .jd-btn {
        justify-content: center;
    }
    
    .jd-main-title {
        font-size: 1.4rem;
    }
}



/* Job Description ke andar ke Tables ko mobile-friendly banane ke liye */
.jd-content-render table {
    display: block !important; /* Table ko block banana zaroori hai scroll ke liye */
    width: 100% !important;
    overflow-x: auto !important; /* Side scroll enable karega */
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 20px 0;
    table-layout: auto; /* Data ke hisab se width lega */
}

.jd-content-render table th, 
.jd-content-render table td {
    padding: 12px 15px;
    border: 1px solid #eee;
    text-align: left;
}

.jd-content-render table th {
    background-color: #f4f4f4;
    font-weight: 600;
}


/* =========================================
   JOB DETAILS MOBILE OPTIMIZATION (FIX)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Main container ki padding kam karo taaki content ko jagah mile */
    .job-details-page-wrapper .container {
        padding: 0 10px !important;
    }

    /* 2. Description box ki padding kam karo (30px se 15px) */
    .jd-description-box {
        padding: 15px !important;
        border-radius: 8px;
    }

    /* 3. Tables ko readable banao */
   .jd-content-render {
    overflow-x: hidden; /* Bahar jaane wala extra space kaat dega */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; /* Lambe titles aur links ko wrap karega */
}

    .jd-content-render table td, 
    .jd-content-render table th {
        padding: 8px 5px !important; /* Cell ki padding kam karo */
        word-break: break-word; /* Lamba text breakdown ho jaye */
        max-width: 100% !important; /* Koi bhi cheez box se badi nahi hogi */
    box-sizing: border-box !important;
    }

    /* 4. Title size adjust karo */
    .jd-main-title {
        font-size: 1.3rem !important;
        margin-bottom: 15px;
    }

    /* 5. Quick Info boxes (Org, Vacancy, Date) ko 2 column ya full width */
    .jd-quick-info {
        grid-template-columns: 1fr !important;
        padding: 15px !important;
        gap: 12px !important;
    }

    /* 6. Description ke andar ki images ko responsive karo */
    .jd-content-render img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Table Scroll Fix: Agar table ab bhi screen se bahar jaye */
.jd-content-render {
    overflow-x: hidden;
}

/* Taaki mobile par user ko pata chale ki table scroll ho sakta hai */
.jd-content-render table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



/* =========================================
   JOB DETAILS PAGE (jd- prefix)
   ========================================= */

.jd-header-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 25px;
    border-top: none; /* Orange Patti Hata Di */
}

/* Button size chhota kiya aur hover fix kiya */
.jd-btn {
    padding: 8px 20px; /* Padding kam ki size chhota karne ke liye */
    font-size: 0.95rem; /* Font size thoda adjust kiya */
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

/* Apply Online Button Style */
.jd-btn-apply {
    background: var(--primary-color);
}

/* Hover effect badal diya (Orange nahi hoga ab) */
.jd-btn-apply:hover {
    background: #1f2430; /* Navy Blue/Dark shade for hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    color: #fff;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .jd-main-title {
        font-size: 1.25rem; /* SEO Friendly mobile size */
        line-height: 1.4;
    }
    
    .jd-btn {
        width: 100%; /* Mobile par full width button click karne mein easy hote hain */
        justify-content: center;
        padding: 10px;
    }
}

/* --- Teeno Buttons ki Common Background (Orange) --- */
.jd-btn-apply, 
.jd-btn-result, 
.jd-btn-admit {
    background: var(--primary-color);
    color: #fff !important; /* Force white text */
}

/* --- Hover Effect (Navy Blue) --- */
.jd-btn-apply:hover, 
.jd-btn-result:hover, 
.jd-btn-admit:hover {
    background: #1f2430; /* Navy Blue hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    color: #fff !important;
}

/* Agar aap Result aur Admit Card ke liye alag color chahte hain (Optional) */
/*
.jd-btn-result { background: #28a745; } 
.jd-btn-admit { background: #17a2b8; } 
*/

.job-details-page-wrapper {
    padding-top: 30px; /* Ye header aur content ke beech gap banayega */
    padding-bottom: 50px;
    background-color: var(--secondary-bg-color);
}

/* Mobile par agar space zyada lage toh thoda kam kar sakte ho */
@media (max-width: 768px) {
    .job-details-page-wrapper {
        padding-top: 15px;
    }
}


@media (max-width: 768px) {
    /* Header card ki padding aur margin set karein */
    .jd-header-card {
        padding: 15px !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }

    /* Info items ko stack karein */
    .jd-quick-info {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .jd-info-item i {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.1rem !important;
    }
   
    .guide1-v2-header h2{
        font-size: 2rem !important;
}

}
.jdx-box-title{
        border-bottom: 2px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 20px;
    font-size: 1.3rem;
    padding-top: 2rem;
    font-size: 2.5rem !important;
}

.guide1-v2-header h2{
        font-size: 2rem;
    font-weight: 700;
    text-align: center;
}