<!-- =============== ADS DATABASE DEBUG START =============== -->
<!-- DEBUG: 'ads' table exists -->
<!-- DEBUG: Total ads in database: 3 -->
<!-- DEBUG Ad: ID=5, Type=banner, Platform=desktop, Active=1, Title='seo', Start=NULL, End=NULL, Created=2026-01-19 14:06:46 -->
<!-- DEBUG Ad: ID=4, Type=vertical_full_screen, Platform=mobile, Active=1, Title='Kantara', Start=NULL, End=NULL, Created=2026-01-18 06:24:13 -->
<!-- DEBUG Ad: ID=3, Type=vertical_full_screen, Platform=both, Active=1, Title='Universal Ad', Start=NULL, End=NULL, Created=2026-01-17 22:04:17 -->
<!-- =============== ADS DATABASE DEBUG END =============== -->
<!-- =============== ADS DEBUG START =============== -->
<!-- DEBUG: Platform: DESKTOP -->
<!-- DEBUG: Enable Ads: YES -->
<!-- DEBUG: Enable Mobile Ads: YES -->
<!-- DEBUG: Enable Desktop Ads: YES -->
<!-- DEBUG: Vertical Ad Interval: 4 -->
<!-- DEBUG: Horizontal Ad Interval: 3 -->
<!-- DEBUG: Current Time: 2026-01-29 16:46:05 -->
<!-- DEBUG: Mobile Vertical Ads Count: 0 -->
<!-- DEBUG: Checking ads table structure... -->
<!-- DEBUG Column: id -> int(11) -->
<!-- DEBUG Column: title -> varchar(255) -->
<!-- DEBUG Column: description -> text -->
<!-- DEBUG Column: image_url -> varchar(500) -->
<!-- DEBUG Column: cta_url -> varchar(500) -->
<!-- DEBUG Column: cta_text -> varchar(100) -->
<!-- DEBUG Column: is_active -> tinyint(1) -->
<!-- DEBUG Column: placement_order -> int(11) -->
<!-- DEBUG Column: start_date -> datetime -->
<!-- DEBUG Column: end_date -> datetime -->
<!-- DEBUG Column: created_at -> timestamp -->
<!-- DEBUG Column: updated_at -> timestamp -->
<!-- DEBUG Column: ad_type -> enum('banner','vertical_full_screen','infeed') -->
<!-- DEBUG Column: enable_lead_capture -> tinyint(1) -->
<!-- DEBUG Column: form_title -> varchar(255) -->
<!-- DEBUG Column: form_submit_text -> varchar(100) -->
<!-- DEBUG Column: collect_name -> tinyint(1) -->
<!-- DEBUG Column: collect_email -> tinyint(1) -->
<!-- DEBUG Column: collect_phone -> tinyint(1) -->
<!-- DEBUG Column: impressions -> int(11) -->
<!-- DEBUG Column: clicks -> int(11) -->
<!-- DEBUG Column: platform_type -> enum('desktop','mobile','both') -->
<!-- DEBUG Column: position -> int(11) -->
<!-- DEBUG: Current ads in database... -->
<!-- DEBUG Ad: ID=3, Type=vertical_full_screen, Platform=both, Active=1, Position=6, Title='Universal Ad' -->
<!-- DEBUG Ad: ID=4, Type=vertical_full_screen, Platform=mobile, Active=1, Position=3, Title='Kantara' -->
<!-- DEBUG Ad: ID=5, Type=banner, Platform=desktop, Active=1, Position=3, Title='seo' -->
<!-- DESKTOP MODE: Fetching desktop ads -->
<!-- SQL Query for desktop horizontal ads: SELECT * FROM ads WHERE is_active = 1 
                              AND (platform_type = &#039;desktop&#039; OR platform_type = &#039;both&#039;)
                              AND (ad_type = &#039;horizontal&#039; OR ad_type = &#039;infeed&#039; OR ad_type = &#039;banner&#039; OR ad_type = &#039;horizontal_rectangle&#039;)
                              AND (start_date IS NULL OR start_date &lt;= NOW()) 
                              AND (end_date IS NULL OR end_date &gt;= NOW()) 
                              ORDER BY placement_order ASC, created_at DESC -->
<!-- Desktop horizontal ads query successful. Rows found: 1 -->
<!-- Desktop: 1 horizontal ads found -->
<!-- Desktop Horizontal Ad [0]: ID=5, Type=banner, Platform=desktop, Title='seo' -->
<!-- SQL Query for desktop banner ads: SELECT * FROM ads WHERE is_active = 1 
                          AND (platform_type = &#039;desktop&#039; OR platform_type = &#039;both&#039;)
                          AND ad_type = &#039;banner&#039;
                          AND (start_date IS NULL OR start_date &lt;= NOW()) 
                          AND (end_date IS NULL OR end_date &gt;= NOW()) 
                          ORDER BY placement_order ASC, created_at DESC LIMIT 3 -->
<!-- Desktop banner ads query successful. Rows found: 1 -->
<!-- Desktop: 1 banner ads found -->
<!-- Ads disabled for current platform -->
<!-- =============== ADS DEBUG INFO =============== -->
<!-- Platform: DESKTOP -->
<!-- Total ads found: 0 vertical, 1 horizontal, 1 banner -->
<!-- Mobile vertical ads (special): 0 -->
<!-- Vertical ad interval: 4 -->
<!-- Horizontal ad interval: 3 -->
<!-- DESKTOP: Will display YES horizontal ads -->
<!-- DESKTOP: Will display YES banner ads -->
<!-- =============== ADS DEBUG END =============== -->

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Bookmarks - Zely.in</title>
    
    <meta name="description" content="Latest news in Hindi & English - Stay updated with Zely.in">
    <meta name="theme-color" content="#f84443">
    
    <!-- Favicon -->
            <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📰</text></svg>">
        
    <!-- BEST GOOGLE FONTS FOR HINDI & ENGLISH -->
    <!-- Hindi: Noto Sans Devanagari (बेस्ट हिंदी फॉन्ट) -->
    <!-- English: Poppins (बेस्ट इंग्लिश फॉन्ट) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- CDN Links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <!-- Auto Refresh Meta Tag -->
        <meta http-equiv="refresh" content="1800">
        
    <!-- Add CSS for ads -->
    <style>
    /* ============ CONTACT BUTTON STYLES ============ */
    .image-contact-btn {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        border: 2px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        flex-shrink: 0;
        color: #28a745;
    }

    .image-contact-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 1);
        border-color: rgba(0, 0, 0, 0.25);
        color: #218838;
    }

    .image-contact-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.9);
    }

    /* Desktop adjustments for contact button */
    @media (min-width: 1024px) {
        .image-contact-btn {
            width: 40px;
            height: 40px;
            font-size: 17px;
        }
    }

    /* Mobile adjustments for contact button */
    @media (max-width: 767px) {
        .image-contact-btn {
            width: 34px;
            height: 34px;
            font-size: 15px;
        }
    }

    /* Small mobile adjustments */
    @media (max-width: 480px) {
        .image-contact-btn {
            width: 32px;
            height: 32px;
            font-size: 14px;
        }
    }

    /* Update the container to handle 3 buttons */
    .image-buttons-container {
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: flex;
        gap: 8px;
        z-index: 10;
    }
    
    /* ==================== VIEW COUNTER STYLES ==================== */
    .view-count {
        color: #666;
        font-size: var(--font-size-xs);
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-weight: var(--font-weight-medium);
    }

    .view-count i {
        font-size: 11px;
        color: var(--primary-color);
        opacity: 0.8;
    }

    /* Desktop view counter */
    @media (min-width: 1024px) {
        .view-count {
            font-size: var(--font-size-sm);
        }
        
        .view-count i {
            font-size: 12px;
        }
    }

    /* Mobile view counter adjustments */
    @media (max-width: 767px) {
        .news-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .view-count {
            margin-left: 0;
            background: rgba(0,0,0,0.05);
            padding: 2px 6px;
            border-radius: 8px;
        }
    }
    
    /* ==================== NEW FEED NOTIFICATION ==================== */
    .new-feed-notification {
        position: fixed;
        top: -100px;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #4CAF50, #45a049);
        color: white;
        padding: 15px 20px;
        z-index: 2000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        transition: top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        backdrop-filter: blur(10px);
        font-family: var(--font-heading);
    }
    
    .new-feed-notification.show {
        top: 0;
    }
    
    .new-feed-content {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }
    
    .new-feed-icon {
        font-size: 20px;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .new-feed-text {
        font-size: 15px;
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.3px;
    }
    
    .new-feed-refresh-btn {
        background: rgba(255, 255,255, 0.2);
        border: 2px solid rgba(255,255,255,0.3);
        color: white;
        border-radius: 25px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        font-family: var(--font-heading);
        letter-spacing: 0.5px;
    }
    
    .new-feed-refresh-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-2px);
    }
    
    .new-feed-refresh-btn:active {
        transform: translateY(0);
    }
    
    .refresh-spinner {
        display: none;
        animation: spin 1s linear infinite;
    }
    
    .new-feed-refresh-btn.refreshing .refresh-spinner {
        display: inline-block;
    }
    
    .new-feed-refresh-btn.refreshing .refresh-icon {
        display: none;
    }
    
    .new-feed-auto-hide {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: rgba(255,255,255,0.5);
        width: 100%;
        transform-origin: left;
        animation: autoHideTimer 5s linear forwards;
    }
    
    @keyframes autoHideTimer {
        from { transform: scaleX(1); }
        to { transform: scaleX(0); }
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Adjust top navigation when notification is shown */
    .new-feed-notification.show + .top-nav {
        top: 60px;
    }
    
    .new-feed-notification.show ~ .slider-container {
        top: 120px;
    }
    
    /* Mobile adjustments */
    @media (max-width: 767px) {
        .new-feed-notification {
            padding: 12px 15px;
        }
        
        .new-feed-text {
            font-size: 14px;
        }
        
        .new-feed-refresh-btn {
            padding: 6px 15px;
            font-size: 13px;
        }
        
        .new-feed-notification.show + .top-nav {
            top: 52px;
        }
        
        .new-feed-notification.show ~ .slider-container {
            top: 112px;
        }
    }
    
    /* ==================== UPDATED CSS FOR MOBILE ADS - SIMPLIFIED ==================== */
    /* Mobile Vertical Ads - Full Screen Image Only */
    .mobile-vertical-ad {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
        position: relative !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-vertical-ad .ad-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-vertical-ad .ad-image {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-vertical-ad .ad-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
    
    /* SIMPLIFIED LABEL FOR MOBILE ADS */
    .mobile-vertical-ad .ad-label {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        background: rgba(0,0,0,0.8) !important;
        color: white !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        z-index: 10 !important;
        border: 1px solid rgba(255,255,255,0.2);
        text-transform: uppercase;
    }
    
    /* Full clickable link for mobile ads */
    .full-ad-link {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
    }
    
    /* REMOVED: All text content and platform badges for mobile ads */
    .mobile-vertical-ad .ad-text-content,
    .mobile-vertical-ad .ad-title,
    .mobile-vertical-ad .ad-description,
    .mobile-vertical-ad .ad-cta-button,
    .mobile-vertical-ad .ad-stats,
    .mobile-vertical-ad .ad-platform-badge {
        display: none !important;
    }
    
    /* Desktop Horizontal Ads - Regular Styling */
    .desktop-horizontal-ad {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
        position: relative !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .desktop-horizontal-ad .ad-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .desktop-horizontal-ad .ad-image {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .desktop-horizontal-ad .ad-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
    
    /* REMOVED: All text content for desktop ads */
    .desktop-horizontal-ad .ad-text-content,
    .desktop-horizontal-ad .ad-title,
    .desktop-horizontal-ad .ad-description,
    .desktop-horizontal-ad .ad-cta-button,
    .desktop-horizontal-ad .ad-stats {
        display: none !important;
    }
    
    .desktop-horizontal-ad .ad-label {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        background: rgba(0,0,0,0.8) !important;
        color: white !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        z-index: 10 !important;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    /* Platform badge styling - Only for desktop */
    .desktop-horizontal-ad .ad-platform-badge {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        z-index: 10 !important;
    }
    
    .platform-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: rgba(0,0,0,0.8) !important;
        color: white !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .platform-badge i {
        font-size: 14px !important;
    }
    
    /* FIX: Remove white space issues for news cards */
    .news-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
    }
    
    .news-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* ============ UPDATED: BOTH BUTTONS IN BOTTOM RIGHT CORNER TOGETHER ============ */
    .image-buttons-container {
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: flex;
        gap: 8px;
        z-index: 10;
    }
    
    .image-source-btn, .image-share-btn {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        border: 2px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        flex-shrink: 0;
    }
    
    .image-source-btn {
        color: #007bff;
    }
    
    .image-share-btn {
        color: var(--primary-color);
    }
    
    .image-source-btn:hover, .image-share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 1);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .image-source-btn:active, .image-share-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.9);
    }
    
    /* Desktop adjustments for image buttons */
    @media (min-width: 1024px) {
        .image-buttons-container {
            bottom: 20px;
            right: 20px;
            gap: 10px;
        }
        
        .image-source-btn, .image-share-btn {
            width: 40px;
            height: 40px;
            font-size: 17px;
        }
    }
    
    /* Mobile adjustments for image buttons */
    @media (max-width: 767px) {
        .image-buttons-container {
            bottom: 10px;
            right: 10px;
            gap: 6px;
        }
        
        .image-source-btn, .image-share-btn {
            width: 34px;
            height: 34px;
            font-size: 15px;
        }
    }
    
    /* Small mobile adjustments */
    @media (max-width: 480px) {
        .image-buttons-container {
            bottom: 8px;
            right: 8px;
            gap: 5px;
        }
        
        .image-source-btn, .image-share-btn {
            width: 32px;
            height: 32px;
            font-size: 14px;
        }
    }
    
    /* Touch feedback for mobile */
    .image-source-btn:active,
    .image-share-btn:active {
        transform: scale(0.95);
    }
    
    /* Focus states for accessibility */
    .image-source-btn:focus-visible,
    .image-share-btn:focus-visible {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* ============ IMPORTANT: LANGUAGE INDICATOR POSITION - NICHE 18px ============ */
    .language-indicator {
        position: absolute !important;
        top: 33px !important; /* UPDATED: Previously 15px, now 18px niche (15px + 18px = 33px) */
        left: 15px !important;
        z-index: 10 !important;
    }
    
    /* Mobile adjustment for language badge position - NICHE 18px */
    @media (max-width: 767px) {
        .language-indicator {
            top: 28px !important; /* UPDATED: Previously 15px, now 18px niche (15px + 13px = 28px) */
            left: 10px !important;
        }
    }
    
    @media (max-width: 480px) {
        .language-indicator {
            top: 26px !important; /* UPDATED: Previously 13px, now 18px niche (13px + 13px = 26px) */
            left: 8px !important;
        }
    }
    
    /* ============ IMPORTANT MOBILE UPDATES ============ */
    /* MOBILE: NEWS IMAGE FULL-WIDTH, BORDERLESS, AND TOUCH-FRIENDLY */
    .news-image {
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 0 !important; /* REMOVED border-radius */
        margin-bottom: 20px !important;
        flex-shrink: 0 !important;
        box-shadow: none !important; /* REMOVED shadow */
        /* 16:9 Aspect Ratio for Mobile */
        aspect-ratio: 16/9 !important;
        height: auto !important;
        max-height: none !important;
        /* FIXED: Remove negative margins and make image flush with top */
        margin: -20px -20px 15px -20px !important; /* Top, Right, Bottom, Left */
        width: calc(100% + 40px) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .news-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        border-radius: 0 !important; /* REMOVED border-radius */
        transition: transform 0.3s ease !important;
    }
    
    /* Touch feedback for image */
    .news-image:active img {
        transform: scale(0.98) !important;
    }
    
    .text-content {
        position: relative;
        overflow: visible !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
        /* FIXED: Add padding to account for negative margins */
        padding-top: 0 !important;
    }
    
    .news-text {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
        padding-right: 5px !important;
    }
    
    .news-meta {
        flex-shrink: 0 !important;
        padding-top: 15px !important;
        border-top: 1px solid #eee !important;
        margin-top: auto !important;
    }
    
    /* Hide scrollbars */
    ::-webkit-scrollbar {
        display: none;
    }
    
    /* FIXED: Adjust slider container top position for mobile */
    .slider-container {
        position: fixed !important;
        top: 50px !important; /* Changed from 60px to 50px for mobile */
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important;
        overflow: hidden !important;
        z-index: 1 !important;
        background: #fff !important;
        margin: 0px auto !important;
    }
    
    @media (min-width: 1024px) {
        .slider-container {
            max-width: 1000px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            top: 75px !important;
            bottom: 75px !important;
            border-radius: 25px !important;
        }
        
        .mobile-vertical-ad {
            border-radius: 25px !important;
        }
        
        .news-card {
            border-radius: 25px !important;
        }
        
        /* DESKTOP: DIFFERENT IMAGE RATIO AND PADDING */
        .news-image {
            aspect-ratio: 3/2 !important; /* Desktop: 3:2 ratio */
            height: 50% !important;
            max-height: 50% !important;
            border-radius: 12px !important; /* Desktop par border-radius maintain */
            margin: 0 0 20px 0 !important; /* Reset mobile margins */
            width: 100% !important;
        }
        
        .news-image img {
            border-radius: 12px !important; /* Desktop par border-radius maintain */
        }
        
        /* Desktop Language Indicator - Also adjusted down */
        .language-indicator {
            top: 35px !important; /* UPDATED: Desktop par bhi niche */
            left: 20px !important;
        }
    }
    
    /* Banner Ads Styling */
    .banner-ad-container {
        position: fixed;
        top: 50px; /* Changed from 60px to 50px for mobile */
        left: 0;
        right: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.95);
        padding: 12px;
        display: none;
        border-bottom: 2px solid var(--primary-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    
    .banner-ad {
        width: 100%;
        text-align: center;
        position: relative;
    }
    
    .banner-ad a {
        display: block;
        text-decoration: none;
    }
    
    .banner-ad img {
        max-width: 100%;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
    }
    
    .banner-ad img:hover {
        transform: scale(1.02);
    }
    
    .banner-ad-label {
        position: absolute;
        top: 10px;
        right: 10px;
        background: linear-gradient(135deg, #ff6b6b, #ff4757);
        color: white;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        letter-spacing: 0.5px;
    }
    
    .close-banner {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 14px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .close-banner:hover {
        background: rgba(255,0,0,0.8);
        transform: rotate(90deg);
    }
    
    /* Desktop Banner Ad */
    .desktop-banner-ad {
        position: fixed;
        top: 75px;
        left: 50%;
        transform: translateX(-50%);
        width: 1000px;
        max-width: 100%;
        z-index: 999;
        background: rgba(0, 0, 0, 0.95);
        padding: 12px;
        border-bottom: 2px solid var(--primary-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        border-radius: 0 0 10px 10px;
        text-align: center;
        display: none;
    }
    
    .desktop-banner-ad img {
        max-width: 100%;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
    }
    
    .desktop-banner-ad img:hover {
        transform: scale(1.02);
    }
    
    .desktop-banner-ad-label {
        position: absolute;
        top: 15px;
        right: 15px;
        background: linear-gradient(135deg, #4d96ff, #357abd);
        color: white;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 4px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-heading);
        letter-spacing: 0.5px;
    }
    
    .close-desktop-banner {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        font-size: 16px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .close-desktop-banner:hover {
        background: rgba(255,0,0,0.8);
        transform: rotate(90deg);
    }

/* ==================== COMPLETELY UPDATED CONTACT MODAL - MOBILE RESPONSIVE ==================== */
/* ==================== COMPLETELY UPDATED CONTACT MODAL - MOBILE RESPONSIVE ==================== */
.contact-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    z-index: 20000;
    padding: 15px;
    box-sizing: border-box;
    backdrop-filter: blur(15px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--font-heading);
    align-items: flex-start; /* Mobile के लिए top से align */
    justify-content: flex-start; /* Top से start */
}

.contact-modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 25px;
    padding: 25px;
    width: 100%;
    max-width: 900px;
    max-height: none; /* REMOVED fixed max-height */
    overflow-y: visible; /* Changed to visible */
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.1);
    margin: 20px auto 80px auto; /* Added bottom margin for mobile nav */
    min-height: auto; /* Auto height */
}

.contact-modal-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
    z-index: 20001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}

.contact-modal-close:hover {
    background: var(--primary-color);
    transform: rotate(90deg);
}

/* Header Styles */
.contact-header {
    text-align: center;

}

.contact-logo {
    color: white;
    padding: 0 10px;
}

.contact-logo i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.contact-logo h2 {
    font-size: 28px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #ffffff, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    font-weight: 700;
}

.contact-logo .tagline {
    font-size: 16px;
    color: #aaa;
    font-weight: 500;
    line-height: 1.4;
}

/* Hero Section */
.contact-hero {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hero-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    padding: 15px;
}

.hero-overlay h3 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-overlay p {
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.4;
}

/* Contact Form - Updated for Mobile */
.contact-form-section {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: visible;
}

.contact-form-section h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.contact-form-section h3 i {
    color: var(--primary-color);
}

.form-group {
    position: relative;
    margin-bottom: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 14px 14px 45px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-family: var(--font-heading);
    transition: all 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
    overflow-y: auto;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 3px rgba(248, 68, 67, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #888;
    font-size: 14px;
}

.form-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 18px;
    pointer-events: none;
}

.form-group textarea + i {
    top: 20px;
    transform: none;
}

.submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-color), #d93635);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 10px;
    font-family: var(--font-heading);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(248, 68, 67, 0.3);
}

.submit-btn:active {
    transform: translateY(-1px);
}

/* Services Section - Updated for Mobile */
.services-section {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: visible;
}

.services-section h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.services-section h3 i {
    color: var(--primary-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.service-card {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.05);
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

.service-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.12);
    border-color: var(--primary-color);
}

.service-card i {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.service-card h4 {
    color: white;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.2;
}

.service-card p {
    color: #aaa;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

/* Contact Info Section */
.contact-info {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: visible;
}

.contact-info h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.contact-info h3 i {
    color: var(--primary-color);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

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

.info-item i {
    font-size: 22px;
    color: var(--primary-color);
    margin-top: 3px;
    flex-shrink: 0;
}

.info-item h4 {
    color: white;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.2;
}

.info-item p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.info-item a {
    color: #4d96ff;
    text-decoration: none;
    transition: color 0.3s;
    word-break: break-all;
}

.info-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.info-item .sub-text {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    line-height: 1.3;
}

/* Footer */
.contact-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    overflow: visible;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.social-link {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.social-link:hover {
    transform: translateY(-3px);
    background: var(--primary-color);
}

.copyright {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

/* Form Message */
#formMessage {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    animation: fadeIn 0.3s ease;
    overflow: visible;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsive Design */
@media (max-width: 767px) {
    .contact-modal {
        padding: 10px;
        padding-top: 50px;
        padding-bottom: 70px; /* Bottom padding for mobile nav */
        overflow-y: auto; /* Enable scrolling */
        align-items: flex-start; /* Top align */
        justify-content: flex-start; /* Start from top */
    }
    
    .contact-modal-content {
        padding: 20px;
        border-radius: 20px;
        margin: 0 auto 100px auto; /* Bottom margin for mobile navigation */
        max-height: none; /* Remove fixed height */
        overflow-y: visible; /* Change to visible */
        min-height: auto; /* Auto height */
    }
    
    .contact-modal-close {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        background: rgba(0,0,0,0.7);
    }
    
    .contact-logo i {
        font-size: 40px;
    }
    
    .contact-logo h2 {
        font-size: 24px;
    }
    
    .contact-logo .tagline {
        font-size: 14px;
    }
    
    .hero-image {
        height: 150px;
    }
    
    .hero-overlay h3 {
        font-size: 16px;
    }
    
    .hero-overlay p {
        font-size: 12px;
    }
    
    .contact-form-section,
    .services-section,
    .contact-info {
        padding: 18px;
        overflow: visible;
    }
    
    .contact-form-section h3,
    .services-section h3,
    .contact-info h3 {
        font-size: 18px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .service-card {
        padding: 12px;
        min-height: 120px;
    }
    
    .service-card i {
        font-size: 24px;
    }
    
    .service-card h4 {
        font-size: 13px;
    }
    
    .service-card p {
        font-size: 11px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 12px 12px 42px;
        font-size: 14px;
    }
    
    .form-group i {
        left: 12px;
        font-size: 16px;
    }
    
    .info-item i {
        font-size: 20px;
    }
    
    .submit-btn {
        padding: 14px;
        font-size: 15px;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .contact-modal {
        padding: 8px;
        padding-top: 45px;
        padding-bottom: 65px; /* Bottom padding for mobile nav */
    }
    
    .contact-modal-content {
        padding: 15px;
        margin: 0 auto 90px auto; /* Adjusted bottom margin */
    }
    
    .contact-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    
    .contact-logo i {
        font-size: 36px;
    }
    
    .contact-logo h2 {
        font-size: 22px;
    }
    
    .contact-logo .tagline {
        font-size: 13px;
    }
    
    .hero-image {
        height: 130px;
    }
    
    .contact-form-section,
    .services-section,
    .contact-info {
        padding: 15px;
    }
    
    .contact-form-section h3,
    .services-section h3,
    .contact-info h3 {
        font-size: 17px;
        gap: 8px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .service-card {
        min-height: auto;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 11px 11px 11px 40px;
        font-size: 13px;
    }
    
    .form-group i {
        font-size: 15px;
        left: 10px;
    }
    
    .submit-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    .info-grid {
        gap: 12px;
    }
    
    .info-item {
        gap: 10px;
    }
    
    .social-links {
        gap: 10px;
    }
    
    .social-link {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
    
    .copyright {
        font-size: 12px;
    }
}

/* Small Mobile - Portrait */
@media (max-width: 360px) {
    .contact-modal-content {
        padding: 12px;
        margin: 0 auto 80px auto;
    }
    
    .contact-logo h2 {
        font-size: 20px;
    }
    
    .contact-logo .tagline {
        font-size: 12px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 12px;
    }
    
    .submit-btn {
        font-size: 13px;
    }
}

/* Tablet Landscape */
@media (min-width: 768px) and (max-width: 1024px) {
    .contact-modal {
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .contact-modal-content {
        max-width: 700px;
        padding: 30px;
        margin: 20px auto;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Large Screens */
@media (min-width: 1025px) {
    .contact-modal {
        align-items: center;
        justify-content: center;
    }
    
    .contact-modal-content {
        max-width: 900px;
        padding: 30px;
        margin: 20px auto;
    }
    
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
    
    /* ==================== FONT & TYPOGRAPHY SYSTEM ==================== */
    :root {
        --primary-color: #f84443;
        --secondary-color: #007bff;
        
        /* BEST FONTS FOR EACH LANGUAGE - UPDATED */
        --font-hindi-primary: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Arial Unicode MS', sans-serif;
        --font-english-primary: 'Poppins', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
        --font-heading: 'Poppins', 'Segoe UI', 'Roboto', sans-serif;
        
        /* EYE-CATCHING FONT SIZES - LARGER AND BOLD */
        --font-size-xs: 14px;    /* Increased from 12px */
        --font-size-sm: 15px;    /* Increased from 13px */
        --font-size-base: 16px;  /* Increased from 14px */
        --font-size-md: 17px;    /* Increased from 15px */
        --font-size-lg: 18px;    /* Increased from 16px */
        --font-size-xl: 20px;    /* Increased from 18px */
        --font-size-xxl: 22px;   /* Increased from 20px */
        --font-size-xxxl: 24px;  /* Increased from 22px */
        --font-size-heading-sm: 26px; /* Increased from 24px */
        --font-size-heading-md: 28px; /* Increased from 26px */
        --font-size-heading-lg: 30px; /* Increased from 28px */
        
        /* Line heights */
        --line-height-tight: 1.2;
        --line-height-normal: 1.4;
        --line-height-relaxed: 1.6;
        --line-height-loose: 1.8;
        
        /* Letter spacing - MORE PROMINENT */
        --letter-spacing-tight: -0.005em;
        --letter-spacing-normal: 0.01em;
        --letter-spacing-wide: 0.02em;
        --letter-spacing-wider: 0.03em;
        
        /* Font weights - BOLDER FOR BETTER VISIBILITY */
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --font-weight-black: 900;
    }
    
    /* ==================== RESET & BASE ==================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* ============ IMPORTANT MOBILE BACKGROUND FIX ============ */
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* IMPORTANT: Mobile par white background */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        touch-action: pan-y;
        font-family: var(--font-english-primary);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        font-weight: var(--font-weight-medium);
    }
    
    /* Language-specific typography - ENHANCED */
    .hi-content,
    .hi-content .headline,
    .hi-content .news-text,
    .hi-content .news-meta,
    .hi-content .news-source {
        font-family: var(--font-hindi-primary) !important;
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--letter-spacing-normal);
        word-spacing: 0.08em;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    .en-content,
    .en-content .headline,
    .en-content .news-text,
    .en-content .news-meta,
    .en-content .news-source {
        font-family: var(--font-english-primary) !important;
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--letter-spacing-tight);
        word-spacing: normal;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Language indicator badge - ENHANCED */
    .lang-badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 16px;
        font-size: 13px;
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
        font-family: var(--font-heading);
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
    
    .lang-badge.hindi {
        background: linear-gradient(135deg, #ff6b6b, #ff4757);
        color: white;
        border: 2px solid #ff4757;
    }
    
    .lang-badge.english {
        background: linear-gradient(135deg, #4d96ff, #357abd);
        color: white;
        border: 2px solid #357abd;
    }
    
    /* Navigation loading state */
    .nav-section.loading {
        opacity: 0.7;
        cursor: wait !important;
        position: relative;
    }

    .nav-section.loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: navLoadingSpin 1s linear infinite;
    }

    @keyframes navLoadingSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* ==================== IMPROVED TOP NAVIGATION - MOBILE FRIENDLY ==================== */
    .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #000;
        border-bottom: 1px solid #333;
        padding: 8px 10px;
        z-index: 1000;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.95);
        transition: top 0.3s ease;
    }
    
    .nav-sections-container {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    
    /* IMPROVED: Mobile scroll with better touch handling - NO ARROWS */
    .nav-sections {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 8px 15px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        touch-action: pan-x;
        cursor: grab;
        position: relative;
        z-index: 1;
        scroll-padding: 0 15px;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        will-change: transform;
        user-select: none;
    }
    
    .nav-sections:active {
        cursor: grabbing;
    }
    
    .nav-sections::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    
    /* FIXED: Better fade effects for scroll boundaries */
    .nav-sections-container::before,
    .nav-sections-container::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        pointer-events: none;
        z-index: 2;
    }
    
    .nav-sections-container::before {
        left: 0;
        background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    }
    
    .nav-sections-container::after {
        right: 0;
        background: linear-gradient(to left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    }
    
    /* FIXED: UPDATED NAV SECTION STYLES - REMOVED ICONS AND ROUND BORDERS */
    .nav-section {
        padding: 8px 16px;
        background: #222;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        font-size: var(--font-size-base);
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-medium);
        flex-shrink: 0;
        min-width: fit-content;
        user-select: none;
        letter-spacing: var(--letter-spacing-normal);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        position: relative;
        z-index: 3;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        color: #ccc;
        scroll-snap-align: start;
    }
    
    .nav-section:hover {
        background: #333;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    
    .nav-section.active {
        background: #007bff;
        color: white;
        border: none;
        font-weight: var(--font-weight-bold);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
        transform: scale(1.02);
    }
    
    .nav-section:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    /* Hide icons in navigation */
    .nav-section i {
        display: none;
    }
    
    /* Navigation scroll arrows - COMPLETELY REMOVED */
    .nav-arrow {
        display: none !important;
    }
    
    /* FIXED: Scroll momentum for iOS */
    @supports (-webkit-overflow-scrolling: touch) {
        .nav-sections {
            -webkit-overflow-scrolling: touch;
            scroll-behavior: auto;
        }
    }
    
    /* ==================== PROGRESS BAR ==================== */
    .progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 4px;
        background: var(--primary-color);
        z-index: 1001;
        width: 0%;
        transition: width 0.3s;
        box-shadow: 0 2px 8px rgba(248, 68, 67, 0.3);
    }
    
    /* ==================== SLIDER CONTAINER ==================== */
    .slider-container {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 60px;
        overflow: hidden;
        z-index: 1;
        background: #fff !important;
        margin: 0px auto;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.3s ease;
    }
    
    /* AJAX Loaded Fix */
    .slider-container.ajax-loaded {
        animation: none;
        transition: none;
        transform: none !important;
    }
    
    .news-slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        background: #fff !important;
    }
    
    .news-card, .mobile-vertical-ad, .desktop-horizontal-ad {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff !important;
        color: #000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
        display: flex;
        flex-direction: column;
        overscroll-behavior: contain;
    }
    
    /* Headline styles with perfect typography - ENHANCED */
    .headline {
        font-size: var(--font-size-heading-sm);
        line-height: var(--line-height-tight);
        color: #111;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        margin-bottom: 10px;
        word-break: break-word;
        overflow-wrap: break-word;
        letter-spacing: var(--letter-spacing-tight);
        text-shadow: 0 1px 3px rgba(0,0,0,0.1);
        flex-shrink: 0;
    }
    
    /* News text with perfect typography - ENHANCED */
    .news-text {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
        color: #333;
        font-weight: var(--font-weight-medium);
        margin-bottom: 12px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        word-spacing: 0.08em;
        padding-right: 5px;
    }
    
    /* News Interaction Styles (Ratings & Comments) */
    .news-interaction {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin: 10px 0;
    }
    
    .news-rating {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .rating-stars {
        color: #ffc107;
        font-size: 16px;
        cursor: pointer;
    }
    
    .rating-stars i {
        margin-right: 2px;
    }
    
    .rating-stars i:hover {
        transform: scale(1.2);
    }
    
    .rating-count {
        font-size: 14px;
        color: #666;
    }
    
    .news-comments .comment-btn {
        background: none;
        border: none;
        color: var(--secondary-color);
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.3s;
    }
    
    .news-comments .comment-btn:hover {
        background: rgba(0, 123, 255, 0.1);
    }
    
    /* FIX: News meta white space issue - IMPROVED */
    .news-meta {
        display: flex;
        justify-content: space-between;
        color: #666;
        font-size: var(--font-size-sm);
        padding-top: 15px;
        border-top: 2px solid #f0f0f0;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-semibold);
        flex-shrink: 0;
        letter-spacing: var(--letter-spacing-wide);
        margin-top: auto;
        min-height: 45px;
        align-items: center;
    }
    
    .news-source {
        color: var(--primary-color);
        font-weight: var(--font-weight-bold);
    }
    
    .news-time {
        color: #555;
        font-weight: var(--font-weight-medium);
    }
    
    /* ==================== NO NEWS MESSAGE ==================== */
    .no-news {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        padding: 30px;
        color: #666;
        background: #fff !important;
    }
    
    .no-news i {
        font-size: 60px;
        margin-bottom: 25px;
        color: #ddd;
    }
    
    .no-news h2 {
        font-size: var(--font-size-heading-lg);
        margin-bottom: 15px;
        color: #222;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .no-news p {
        font-size: var(--font-size-xl);
        margin-bottom: 25px;
        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-medium);
    }
    
    /* ==================== TOAST NOTIFICATION ==================== */
    .toast {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.98);
        color: white;
        padding: 15px 25px;
        border-radius: 30px;
        z-index: 10000;
        display: none;
        align-items: center;
        gap: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        animation: toastSlideIn 0.3s ease;
        backdrop-filter: blur(15px);
        border: 2px solid rgba(255,255,255,0.15);
        font-family: var(--font-heading);
        font-weight: var(--font-weight-semibold);
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--font-size-md);
    }
    
    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(25px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
    
    /* ==================== BOTTOM NAVIGATION ==================== */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        border-top: 2px solid #333;
        padding: 12px;
        z-index: 1000;
        height: 65px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        backdrop-filter: blur(15px);
        background: rgba(0, 0, 0, 0.98);
    }
    
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #aaa;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        font-family: var(--font-heading);
        font-weight: var(--font-weight-semibold);
        padding: 10px;
        flex: 1;
        text-align: center;
    }
    
    .nav-item:active, .nav-item.active {
        color: var(--primary-color);
        transform: translateY(-3px);
    }
    
    .nav-icon {
        font-size: 22px;
        margin-bottom: 4px;
        transition: transform 0.3s;
    }
    
    .nav-item:active .nav-icon {
        transform: translateY(-3px) scale(1.1);
    }
    
    .nav-label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }
    
    /* ==================== SHARE MODAL - FIXED FOR MOBILE ==================== */
    .share-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.98);
        z-index: 20000;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        backdrop-filter: blur(15px);
        align-items: flex-start;
        padding-top: 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .share-modal-content {
        background: white;
        border-radius: 20px;
        padding: 25px;
        width: 100%;
        max-width: 450px;
        max-height: 85vh;
        overflow-y: auto;
        text-align: center;
        position: relative;
        box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        display: flex;
        flex-direction: column;
        margin: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .share-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #666;
        z-index: 20001;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s;
        border: 2px solid #f0f0f0;
    }
    
    .share-modal-close:active {
        background: #f0f0f0;
        color: #333;
        transform: rotate(90deg);
    }
    
    /* Image Preview */
    #imagePreview {
        margin: 20px 0;
        text-align: center;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        padding: 20px;
        border: 3px dashed #dee2e6;
    }
    
    #shareJpgPreview {
        max-width: 100%;
        max-height: 280px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        display: block;
        transition: transform 0.4s ease;
    }
    
    #shareJpgPreview:hover {
        transform: scale(1.03);
    }
    
    .loading-image {
        font-size: var(--font-size-md);
        color: #666;
        display: flex;
        align-items: center;
        gap: 15px;
        flex-direction: column;
        font-family: var(--font-heading);
    }
    
    .loading-image i {
        font-size: 28px;
        color: var(--primary-color);
    }
    
    /* Share Actions Grid */
    .share-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 25px;
    }
    
    .share-action-btn {
        padding: 16px;
        border: none;
        border-radius: 15px;
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transition: all 0.3s ease;
        font-size: var(--font-size-md);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        min-height: 55px;
        font-family: var(--font-heading);
        letter-spacing: 0.5px;
    }
    
    .share-action-btn:active {
        transform: translateY(2px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    }
    
    .share-action-btn.save {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
    }
    
    .share-action-btn.copy {
        background: linear-gradient(135deg, #17a2b8, #6f42c1);
        color: white;
    }
    
    .share-action-btn.share {
        background: linear-gradient(135deg, var(--primary-color), #fd7e14);
        color: white;
    }
    
    .share-action-btn.close {
        background: linear-gradient(135deg, #6c757d, #343a40);
        color: white;
    }
    
    /* News Card Capture */
    .news-card-capture {
        position: fixed;
        top: -9999px;
        left: -9999px;
        width: 400px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.35);
        overflow: hidden;
        z-index: 9999;
        font-family: var(--font-heading);
    }
    
    .capture-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, #d93635 100%);
        color: white;
        padding: 25px;
        text-align: center;
    }
    
    .capture-logo {
        font-size: var(--font-size-heading-sm);
        font-weight: var(--font-weight-black);
        margin-bottom: 8px;
        font-family: var(--font-heading);
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .capture-tagline {
        font-size: var(--font-size-md);
        opacity: 0.95;
        font-weight: var(--font-weight-semibold);
    }
    
    .capture-image-container {
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    
    .capture-news-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .capture-default-image {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        flex-direction: column;
    }
    
    .capture-content-area {
        padding: 25px;
    }
    
    .capture-headline {
        font-size: var(--font-size-xxl);
        font-weight: var(--font-weight-bold);
        margin-bottom: 15px;
        line-height: var(--line-height-normal);
        color: #111;
        font-family: var(--font-heading);
    }
    
    .capture-content {
        font-size: var(--font-size-md);
        line-height: var(--line-height-relaxed);
        margin-bottom: 20px;
        color: #333;
    }
    
    .capture-meta {
        border-top: 2px solid #e9ecef;
        padding-top: 15px;
        font-size: var(--font-size-sm);
        color: #555;
        font-family: var(--font-heading);
    }
    
    .capture-source {
        margin-bottom: 8px;
        font-weight: var(--font-weight-bold);
        color: var(--primary-color);
    }
    
    .capture-date {
        font-style: italic;
        margin-bottom: 8px;
    }
    
    .capture-footer {
        color: #777;
        font-size: var(--font-size-xs);
        margin-top: 8px;
        font-weight: var(--font-weight-semibold);
    }
    
    /* ==================== IMAGE MODAL ==================== */
    .image-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.98);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(15px);
    }
    
    .image-modal-content {
        position: relative;
        max-width: 95%;
        max-height: 85vh;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    }
    
    .image-modal-content img {
        max-width: 100%;
        max-height: 85vh;
        display: block;
        transition: transform 0.4s ease;
    }
    
    .image-modal-close {
        position: absolute;
        top: -50px;
        right: 0;
        background: rgba(255, 255, 255, 0.25);
        border: none;
        color: white;
        font-size: 28px;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        backdrop-filter: blur(15px);
        border: 2px solid rgba(255,255,255,0.4);
    }
    
    .image-modal-close:active {
        background: rgba(255, 255, 255, 0.4);
        transform: rotate(90deg);
    }
    
    /* ==================== LOADING OVERLAY ==================== */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.95);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        backdrop-filter: blur(15px);
    }
    
    .loading-spinner {
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-top: 4px solid var(--primary-color);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* ==================== TTS STATUS ==================== */
    .tts-status {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, rgba(248, 68, 67, 0.98), rgba(217, 54, 53, 0.98));
        color: white;
        padding: 12px 25px;
        border-radius: 25px;
        font-size: var(--font-size-md);
        z-index: 10000;
        display: none;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        backdrop-filter: blur(15px);
        border: 2px solid rgba(255,255,255,0.25);
        box-shadow: 0 6px 20px rgba(248, 68, 67, 0.4);
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* ==================== RESPONSIVE DESKTOP (1024px+) ==================== */
    @media (min-width: 1024px) {
        :root {
            --font-size-xs: 15px;
            --font-size-sm: 16px;
            --font-size-base: 17px;
            --font-size-md: 18px;
            --font-size-lg: 19px;
            --font-size-xl: 22px;
            --font-size-xxl: 26px;
            --font-size-xxxl: 30px;
            --font-size-heading-sm: 34px;
            --font-size-heading-md: 38px;
            --font-size-heading-lg: 42px;
        }
        
        .top-nav {
            max-width: 100%;
            left: 0;
            transform: none;
            border-radius: 0;
            border-bottom: 2px solid #333;
            background: #000;
            padding: 8px 30px;
            height: 50px;
        }
        
        .nav-sections-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .nav-sections {
            padding: 8px 15px;
            width: 100%;
            gap: 10px;
        }
        
        .nav-section {
            padding: 8px 18px;
            font-size: var(--font-size-md);
        }
        
        .bottom-nav {
            max-width: 100%;
            left: 0;
            transform: none;
            border-radius: 0;
            border-top: 2px solid #333;
            background: #000;
            padding: 15px 30px;
        }
        
        .slider-container {
            max-width: 1000px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            top: 60px !important;
            bottom: 75px !important;
            border-radius: 25px !important;
            overflow: hidden !important;
            box-shadow: 0 25px 80px rgba(0,0,0,0.4);
            border: 2px solid rgba(255,255,255,0.15);
            background: #fff !important;
        }
        
        /* AJAX loaded के लिए important override */
        .slider-container.ajax-loaded {
            max-width: 1000px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            top: 60px !important;
            bottom: 75px !important;
            border-radius: 25px !important;
            background: #fff !important;
        }
        
        .news-card {
            padding: 35px 35px 20px 35px;
            border-radius: 20px;
            background: #fff !important;
        }
        
        .desktop-horizontal-ad {
            border-radius: 25px;
            background: #000 !important;
        }
        
        .mobile-vertical-ad {
            border-radius: 25px;
            background: #000 !important;
        }
        
        .news-content {
            gap: 25px;
        }

        /* DESKTOP: DIFFERENT IMAGE RATIO (3:2) WITH PROPER MARGINS */
        .news-image {
            height: 50%;
            max-height: 50%;
            aspect-ratio: 3/2 !important;
            border-radius: 20px;
            margin: 0 0 25px 0 !important; /* Desktop proper margins */
            width: 100% !important;
        }
        
        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px !important;
        }
        
        .text-content {
            gap: 20px;
            flex: 1;
            min-height: 0;
            overflow: visible !important;
        }
        
        .headline {
            font-size: var(--font-size-heading-sm);
            line-height: var(--line-height-tight);
        }
        
        .news-text {
            font-size: var(--font-size-lg);
            line-height: var(--line-height-relaxed);
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            margin-bottom: 15px;
        }
        
        .no-news i {
            font-size: 85px;
        }
        
        .no-news h2 {
            font-size: var(--font-size-heading-md);
        }
        
        .no-news p {
            font-size: var(--font-size-xl);
        }
        
        .toast {
            max-width: 450px;
            padding: 20px 35px;
            font-size: var(--font-size-md);
        }
        
        .share-modal-content {
            max-width: 550px;
            max-height: 80vh;
            margin-top: auto;
            margin-bottom: auto;
        }
        
        .share-actions {
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        
        .share-action-btn.close {
            grid-column: span 2;
        }
        
        .lang-badge {
            font-size: var(--font-size-sm);
            padding: 7px 15px;
        }
        
        .platform-badge {
            font-size: 13px;
            padding: 6px 12px;
        }
        
        /* Banner Ads for Desktop */
        .banner-ad-container {
            top: 60px;
            max-width: 1000px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0 0 10px 10px;
            padding: 15px;
        }
        
        .banner-ad img {
            max-height: 120px;
        }
        
        .banner-ad-label {
            top: 15px;
            right: 15px;
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .close-banner {
            width: 28px;
            height: 28px;
            font-size: 16px;
        }
        
        /* Desktop banner ad */
        .desktop-banner-ad {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 90px;
            background: white;
            z-index: 1000;
            display: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .desktop-banner-ad .banner-ad {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .desktop-banner-ad img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .desktop-banner-ad-label {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 2px 8px;
            font-size: 10px;
            border-radius: 3px;
        }
        
        .close-desktop-banner {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
        }
        
        /* Desktop specific styles - SHOW DESKTOP ADS */
        .mobile-vertical-ad {
            display: none !important;
        }
        .desktop-horizontal-ad {
            display: flex !important;
        }
    }
    
    /* ==================== RESPONSIVE TABLET (768px - 1023px) ==================== */
    @media (min-width: 768px) and (max-width: 1023px) {
        :root {
            --font-size-xs: 14px;
            --font-size-sm: 15px;
            --font-size-base: 16px;
            --font-size-md: 17px;
            --font-size-lg: 18px;
            --font-size-xl: 20px;
            --font-size-xxl: 22px;
            --font-size-xxxl: 24px;
            --font-size-heading-sm: 26px;
            --font-size-heading-md: 28px;
            --font-size-heading-lg: 30px;
        }
        
        .headline {
            font-size: var(--font-size-heading-sm);
            line-height: var(--line-height-tight);
        }
        
        .news-text {
            font-size: var(--font-size-lg);
            line-height: var(--line-height-relaxed);
        }
        
        .text-content {
            padding-bottom: 0;
        }
        
        .share-modal-content {
            max-width: 500px;
            max-height: 80vh;
            margin-top: auto;
            margin-bottom: auto;
        }
        
        .share-actions {
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .share-action-btn.close {
            grid-column: span 2;
        }
        
        .lang-badge {
            font-size: var(--font-size-xs);
            padding: 6px 14px;
        }
        
        .platform-badge {
            font-size: 11px;
            padding: 5px 10px;
        }
        
        .banner-ad img {
            max-height: 100px;
        }
        
        /* Tablet specific styles - Detect if mobile or desktop */
        @media (hover: hover) and (pointer: fine) {
            /* Desktop-like device (has mouse) */
            .mobile-vertical-ad {
                display: none !important;
            }
            .desktop-horizontal-ad {
                display: flex !important;
            }
            
            /* Tablet Desktop: 3:2 aspect ratio */
            .news-image {
                aspect-ratio: 3/2 !important;
                height: 50% !important;
                border-radius: 12px !important;
                margin: 0 0 20px 0 !important;
                width: 100% !important;
            }
            
            .news-image img {
                border-radius: 12px !important;
            }
        }
        
        @media (hover: none) and (pointer: coarse) {
            /* Mobile-like device (touch screen) */
            .desktop-horizontal-ad {
                display: none !important;
            }
            .mobile-vertical-ad {
                display: flex !important;
            }
            
            /* Tablet Mobile: 16:9 aspect ratio with full-width borderless */
            .news-image {
                aspect-ratio: 16/9 !important;
                height: auto !important;
                border-radius: 0 !important;
                margin: -20px -20px 15px -20px !important;
                width: calc(100% + 40px) !important;
            }
            
            .news-image img {
                border-radius: 0 !important;
            }
        }
    }
    
    /* ==================== RESPONSIVE MOBILE (< 768px) ==================== */
    @media (max-width: 767px) {
        :root {
            --font-size-xs: 13px;
            --font-size-sm: 14px;
            --font-size-base: 15px;
            --font-size-md: 16px;
            --font-size-lg: 17px;
            --font-size-xl: 18px;
            --font-size-xxl: 20px;
            --font-size-xxxl: 22px;
            --font-size-heading-sm: 24px;
            --font-size-heading-md: 26px;
            --font-size-heading-lg: 28px;
        }
        
        .top-nav {
            height: 50px;
        }
        
        .bottom-nav {
            height: 60px;
        }
        
        /* FIXED: Adjust slider container top for mobile */
        .slider-container {
            top: 50px;
            bottom: 60px;
            background: #fff !important;
        }
        
        .nav-section {
            padding: 6px 14px;
            font-size: var(--font-size-base);
        }
        
        .headline {
            font-size: var(--font-size-heading-sm);
            line-height: var(--line-height-tight);
        }
        
        .news-text {
            font-size: var(--font-size-md);
            line-height: var(--line-height-relaxed);
            flex: 1;
            min-height: 0;
        }
        
        /* MOBILE: FORCE 16:9 ASPECT RATIO WITH FULL-WIDTH BORDERLESS AND NO TOP GAP */
        .news-image {
            aspect-ratio: 16/9 !important;
            height: auto !important;
            max-height: none !important;
            border-radius: 0 !important;
            margin: -20px -20px 15px -20px !important; /* Negative margins to remove white space */
            width: calc(100% + 40px) !important;
            cursor: pointer !important;
        }
        
        .news-image img {
            border-radius: 0 !important;
        }
        
        /* IMPROVED: Better mobile navigation scrolling */
        .nav-sections {
            gap: 6px;
            padding: 8px 10px;
            scroll-padding: 0 10px;
        }
        
        .nav-section {
            padding: 6px 12px;
            font-size: var(--font-size-sm);
            min-width: max-content;
        }
        
        /* FIXED: Better fade gradients for mobile */
        .nav-sections-container::before {
            left: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
            width: 25px;
        }
        
        .nav-sections-container::after {
            right: 0;
            background: linear-gradient(to left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
            width: 25px;
        }
        
        /* Share modal mobile fixes */
        .share-modal {
            padding-top: 15px;
            align-items: flex-start;
        }
        
        .share-modal-content {
            max-height: 85vh;
            margin-top: 10px;
            margin-bottom: 15px;
        }
        
        #imagePreview {
            min-height: 180px;
            padding: 15px;
        }
        
        #shareJpgPreview {
            max-height: 230px;
        }
        
        .share-actions {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        
        .share-action-btn {
            padding: 14px;
            font-size: var(--font-size-md);
            min-height: 50px;
        }
        
        .toast {
            width: 90%;
            padding: 12px 20px;
            font-size: var(--font-size-md);
            bottom: 70px;
        }
        
        .nav-section {
            padding: 5px 12px;
            font-size: var(--font-size-sm);
        }
        
        .nav-icon {
            font-size: var(--font-size-xl);
        }
        
        .nav-label {
            font-size: var(--font-size-xs);
        }
        
        .lang-badge {
            font-size: 12px;
            padding: 5px 12px;
        }
        
        .text-content {
            gap: 15px;
            flex: 1;
            min-height: 0;
            overflow: visible;
            padding-bottom: 0;
            padding-top: 0 !important; /* Ensure no top padding */
        }
        
        .news-card {
            padding: 15px 15px 10px 15px;
            background: #fff !important;
        }
        
        .news-content {
            gap: 12px;
            padding-top: 0 !important; /* Ensure no top padding */
        }
        
        .news-meta {
            padding-top: 12px;
            min-height: 40px;
            font-size: var(--font-size-xs);
        }
        
        /* Mobile banner ad */
        .banner-ad-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 70px;
            background: white;
            z-index: 1000;
            display: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .banner-ad-container .banner-ad {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .banner-ad-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .banner-ad-label {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 2px 8px;
            font-size: 10px;
            border-radius: 3px;
        }
        
        .close-banner {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
        }
        
        /* MOBILE SPECIFIC: SHOW MOBILE ADS, HIDE DESKTOP ADS */
        .desktop-horizontal-ad {
            display: none !important;
        }
        .mobile-vertical-ad {
            display: flex !important;
        }
    }
    
    @media (max-width: 480px) {
        :root {
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-base: 13px;
            --font-size-md: 14px;
            --font-size-lg: 15px;
            --font-size-xl: 16px;
            --font-size-xxl: 17px;
            --font-size-xxxl: 18px;
            --font-size-heading-sm: 20px;
            --font-size-heading-md: 22px;
            --font-size-heading-lg: 24px;
        }
        
        .top-nav {
            height: 48px;
        }
        
        .bottom-nav {
            height: 55px;
        }
        
        .slider-container {
            top: 48px;
            bottom: 55px;
            background: #fff !important;
        }
        
        .news-card {
            padding: 12px 12px 8px 12px;
            background: #fff !important;
        }
        
        .headline {
            font-size: var(--font-size-heading-sm);
            line-height: var(--line-height-tight);
        }
        
        .news-text {
            font-size: var(--font-size-md);
            line-height: var(--line-height-relaxed);
            flex: 1;
            min-height: 0;
        }
        
        .text-content {
            gap: 12px;
            flex: 1;
            min-height: 0;
            overflow: visible;
            padding-bottom: 0;
            padding-top: 0 !important;
        }
        
        /* IMPROVED: Even better mobile navigation for small screens */
        .nav-sections {
            gap: 4px;
            padding: 6px 8px;
        }
        
        .nav-section {
            padding: 5px 10px;
            font-size: var(--font-size-sm);
        }
        
        .news-meta {
            font-size: var(--font-size-xs);
            padding-top: 10px;
            min-height: 38px;
        }
        
        .share-modal-content {
            padding: 20px;
            max-height: 85vh;
        }
        
        .share-action-btn {
            padding: 12px;
            font-size: var(--font-size-md);
            min-height: 48px;
        }
        
        .toast {
            width: 95%;
            padding: 10px 18px;
            font-size: var(--font-size-md);
            bottom: 70px;
        }
        
        .nav-section {
            padding: 5px 12px;
            font-size: var(--font-size-sm);
        }
        
        .nav-icon {
            font-size: var(--font-size-xl);
        }
        
        .nav-label {
            font-size: var(--font-size-xs);
        }
        
        .lang-badge {
            font-size: 12px;
            padding: 5px 12px;
        }
        
        .banner-ad img {
            max-height: 80px;
        }
        
        .banner-ad-label {
            font-size: 9px;
            padding: 2px 5px;
        }
        
        .close-banner {
            width: 20px;
            height: 20px;
            font-size: 10px;
        }
    }
    
    @media (max-width: 360px) {
        :root {
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-base: 13px;
            --font-size-md: 14px;
            --font-size-lg: 15px;
            --font-size-xl: 16px;
            --font-size-xxl: 17px;
            --font-size-xxxl: 18px;
            --font-size-heading-sm: 20px;
            --font-size-heading-md: 22px;
            --font-size-heading-lg: 24px;
        }
        
        .headline {
            font-size: var(--font-size-heading-sm);
            line-height: var(--line-height-tight);
        }
        
        .news-text {
            font-size: var(--font-size-md);
            line-height: var(--line-height-relaxed);
            flex: 1;
            min-height: 0;
        }
        
        .nav-section {
            padding: 4px 10px;
            font-size: var(--font-size-xs);
        }
        
        .text-content {
            gap: 12px;
            flex: 1;
            min-height: 0;
            overflow: visible;
            padding-bottom: 0;
            padding-top: 0 !important;
        }
        
        .lang-badge {
            font-size: 10px;
            padding: 3px 8px;
        }
        
        .news-card {
            padding: 10px 10px 6px 10px;
            background: #fff !important;
        }
        
        .news-content {
            gap: 10px;
            padding-top: 0 !important;
        }
        
        .banner-ad img {
            max-height: 70px;
        }
    }
    
    /* ==================== RESPONSIVE ADJUSTMENTS ==================== */
    @media (max-width: 1023px) {
        .desktop-banner-ad {
            display: none !important;
        }
    }
    
    @media (min-width: 1024px) {
        .banner-ad-container {
            display: none !important;
        }
        
        /* Desktop पर horizontal ads show करें, mobile ads hide करें */
        .mobile-vertical-ad {
            display: none !important;
        }
        .desktop-horizontal-ad {
            display: flex !important;
        }
    }
    
    /* ==================== IMAGE QUALITY ENHANCEMENTS ==================== */
    .news-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: high-quality;
    }
    
    /* ==================== TYPOGRAPHY ENHANCEMENTS ==================== */
    .text-content h1, 
    .text-content h2, 
    .text-content h3 {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--letter-spacing-tight);
        text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    
    .text-content p, 
    .text-content span, 
    .text-content div {
        letter-spacing: var(--letter-spacing-normal);
    }
    
    .text-content {
        text-rendering: optimizeLegibility;
    }
    
    /* ==================== LANGUAGE-SPECIFIC TYPOGRAPHY OPTIMIZATION ==================== */
    .hi-content .news-text {
        line-height: var(--line-height-loose);
        word-spacing: 0.12em;
    }
    
    .hi-content .headline {
        line-height: var(--line-height-normal);
        word-spacing: 0.08em;
    }
    
    .en-content .news-text {
        line-height: var(--line-height-relaxed);
        word-spacing: normal;
    }
    
    .en-content .headline {
        line-height: var(--line-height-tight);
        word-spacing: normal;
    }
    
    /* ==================== MOBILE OPTIMIZATION ==================== */
    /* Prevent text selection on mobile */
    .news-card, .image-source-btn, .image-share-btn, .nav-section {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Better touch feedback */
    .image-source-btn:active, .image-share-btn:active, .nav-section:active {
        opacity: 0.9;
        transform: scale(0.96);
    }
    
    /* Improve scrolling performance */
    .news-slider, .news-content, .text-content {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Prevent zoom on double-tap */
    .news-card {
        touch-action: pan-y;
    }
    
    /* Enhanced focus states for accessibility */
    .image-source-btn:focus-visible,
    .image-share-btn:focus-visible,
    .nav-section:focus-visible,
    .share-action-btn:focus-visible {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Smooth transitions for all interactive elements */
    .image-source-btn,
    .image-share-btn,
    .nav-section,
    .nav-item,
    .share-action-btn {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* ==================== CUSTOM SCROLLBAR FOR NEWS-TEXT ==================== */
    .news-text::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    .news-text::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .news-text::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }
    
    .news-text::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    </style>
</head>
<body>
    <!-- New Feed Available Notification -->
    <div class="new-feed-notification" id="newFeedNotification">
        <div class="new-feed-content">
            <div class="new-feed-icon">
                <i class="fas fa-bell"></i>
            </div>
            <div class="new-feed-text">
                New Feed Available
            </div>
        </div>
        <button class="new-feed-refresh-btn" id="newFeedRefreshBtn">
            <i class="fas fa-sync-alt refresh-icon"></i>
            <i class="fas fa-spinner refresh-spinner"></i>
            Refresh
        </button>
        <div class="new-feed-auto-hide"></div>
    </div>
    
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
        <div style="color: white; margin-top: 15px; font-size: 16px; font-family: var(--font-heading); font-weight: var(--font-weight-semibold);">Loading...</div>
    </div>
    
    <!-- Toast Notification -->
    <div class="toast" id="toast">
        <i class="fas fa-check-circle" id="toastIcon"></i>
        <span id="toastMessage"></span>
    </div>
    
    <!-- TTS Status -->
    <div class="tts-status" id="ttsStatus"></div>
    
    <!-- Progress Bar -->
    <div class="progress-bar" id="progressBar"></div>
    
    <!-- Desktop Banner Ads (Only for Desktop) -->
        <div class="desktop-banner-ad" id="desktopBannerAd">
                <div class="banner-ad">
                        <a href="https://wa.me/+919999449641" target="_blank">
                <img src="uploads/ads/ad_1768896013_696f360d41dca.jpg" 
                     alt="Desktop Banner Ad">
            </a>
                        <div class="desktop-banner-ad-label">ADVERTISEMENT - DESKTOP</div>
            <button class="close-desktop-banner" onclick="document.getElementById('desktopBannerAd').style.display='none'">×</button>
        </div>
            </div>
        
    <!-- Mobile Top Banner Ads (Only for Mobile) -->
        
    <!-- Top Navigation - UPDATED WITH BETTER MOBILE SCROLL -->
    <div class="top-nav">
        <div class="nav-sections-container">
            <!-- Removed arrows - Users can scroll with finger -->
            <div class="nav-sections">
                                    <div class="nav-section " 
                         data-category="all">
                        My Feed                    </div>
                                    <div class="nav-section " 
                         data-category="Timelines">
                        Timelines                    </div>
                                    <div class="nav-section " 
                         data-category="finance">
                        Finance                    </div>
                            </div>
        </div>
    </div>
    
    <!-- Slider Container -->
    <div class="slider-container" id="sliderContainer">
        <div class="news-slider" id="newsSlider">        <div class="no-news">
            <i class="fas fa-newspaper"></i>
            <h2>'बुकमार्क' में कोई समाचार उपलब्ध नहीं है</h2>
            <p>कृपया बाद में पुनः प्रयास करें या अन्य श्रेणी देखें।</p>
            <a href="?category=all" style="color: #f84443; margin-top: 20px; text-decoration: none;">
                <i class="fas fa-home"></i> सभी समाचार देखें
            </a>
        </div>
        </div>    </div>
    
    <!-- Image Modal -->
    <div class="image-modal" id="imageModal">
        <div class="image-modal-content">
            <button class="image-modal-close">&times;</button>
            <img id="modalImage" src="" alt="News Image">
        </div>
    </div>
    
    <!-- Share Modal -->
    <div class="share-modal" id="shareModal">
        <div class="share-modal-content">
            <button class="share-modal-close">&times;</button>
            <h2 style="color: var(--primary-color); margin-bottom: 15px; font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);">शेयर विकल्प</h2>
            
            <div id="imagePreview"></div>
            
            <p style="color: #666; font-size: var(--font-size-sm); margin-top: 15px; line-height: var(--line-height-normal); font-weight: var(--font-weight-medium);">पूरा न्यूज़ कार्ड इमेज के रूप में सहेजें या साझा करें</p>
            
            <div class="share-actions">
                <button class="share-action-btn save" id="saveImageBtn">
                    <i class="fas fa-download"></i> डाउनलोड
                </button>
                <button class="share-action-btn copy" id="copyImageBtn">
                    <i class="fas fa-copy"></i> कॉपी करें
                </button>
                <button class="share-action-btn share" id="shareImageBtn">
                    <i class="fas fa-share-alt"></i> शेयर करें
                </button>
                <button class="share-action-btn close" id="closeModalBtn">
                    <i class="fas fa-times"></i> बंद करें
                </button>
            </div>
            
            <a id="downloadLink" style="display: none;"></a>
        </div>
    </div>
    
    <!-- Contact Modal - COMPLETELY UPDATED FOR MOBILE -->
    <div class="contact-modal" id="contactModal">
        <div class="contact-modal-content">
            <button class="contact-modal-close">&times;</button>
            
            <!-- Header Section -->
            <div class="contact-header">
                <div class="contact-logo">
                    <!-- <i class="fas fa-palette"></i>  -->
                    <!--<h2>Zely Web Services</h2>-->
                    <!--<p class="tagline">Transforming Ideas into Digital Masterpieces</p>-->
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="contact-form-section">
                <h3><i class="fas fa-paper-plane"></i> Send Your Inquiry</h3>
                <form id="contactForm" method="POST" action="contact_submit.php">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name *" required>
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="form-group">
                        <input type="tel" name="phone" placeholder="Mobile Number *" required 
                               pattern="[0-9]{10}" title="10 digit mobile number">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email Address">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="form-group">
                        <select name="service" required>
                            <option value="">Select Service *</option>
                            <option value="website">Website Designing</option>
                            <option value="graphics">Graphics Designing</option>
                            <option value="video">Video Editing</option>
                            <option value="seo">SEO Services</option>
                            <option value="social">Social Media Marketing</option>
                            <option value="reels">Reels Creator & Editing</option>
                            <option value="other">Other Services</option>
                        </select>
                        <i class="fas fa-caret-down"></i>
                    </div>
                    <div class="form-group">
                        <textarea name="message" placeholder="Your Message / Requirements *" rows="4" required></textarea>
                        <i class="fas fa-comment"></i>
                    </div>
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
                <div id="formMessage" style="display: none;"></div>
            </div>
            
            
            <!-- Footer -->
            <div class="contact-footer">
                <div class="social-links">
                    <a href="https://wa.me/919876543210" target="_blank" class="social-link">
                        <i class="fab fa-whatsapp"></i>
                    </a>
                    <a href="https://instagram.com/zely.in" target="_blank" class="social-link">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://facebook.com/zely.in" target="_blank" class="social-link">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://linkedin.com/company/zely" target="_blank" class="social-link">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </div>
                <p class="copyright">© 2024 Zely Web & Graphics Services. All rights reserved.</p>
            </div>
        </div>
    </div>
    
    <!-- Hidden container for image generation -->
    <div id="newsCardCapture" class="news-card-capture" style="display: none;"></div>
    
    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <a href="search.php" class="nav-item">
            <div class="nav-icon"><i class="fas fa-search"></i></div>
            <div class="nav-label">Search</div>
        </a>
        <a href="?category=all" class="nav-item ">
            <div class="nav-icon"><i class="fas fa-home"></i></div>
            <div class="nav-label">Home</div>
        </a>
        <a href="?category=bookmarks" class="nav-item active">
            <div class="nav-icon"><i class="fas fa-user-tie"></i></div> <!-- Changed icon -->
            <div class="nav-label">ID Kreator</div> <!-- Changed label -->
        </a>
    </div>

<script>
// ==================== GLOBAL VARIABLES ====================
let currentSlide = 0;
let totalSlides = 0;
let isAnimating = false;
let startY = 0;
let startTime = 0;
const slides = [];
let currentTTSNewsId = null;
let isTTSSpeaking = false;
let ttsUtterance = null;
let isMobile = false;
let navScrollActive = false;
let isGeneratingShareImage = false;
let newFeedNotificationTimeout = null;

// ==================== DASHBOARD FEATURE CONTROLS ====================
const enable_tts = true;
const enable_bookmarks = true;
const enable_sharing = true;
const enable_comments = false;
const enable_ratings = false;
const enable_trending = true;
const auto_refresh_interval = 30;
const enable_ads = true;
const enable_mobile_ads = true;
const enable_desktop_ads = true;
const vertical_ad_interval = 4;
const horizontal_ad_interval = 3;

// ==================== UPDATED CONTACT MODAL FUNCTIONS ====================
// ==================== UPDATED CONTACT MODAL FUNCTIONS ====================
function openContactModal() {
    const modal = document.getElementById('contactModal');
    if (!modal) return;
    
    // Reset form
    document.getElementById('contactForm').reset();
    document.getElementById('formMessage').style.display = 'none';
    
    // Show modal
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
    
    // For mobile, adjust layout
    if (isMobile) {
        const bottomNav = document.querySelector('.bottom-nav');
        if (bottomNav) {
            bottomNav.style.display = 'none';
        }
        
        // Mobile specific: Show modal with proper positioning
        modal.style.paddingTop = '50px';
        modal.style.paddingBottom = '70px'; // Extra space for bottom nav
        
        // Focus first input for mobile keyboard
        setTimeout(() => {
            const firstInput = modal.querySelector('input');
            if (firstInput) {
                firstInput.focus();
            }
        }, 300);
    }
}

function closeContactModal() {
    const modal = document.getElementById('contactModal');
    if (!modal) return;
    
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
    
    // Restore bottom nav on mobile
    if (isMobile) {
        const bottomNav = document.querySelector('.bottom-nav');
        if (bottomNav) {
            bottomNav.style.display = 'flex';
        }
    }
}

// Setup contact modal with improved mobile handling
function setupContactModal() {
    const modal = document.getElementById('contactModal');
    const closeBtn = document.querySelector('.contact-modal-close');
    
    if (!modal || !closeBtn) return;
    
    closeBtn.addEventListener('click', closeContactModal);
    
    // Handle click outside to close
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeContactModal();
        }
    });
    
    // Handle form submission with better mobile UX
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = this.querySelector('.submit-btn');
            const originalText = submitBtn.innerHTML;
            const formMessage = document.getElementById('formMessage');
            
            // Show loading state
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            submitBtn.disabled = true;
            
            // Mobile keyboard handling
            if (isMobile) {
                document.activeElement.blur();
            }
            
            try {
                const formData = new FormData(this);
                
                const response = await fetch('contact_submit.php', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    formMessage.style.display = 'block';
                    formMessage.innerHTML = `
                        <div style="background: rgba(40, 167, 69, 0.1); color: #28a745; padding: 12px; border-radius: 8px; border: 1px solid #28a745;">
                            <i class="fas fa-check-circle"></i> ${result.message || 'Message sent successfully!'}
                        </div>
                    `;
                    contactForm.reset();
                    
                    // Auto close after 3 seconds on mobile
                    if (isMobile) {
                        setTimeout(() => {
                            formMessage.style.display = 'none';
                            closeContactModal();
                            showToast('Message sent successfully!', 'success');
                        }, 3000);
                    }
                } else {
                    formMessage.style.display = 'block';
                    formMessage.innerHTML = `
                        <div style="background: rgba(220, 53, 69, 0.1); color: #dc3545; padding: 12px; border-radius: 8px; border: 1px solid #dc3545;">
                            <i class="fas fa-exclamation-circle"></i> ${result.message || 'Error sending message. Please try again.'}
                        </div>
                    `;
                }
            } catch (error) {
                console.error('Form submission error:', error);
                formMessage.style.display = 'block';
                formMessage.innerHTML = `
                    <div style="background: rgba(220, 53, 69, 0.1); color: #dc3545; padding: 12px; border-radius: 8px; border: 1px solid #dc3545;">
                        <i class="fas fa-exclamation-circle"></i> Network error. Please check your connection.
                    </div>
                `;
            } finally {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                
                // Clear message after 5 seconds
                setTimeout(() => {
                    formMessage.style.display = 'none';
                }, 5000);
            }
        });
    }
    
    // Mobile input focus handling
    if (isMobile) {
        const inputs = modal.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                // Scroll input into view on mobile
                setTimeout(() => {
                    const modalContent = document.querySelector('.contact-modal-content');
                    if (modalContent) {
                        const inputRect = this.getBoundingClientRect();
                        const modalRect = modalContent.getBoundingClientRect();
                        
                        if (inputRect.bottom > window.innerHeight - 100) {
                            modalContent.scrollTop += (inputRect.bottom - window.innerHeight + 120);
                        }
                    }
                }, 300);
            });
        });
    }
    
    // Add keyboard close
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'block') {
            closeContactModal();
        }
    });
}

// ==================== UTILITY FUNCTIONS ====================
function showToast(message, type = 'success', duration = 3000) {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toastMessage');
    const toastIcon = document.getElementById('toastIcon');
    
    if (!toast || !toastMessage || !toastIcon) return;
    
    toastMessage.textContent = message;
    
    switch(type) {
        case 'success':
            toastIcon.className = 'fas fa-check-circle';
            toastIcon.style.color = '#28a745';
            break;
        case 'error':
            toastIcon.className = 'fas fa-exclamation-circle';
            toastIcon.style.color = '#dc3545';
            break;
        case 'info':
            toastIcon.className = 'fas fa-info-circle';
            toastIcon.style.color = '#17a2b8';
            break;
        case 'warning':
            toastIcon.className = 'fas fa-exclamation-triangle';
            toastIcon.style.color = '#ffc107';
            break;
    }
    
    if (isMobile && document.getElementById('shareModal').style.display === 'flex') {
        toast.style.bottom = '100px';
    } else {
        toast.style.bottom = '80px';
    }
    
    toast.style.display = 'flex';
    
    setTimeout(() => {
        toast.style.display = 'none';
    }, duration);
}

function showLoading(show, message = 'Loading...') {
    const loadingOverlay = document.getElementById('loadingOverlay');
    if (loadingOverlay) {
        loadingOverlay.style.display = show ? 'flex' : 'none';
        const messageEl = loadingOverlay.querySelector('div:nth-child(2)');
        if (messageEl) {
            messageEl.textContent = message;
        }
    }
}

function updateProgressBar() {
    const progressBar = document.getElementById('progressBar');
    if (progressBar && totalSlides > 1) {
        const progress = (currentSlide / (totalSlides - 1)) * 100;
        progressBar.style.width = progress + '%';
        
        const currentItem = slides[currentSlide];
        const isAd = currentItem && currentItem.getAttribute('data-item-type') === 'ad';
    } else if (progressBar) {
        progressBar.style.width = '100%';
    }
}

// ==================== NEW FEED NOTIFICATION SYSTEM ====================
function showNewFeedNotification() {
    const notification = document.getElementById('newFeedNotification');
    const refreshBtn = document.getElementById('newFeedRefreshBtn');
    
    if (!notification || !refreshBtn) return;
    
    stopTTS();
    
    if (newFeedNotificationTimeout) {
        clearTimeout(newFeedNotificationTimeout);
    }
    
    refreshBtn.classList.remove('refreshing');
    refreshBtn.disabled = false;
    
    notification.classList.add('show');
    
    document.querySelector('.top-nav').style.top = '60px';
    document.querySelector('.slider-container').style.top = isMobile ? '112px' : '120px';
    
    newFeedNotificationTimeout = setTimeout(() => {
        hideNewFeedNotification();
    }, 5000);
}

function hideNewFeedNotification() {
    const notification = document.getElementById('newFeedNotification');
    if (!notification) return;
    
    notification.classList.remove('show');
    
    document.querySelector('.top-nav').style.top = '0';
    document.querySelector('.slider-container').style.top = isMobile ? '50px' : '60px';
    
    if (newFeedNotificationTimeout) {
        clearTimeout(newFeedNotificationTimeout);
        newFeedNotificationTimeout = null;
    }
}

// ==================== FINAL SIMPLE SOLUTION ====================
function setupNewFeedNotification() {
    const notification = document.getElementById('newFeedNotification');
    const refreshBtn = document.getElementById('newFeedRefreshBtn');
    
    if (!notification || !refreshBtn) return;
    
    refreshBtn.addEventListener('click', function() {
        if (refreshBtn.classList.contains('refreshing')) return;
        
        refreshBtn.classList.add('refreshing');
        refreshBtn.disabled = true;
        
        const urlParams = new URLSearchParams(window.location.search);
        const currentCategory = urlParams.get('category') || 'all';
        
        loadCategoryNews(currentCategory);
        hideNewFeedNotification();
        showToast('Refreshing news feed...', 'info');
    });
    
    setInterval(() => {
        if (!document.hidden) {
            const urlParams = new URLSearchParams(window.location.search);
            const currentCategory = urlParams.get('category') || 'all';
            
            if (currentCategory !== 'bookmarks') {
                if (Math.random() < 0.2) {
                    showNewFeedNotification();
                }
            }
        }
    }, 120000);
}

// ==================== AUTO REFRESH ====================
if (auto_refresh_interval > 0) {
    setInterval(function() {
        if (!document.hidden) {
            const currentCategory = new URLSearchParams(window.location.search).get('category') || 'all';
            if (currentCategory !== 'bookmarks') {
                showNewFeedNotification();
            }
        }
    }, auto_refresh_interval * 60 * 1000);
}

// ==================== IMPROVED MOBILE NAVIGATION SCROLL ====================
function setupMobileNavigationScroll() {
    if (!isMobile) return;
    
    const navSections = document.querySelector('.nav-sections');
    if (!navSections) return;
    
    let isDown = false;
    let startX;
    let scrollLeft;
    
    navSections.addEventListener('mousedown', (e) => {
        isDown = true;
        navSections.classList.add('active');
        startX = e.pageX - navSections.offsetLeft;
        scrollLeft = navSections.scrollLeft;
    });
    
    navSections.addEventListener('mouseleave', () => {
        isDown = false;
        navSections.classList.remove('active');
    });
    
    navSections.addEventListener('mouseup', () => {
        isDown = false;
        navSections.classList.remove('active');
    });
    
    navSections.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - navSections.offsetLeft;
        const walk = (x - startX) * 2;
        navSections.scrollLeft = scrollLeft - walk;
    });
    
    navSections.addEventListener('touchstart', (e) => {
        isDown = true;
        navSections.classList.add('active');
        startX = e.touches[0].pageX - navSections.offsetLeft;
        scrollLeft = navSections.scrollLeft;
    }, { passive: true });
    
    navSections.addEventListener('touchend', () => {
        isDown = false;
        navSections.classList.remove('active');
    }, { passive: true });
    
    navSections.addEventListener('touchmove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.touches[0].pageX - navSections.offsetLeft;
        const walk = (x - startX) * 2;
        navSections.scrollLeft = scrollLeft - walk;
    }, { passive: false });
}

// ==================== ENHANCED IMAGE TOUCH FOR MOBILE ====================
function setupMobileImageTouch() {
    if (!isMobile) return;
    
    document.addEventListener('touchstart', function(e) {
        const newsImage = e.target.closest('.news-image img');
        if (newsImage) {
            // Store touch start time for image tap
            e.target._touchStartTime = Date.now();
            e.target._touchStartY = e.touches[0].clientY;
            e.target._touchStartX = e.touches[0].clientX;
            
            // Add active class for visual feedback
            newsImage.classList.add('image-active');
        }
    }, { passive: true });
    
    document.addEventListener('touchend', function(e) {
        const newsImage = e.target.closest('.news-image img');
        if (newsImage) {
            const touchEndTime = Date.now();
            const touchDuration = touchEndTime - e.target._touchStartTime;
            
            // Remove active class
            newsImage.classList.remove('image-active');
            
            // Only open modal if it's a tap (not a swipe) and duration is short
            if (touchDuration < 300 && !isAnimating) {
                e.preventDefault();
                e.stopPropagation();
                openImageModal(newsImage.src);
            }
        }
    }, { passive: false });
    
    document.addEventListener('touchmove', function(e) {
        const newsImage = e.target.closest('.news-image img');
        if (newsImage && e.touches.length === 1) {
            const touchY = e.touches[0].clientY;
            const touchX = e.touches[0].clientX;
            const deltaY = Math.abs(touchY - e.target._touchStartY);
            const deltaX = Math.abs(touchX - e.target._touchStartX);
            
            // If it's a horizontal or vertical swipe (for navigation), prevent image click
            if (deltaY > 10 || deltaX > 10) {
                e.target._isSwipe = true;
            }
        }
    }, { passive: true });
    
    // Also handle click for devices with both touch and mouse
    document.addEventListener('click', function(e) {
        const newsImage = e.target.closest('.news-image img');
        if (newsImage && isMobile && !isAnimating) {
            e.preventDefault();
            e.stopPropagation();
            openImageModal(newsImage.src);
        }
    });
}

// ==================== IMPROVED SLIDER FUNCTIONALITY WITH ENHANCED SCROLLING ====================
function initSlider() {
    slides.length = 0;
    const slider = document.getElementById('sliderContainer');
    if (!slider) return;
    
    const allSlides = slider.querySelectorAll('.news-card');
    
    if (allSlides.length === 0) {
        totalSlides = 0;
        currentSlide = 0;
        return;
    }
    
    allSlides.forEach((slide, index) => {
        slides.push(slide);
        slide.style.transform = `translateY(${index * 100}%)`;
        slide.scrollTop = 0;
        slide.style.overflowY = 'auto';
        slide.style.webkitOverflowScrolling = 'touch';
        slide.setAttribute('data-slide-index', index);
        
        // Add scroll locking to prevent accidental scroll during swipe
        slide.addEventListener('scroll', function(e) {
            const currentScroll = this.scrollTop;
            const maxScroll = this.scrollHeight - this.clientHeight;
            
            // If at top and trying to scroll up, prevent and navigate
            if (currentScroll <= 0 && e.deltaY < 0) {
                e.preventDefault();
                prevSlide();
            }
            // If at bottom and trying to scroll down, prevent and navigate
            else if (currentScroll >= maxScroll && e.deltaY > 0) {
                e.preventDefault();
                nextSlide();
            }
        }, { passive: false });
    });
    
    totalSlides = slides.length;
    currentSlide = 0;
    
    updateProgressBar();
    setupEventListeners();
    
    setTimeout(() => {
        adjustLayoutForCurrentSlide();
    }, 100);
}

function adjustLayoutForCurrentSlide() {
    if (!slides[currentSlide]) return;
    
    const slide = slides[currentSlide];
    slide.scrollTop = 0;
    
    const isAdCard = slide.classList.contains('ad-card');
    
    if (isAdCard) {
        slide.style.display = 'flex';
        slide.style.flexDirection = 'column';
        slide.style.justifyContent = 'center';
        slide.style.alignItems = 'center';
        slide.style.textAlign = 'center';
        
        const adContent = slide.querySelector('.ad-content');
        if (adContent) {
            adContent.style.maxWidth = '100%';
            adContent.style.width = '100%';
        }
    } else {
        const newsImage = slide.querySelector('.news-image');
        const textContent = slide.querySelector('.text-content');
        
        if (newsImage && textContent) {
            newsImage.style.height = '';
            textContent.style.height = '';
            
            const newsText = textContent.querySelector('.news-text');
            if (newsText) {
                newsText.style.maxHeight = '';
                newsText.style.height = 'auto';
                newsText.style.overflowY = 'auto';
            }
        }
    }
    
    if (slides[currentSlide]) {
        slides[currentSlide].offsetHeight;
    }
}

function setupEventListeners() {
    document.removeEventListener('touchstart', handleTouchStart);
    document.removeEventListener('touchmove', handleTouchMove);
    document.removeEventListener('touchend', handleTouchEnd);
    
    if (!isMobile) {
        document.removeEventListener('wheel', handleWheel);
    }
    document.removeEventListener('keydown', handleKeyDown);
    
    document.addEventListener('touchstart', handleTouchStart, { passive: true });
    document.addEventListener('touchmove', handleTouchMove, { passive: false });
    document.addEventListener('touchend', handleTouchEnd, { passive: true });
    
    if (!isMobile) {
        document.addEventListener('wheel', handleWheel, { passive: false });
    }
    
    document.addEventListener('keydown', handleKeyDown);
}

function handleTouchStart(e) {
    // Check if touch is on image - handle separately
    if (e.target.closest('.news-image img')) {
        startY = e.touches[0].clientY;
        startTime = Date.now();
        return;
    }
    
    if (e.target.closest('.nav-section') || e.target.closest('.nav-sections')) {
        navScrollActive = true;
        return;
    }
    
    startY = e.touches[0].clientY;
    startTime = Date.now();
    navScrollActive = false;
    
    if (e.target.closest('.news-text') || e.target.closest('.news-content')) {
        e.preventDefault();
    }
}

function handleTouchMove(e) {
    if (isAnimating || navScrollActive) {
        e.preventDefault();
        return;
    }
    
    const currentY = e.touches[0].clientY;
    const diffY = startY - currentY;
    
    // More sensitive swipe detection for mobile
    if (Math.abs(diffY) > 5) {
        e.preventDefault();
    }
}

function handleTouchEnd(e) {
    if (isAnimating || navScrollActive || totalSlides <= 1) return;
    
    const endY = e.changedTouches[0].clientY;
    const diffY = startY - endY;
    const timeDiff = Date.now() - startTime;
    
    const speed = Math.abs(diffY) / timeDiff;
    const threshold = speed > 0.3 ? 10 : 20; // More sensitive threshold for mobile
    
    if (Math.abs(diffY) < threshold) return;
    
    if (diffY > 0) {
        nextSlide();
    } else {
        prevSlide();
    }
}

function handleWheel(e) {
    if (isAnimating || totalSlides <= 1 || isMobile) return;
    
    e.preventDefault();
    
    // Check if user is at top or bottom of content
    const currentSlideElement = slides[currentSlide];
    const contentScroll = currentSlideElement.querySelector('.news-text') || currentSlideElement;
    const isAtTop = contentScroll.scrollTop <= 0;
    const isAtBottom = contentScroll.scrollTop + contentScroll.clientHeight >= contentScroll.scrollHeight - 1;
    
    // Only navigate if at edges
    if ((e.deltaY > 5 && isAtBottom) || (e.deltaY < -5 && isAtTop)) {
        if (e.deltaY > 5) {
            nextSlide();
        } else if (e.deltaY < -5) {
            prevSlide();
        }
    }
}

function handleKeyDown(e) {
    if (isAnimating || totalSlides <= 1) return;
    
    if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') {
        e.preventDefault();
        nextSlide();
    } else if (e.key === 'ArrowUp' || e.key === 'PageUp') {
        e.preventDefault();
        prevSlide();
    }
}

function nextSlide() {
    if (currentSlide < totalSlides - 1) {
        goToSlide(currentSlide + 1);
    } else {
        goToSlide(0);
    }
}

function prevSlide() {
    if (currentSlide > 0) {
        goToSlide(currentSlide - 1);
    } else {
        goToSlide(totalSlides - 1);
    }
}

function goToSlide(index) {
    if (isAnimating || index < 0 || index >= totalSlides || index === currentSlide) return;
    
    isAnimating = true;
    const oldSlide = currentSlide;
    currentSlide = index;
    
    stopTTS();
    
    if (slides[oldSlide]) {
        slides[oldSlide].scrollTop = 0;
    }
    
    const slider = document.querySelector('.news-slider');
    slider.style.transform = `translateY(-${currentSlide * 100}%)`;
    
    updateProgressBar();
    
    // Smooth animation with better timing
    setTimeout(() => {
        isAnimating = false;
        adjustLayoutForCurrentSlide();
        
        if (slides[currentSlide]) {
            slides[currentSlide].offsetHeight;
        }
        
        // Focus the current slide for better accessibility
        slides[currentSlide].focus();
    }, 400);
}

window.addEventListener('resize', function() {
    setTimeout(() => {
        initSlider();
        adjustLayoutForCurrentSlide();
    }, 300);
});

// ==================== VIEW COUNTER FUNCTIONALITY ====================
function trackNewsView(newsId) {
    if (!newsId || isNaN(newsId)) return;
    
    fetch('view_counter.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `news_id=${newsId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            updateViewCountDisplay(newsId, data.view_count);
        }
    })
    .catch(error => {
        console.error('View tracking error:', error);
    });
}

function updateViewCountDisplay(newsId, viewCount) {
    const newsCard = document.querySelector(`[data-news-id="${newsId}"]`);
    if (newsCard) {
        let viewElement = newsCard.querySelector('.view-count');
        
        if (!viewElement) {
            const newsMeta = newsCard.querySelector('.news-meta');
            if (newsMeta) {
                viewElement = document.createElement('span');
                viewElement.className = 'view-count';
                viewElement.style.cssText = `
                    color: #666;
                    font-size: var(--font-size-xs);
                    margin-left: 10px;
                    display: inline-flex;
                    align-items: center;
                    gap: 3px;
                `;
                
                const eyeIcon = document.createElement('i');
                eyeIcon.className = 'fas fa-eye';
                eyeIcon.style.fontSize = '11px';
                
                viewElement.appendChild(eyeIcon);
                viewElement.appendChild(document.createTextNode(viewCount));
                
                newsMeta.appendChild(viewElement);
            }
        } else {
            const icon = viewElement.querySelector('i');
            viewElement.innerHTML = '';
            if (icon) {
                viewElement.appendChild(icon);
            }
            viewElement.appendChild(document.createTextNode(viewCount));
        }
    }
}

// ==================== INITIALIZE VIEW COUNTER ====================
function initializeViewCounter() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const newsCard = entry.target;
                const newsId = newsCard.getAttribute('data-news-id');
                const itemType = newsCard.getAttribute('data-item-type');
                
                if (itemType === 'news' && newsId) {
                    trackNewsView(newsId);
                    observer.unobserve(newsCard);
                }
            }
        });
    }, {
        threshold: 0.5,
        rootMargin: '0px 0px -50px 0px'
    });
    
    document.querySelectorAll('.news-card[data-item-type="news"]').forEach(card => {
        observer.observe(card);
    });
}

// ==================== TTS FUNCTIONALITY ====================
function stopTTS() {
    if (speechSynthesis.speaking) {
        speechSynthesis.cancel();
    }
    isTTSSpeaking = false;
    currentTTSNewsId = null;
}

// ==================== RATING FUNCTIONALITY ====================
function setupRatingSystem() {
    if (!enable_ratings) return;
    
    document.addEventListener('click', function(e) {
        if (e.target.closest('.rating-stars i')) {
            const star = e.target.closest('.rating-stars i');
            const rating = parseInt(star.getAttribute('data-rating'));
            const ratingStars = star.closest('.rating-stars');
            const newsId = ratingStars.getAttribute('data-news-id');
            
            const stars = ratingStars.querySelectorAll('i');
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.style.color = '#ffc107';
                } else {
                    s.style.color = '#e4e5e9';
                }
            });
            
            submitRating(newsId, rating);
        }
    });
}

async function submitRating(newsId, rating) {
    try {
        const response = await fetch('rating.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `news_id=${newsId}&rating=${rating}`
        });
        
        if (response.ok) {
            const data = await response.json();
            if (data.success) {
                showToast('Rating submitted!', 'success');
                
                const ratingCount = document.querySelector(`[data-news-id="${newsId}"] .rating-count`);
                if (ratingCount && data.average_rating) {
                    ratingCount.textContent = `(${data.average_rating.toFixed(1)})`;
                }
            }
        }
    } catch (error) {
        console.error('Rating error:', error);
    }
}

// ==================== IMAGE MODAL ====================
function setupImageModal() {
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    const closeBtn = document.querySelector('.image-modal-close');
    
    if (!modal || !modalImg || !closeBtn) return;
    
    window.openImageModal = function(imageSrc) {
        modalImg.src = imageSrc;
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        
        // Mobile specific: hide bottom navigation when modal opens
        if (isMobile) {
            document.querySelector('.bottom-nav').style.display = 'none';
        }
    };
    
    function closeImageModal() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
        
        // Mobile specific: show bottom navigation when modal closes
        if (isMobile) {
            document.querySelector('.bottom-nav').style.display = 'flex';
        }
    }
    
    closeBtn.addEventListener('click', closeImageModal);
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeImageModal();
        }
    });
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'flex') {
            closeImageModal();
        }
    });
    
    // Enhanced mobile image touch
    if (isMobile) {
        let touchStartY = 0;
        let touchStartX = 0;
        
        modal.addEventListener('touchstart', function(e) {
            touchStartY = e.touches[0].clientY;
            touchStartX = e.touches[0].clientX;
        }, { passive: true });
        
        modal.addEventListener('touchend', function(e) {
            const touchEndY = e.changedTouches[0].clientY;
            const touchEndX = e.changedTouches[0].clientX;
            const diffY = Math.abs(touchEndY - touchStartY);
            const diffX = Math.abs(touchEndX - touchStartX);
            
            // Close modal on tap (not swipe) in empty area
            if (diffY < 10 && diffX < 10 && e.target === modal) {
                closeImageModal();
            }
        }, { passive: true });
    }
}

// ==================== SHARE FUNCTIONALITY ====================
async function openShareModal(newsId) {
    if (!enable_sharing) {
        showToast('Sharing feature is disabled', 'warning');
        return;
    }
    
    if (isGeneratingShareImage) {
        showToast('Please wait, image is being generated...', 'info');
        return;
    }
    
    const modal = document.getElementById('shareModal');
    const newsCard = document.querySelector(`[data-news-id="${newsId}"]`);
    
    if (!newsCard) {
        showToast('News card not found', 'error');
        return;
    }
    
    isGeneratingShareImage = true;
    
    modal.setAttribute('data-current-news-id', newsId);
    
    const imagePreview = document.getElementById('imagePreview');
    if (imagePreview) {
        imagePreview.innerHTML = `
            <div class="loading-image">
                <i class="fas fa-spinner fa-spin"></i>
                <div>Generating image preview...</div>
            </div>
        `;
    }
    
    if (isMobile) {
        const bottomNav = document.querySelector('.bottom-nav');
        if (bottomNav) {
            bottomNav.style.display = 'none';
        }
    }
    
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    
    try {
        const existingPreview = imagePreview.querySelector('img');
        if (existingPreview) {
            existingPreview.remove();
        }
        
        const imageUrl = await generatePerfectNewsImage(newsId);
        
        if (!imagePreview) return;
        
        const previewImg = new Image();
        previewImg.onload = function() {
            imagePreview.innerHTML = '';
            imagePreview.appendChild(previewImg);
            previewImg.id = 'shareJpgPreview';
            previewImg.alt = 'News Card Preview';
            
            previewImg.style.opacity = '0';
            setTimeout(() => {
                previewImg.style.opacity = '1';
                previewImg.style.transition = 'opacity 0.3s ease';
            }, 100);
            
            isGeneratingShareImage = false;
        };
        previewImg.onerror = function() {
            imagePreview.innerHTML = `
                <div style="color: #666; text-align: center; padding: 15px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 36px; margin-bottom: 10px; color: var(--primary-color);"></i>
                    <div style="font-size: 14px;">Image failed to load</div>
                    <button onclick="retryShareImage('${newsId}')" style="margin-top: 10px; padding: 6px 12px; background: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 13px;">
                        Try Again
                    </button>
                </div>
            `;
            
            isGeneratingShareImage = false;
        };
        previewImg.src = imageUrl;
    } catch (error) {
        console.error('Error generating image:', error);
        if (imagePreview) {
            imagePreview.innerHTML = `
                <div style="color: #666; text-align: center; padding: 15px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 36px; margin-bottom: 10px; color: var(--primary-color);"></i>
                    <div style="font-size: 14px;">Image generation failed</div>
                    <div style="font-size: 11px; margin-top: 5px; color: #999;">${error.message || 'Please try again'}</div>
                    <button onclick="retryShareImage('${newsId}')" style="margin-top: 10px; padding: 6px 12px; background: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 13px;">
                        Retry
                    </button>
                </div>
            `;
        }
        
        isGeneratingShareImage = false;
    }
}

function retryShareImage(newsId) {
    const modal = document.getElementById('shareModal');
    if (modal) {
        modal.setAttribute('data-current-news-id', newsId);
        openShareModal(newsId);
    }
}

function closeShareModal() {
    const modal = document.getElementById('shareModal');
    if (modal) {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
        
        const bottomNav = document.querySelector('.bottom-nav');
        if (bottomNav) {
            bottomNav.style.display = 'flex';
        }
        
        const imagePreview = document.getElementById('imagePreview');
        if (imagePreview) {
            imagePreview.innerHTML = '';
        }
        
        isGeneratingShareImage = false;
    }
}

async function generatePerfectNewsImage(newsId) {
    return new Promise((resolve, reject) => {
        const newsCard = document.querySelector(`[data-news-id="${newsId}"]`);
        if (!newsCard) {
            reject(new Error('News card not found'));
            return;
        }
        
        const captureContainer = document.getElementById('newsCardCapture');
        if (!captureContainer) {
            reject(new Error('Capture container not found'));
            return;
        }
        
        captureContainer.innerHTML = '';
        captureContainer.style.display = 'block';
        
        try {
            const captureCard = document.createElement('div');
            captureCard.style.cssText = `
                width: 100%;
                background: white;
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                font-family: var(--font-heading);
                box-sizing: border-box;
            `;
            
            const header = document.createElement('div');
            header.className = 'capture-header';
            header.innerHTML = `
                <div class="capture-logo">Zely.in</div>
                <div class="capture-tagline">संक्षिप्त समाचार</div>
            `;
            
            const imageContainer = document.createElement('div');
            imageContainer.className = 'capture-image-container';
            
            const title = newsCard.querySelector('.headline')?.textContent || '';
            const content = newsCard.querySelector('.news-text p')?.textContent || '';
            const source = newsCard.querySelector('.news-source')?.textContent || '';
            const time = newsCard.querySelector('.news-time')?.textContent || '';
            const language = newsCard.classList.contains('hi-content') ? 'हिंदी' : 'English';
            
            const newsImage = newsCard.querySelector('.news-image img');
            
            if (newsImage && newsImage.src && !newsImage.src.startsWith('data:')) {
                const img = new Image();
                img.onload = function() {
                    imageContainer.innerHTML = `
                        <img src="${newsImage.src}" alt="News Image" class="capture-news-image">
                    `;
                    proceedWithCanvas();
                };
                img.onerror = function() {
                    showDefaultImage();
                    proceedWithCanvas();
                };
                img.src = newsImage.src;
                img.crossOrigin = 'anonymous';
            } else {
                showDefaultImage();
                proceedWithCanvas();
            }
            
            function showDefaultImage() {
                imageContainer.innerHTML = `
                    <div class="capture-default-image">
                        <i class="fas fa-image" style="font-size: 36px; margin-bottom: 8px;"></i>
                        <div style="font-size: 12px;">कोई छवि उपलब्ध नहीं</div>
                    </div>
                `;
            }
            
            function proceedWithCanvas() {
                const contentArea = document.createElement('div');
                contentArea.className = 'capture-content-area';
                
                const titleElement = document.createElement('div');
                titleElement.className = 'capture-headline';
                titleElement.textContent = title.substring(0, 120) + (title.length > 120 ? '...' : '');
                
                const contentElement = document.createElement('div');
                contentElement.className = 'capture-content';
                const limitedContent = content.split(' ').slice(0, 30).join(' ') + (content.split(' ').length > 30 ? '...' : '');
                contentElement.textContent = limitedContent;
                
                const metaElement = document.createElement('div');
                metaElement.className = 'capture-meta';
                metaElement.innerHTML = `
                    <div class="capture-source">${source.substring(0, 50)}</div>
                    <div class="capture-date">${time}</div>
                    <div class="capture-footer">Language: ${language} • स्रोत: Zely.in • ${new Date().toLocaleDateString('hi-IN')}</div>
                `;
                
                contentArea.appendChild(titleElement);
                contentArea.appendChild(contentElement);
                contentArea.appendChild(metaElement);
                
                captureCard.appendChild(header);
                captureCard.appendChild(imageContainer);
                captureCard.appendChild(contentArea);
                captureContainer.appendChild(captureCard);
                
                requestAnimationFrame(() => {
                    html2canvas(captureContainer, {
                        scale: isMobile ? 1.5 : 2,
                        useCORS: true,
                        allowTaint: false,
                        backgroundColor: '#ffffff',
                        logging: false,
                        width: captureContainer.scrollWidth,
                        height: captureContainer.scrollHeight,
                        onclone: function(clonedDoc) {
                            const clonedContainer = clonedDoc.getElementById('newsCardCapture');
                            if (clonedContainer) {
                                clonedContainer.style.fontFamily = 'var(--font-heading)';
                            }
                        }
                    }).then(canvas => {
                        const imageUrl = canvas.toDataURL('image/jpeg', 0.9);
                        captureContainer.style.display = 'none';
                        captureContainer.innerHTML = '';
                        resolve(imageUrl);
                    }).catch(error => {
                        console.error('html2canvas error:', error);
                        captureContainer.style.display = 'none';
                        captureContainer.innerHTML = '';
                        reject(new Error('Image generation failed: ' + error.message));
                    });
                });
            }
            
        } catch (error) {
            captureContainer.style.display = 'none';
            captureContainer.innerHTML = '';
            reject(new Error('Setup failed: ' + error.message));
        }
    });
}

function setupShareModal() {
    const modal = document.getElementById('shareModal');
    const closeBtn = document.querySelector('.share-modal-close');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const saveImageBtn = document.getElementById('saveImageBtn');
    const copyImageBtn = document.getElementById('copyImageBtn');
    const shareImageBtn = document.getElementById('shareImageBtn');
    
    if (!modal || !closeBtn) return;
    
    [closeBtn, closeModalBtn].forEach(btn => {
        if (btn) {
            btn.addEventListener('click', () => {
                closeShareModal();
            });
        }
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeShareModal();
        }
    });
    
    if (saveImageBtn) {
        saveImageBtn.addEventListener('click', downloadNewsImage);
    }
    
    if (copyImageBtn) {
        copyImageBtn.addEventListener('click', copyNewsImageToClipboard);
    }
    
    if (shareImageBtn) {
        shareImageBtn.addEventListener('click', shareNewsImage);
    }
}

function downloadNewsImage() {
    const modal = document.getElementById('shareModal');
    const newsId = modal.getAttribute('data-current-news-id');
    const imagePreview = document.getElementById('imagePreview');
    
    if (!imagePreview) return;
    
    const previewImg = imagePreview.querySelector('img');

    if (!previewImg || !previewImg.src) {
        showToast('पहले इमेज generate करें', 'warning');
        return;
    }
    
    const newsCard = document.querySelector(`[data-news-id="${newsId}"]`);
    const title = newsCard?.querySelector('.headline')?.textContent || 'news';
    
    const sanitizedTitle = title.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 30);
    const filename = `zely_news_${sanitizedTitle}_${Date.now()}.jpg`;
    
    const downloadLink = document.createElement('a');
    downloadLink.href = previewImg.src;
    downloadLink.download = filename;
    downloadLink.style.display = 'none';
    
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    
    showToast('इमेज डाउनलोड हो गई है', 'success');
}

async function copyNewsImageToClipboard() {
    const imagePreview = document.getElementById('imagePreview');
    if (!imagePreview) return;
    
    const previewImg = imagePreview.querySelector('img');
    
    if (!previewImg || !previewImg.src) {
        showToast('पहले इमेज generate करें', 'warning');
        return;
    }
    
    try {
        if (!navigator.clipboard || !navigator.clipboard.write) {
            showToast('क्लिपबोर्ड API आपके browser में available नहीं है', 'warning');
            return;
        }
        
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
            canvas.toBlob(async function(blob) {
                try {
                    await navigator.clipboard.write([
                        new ClipboardItem({
                            'image/jpeg': blob
                        })
                    ]);
                    showToast('इमेज क्लिपबोर्ड में कॉपी हो गई है', 'success');
                } catch (error) {
                    console.error('Clipboard error:', error);
                    showToast('क्लिपबोर्ड में कॉपी करने में error आई है', 'error');
                }
            }, 'image/jpeg', 0.9);
        };
        
        img.onerror = function() {
            showToast('इमेज लोड करने में error आई है', 'error');
        };
        
        img.src = previewImg.src;
        img.crossOrigin = 'anonymous';
        
    } catch (error) {
        console.error('Error copying image:', error);
        showToast('क्लिपबोर्ड में कॉपी करने में error आई है', 'error');
    }
}

async function shareNewsImage() {
    const modal = document.getElementById('shareModal');
    const newsId = modal.getAttribute('data-current-news-id');
    const imagePreview = document.getElementById('imagePreview');
    
    if (!imagePreview) return;
    
    const previewImg = imagePreview.querySelector('img');
    const newsCard = document.querySelector(`[data-news-id="${newsId}"]`);
    
    if (!previewImg || !previewImg.src || !newsCard) {
        showToast('पहले इमेज generate करें', 'warning');
        return;
    }
    
    if (!navigator.share) {
        showToast('आपके browser में direct share support नहीं है', 'warning');
        downloadNewsImage();
        return;
    }
    
    try {
        const title = newsCard.querySelector('.headline')?.textContent || 'Zely.in News';
        const content = newsCard.querySelector('.news-text p')?.textContent || '';
        
        const response = await fetch(previewImg.src);
        const blob = await response.blob();
        const file = new File([blob], `zely_news_${newsId}.jpg`, { type: 'image/jpeg' });
        
        await navigator.share({
            title: title.substring(0, 50),
            text: content.substring(0, 100) + '...',
            files: [file],
            url: window.location.href
        });
        
        showToast('समाचार सफलतापूर्वक शेयर किया गया', 'success');
    } catch (error) {
        if (error.name !== 'AbortError') {
            console.error('Error sharing:', error);
            showToast('शेयर करने में error आई है', 'error');
        }
    }
}

// ==================== SOURCE LINKS ====================
function setupSourceLinks() {
    document.addEventListener('click', function(e) {
        let target = e.target;
        let sourceUrl = null;
        
        while (target && target !== document) {
            if (target.hasAttribute('data-source-url')) {
                sourceUrl = target.getAttribute('data-source-url');
                break;
            }
            target = target.parentElement;
        }
        
        if (sourceUrl && sourceUrl !== '#') {
            e.preventDefault();
            e.stopPropagation();
            window.open(sourceUrl, '_blank');
        }
    });
    
    document.querySelectorAll('[data-source-url]').forEach(element => {
        if (element.getAttribute('data-source-url') && element.getAttribute('data-source-url') !== '#') {
            element.style.cursor = 'pointer';
        }
    });
}

// ==================== IMPROVED CATEGORY NAVIGATION ====================
function setupCategoryNavigation() {
    document.addEventListener('click', function(e) {
        const navSection = e.target.closest('.nav-section');
        if (!navSection) return;
        
        e.preventDefault();
        e.stopPropagation();
        
        if (navSection.classList.contains('loading')) return;
        
        const category = navSection.getAttribute('data-category');
        if (!category) return;
        
        const urlParams = new URLSearchParams(window.location.search);
        const currentCategory = urlParams.get('category') || 'all';
        
        if (category === currentCategory) return;
        
        navSection.classList.add('loading');
        
        const newUrl = new URL(window.location);
        newUrl.searchParams.set('category', category);
        window.history.pushState({category: category}, '', newUrl);
        
        loadCategoryNews(category, navSection);
    });
    
    window.addEventListener('popstate', function(event) {
        const urlParams = new URLSearchParams(window.location.search);
        const category = urlParams.get('category') || 'all';
        loadCategoryNews(category);
    });
}

// ==================== IMPROVED CATEGORY LOADING ====================
function loadCategoryNews(category, clickedNavSection = null) {
    showLoading(true, `Loading ${category} news...`);
    
    stopTTS();
    
    const url = new URL(window.location);
    url.searchParams.set('category', category);
    url.searchParams.set('ajax', '1');
    
    const abortController = new AbortController();
    const timeoutId = setTimeout(() => {
        abortController.abort();
    }, 10000);
    
    fetch(url.toString(), {
        method: 'GET',
        headers: {
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache',
            'X-Requested-With': 'XMLHttpRequest'
        },
        cache: 'no-store',
        signal: abortController.signal
    })
    .then(response => {
        clearTimeout(timeoutId);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
    })
    .then(html => {
        const sliderContainer = document.getElementById('sliderContainer');
        if (!sliderContainer) {
            throw new Error('Slider container not found');
        }
        
        sliderContainer.style.opacity = '0.5';
        sliderContainer.style.transition = 'opacity 0.3s ease';
        
        setTimeout(() => {
            sliderContainer.innerHTML = html;
            sliderContainer.classList.add('ajax-loaded');
            
            resetSliderLayout();
            
            sliderContainer.style.opacity = '1';
            
            setTimeout(() => {
                initSlider();
                reinitializeAllEventListeners();
                
                if (isMobile) {
                    setupMobileNavigationScroll();
                    setupMobileImageTouch();
                }
            }, 50);
            
            document.querySelectorAll('.nav-section').forEach(s => {
                s.classList.remove('active');
                s.classList.remove('loading');
                s.style.pointerEvents = 'auto';
            });
            
            const activeSection = document.querySelector(`[data-category="${category}"]`);
            if (activeSection) {
                activeSection.classList.add('active');
            }
            
            updateBottomNavForCategory(category);
            
            showLoading(false);
            showToast(`Showing ${category} news`, 'success', 2000);
            
        }, 300);
    })
    .catch(error => {
        clearTimeout(timeoutId);
        
        if (error.name === 'AbortError') {
            console.warn('Fetch aborted:', error);
            showToast('Request timeout. Please try again.', 'warning');
        } else {
            console.error('Error:', error);
            showToast('Failed to load news: ' + error.message, 'error');
        }
        
        showLoading(false);
        
        const sliderContainer = document.getElementById('sliderContainer');
        if (sliderContainer) {
            sliderContainer.style.opacity = '1';
            sliderContainer.classList.remove('ajax-loaded');
        }
        
        if (clickedNavSection) {
            clickedNavSection.classList.remove('loading');
        }
        
        document.querySelectorAll('.nav-section').forEach(section => {
            section.style.pointerEvents = 'auto';
        });
    });
}

// ==================== RESET SLIDER LAYOUT - IMPROVED ====================
function resetSliderLayout() {
    const sliderContainer = document.getElementById('sliderContainer');
    const newsSlider = document.querySelector('.news-slider');
    
    if (sliderContainer) {
        sliderContainer.className = 'slider-container';
        
        if (isMobile) {
            sliderContainer.style.cssText = `
                position: fixed;
                top: 50px;
                left: 0;
                right: 0;
                bottom: 60px;
                overflow: hidden;
                z-index: 1;
                background: #fff !important;
                margin: 0px auto;
                transform: none !important;
                transition: none !important;
            `;
        } else {
            sliderContainer.style.cssText = `
                position: fixed;
                max-width: 1000px;
                left: 50%;
                transform: translateX(-50%);
                top: 60px;
                bottom: 75px;
                overflow: hidden;
                z-index: 1;
                background: #fff !important;
                border-radius: 25px;
                box-shadow: 0 25px 80px rgba(0,0,0,0.4);
                border: 2px solid rgba(255,255,255,0.15);
                margin: 0px auto;
                transform: translateX(-50%) !important;
            `;
        }
    }
    
    if (newsSlider) {
        newsSlider.style.transform = 'translateY(0%)';
    }
}

// ==================== REINITIALIZE ALL EVENT LISTENERS ====================
function reinitializeAllEventListeners() {
    setupEventListeners();
    setupCategoryNavigation();
    setupImageModal();
    setupShareModal();
    setupSourceLinks();
    setupRatingSystem();
    setupContactModal();
    initializeViewCounter();
    
    // IMPORTANT: Setup mobile-specific features
    if (isMobile) {
        setupMobileNavigationScroll();
        setupMobileImageTouch();
    }
}

// ==================== UPDATE BOTTOM NAV FOR CATEGORY ====================
function updateBottomNavForCategory(category) {
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
        
        if (category === 'all' && item.getAttribute('href') === '?category=all') {
            item.classList.add('active');
        } else if (category === 'bookmarks' && item.getAttribute('href') === '?category=bookmarks') {
            item.classList.add('active');
        }
    });
}

// ==================== INITIALIZATION ====================
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded - Initializing...');
    
    initSlider();
    initializeViewCounter();
    setupCategoryNavigation();
    
    // IMPORTANT: Setup mobile-specific features
    if (isMobile) {
        setupMobileNavigationScroll();
        setupMobileImageTouch();
    }
    
    setupNewFeedNotification();
    setupImageModal();
    setupShareModal();
    setupSourceLinks();
    setupRatingSystem();
    setupContactModal();
    
    console.log('Initialization complete');
});

// ==================== FIX: AD CLICK TRACKING ====================
function trackAdClick(adId) {
    fetch('track_ad_click.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `ad_id=${adId}`
    })
    .then(response => response.json())
    .then(data => {
        console.log('Ad click tracked:', data);
    })
    .catch(error => {
        console.error('Error tracking ad click:', error);
    });
}

// ==================== FIX: AD IMAGE CLICK HANDLING ====================
document.addEventListener('click', function(e) {
    const adImage = e.target.closest('.ad-image img');
    if (adImage) {
        const adCard = adImage.closest('.ad-card');
        if (adCard) {
            const link = adCard.querySelector('.full-ad-link');
            if (link && link.href && link.href !== '#') {
                e.preventDefault();
                e.stopPropagation();
                window.open(link.href, '_blank');
                showToast('Opening advertisement...', 'info');
                return;
            }
            
            const adId = adCard.getAttribute('data-ad-id');
            if (adId) {
                trackAdClick(adId);
            }
        }
    }
});

// ==================== FIX: RETRY FUNCTION FOR SLIDER ====================
function retrySliderInitialization() {
    setTimeout(() => {
        initSlider();
        adjustLayoutForCurrentSlide();
    }, 500);
}

setTimeout(retrySliderInitialization, 1000);

// ==================== FIX: FORCE DESKTOP ADS DISPLAY ====================
function forceDesktopAdsDisplay() {
    if (!isMobile) {
        const desktopAds = document.querySelectorAll('.desktop-horizontal-ad');
        desktopAds.forEach(ad => {
            ad.style.display = 'flex';
            ad.style.visibility = 'visible';
            ad.style.opacity = '1';
            ad.style.height = '100%';
            ad.style.minHeight = '100%';
        });
        
        const mobileAds = document.querySelectorAll('.mobile-vertical-ad');
        mobileAds.forEach(ad => {
            ad.style.display = 'none';
        });
    }
}

setTimeout(forceDesktopAdsDisplay, 1000);
</script>
</body>
</html>