/* ========================================
   🔧 FINAL MOBILE OVERFLOW FIX - ULTIMATE EDITION
   ======================================== */

/* GLOBAL OVERFLOW PREVENTION */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

/* Prevent all elements from causing overflow */
* {
    max-width: 100%;
    box-sizing: border-box !important;
}

/* MOBILE SPECIFIC FIXES */
@media (max-width: 768px) {
    
    /* Force viewport width */
    body, html {
        width: 100vw;
        overflow-x: hidden !important;
    }
    
    /* Container fixes */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* All sections must fit */
    section,
    div,
    main,
    article,
    aside {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Roadmap cards on What's Next page */
    .roadmap-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        overflow-x: hidden !important;
    }
    
    .roadmap-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .roadmap-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Feature cards */
    .feature-card,
    .card,
    .box {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        overflow-x: hidden !important;
    }
    
    /* Headers and titles */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    /* Paragraphs and text */
    p, li, span, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    /* Tables - make scrollable */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Grid layouts - stack vertically */
    .grid,
    .features-grid,
    .cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Remove any negative margins */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Re-add only safe margins */
    .container > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Images responsive */
    img, svg, video {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Pre and code blocks */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }
    
    /* Input fields */
    input, textarea, select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Buttons */
    button, .btn, .button {
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
    
    /* Hero sections */
    .hero,
    .hero-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: hidden !important;
    }
    
    /* Token preview boxes */
    .token-preview,
    .preview-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Form groups */
    .form-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Social links section on create page */
    .social-links-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        overflow-x: hidden !important;
    }
    
    /* Phase cards */
    .phase-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
    }
    
    /* Fix for green bordered cards */
    [style*="border: 2px solid"],
    [style*="border-radius: 16px"] {
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .roadmap-card,
    .feature-card,
    .phase-card {
        padding: 0.75rem !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
}