@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

html {
    overflow-x: hidden;
}
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    overflow-x: hidden;
    max-width: 100%;
}

/* Premium Top Notification Bar (وی آئی پی ٹاپ بار) */
.top-bar {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: #e2e8f0;
    font-size: 12px;
    padding: 8px 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar-text {
    font-weight: 600;
    letter-spacing: 0.2px;
}
.top-bar-time {
    color: #94a3b8;
}

/* Premium Navbar Styling (مینیو بار) */
.navbar {
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
}

/* Tri-Tone Premium Logo Text (تھری ٹون پریمیم لوگو ٹیکسٹ) */
.brand-logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    letter-spacing: -0.5px;
    text-decoration: none !important;
}
.brand-dream {
    font-weight: 500;
    color: #64748b; /* Slate Gray */
}
.brand-abroad {
    font-weight: 800;
    color: #0056b3; /* Deep Royal Blue */
}
.brand-jobs {
    font-weight: 800;
    color: #f59e0b; /* Bright Golden Orange */
}

/* Modern Hamburger Toggler (گول موبائل مینیو بٹن) */
.custom-navbar-toggler {
    background: #f1f5f9;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}
.custom-navbar-toggler:hover {
    background: #e2e8f0;
    transform: scale(1.08);
}
.custom-navbar-toggler:active {
    transform: scale(0.92);
}
.custom-toggler-icon {
    color: #0056b3;
    font-size: 18px;
}

.nav-link {
    font-weight: 600;
    font-size: 14px;
    color: #475569 !important;
    padding: 8px 16px !important;
}

/* Centered Search Card Container */
.search-card-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.06), 0 10px 20px -10px rgba(15, 23, 42, 0.03);
    padding: 50px 30px;
    text-align: center;
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 45px;
}
.search-card-container h1 {
    font-weight: 800;
    font-size: 36px;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: -1px;
    line-height: 1.25;
}
.search-card-container p {
    color: #64748b;
    font-size: 17px;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Premium Search Input Wrapper */
.search-input-wrapper {
    position: relative;
    max-width: 550px;
    margin: 0 auto;
}
.search-input-wrapper i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    transition: color 0.2s ease;
}
.search-input-box {
    width: 100%;
    padding: 14px 15px 14px 50px !important;
    border-radius: 50px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    transition: all 0.3s ease !important;
}
.search-input-box:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    background-color: #ffffff !important;
}
.search-input-box:focus + i {
    color: #2563eb;
}

/* Premium Blue Pill Button */
.search-btn-premium {
    background: linear-gradient(135deg, #0056b3 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 13px 40px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    margin-top: 15px;
}
.search-btn-premium:hover {
    background: linear-gradient(135deg, #004085 0%, #1d4ed8 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
}

/* Browse by Country & Category Pills */
.browse-title {
    font-weight: 800;
    font-size: 20px;
    color: #0f172a;
    margin-bottom: 20px;
}
.browse-pill {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 11px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin: 6px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01);
}
.browse-pill:hover {
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

/* Job Card Design */
.custom-job-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}
.custom-job-card h4 {
    font-weight: 700;
    color: #0056b3;
    font-size: 20px;
    margin-bottom: 12px;
}
.custom-job-card p {
    font-size: 15px;
    margin-bottom: 8px;
    color: #475569;
}
.custom-job-card strong {
    color: #0f172a;
}
.view-details-btn {
    background-color: #0056b3;
    color: white;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s;
}
.view-details-btn:hover {
    background-color: #004085;
    color: white;
}

/* Sidebar Widget */
.sidebar-widget {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    margin-bottom: 24px;
}
.widget-title {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.related-widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #ffffff;
    font-size: 14px;
    margin-right: 10px;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}

.related-job-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.related-job-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0056b3 0%, #2563eb 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.related-job-card:hover {
    border-color: #93c5fd;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, 0.18);
}
.related-job-card:hover::before {
    opacity: 1;
}
.related-job-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0056b3 0%, #2563eb 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.related-job-info {
    min-width: 0;
}
.related-job-info h6 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 4px;
    padding-right: 34px;
}
.related-job-info .org-name {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}
.related-job-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.related-job-meta span {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.related-job-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: .3px;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
    z-index: 2;
}

/* ══ MOBILE RESPONSIVE ══════════════════════════════════════ */
@media (max-width: 768px) {

    /* Search card */
    .search-card-container {
        padding: 24px 16px !important;
        margin-bottom: 24px !important;
        border-radius: 14px !important;
    }

    /* Heading - yahan asli masla tha, 36px → 22px */
    .search-card-container h1 {
        font-size: 22px !important;
        letter-spacing: -0.3px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    /* Subtitle */
    .search-card-container p {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    /* Search input */
    .search-input-box {
        font-size: 14px !important;
        padding: 11px 14px 11px 44px !important;
    }

    /* Search button */
    .search-btn-premium {
        width: 100% !important;
        padding: 11px 20px !important;
        font-size: 14px !important;
        margin-top: 10px !important;
    }

    /* Browse pills chhote */
    .browse-pill {
        font-size: 12px !important;
        padding: 7px 12px !important;
        margin: 3px !important;
    }

    /* Browse title */
    .browse-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Job card */
    .custom-job-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .custom-job-card h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .custom-job-card p {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    /* Sidebar */
    .sidebar-widget {
        padding: 16px !important;
        margin-top: 16px;
    }
}

@media (max-width: 480px) {

    /* Bahut chhoti screen pe aur chhota */
    .search-card-container h1 {
        font-size: 18px !important;
    }

    .search-card-container {
        padding: 18px 12px !important;
    }

    /* Browse pills aur chhote */
    .browse-pill {
        font-size: 11px !important;
        padding: 6px 10px !important;
        margin: 2px !important;
    }
}
/* ============================================================
   MOVED FROM header.php INLINE <style> BLOCK (Core Web Vitals fix, audit sec 4.5 - repeat-visitor caching)
   ============================================================ */
/* ── TICKER ── */
.hot-ticker-bar{background:#1a1f36;color:#fff;padding:8px 0;display:flex;align-items:center;overflow:hidden;width:100%;position:relative;z-index:1050}
.hot-label{display:flex;align-items:center;gap:6px;background:#1a1f36;padding:0 14px;white-space:nowrap;flex-shrink:0;font-size:13px;font-weight:700;border-right:2px solid #f59e0b;z-index:2}
.hot-label .fire-icon{font-size:16px;animation:fireFlicker 1s infinite alternate}
.hot-label span{color:#f59e0b;text-transform:uppercase;letter-spacing:.5px}
@keyframes fireFlicker{from{transform:scale(1);opacity:1}to{transform:scale(1.2);opacity:.8}}
.ticker-wrap{flex:1;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:tickerScroll 30s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:7px;padding:0 30px;font-size:13px;white-space:nowrap}
.ticker-item .dot{width:5px;height:5px;background:#f59e0b;border-radius:50%}
.ticker-item a{color:#f1f5f9;text-decoration:none;font-weight:500}
.ticker-item a:hover{color:#f59e0b}
.badge-hot{background:#f59e0b;color:#1a1f36;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;text-transform:uppercase;animation:badgeBlink 1s infinite}
.badge-new{background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;text-transform:uppercase;animation:badgeBlink 1s infinite}
@keyframes badgeBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
body.dark-mode .hot-ticker-bar,body.dark-mode .hot-label{background:#020617}

/* ── DESKTOP NAVBAR ── */
.navbar{background:#fff;box-shadow:0 2px 15px rgba(0,0,0,.08);padding:10px 0;transition:all .3s}
.navbar .nav-link{color:#475569;font-weight:600;font-size:14px;padding:8px 15px!important;transition:all .3s;position:relative}
.navbar .nav-link:hover{color:#0056b3}
.navbar .nav-link.active{color:#0056b3!important;font-weight:700!important}
.navbar .nav-link.active::after{content:'';position:absolute;bottom:0;left:15px;right:15px;height:2px;background:#0056b3}
.brand-logo-text{text-decoration:none;font-size:22px;font-weight:700;display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.brand-dream{color:#0056b3;font-weight:800;animation:dreamShine 3s ease-in-out infinite}
.brand-abroad{color:#f59e0b;font-weight:800;animation:abroadShine 3s ease-in-out infinite .6s}
.brand-jobs{color:#10b981;font-weight:800;animation:jobsShine 3s ease-in-out infinite 1.2s}
@keyframes dreamShine{0%,100%{filter:brightness(1);text-shadow:none}50%{filter:brightness(1.4);text-shadow:0 0 14px rgba(0,86,179,.8),0 0 28px rgba(0,86,179,.4)}}
@keyframes abroadShine{0%,100%{filter:brightness(1);text-shadow:none}50%{filter:brightness(1.4);text-shadow:0 0 14px rgba(245,158,11,.9),0 0 28px rgba(245,158,11,.45)}}
@keyframes jobsShine{0%,100%{filter:brightness(1);text-shadow:none}50%{filter:brightness(1.4);text-shadow:0 0 14px rgba(16,185,129,.8),0 0 28px rgba(16,185,129,.4)}}
body.dark-mode .brand-dream{color:#60a5fa}
body.dark-mode .brand-abroad{color:#fbbf24}
body.dark-mode .brand-jobs{color:#34d399}
.hero-brand-dream{color:#0056b3;font-weight:800;animation:dreamShine 3s ease-in-out infinite}
.hero-brand-abroad{color:#f59e0b;font-weight:800;animation:abroadShine 3s ease-in-out infinite .6s}
.hero-brand-jobs{color:#10b981;font-weight:800;animation:jobsShine 3s ease-in-out infinite 1.2s}
body.dark-mode .hero-brand-dream{color:#60a5fa}
body.dark-mode .hero-brand-abroad{color:#fbbf24}
body.dark-mode .hero-brand-jobs{color:#34d399}
#darkModeToggle,#translateBtn{border:1px solid #dee2e6;padding:6px 12px;transition:all .3s;background:transparent;color:#333;cursor:pointer;border-radius:50px}
#darkModeToggle:hover,#translateBtn:hover{background:#f8f9fa}
.dropdown-menu{border:none;box-shadow:0 5px 20px rgba(0,0,0,.1);border-radius:8px;padding:8px 0}
.dropdown-item{padding:8px 20px;font-size:14px;transition:all .2s;cursor:pointer}
.dropdown-item:hover{background:#f0f7ff;color:#0056b3}

/* ── DESKTOP DARK MODE ── */
body.dark-mode .navbar{background:#1e293b!important;box-shadow:0 2px 20px rgba(0,0,0,.5)}
body.dark-mode .navbar .nav-link{color:#cbd5e1}
body.dark-mode .navbar .nav-link:hover,body.dark-mode .navbar .nav-link.active{color:#60a5fa!important}
body.dark-mode .navbar .nav-link.active::after{background:#60a5fa}
body.dark-mode .brand-dream{color:#60a5fa}
body.dark-mode .brand-abroad{color:#fbbf24}
body.dark-mode .brand-jobs{color:#34d399}
body.dark-mode .dropdown-menu{background:#1e293b;border:1px solid #334155}
body.dark-mode .dropdown-item{color:#cbd5e1}
body.dark-mode .dropdown-item:hover{background:#273549;color:#60a5fa}
body.dark-mode #darkModeToggle,body.dark-mode #translateBtn{border-color:#475569;color:#cbd5e1;background:transparent}
body.dark-mode #darkModeToggle:hover,body.dark-mode #translateBtn:hover{background:#273549}

/* ── LANGUAGE POPUP ── */
.lang-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;justify-content:center;align-items:center}
.lang-popup.show{display:flex}
.lang-popup-box{background:#fff;border-radius:16px;padding:28px 24px 20px;width:95%;max-width:480px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3);max-height:85vh;overflow-y:auto}
.lang-popup-box h4{font-weight:700;margin-bottom:4px;font-size:20px}
.lang-popup-box .sub{color:#666;font-size:13px;margin-bottom:18px}
.lang-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.lang-btn{display:flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#333;font-size:13px;font-weight:500;transition:all .2s}
.lang-btn:hover{background:#f0f7ff;border-color:#0056b3;color:#0056b3;transform:translateY(-1px)}
.lang-btn .lang-flag{font-size:16px}
.lang-close{display:inline-block;padding:9px 35px;background:#0056b3;color:#fff;border:none;border-radius:50px;cursor:pointer;font-weight:600;font-size:14px;transition:all .2s}
.lang-close:hover{background:#0044a0}
.lang-btn-english{grid-column:1/-1;background:#f0f7ff;border-color:#0056b3;color:#0056b3;font-weight:700;justify-content:center}
body.dark-mode .lang-popup-box{background:#1e293b;color:#e2e8f0}
body.dark-mode .lang-popup-box h4{color:#e2e8f0}
body.dark-mode .lang-popup-box .sub{color:#94a3b8}
body.dark-mode .lang-btn{color:#cbd5e1;border-color:#334155;background:#0f172a}
body.dark-mode .lang-btn:hover{background:#273549;border-color:#60a5fa;color:#60a5fa}
body.dark-mode .lang-close{background:#1d4ed8}
body.dark-mode .lang-btn-english{background:#162032!important;border-color:#60a5fa!important;color:#60a5fa!important}
@media(max-width:576px){.lang-grid{grid-template-columns:1fr 1fr}}

/* ── INTERNATIONAL MEGA MENU (Desktop) ── */
.intl-mega-menu{min-width:640px;padding:10px 0!important;}
.intl-mega-menu>li>div{display:flex;}
.intl-col{flex:1;padding:4px 8px;border-right:1px solid #f1f5f9;}
.intl-col:last-child{border-right:none;}
.intl-col-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px 8px;margin-bottom:4px;border-bottom:2px solid #f1f5f9;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.intl-col .dropdown-item{font-size:12.5px;padding:4px 8px;border-radius:6px;display:flex;align-items:center;gap:6px;}
.intl-flag{width:16px;height:12px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.15);flex-shrink:0;}
body.dark-mode .intl-col{border-color:#334155;}
body.dark-mode .intl-col-head{border-color:#334155;}

/* ── MOBILE NESTED INTL SUB ── */
.mob-sub-l2{display:none;padding-left:0;border-left:2px solid #dbeafe;margin-left:28px;margin-top:2px;margin-bottom:2px;}
.mob-sub-l2.open{display:block;}
.mob-sub-l2 .mob-nav-link{font-size:13px;padding:6px 14px;color:#64748b;}
.mob-intl-group-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px 8px 28px;background:none;border:none;text-align:left;font-size:13.5px;font-weight:600;color:#0056b3;cursor:pointer;transition:all .2s;}
.mob-intl-group-btn:hover{background:#f0f7ff;}
body.dark-mode .mob-intl-group-btn{color:#60a5fa;}
body.dark-mode .mob-sub-l2{border-color:#1e3a5f;}
body.dark-mode .mob-sub-l2 .mob-nav-link{color:#94a3b8;}

/* ── COMMON DARK MODE ── */
body.dark-mode{background-color:#0f172a;color:#e2e8f0}
body.dark-mode .card{background:#1e293b!important;color:#e2e8f0!important;border-color:#334155!important}
body.dark-mode .text-dark{color:#e2e8f0!important}
body.dark-mode .text-muted{color:#94a3b8!important}
body.dark-mode .bg-white{background:#1e293b!important}
body.dark-mode .bg-light{background:#162032!important}
body.dark-mode .form-control,body.dark-mode .form-select{background:#0f172a!important;border-color:#475569!important;color:#e2e8f0!important}
body.dark-mode .btn-primary{background:#1d4ed8;border-color:#1d4ed8}
body.dark-mode .btn-outline-primary{border-color:#60a5fa;color:#60a5fa}
body.dark-mode .page-link{background:#1e293b;border-color:#334155;color:#60a5fa}
body.dark-mode .page-item.active .page-link{background:#1d4ed8;border-color:#1d4ed8}
body.dark-mode a{color:#60a5fa}
body.dark-mode a:hover{color:#93c5fd}
body.dark-mode .border{border-color:#334155!important}
body.dark-mode hr{border-color:#334155!important}
body.dark-mode .custom-job-card{background:#1e293b!important;border-color:#334155!important}
body.dark-mode .sidebar-widget{background:#1e293b!important;border-color:#334155!important}
body.dark-mode .search-card-container{background:#1e293b!important}
body.dark-mode .search-input-box{background:#0f172a!important;border-color:#475569!important;color:#e2e8f0!important}
body.dark-mode .browse-pill{background:#1e293b!important;border-color:#334155!important;color:#94a3b8!important}
body.dark-mode .browse-pill:hover{background:#273549!important;border-color:#60a5fa!important;color:#60a5fa!important}
body.dark-mode .alert-warning{background:#422006!important;border-color:#92400e!important;color:#fde68a!important}

/* Google Translate hide */
.goog-te-banner-frame,.goog-te-menu-frame{display:none!important}
.goog-te-gadget{display:none!important}
body{top:0!important}
.skiptranslate{display:none!important}

/* ============================================================
   NEW FIXES — DARK MODE CONTRAST (index.php / job-details.php / blog-details.php)
   Added: full-site dark mode audit for card text, blog content,
   accordions, share widgets, badges, and sidebar blog cards.
   ============================================================ */

/* ══ DARK MODE FIX: Sidebar Blog/Guide Cards on Homepage (inline-style override) ══ */
body.dark-mode .sidebar-widget a.d-flex{
    background-color:#1e293b!important;
    border-color:#334155!important;
}
body.dark-mode .sidebar-widget a.d-flex:hover{
    border-color:#60a5fa!important;
    background-color:#273549!important;
}
body.dark-mode .sidebar-widget a.d-flex .text-dark{
    color:#f1f5f9!important;
}
body.dark-mode .sidebar-widget a.d-flex .text-muted{
    color:#94a3b8!important;
}

/* ══ DARK MODE FIX: Job Card Text Contrast (custom-job-card) ══ */
body.dark-mode .custom-job-card p{color:#cbd5e1!important}
body.dark-mode .custom-job-card strong{color:#f1f5f9!important}
body.dark-mode .custom-job-card h4 a{color:#60a5fa!important}

/* ══ DARK MODE FIX: Related Job Widget Text ══ */
body.dark-mode .related-job-card{background:#1e293b!important;border-color:#334155!important}
body.dark-mode .related-job-info h6{color:#f1f5f9!important}
body.dark-mode .related-job-info .org-name{color:#94a3b8!important}
body.dark-mode .related-job-meta span{color:#94a3b8!important}
body.dark-mode .widget-title{color:#f1f5f9!important;border-bottom-color:#334155!important}

/* ══ DARK MODE FIX: About/Intro Section on Homepage (uses inline #f8fafc bg) ══ */
body.dark-mode #aboutIntro{background:#0f172a!important}
body.dark-mode #aboutIntro h2{color:#f1f5f9!important}
body.dark-mode #aboutIntro p{color:#cbd5e1!important}
body.dark-mode #aboutIntro .alert{
    background:#422006!important;
    color:#fde68a!important;
    border-left-color:#92400e!important;
}

/* ══ DARK MODE FIX: Search suggestion dropdown ══ */
body.dark-mode #jobSuggestBox{background:#1e293b!important;border-color:#334155!important}
body.dark-mode .suggest-item{border-bottom-color:#334155!important}
body.dark-mode .suggest-item:hover,body.dark-mode .suggest-item.si-active{background:#273549!important}
body.dark-mode .suggest-title{color:#f1f5f9!important}
body.dark-mode .suggest-meta{color:#94a3b8!important}
body.dark-mode .suggest-icon{background:#1e3a5f!important;color:#60a5fa!important}

/* ══ DARK MODE FIX: Blog Content Text (blog-details.php inline !important override) ══ */
body.dark-mode .blog-content,
body.dark-mode .blog-content p,
body.dark-mode .blog-content span,
body.dark-mode .blog-content li,
body.dark-mode .blog-content div,
body.dark-mode .blog-content strong,
body.dark-mode .blog-content em,
body.dark-mode .blog-content u{
    color:#e2e8f0!important;
}
body.dark-mode .blog-content h1,
body.dark-mode .blog-content h2,
body.dark-mode .blog-content h3,
body.dark-mode .blog-content h4,
body.dark-mode .blog-content h5,
body.dark-mode .blog-content h6{
    color:#f8fafc!important;
}
body.dark-mode .blog-content a{color:#60a5fa!important}
body.dark-mode .blog-content strong{color:#f1f5f9!important}
body.dark-mode .blog-content blockquote{
    background:#162032!important;
    border-left-color:#60a5fa!important;
    color:#cbd5e1!important;
}

/* ══ DARK MODE FIX: FAQ Accordion (job-details.php) ══ */
body.dark-mode .accordion-item{
    background:#1e293b!important;
    border-color:#334155!important;
}
body.dark-mode .accordion-button{
    background:#1e293b!important;
    color:#e2e8f0!important;
}
body.dark-mode .accordion-button:not(.collapsed){
    background:#273549!important;
    color:#60a5fa!important;
    box-shadow:none!important;
}
body.dark-mode .accordion-button::after{
    filter:invert(1) brightness(1.8);
}
body.dark-mode .accordion-body{
    background:#1e293b!important;
    color:#cbd5e1!important;
}

/* ══ DARK MODE FIX: Share This Job Card (daj-share) ══ */
body.dark-mode .daj-share{
    background:linear-gradient(135deg,#162032,#0f1e33)!important;
    border-color:#334155!important;
}
body.dark-mode .daj-share-title{color:#a7f3d0!important}
body.dark-mode .daj-share-sub{color:#94a3b8!important}
body.dark-mode .daj-share-note{color:#64748b!important}
body.dark-mode .daj-email-link{color:#94a3b8!important}
body.dark-mode .daj-email-link:hover{color:#cbd5e1!important}

/* ══ DARK MODE FIX: Sidebar Ad Wrapper ══ */
body.dark-mode .sidebar-ad-wrap{background:#162032!important}

/* ══ DARK MODE FIX: text-primary/text-success headings on dark bg-white cards ══ */
body.dark-mode .bg-white .text-primary{color:#60a5fa!important}
body.dark-mode .bg-white .text-success{color:#34d399!important}
body.dark-mode .bg-white .border-success{border-color:#34d399!important}
body.dark-mode .badge.bg-light{background:#162032!important;color:#94a3b8!important;border-color:#334155!important}
body.dark-mode .badge.bg-light.text-primary{color:#60a5fa!important}

/* ══ DARK MODE FIX: Breadcrumb ══ */
body.dark-mode .breadcrumb-item.active{color:#94a3b8!important}
body.dark-mode .breadcrumb-item+.breadcrumb-item::before{color:#475569!important}

/* ══ DARK MODE FIX: Alert Danger (expired job notice) ══ */
body.dark-mode .alert-danger{
    background:#450a0a!important;
    border-color:#7f1d1d!important;
    color:#fecaca!important;
}

/* ══ DARK MODE FIX: Blog Details page - "More Guides" & related cards, WhatsApp/country widgets ══ */
body.dark-mode .card .text-dark{color:#f1f5f9!important}
body.dark-mode .card .text-muted{color:#94a3b8!important}
body.dark-mode .card h6.fw-bold{color:#f1f5f9!important}
body.dark-mode .card .bg-light{background:#162032!important}

/* ══ DARK MODE FIX: Featured Countries section (featured-countries.php) ══ */
/* Base styles needed since these are new classes without light-mode CSS previously */
.daj-cc{
    position:relative;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:16px 10px 14px;
    text-align:center;
    height:100%;
    transition:all .2s;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.daj-cc-featured{ border:2px solid #cfe3fb; }
.daj-featured-tag{
    position:absolute;top:-9px;left:50%;transform:translateX(-50%);
    font-size:9px;font-weight:700;color:#185fa5;background:#e6f1fb;
    padding:2px 10px;border-radius:20px;letter-spacing:.3px;
}
.daj-country-name{font-size:14px;font-weight:600;color:#1a202c;margin-bottom:5px;line-height:1.2;}
.daj-country-sectors{font-size:10.5px;color:#94a3b8;margin-bottom:9px;line-height:1.3;min-height:26px;}
.daj-badge{font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px;}
.daj-badge-jobs{color:#0f6e56;background:#e1f5ee;}
.daj-badge-view{color:#185fa5;background:#e6f1fb;}
.daj-stat-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:8px 16px;text-align:center;min-width:110px;}
.daj-stat-num{font-size:18px;font-weight:700;}
.daj-stat-label{font-size:11px;color:#64748b;}
.daj-guide-cta{
    background:#f0f7ff;border:1px solid #dbeafe;border-radius:14px;
    padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:12px;
}
.daj-guide-title{font-size:15px;font-weight:600;color:#1a202c;}
.daj-guide-sub{font-size:13px;color:#64748b;}
.daj-guide-btn{
    text-decoration:none;background:#185fa5;color:#fff;font-size:13px;
    font-weight:600;padding:9px 18px;border-radius:8px;white-space:nowrap;
}

/* Dark mode overrides */
body.dark-mode .daj-cc{
    background:#1e293b!important;
    border-color:#334155!important;
    box-shadow:0 1px 4px rgba(0,0,0,.2)!important;
}
body.dark-mode .daj-cc-featured{ border-color:#3b5f8a!important; }
body.dark-mode .daj-cc:hover{ border-color:#60a5fa!important; }
body.dark-mode .daj-featured-tag{ color:#93c5fd!important; background:#1e3a5f!important; }
body.dark-mode .daj-country-name{ color:#f1f5f9!important; }
body.dark-mode .daj-country-sectors{ color:#94a3b8!important; }
body.dark-mode .daj-badge-jobs{ color:#6ee7b7!important; background:#0f2e24!important; }
body.dark-mode .daj-badge-view{ color:#93c5fd!important; background:#1e3a5f!important; }
body.dark-mode .daj-stat-box{ background:#1e293b!important; border-color:#334155!important; }
body.dark-mode .daj-stat-label{ color:#94a3b8!important; }
body.dark-mode .daj-guide-cta{ background:#162032!important; border-color:#334155!important; }
body.dark-mode .daj-guide-title{ color:#f1f5f9!important; }
body.dark-mode .daj-guide-sub{ color:#94a3b8!important; }

/* ══ MOBILE FIX: Hot Updates ticker bar too big/overflowing on small screens ══ */
@media (max-width: 768px) {
    .hot-ticker-bar{
        padding:6px 0!important;
    }
    .hot-label{
        padding:0 8px!important;
        font-size:10px!important;
        gap:4px!important;
    }
    .hot-label .fire-icon{
        font-size:12px!important;
    }
    .hot-label span{
        letter-spacing:.2px!important;
    }
    .ticker-item{
        padding:0 14px!important;
        font-size:11px!important;
        gap:4px!important;
    }
    .badge-hot,.badge-new{
        font-size:8px!important;
        padding:1px 4px!important;
    }
}

@media (max-width: 480px) {
    .hot-label{
        padding:0 6px!important;
        font-size:9px!important;
    }
    .hot-label .fire-icon{
        font-size:11px!important;
    }
    .ticker-item{
        padding:0 10px!important;
        font-size:10px!important;
    }
}