/* GLOBAL MOBILE RESPONSIVENESS OVERRIDE */
@media (max-width: 768px) {
    /* 1. General Viewport & Overflow fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Padding and Margins */
    .container, section, .hero, .stats-bar, .marquee-ticker {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Cards & Grids Stacking */
    .features-grid, .markets-grid, .steps, .blog-grid, .stats-grid, .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .feature-card, .market-card, .step, .blog-card, .stat-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 4. Images & Charts */
    img, video, canvas, iframe {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    #chart, .chart-container, .tv-lightweight-charts {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Typography Scaling */
    h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.2rem !important; }
    p, span, div, a { font-size: 0.95rem; }
    
    .nav-logo { font-size: 1.8rem !important; }
    .branding-title { font-size: 2rem !important; letter-spacing: 2px !important; }
    .branding-subtitle { font-size: 0.6rem !important; letter-spacing: 3px !important; }

    /* 6. Navigation to Hamburger */
    /* Ensure existing hamburger is visible */
    .hamburger {
        display: flex !important;
    }
    
    .topnav, header {
        padding: 10px 15px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 7. Tables Horizontal Scroll */
    .table-container, .table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        margin: 0 !important;
        padding: 10px !important;
    }
    table {
        min-width: 600px !important; /* Forces scroll instead of squishing */
    }

    /* 8. Touch-friendly Buttons */
    .cta-main, .cta-sec, .nav-btn, .header-nav-btn {
        padding: 12px 20px !important;
        min-height: 44px !important; /* Touch target size */
        margin-bottom: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Specific exclusions for 100% width */
    button:not(.hamburger):not(.mobile-close):not(.toast-close) {
        min-height: 44px !important; /* General touch-friendly size */
    }

    /* 9. Forms & Inputs */
    input, select, textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        margin-bottom: 10px !important;
        min-height: 44px !important;
    }

    /* 10. Footer */
    footer {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }
    .footer-links {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }
    
    /* 11. Modal/Popups */
    #chart-modal, .modal {
        padding: 10px !important;
    }
    .pro-term-body {
        flex-direction: column !important;
        height: auto !important;
        overflow: auto !important;
    }
    #chart-history-overlay {
        width: 100% !important;
        height: 300px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,215,0,0.1) !important;
    }
    
    /* 12. Fixes for Floating Buttons */
    .floating-btn-stack {
        bottom: 15px !important;
        right: 15px !important;
        transform: scale(0.85);
        transform-origin: bottom right;
    }
}


/* USER REQUESTED MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    /* 1. HERO SECTION */
    .hero-content, .hero-section {
        flex-direction: column !important;
        text-align: center !important;
    }
    /* Reduce font sizes for large numbers in hero */
    .hero h1, .nifty-value, .banknifty-value, .hero-price {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    .hero-cta, .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .hero-cta a, .hero-buttons button {
        width: 100% !important;
    }

    /* 2. STATS BAR 2x2 Grid */
    .stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    /* 3. TABLES (Scrollable or Stacked) */
    /* Enhance horizontal scrolling for all tables */
    .table-container, .table-wrapper, #table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }
    table {
        min-width: 600px !important; 
        font-size: 0.85rem !important; /* Slightly smaller for better fit */
    }

    /* 4. PREMIUM SERVICES */
    .premium-services, .about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .premium-card, .about-flip {
        padding: 15px !important;
    }

    /* 5. MARKETS SECTION */
    .markets-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Or 1fr 1fr if preferred, but user said stack to single */
        gap: 15px !important;
    }

    /* 6. HOW IT WORKS */
    .steps, .how-it-works-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    /* Remove horizontal connecting lines if any */
    .step::after {
        display: none !important;
    }

    /* 7. REFER & EARN */
    .referral-box, [id*='refer'], [style*='max-width: 1000px'] {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 8. TESTIMONIALS */
    .tscroll-wrap, .testimonials-container {
        overflow-x: auto !important;
        display: flex !important;
        flex-direction: row !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }
    .tcard, .testimonial {
        scroll-snap-align: center !important;
        min-width: 280px !important;
        width: 80vw !important;
    }

    /* 9. FOOTER */
    footer, .footer-container {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    .footer-links, .social-icons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    .social-icon, .footer-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 10. NAVIGATION */
    .nav-links, .mobile-menu {
        width: 100% !important;
    }
    .nav-link, .menu-item {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
    }
}

/* Hide Netlify Badge */
a[href*='netlify.com'], 
#netlify-identity-widget,
.netlify-badge {
    display: none !important;
}



@media (max-width: 768px) {
    #wallet-pill { display: none !important; }
}


/* USER REQUESTED MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    /* 1. HERO SECTION */
    .hero-content, .hero-section {
        flex-direction: column !important;
        text-align: center !important;
    }
    /* Reduce font sizes for large numbers in hero */
    .hero h1, .nifty-value, .banknifty-value, .hero-price {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    .hero-cta, .hero-buttons {SH W
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .hero-cta a, .hero-buttons button {
        width: 100% !important;
    }

    /* 2. STATS BAR 2x2 Grid */
    .stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    /* 3. TABLES (Scrollable or Stacked) */
    /* Enhance horizontal scrolling for all tables */
    .table-container, .table-wrapper, #table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }
    table {
        min-width: 600px !important; 
        font-size: 0.85rem !important; /* Slightly smaller for better fit */
    }

    /* 4. PREMIUM SERVICES */
    .premium-services, .about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .premium-card, .about-flip {
        padding: 15px !important;
    }

    /* 5. MARKETS SECTION */
    .markets-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Or 1fr 1fr if preferred, but user said stack to single */
        gap: 15px !important;
    }

    /* 6. HOW IT WORKS */
    .steps, .how-it-works-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    /* Remove horizontal connecting lines if any */
    .step::after {
        display: none !important;
    }

    /* 7. REFER & EARN */
    .referral-box, [id*='refer'], [style*='max-width: 1000px'] {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 8. TESTIMONIALS */
    .tscroll-wrap, .testimonials-container {
        overflow-x: auto !important;
        display: flex !important;
        flex-direction: row !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }
    .tcard, .testimonial {
        scroll-snap-align: center !important;
        min-width: 280px !important;
        width: 80vw !important;
    }

    /* 9. FOOTER */
    footer, .footer-container {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
    }
    .footer-links, .social-icons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    .social-icon, .footer-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 10. NAVIGATION */
    .nav-links, .mobile-menu {
        width: 100% !important;
    }
    .nav-link, .menu-item {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
    }
}