/* =========================================
   NOUKRIWALE.COM - COMPACT MOBILE NAV (V7.0)
   ========================================= */

/* --- 1. Global Styles --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

a { text-decoration: none; color: #0056b3; }
a:hover { text-decoration: underline; }

/* --- 2. Header & Logo --- */
header.new-header {
    background-color: #0056b3;
    padding: 15px 0;
    text-align: center;
    border-bottom: 4px solid #004a99;
}
header.new-header h1 { margin: 0; font-size: 30px; font-weight: 700; }
header.new-header h1 a { color: #ffffff; text-decoration: none; }
header.new-header p { color: #e0e0e0; font-size: 13px; margin-top: 5px; }

/* --- 3. Navigation Menu (Desktop) --- */
nav.new-nav {
    background-color: #333;
    color: #fff;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    position: relative; /* For absolute search positioning */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 50px; /* Fixed height for slim look */
}

/* Menu Links */
nav.new-nav ul.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

nav.new-nav ul.nav-links li {
    height: 100%;
    display: flex;
    align-items: center;
}

nav.new-nav ul.nav-links li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap; /* टेक्स्ट को टूटने से रोकेगा */
}
nav.new-nav ul.nav-links li a:hover { background-color: #555; }

/* Search Bar (Desktop) */
.search-container {
    display: flex;
    margin-right: 10px;
}
.search-container input[type="text"] {
    padding: 6px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}
.search-container button {
    padding: 6px 12px;
    border: none;
    background-color: #0056b3;
    color: white;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    font-weight: bold;
}

/* Mobile Search Icon (Hidden on Desktop) */
.mobile-search-icon {
    display: none;
    color: white;
    font-size: 20px;
    padding: 0 15px;
    cursor: pointer;
    height: 100%;
    align-items: center;
}

/* --- 4. Hot Job Buttons --- */
.hot-links-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}
.hot-link-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 4px;
    min-height: 40px;
    font-size: 12px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    line-height: 1.2;
}
.hot-link-box:hover { transform: translateY(-2px); }
.color-1 { background-color: #D32F2F; } 
.color-2 { background-color: #FF851B; }
.color-3 { background-color: #8E44AD; } 
.color-4 { background-color: #2ECC40; } 
.color-5 { background-color: #0074D9; } 
.color-6 { background-color: #B10DC9; } 

/* --- 5. Layout & Content --- */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: start; }
.content-box { background: #ffffff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.box-header { padding: 8px; text-align: center; }
.box-header h2 { margin: 0; font-size: 18px; color: #fff; font-weight: 700; }
#header-latest-jobs { background-color: #0074D9; } 
#header-results { background-color: #D32F2F; } 
#header-admit-card { background-color: #8E44AD; } 
.job-list { list-style: none; padding: 0; margin: 0; }
.job-list li { padding: 10px; border-bottom: 1px solid #eee; }
.job-list li a { color: #0056b3; font-size: 14px; font-weight: 600; display: block; }

/* --- 6. Job Detail Page --- */
.job-detail-box { background: #fff; padding: 15px; border-radius: 8px; }
.job-detail-box h2 { text-align: center; color: #0056b3; font-size: 22px; margin: 0 0 15px 0; font-weight: bold; }
.post-intro { background-color: #e8f4fd; border-left: 4px solid #0056b3; padding: 12px; margin-bottom: 20px; border-radius: 4px; }

/* --- Tables --- */
.pro-table, .sarkari-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 2px solid #0056b3; table-layout: fixed; }
.pro-table th, .pro-table td, .sarkari-table th, .sarkari-table td { border: 1px solid #999; padding: 8px 5px; font-size: 15px; vertical-align: middle; word-wrap: break-word; }
.pro-header, .sarkari-table h2, .sarkari-table h3 { background: linear-gradient(45deg, #0056b3, #004494); color: #fff !important; text-align: center; font-weight: bold; font-size: 16px; padding: 8px; margin: 0; }
.pro-label, .sarkari-table td:first-child { background-color: #f2f2f2; font-weight: bold; color: #333; width: 35%; text-align: left; }
.pro-value, .sarkari-table td:last-child { background-color: #ffffff; color: #000; text-align: center; width: 65%; }

/* Colors & Buttons */
.txt-red { color: #d32f2f !important; font-weight: bold; }
.txt-green { color: #2e7d32 !important; font-weight: bold; }
.txt-blue { color: #0056b3 !important; font-weight: bold; }
.links-section { text-align: center; margin: 20px 0; }
.apply-btn { background-color: #4CAF50; display: inline-block; padding: 10px 15px; color: white !important; border-radius: 4px; font-weight: bold; }
.notify-btn { background-color: #0056b3; display: inline-block; padding: 10px 15px; color: white !important; border-radius: 4px; font-weight: bold; }
.native-share-section { text-align: center; margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }
.share-btn { background-color: #25D366; color: white; border: none; padding: 10px 20px; font-weight: bold; border-radius: 25px; cursor: pointer; }
footer { background-color: #333; color: #ccc; text-align: center; padding: 20px 0; margin-top: 30px; }
.social-links a { color: #fff; font-size: 22px; margin: 0 10px; }
.expired-warning { background-color: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; padding: 20px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px; }
.disabled-link { opacity: 0.6; pointer-events: none; }

/* --- [IMPORTANT] MOBILE RESPONSIVE NAV --- */
@media (max-width: 768px) {
    /* 1. Make Nav Bar Slim & One Line */
    .nav-container {
        flex-wrap: nowrap; /* एक ही लाइन में रखें */
        justify-content: flex-start; /* लेफ्ट से शुरू करें */
        overflow: hidden; /* बाहर निकलने से रोकें */
    }

    /* 2. Horizontal Scrolling Menu */
    nav.new-nav ul.nav-links {
        display: flex;
        flex-grow: 1;
        overflow-x: auto; /* स्क्रॉलिंग चालू */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* टूटे नहीं */
        scrollbar-width: none; /* स्क्रॉल बार छिपाएं */
    }
    nav.new-nav ul.nav-links::-webkit-scrollbar { display: none; } /* Chrome Hide Scrollbar */

    /* 3. Show Search Icon & Hide Search Bar */
    .mobile-search-icon { display: flex; }
    
    .search-container {
        display: none; /* डिफ़ॉल्ट रूप से छिपा हुआ */
        position: absolute;
        top: 50px; /* नेविगेशन के ठीक नीचे */
        left: 0;
        width: 100%;
        background: #333;
        padding: 10px;
        z-index: 999;
        box-sizing: border-box;
        margin: 0;
    }
    .search-container.active { display: flex; } /* JS से चालू होगा */
    .search-container input[type="text"] { width: 75%; }
    .search-container button { width: 25%; }

    /* 4. Other Mobile Fixes */
    .hot-links-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-container { grid-template-columns: 1fr; }
    header.new-header h1 { font-size: 26px; }
    
    /* Table Fix */
    .job-detail-box { overflow-x: auto; }
    .pro-table, .sarkari-table { min-width: 500px; font-size: 13px; table-layout: fixed; }
    .pro-label { width: 35%; } .pro-value { width: 65%; }
}