/* ============================================
   ULTRA-AGGRESSIVE MOBILE FIX
   Forces responsive behavior on ALL screens
   ============================================ */

/* NUCLEAR OPTION: Prevent ANY horizontal overflow */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force EVERY element to respect viewport */
*,
*::before,
*::after {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Remove all transforms on mobile */
@media (max-width: 1024px) {
    * {
        transform: none !important;
    }
}

/* Container fixes */
.container,
.container-fluid,
[class*="container"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
}

/* Row fixes */
.row,
[class*="row"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

/* Column fixes */
.col,
[class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
}

/* Image fixes */
img,
svg,
video,
iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* ============================================
   MOBILE SPECIFIC (< 768px)
   ============================================ */
@media (max-width: 767.98px) {

    /* Force full width containers */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Hide ALL absolutely positioned elements that might overflow */
    .position-absolute,
    [class*="position-absolute"],
    [style*="position: absolute"] {
        display: none !important;
    }

    /* Hide all floating/badge elements */
    [class*="float"],
    [class*="badge"],
    [class*="floating"] {
        display: none !important;
    }

    /* Navigation */
    .nav-ultra,
    nav {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .nav-ultra .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Hero Section */
    .hero-ultra,
    [class*="hero"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: hidden !important;
    }

    .hero-ultra *,
    .hero-ultra::before,
    .hero-ultra::after {
        max-width: 100% !important;
    }

    .hero-ultra .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-ultra .col-lg-6 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Hero Title */
    .hero-title-ultra,
    h1.hero-title,
    [class*="hero-title"] {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
    }

    /* Hero Subtitle */
    .hero-subtitle-ultra,
    [class*="hero-subtitle"] {
        font-size: 0.9375rem !important;
        padding: 0 10px !important;
        line-height: 1.5 !important;
    }

    /* Hero Buttons */
    .hero-ultra .btn-ultra,
    .hero-ultra .btn,
    .hero-ultra a[class*="btn"] {
        width: 90% !important;
        max-width: 300px !important;
        margin: 0.5rem auto !important;
        display: block !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem !important;
    }

    /* Stats Section */
    .stats-ultra {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        margin: 1rem 15px !important;
        padding: 1.5rem 1rem !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .stat-item {
        width: 100% !important;
        text-align: center !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    .stat-label {
        font-size: 0.875rem !important;
    }

    /* Mockup/Image Containers */
    .hero-mockup-container,
    .mockup-stack,
    [class*="mockup"] {
        width: 90% !important;
        max-width: 300px !important;
        margin: 2rem auto !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .mockup-card,
    .mockup-1,
    .mockup-2,
    .mockup-3 {
        position: static !important;
        transform: none !important;
        margin: 1rem auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mockup-image,
    .mockup-card img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Sections */
    .section-ultra,
    section {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 2rem 15px !important;
        overflow-x: hidden !important;
    }

    /* Section Titles */
    .section-title-ultra,
    h2[class*="section-title"] {
        font-size: 1.5rem !important;
        padding: 0 15px !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }

    .section-subtitle-ultra,
    p[class*="section-subtitle"] {
        font-size: 0.9375rem !important;
        padding: 0 15px !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Feature Cards */
    .feature-card-ultra,
    [class*="feature-card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem 0 !important;
        padding: 1.5rem 1rem !important;
    }

    .feature-icon-ultra {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 1rem !important;
    }

    .feature-title-ultra {
        font-size: 1.125rem !important;
        text-align: center !important;
    }

    .feature-description-ultra {
        font-size: 0.9375rem !important;
        text-align: center !important;
    }

    /* Template/Pricing Cards */
    .template-card-ultra,
    .pricing-card-ultra,
    [class*="card-ultra"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem 0 !important;
        padding: 1.5rem !important;
    }

    /* Footer */
    .footer-ultra,
    footer {
        width: 100% !important;
        padding: 2rem 15px !important;
        overflow-x: hidden !important;
    }

    /* Tables */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* Forms */
    input,
    textarea,
    select,
    button {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent any element from extending beyond viewport */
    * {
        min-width: 0 !important;
    }

    /* Remove negative margins */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Override any inline styles that cause overflow */
    [style*="width"],
    [style*="margin"],
    [style*="padding"] {
        max-width: 100% !important;
    }

    /* Grid layouts */
    [class*="d-flex"],
    .d-flex {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* Ensure no fixed widths larger than viewport */
    [style*="px"] {
        max-width: 100vw !important;
    }
}

/* ============================================
   EXTRA SMALL (< 576px)
   ============================================ */
@media (max-width: 575.98px) {

    body {
        font-size: 14px !important;
    }

    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    /* Buttons */
    .btn,
    button,
    [class*="btn"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 0.75rem 1rem !important;
    }

    /* Make all flex containers stack vertically */
    .d-flex,
    [class*="d-flex"] {
        flex-direction: column !important;
    }

    /* Images */
    img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    .container {
        max-width: 720px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-title-ultra {
        font-size: 2.5rem !important;
    }

    .mockup-stack {
        max-width: 400px !important;
    }

    /* Hide decorative elements on tablet too */
    [class*="floating"],
    [class*="badge-"] {
        display: none !important;
    }
}

/* ============================================
   FORCE MOBILE MENU
   ============================================ */
@media (max-width: 991.98px) {
    /* Hide desktop navigation items */
    .d-none.d-md-flex {
        display: none !important;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
    }
}

/* ============================================
   CRITICAL OVERRIDES
   ============================================ */

/* Remove all pseudo-elements on mobile that might cause overflow */
@media (max-width: 767.98px) {
    *::before,
    *::after {
        display: none !important;
    }
}

/* Ensure viewport meta tag is respected */
@viewport {
    width: device-width;
}