/* Custom Variables for Colors */
:root {
    --primary-color: #c62828; /* Premium Dark Red */
    --dark-color: #1a1a1a;
    --light-bg: #f8f9fa;
    --text-color: #333;
}

body {
    background-color: var(--light-bg);
    color: var(--text-color);
}

/* --- Top Bar Styling --- */
.top-bar {
    background-color: var(--dark-color);
    color: #bbb;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #2d2d2d;
}
.top-social a {
    color: #bbb;
    margin-left: 15px;
    transition: 0.3s;
}
.top-social a:hover { color: #fff; }

/* --- Main Header Styling --- */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 12px 0;
}
.portal-logo a {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark-color);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.portal-logo span {
    color: var(--primary-color);
}
.menu-toggle-btn, .search-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--dark-color);
    cursor: pointer;
}

/* --- Premium App-Like Nav Bar --- */
.nav-container {
    background-color: var(--primary-color);
    position: sticky;
    top: 65px; /* Sticky header ke theek niche rahega */
    z-index: 999;
}
.nav-links {
    display: flex;
    gap: 10px;
}
.nav-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 12px 18px;
    font-size: 17px;
    font-weight: 600;
    display: inline-block;
    transition: 0.2s;
}
.nav-links a:hover, .nav-links a.active {
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* --- Mobile View Optimization (The Game Changer) --- */
@media (max-width: 768px) {
    .portal-logo a { font-size: 24px; }
    
    /* Nav bar ko horizontally scrollable banana (App Style) */
    .nav-links {
        overflow-x: auto;
        white-space: nowrap;
        display: block;
        padding: 0;
    }
    .nav-links::-webkit-scrollbar { display: none; } /* Hide Scrollbar */
    .nav-links a {
        padding: 10px 15px;
        font-size: 15px;
    }
    .main-header { top: 0; }
    .nav-container { top: 55px; }
}

/* --- Mobile Sidebar (Drawer) Styling --- */
.mobile-sidebar {
    position: fixed;
    top: 0; left: -280px;
    width: 280px; height: 100%;
    background: #fff; z-index: 1050;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    transition: 0.3s ease;
    padding: 20px;
}
.mobile-sidebar.open { left: 0; }
.sidebar-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1040; display: none;
}
.sidebar-overlay.show { display: block; }
.sidebar-header {
    display: flex; justify-content: space-between;
    align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px;
}
#closeSidebar { background: none; border: none; font-size: 20px; }
.sidebar-links a {
    display: block; color: var(--dark-color);
    text-decoration: none; padding: 12px 0;
    font-size: 18px; border-bottom: 1px solid #f9f9f9;
}
/* --- Breaking News Ticker CSS --- */
.ticker-section {
    background: #fff;
    border-bottom: 2px solid #eee;
    padding: 5px 0;
}
.ticker-title {
    background: #e53935;
    color: #fff;
    padding: 4px 15px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 4px;
    white-space: nowrap;
    margin-right: 15px;
    position: relative;
    z-index: 2;
}
.ticker-wrap {
    overflow: hidden;
    width: 100%;
}
.ticker-items {
    display: flex;
    white-space: nowrap;
    animation: tickerLoop 25s linear infinite;
}
.ticker-items a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-right: 50px; /* Do khabron ke beech ki doori */
    transition: color 0.2s;
}
.ticker-items a:hover { color: var(--primary-color); }

/* Smooth Ticker Animation */
@keyframes tickerLoop {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* --- Hero Grid Design CSS --- */
.card a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}
.card a:hover {
    color: var(--primary-color);
}
.badge-category {
    background-color: var(--primary-color) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 3px;
}

/* Placeholders text for dynamic integration later */
.dummy-img-placeholder {
    width: 100%;
    height: 380px;
    background: linear-gradient(45deg, #1e1e2f, #3a3a52); /* Premium Dark Gradient */
}
.side-img-placeholder {
    width: 100%;
    height: 85px;
    background: linear-gradient(45deg, #4f5b66, #2c3e50);
}

/* Main Big News Typography */
.main-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}
.post-meta, .side-meta {
    font-size: 13px;
    font-weight: 600;
}

/* Small Trending Cards Typography */
.section-title-sm {
    font-size: 20px;
    font-weight: 700;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
    margin-bottom: 10px;
}
.side-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2 lines se zyada bada text hide ho jayega */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Mobile Responsiveness for Grid --- */
@media (max-width: 991px) {
    .dummy-img-placeholder { height: 220px; }
    .main-title { font-size: 20px; }
    .ticker-title { font-size: 13px; padding: 3px 10px; }
    .ticker-items a { font-size: 14px; }
}
/* --- Category Block Headers --- */
.category-block-header {
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
}
.category-title-main {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-color);
    position: relative;
    margin: 0;
}
/* Heading ke niche laal rang ki chhoti underline draw karne ke liye */
.category-title-main::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}
.view-all-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.2s;
}
.view-all-btn:hover {
    color: var(--dark-color);
}

/* --- Category Placeholders --- */
.cat-img-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2c3e50, #3498db);
}
.cat-small-img-placeholder {
    width: 100%;
    height: 75px;
    background: linear-gradient(135deg, #16a085, #2ecc71);
}

/* --- Typography --- */
.cat-card-title-lg {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
.cat-card-title-sm {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.small-meta {
    font-size: 12px;
}

/* --- Right Side Quick News Feed --- */
.quick-feed-box {
    border-top: 3px solid var(--dark-color);
}
.quick-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.quick-feed-list li {
    padding: 12px 0;
    border-bottom: 1px dashed #e0e0e0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.quick-feed-list li:last-child {
    border-bottom: none;
}
.quick-feed-list a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    transition: 0.2s;
}
.quick-feed-list a:hover {
    color: var(--primary-color);
}
.time-badge {
    background-color: #eee;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* --- Mobile Fixes --- */
@media (max-width: 768px) {
    .category-title-main { font-size: 18px; }
    .cat-card-title-lg { font-size: 16px; }
    .cat-card-title-sm { font-size: 14px; }
}
/* --- Premium Footer CSS --- */
.footer-area {
    background-color: var(--dark-color);
    color: #ccc;
    border-top: 5px solid var(--primary-color);
}
.footer-logo {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.footer-logo span {
    color: var(--primary-color);
}
.footer-text {
    font-size: 15px;
    line-height: 1.6;
}
.footer-heading {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--primary-color);
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 10px;
}
.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
    display: inline-block;
}
.footer-links a:hover {
    color: var(--primary-color);
    transform: translateX(5px); /* Hover par text thoda aage khiskega */
}
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
}
.footer-contact li {
    margin-bottom: 12px;
}
.footer-social a {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    margin-right: 10px;
    transition: 0.3s;
}
.footer-social a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px); /* Hover par icon upar uthega */
}

/* Copyright Section */
.copyright-bar {
    background-color: #111;
    font-size: 14px;
    color: #888;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .footer-area {
        text-align: center;
    }
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
}
/* --- Premium Logo Sizing --- */
.header-logo {
    max-height: 55px; /* डेस्कटॉप के लिए लोगो की ऊंचाई */
    width: auto;
    object-fit: contain;
}

/* --- Premium Image Hover Animation (Zoom Effect) --- */
/* जिस डिब्बे में इमेज होगी, उसके बाहर इमेज नहीं फैलेगी */
.hero-img-wrap, .cat-img-placeholder, .cat-small-img-placeholder, .side-img-placeholder {
    overflow: hidden; 
}

/* इमेज या प्लेसहोल्डर पर ट्रांजिशन लगाना */
.dummy-img-placeholder, .cat-img-placeholder, .cat-small-img-placeholder, .side-img-placeholder {
    transition: transform 0.5s ease;
}

/* जब कार्ड पर होवर हो, तो अंदर की इमेज ज़ूम हो जाए */
.card:hover .dummy-img-placeholder,
.card:hover .cat-img-placeholder,
.card:hover .cat-small-img-placeholder,
.card:hover .side-img-placeholder {
    transform: scale(1.08); /* 8% ज़ूम होगा */
}

/* --- Mobile Logo Adjustments --- */
@media (max-width: 768px) {
    .header-logo {
        max-height: 40px; /* मोबाइल में लोगो थोड़ा छोटा दिखेगा */
    }
}
/* --- Video Section Premium CSS --- */
.video-wrapper, .video-list-item .position-relative {
    cursor: pointer;
}
.play-icon-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
    transition: all 0.3s ease;
}
.play-icon-overlay-sm {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: all 0.3s ease;
}
/* Hover करने पर Play icon ज़ूम होगा और डार्कनेस कम होगी */
.video-card:hover .play-icon-overlay i,
.video-list-item:hover .play-icon-overlay-sm i {
    transform: scale(1.2);
    color: var(--primary-color) !important;
}
.video-card:hover .play-icon-overlay,
.video-list-item:hover .play-icon-overlay-sm {
    background: rgba(0, 0, 0, 0.1);
}

/* 2 लाइन से ज्यादा बड़ी हैडलाइन को छुपाने के लिए */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ================= DARK MODE CSS ================= */
/* Dark Mode Toggle Button Styling */
.dark-mode-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--dark-color);
    cursor: pointer;
    transition: 0.3s;
}

/* जब बॉडी में 'dark-mode' क्लास जुड़ेगी, तब ये बदलाव होंगे */
body.dark-mode {
    background-color: #121212;
    color: #f1f1f1;
}

body.dark-mode .main-header,
body.dark-mode .card,
body.dark-mode .quick-feed-box,
body.dark-mode .mobile-sidebar,
body.dark-mode .ticker-section {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #f1f1f1;
}

body.dark-mode .main-header {
    box-shadow: 0 2px 10px rgba(255,255,255,0.05);
}

body.dark-mode .portal-logo a {
    color: #fff; /* डार्क मोड में टेक्स्ट लोगो को सफ़ेद करेगा (अगर टेक्स्ट लोगो है) */
}

body.dark-mode .dark-mode-btn,
body.dark-mode .search-btn,
body.dark-mode .menu-toggle-btn,
body.dark-mode .category-title-main {
    color: #f1f1f1;
}

body.dark-mode .category-block-header {
    border-bottom-color: #333;
}

/* डार्क मोड में लिंक्स और टेक्स्ट का रंग */
body.dark-mode .card a,
body.dark-mode .cat-card-title-lg a,
body.dark-mode .cat-card-title-sm a,
body.dark-mode .side-card-title a,
body.dark-mode .quick-feed-list a,
body.dark-mode .sidebar-links a,
body.dark-mode .ticker-items a {
    color: #e0e0e0;
}

body.dark-mode .card a:hover,
body.dark-mode .ticker-items a:hover,
body.dark-mode .quick-feed-list a:hover {
    color: var(--primary-color);
}

body.dark-mode .text-muted {
    color: #999 !important;
}

/* Smooth Transition for the whole page */
body {
    transition: background-color 0.4s ease, color 0.4s ease;
}
.main-header, .card, .ticker-section, .quick-feed-box {
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Card Hover Effect */
.h-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.h-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* ================= WEB STORIES CSS ================= */
.web-stories-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.web-stories-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
.web-story-card {
    width: 200px;
    height: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.web-story-card:hover {
    transform: scale(1.05); /* Hover करने पर स्टोरी थोड़ी बड़ी होगी */
}
.shadow-text {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* ================= PREMIUM SCROLL REVEAL ANIMATION ================= */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px); /* शुरुआत में 40px नीचे रहेगा */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Speed Index के लिए ब्राउज़र को पहले ही बता देता है */
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0); /* स्क्रॉल करने पर अपनी जगह आ जाएगा */
}

/* Dark Mode Fixes for New Elements */
body.dark-mode .web-story-card { border: 1px solid #333; }

/* --- Footer Logo Premium Sizing --- */
.footer-logo-wrap {
    display: inline-block;
}
.footer-logo-img {
    max-height: 50px; /* फुटर के लिए एकदम परफेक्ट और क्लीन ऊंचाई */
    width: auto;
    object-fit: contain;
}

/* 💡 स्पीड टिप: अगर आपके लोगो का टेक्स्ट काले (Black) रंग का है और वो डार्क फुटर में छिप रहा है, 
   तो नीचे दी गई लाइन का इस्तेमाल करें, यह लोगो के काले हिस्से को अपने आप सफेद (White) कर देगी: */
/* body .footer-logo-img { filter: brightness(0) invert(1); } */
/* ================= SCROLL TO TOP BUTTON CSS ================= */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%; /* बटन को पूरा गोल बनाने के लिए */
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* शुरुआत में यह छिपा रहेगा */
    visibility: hidden;
    transform: translateY(20px); /* थोड़ा नीचे की तरफ खिसका रहेगा */
    transition: all 0.3s ease;
    z-index: 9999;
}

/* जब JS इसे 'show' क्लास देगा तब यह दिखने लगेगा */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: var(--dark-color);
    transform: translateY(-5px); /* होवर करने पर थोड़ा ऊपर उछलेगा */
}

/* मोबाइल में इसे थोड़ा छोटा और किनारे सेट करेंगे */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}
/* ================= PREMIUM SEARCH OVERLAY CSS ================= */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* डार्क पारदर्शी बैकग्राउंड */
    backdrop-filter: blur(8px); /* पीछे का हिस्सा धुंधला करने के लिए */
    z-index: 10000; /* यह सबसे ऊपर दिखेगा */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* जब JS इसे 'open' क्लास देगा */
.search-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* बंद करने का (X) बटन */
.close-search {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 60px;
    cursor: pointer;
    transition: 0.3s;
}
.close-search:hover {
    color: var(--primary-color);
    transform: rotate(90deg); /* होवर करने पर X घूमेगा */
}

/* सर्च इनपुट और फॉर्म */
.search-overlay-content {
    width: 80%;
    max-width: 600px;
}
.search-form {
    display: flex;
    border-bottom: 3px solid #fff;
    padding-bottom: 10px;
    transition: 0.3s;
}
.search-form:focus-within {
    border-bottom-color: var(--primary-color); /* टाइप करते समय लाइन लाल हो जाएगी */
}
#searchInput {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 24px;
    width: 100%;
    padding: 5px;
}
#searchInput::placeholder {
    color: #aaa;
}
.search-submit-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s;
}
.search-submit-btn:hover {
    color: var(--primary-color);
}

/* मोबाइल के लिए छोटा सुधार */
@media (max-width: 768px) {
    .close-search { top: 20px; right: 20px; font-size: 45px; }
    #searchInput { font-size: 18px; }
}
/* ================= SINGLE POST PAGE PREMIUM CSS ================= */
.article-main-title {
    font-size: 32px;
    line-height: 1.3;
    color: var(--dark-color);
}

/* सोशल शेयर बटन का रंग */
.btn-whatsapp { background-color: #25D366; }
.btn-whatsapp:hover { background-color: #1ebd58; color: white; }
.btn-facebook { background-color: #1877F2; }
.btn-facebook:hover { background-color: #145dbf; color: white; }
.btn-twitter { background-color: #000000; }
.btn-twitter:hover { background-color: #222; color: white; }

/* न्यूज़ की लिखावट (Typography for Readability) */
.read-news-font p {
    font-size: 19px;     /* पढ़ने के लिए सबसे बेस्ट साइज */
    line-height: 1.75;   /* लाइनों के बीच पर्याप्त गैप */
    color: #222;         /* हल्का सॉफ्ट ब्लैक ताकि आँखों में न चुभे */
    margin-bottom: 20px;
    text-align: justify;
}

.image-caption {
    font-size: 13px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* डार्क मोड में इस पेज की सेटिंग */
body.dark-mode .article-main-title {
    color: #ffffff;
}
body.dark-mode .read-news-font p {
    color: #e0e0e0; /* डार्क मोड में हल्का सफेद टेक्स्ट */
}
body.dark-mode .image-caption {
    background-color: #2a2a2a !important;
    color: #aaa !important;
}

/* मोबाइल स्क्रीन्स के लिए फॉन्ट छोटा करना */
@media (max-width: 768px) {
    .article-main-title { font-size: 22px; }
    .read-news-font p { font-size: 16px; line-height: 1.6; }
}
/* ================= REFINED SINGLE POST ELEMENTS ================= */
/* Share Icons Fixed layout */
.share-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.share-icon-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.share-icon-btn.whatsapp { background-color: #25D366; }
.share-icon-btn.facebook { background-color: #1877F2; }
.share-icon-btn.twitter { background-color: #000000; }
.share-icon-btn.telegram { background-color: #0088cc; }

/* Author Profile Card */
.author-profile-card {
    background-color: #fcfcfc;
    border-color: #eee !important;
}
.author-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.author-social-links a {
    font-size: 16px;
    transition: color 0.2s;
}
.author-social-links a:hover {
    color: var(--primary-color) !important;
}

/* Comment Form Controls */
.comment-form .form-control {
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 15px;
}
.comment-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.15);
}

/* ================= DARK MODE ADJUSTMENTS ================= */
body.dark-mode .share-box-premium,
body.dark-mode .comment-item {
    background-color: #252525 !important;
}
body.dark-mode .share-box-premium span,
body.dark-mode .author-name,
body.dark-mode .comments-section-box h4,
body.dark-mode .comment-item p {
    color: #ffffff !important;
}
body.dark-mode .author-profile-card,
body.dark-mode .comments-section-box {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .comment-form .form-control {
    background-color: #2b2b2b;
    border-color: #444;
    color: #fff;
}
body.dark-mode .comment-form .form-control::placeholder {
    color: #888;
}
/* Sidebar Overlay Styling */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-sidebar {
    position: fixed;
    top: 0; left: -280px; width: 280px; height: 100%;
    background: #fff;
    z-index: 1050;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.mobile-sidebar.active {
    left: 0;
}
body.dark-mode .mobile-sidebar {
    background: #1e1e1e !important;
    color: #fff;
}
/* Sidebar Fixes for Smooth Animation */
.mobile-sidebar {
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out !important;
}
.sidebar-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Dark Mode support for Mobile Sidebar */
body.dark-mode .mobile-sidebar {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}
body.dark-mode .sidebar-links a {
    color: #e0e0e0 !important;
    border-bottom-color: #2b2b2b !important;
}
body.dark-mode .sidebar-header {
    border-bottom-color: #2b2b2b !important;
}
body.dark-mode #closeSidebar {
    color: #fff;
}
/* सुनिश्चित करें कि एक्टिव और ओपन दोनों ही साइडबार को दिखाएं */
.mobile-sidebar.active, .mobile-sidebar.open {
    left: 0 !important;
}
.sidebar-overlay.active, .sidebar-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Text Truncate for clean Grid */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.main-story-title {
    font-size: 24px;
    line-height: 1.4;
    transition: color 0.2s;
}
.main-story-title:hover {
    color: var(--primary-color) !important;
}
/* Page Pagination styling */
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.15);
}

/* Dark Mode fixes for Category page */
body.dark-mode .category-page-title-bar,
body.dark-mode .ad-placeholder-box {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .category-page-title-bar h2 {
    color: #fff !important;
}
body.dark-mode .page-link {
    background-color: #2b2b2b;
    border-color: #444;
    color: #e0e0e0;
}
/* Horizontal Scroll for filters on Mobile */
.sub-category-filters {
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
}
.sub-category-filters::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Dark Mode Fixes for Category Extensions */
body.dark-mode .poll-widget-box {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #fff !important;
}
body.dark-mode .poll-widget-box h5,
body.dark-mode .poll-widget-box label {
    color: #fff !important;
}
body.dark-mode .sub-category-filters .btn-outline-secondary {
    color: #bbb;
    border-color: #444;
}
body.dark-mode .sub-category-filters .btn-outline-secondary:hover {
    background-color: #333;
    color: #fff;
}
/* --- Author Page Additional Custom Styling --- */
@media (min-width: 768px) {
    .border-start-md {
        border-start: 1px solid #dee2e6 !important;
    }
}
.transition-color {
    transition: color 0.2s ease;
}
.transition-color:hover {
    color: var(--primary-color) !important;
}

/* Dark Mode Support for Author Page */
body.dark-mode .author-profile-banner {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .author-profile-banner h3 {
    color: #fff !important;
}
body.dark-mode .border-start-md {
    border-color: #333 !important;
}
body.dark-mode .reporter-social-links .btn-outline-dark {
    color: #fff;
    border-color: #555;
}
body.dark-mode .reporter-social-links .btn-outline-dark:hover {
    background-color: #fff;
    color: #000;
}

/* Animation for Results */
.animate-fade-in {
    animation: fadeInEffect 0.4s ease-in-out;
}
@keyframes fadeInEffect {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark Mode Fixes for Verification Page */
body.dark-mode .card,
body.dark-mode .table {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}
body.dark-mode .card h2, 
body.dark-mode .card h4,
body.dark-mode .card label {
    color: #ffffff !important;
}
body.dark-mode .bg-light,
body.dark-mode .input-group-text,
body.dark-mode .form-control {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    color: #fff !important;
}
/* --- Contact Page Custom Styling --- */
#contactPortalForm .form-control,
#contactPortalForm .form-select {
    border: 1px solid #eee;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 15px;
    transition: all 0.2s ease;
}
#contactPortalForm .form-control:focus,
#contactPortalForm .form-select:focus {
    border-color: var(--primary-color) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.15);
}

/* Dark Mode Support for Contact Us Page */
body.dark-mode #contactPortalForm .form-control,
body.dark-mode #contactPortalForm .form-select {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    color: #fff !important;
}
body.dark-mode #contactPortalForm .form-control::placeholder {
    color: #888;
}
body.dark-mode #contactPortalForm .form-select option {
    background-color: #2b2b2b;
    color: #fff;
}
body.dark-mode .card h4, 
body.dark-mode .card strong {
    color: #ffffff !important;
}
/* Custom Input Overrides for Registration Form */
#reporterRegisterForm .form-control,
#reporterRegisterForm .form-select,
#statusCheckForm .form-control {
    border: 1px solid #eee;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 15px;
}
#reporterRegisterForm .form-control:focus,
#reporterRegisterForm .form-select:focus,
#statusCheckForm .form-control:focus {
    border-color: var(--primary-color) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.15);
}

/* Dark Mode Configuration for Register Page */
body.dark-mode #reporterRegisterForm .form-control,
body.dark-mode #reporterRegisterForm .form-select,
body.dark-mode #statusCheckForm .form-control {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    color: #fff !important;
}
body.dark-mode #reporterRegisterForm .form-control::placeholder,
body.dark-mode #statusCheckForm .form-control::placeholder {
    color: #888;
}
body.dark-mode #reporterRegisterForm .form-select option {
    background-color: #2b2b2b;
    color: #fff;
}
body.dark-mode .card h4, 
body.dark-mode .card h5 {
    color: #ffffff !important;
}
/* Dark Mode Support for About Us Page */
body.dark-mode .bg-white,
body.dark-mode .leadership-section .card {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .leadership-section .card h5,
body.dark-mode .bg-white h4,
body.dark-mode .bg-white h5,
body.dark-mode .row h2 {
    color: #ffffff !important;
}
body.dark-mode .text-secondary {
    color: #bbb !important;
}
body.dark-mode .text-muted {
    color: #999 !important;
}
/* --- Privacy Policy Page Styling --- */
.privacy-content-text ul {
    padding-left: 20px;
    margin-bottom: 20px;
}
.privacy-content-text ul li {
    margin-bottom: 8px;
    list-style-type: square;
}

/* Dark Mode Support for Privacy Policy Page */
body.dark-mode .privacy-content-text h5 {
    color: #ffffff !important;
}
body.dark-mode .privacy-content-text {
    color: #cccccc !important;
}
body.dark-mode .bg-light {
    background-color: #2b2b2b !important;
}
body.dark-mode .bg-light h6 {
    color: #fff !important;
}
/* --- 404 Page Custom Styling --- */
body.dark-mode .error-number-wrapper h1 {
    text-shadow: 4px 4px 0px #2a2a2a !important;
    color: #ff3333 !important;
}
body.dark-mode .error-number-wrapper + h3 {
    color: #ffffff !important;
}

/* Form and Box Tweaks for 404 */
body.dark-mode .card {
    background-color: #1e1e1e !important;
}
body.dark-mode .card .form-control {
    background-color: #2b2b2b !important;
    color: #fff !important;
}
body.dark-mode .card .form-control::placeholder {
    color: #888;
}