/* =====================================================================
   MOBILE ULTIMATE FIX - V16.0
   This file uses maximum specificity to override ALL conflicts
   Last resort - nuclear option
   ===================================================================== */

/* =====================================================================
   1. PREVENT HORIZONTAL SCROLL (HIGHEST PRIORITY)
   ===================================================================== */

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

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

* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===================================================================== 
   CRITICAL: Disable backdrop-filter globally on mobile
   Causes black/gray box rendering glitches on iOS Safari & Android
   ===================================================================== */

* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =====================================================================
   2. FIX HERO TITLE - NO LETTER SPACING ISSUES
   ===================================================================== */

@media (max-width: 768px) {
    .hero-title-huge {
        font-size: 36px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        word-spacing: normal !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        margin-bottom: 24px !important;
    }

    .hero-title-huge br {
        display: inline !important;
    }

    /* Fix any inline styles that might break text */
    .hero-content-center h1,
    .hero-content-center .hero-title-huge {
        letter-spacing: -0.01em !important;
        word-spacing: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero-title-huge {
        font-size: 32px !important;
    }
}

/* =====================================================================
   3. FIX ALL TYPOGRAPHY - NO HYPHENATION, NO BREAKING
   ===================================================================== */

@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        hyphens: none !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    /* Specific fixes for problematic titles */
    .scenario-title,
    .equipment-title,
    .section-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        hyphens: none !important;
        word-break: keep-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Fix body text */
    p, span, div {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
}

/* =====================================================================
   4. FIX COMPARISON CARDS (RED/GREEN BOXES)
   ===================================================================== */

@media (max-width: 768px) {
    /* FORCE vertical stacking */
    .vs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        padding: 0 20px !important;
        margin: 40px 0 !important;
    }

    /* Cards must be full width */
    .vs-card,
    .problem-card,
    .solution-card {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        padding: 24px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Arrow should rotate vertical */
    .vs-arrow {
        transform: rotate(90deg) !important;
        font-size: 32px !important;
        margin: 16px 0 !important;
        display: block !important;
    }

    /* Rate numbers */
    .vs-rate {
        font-size: 56px !important;
        line-height: 1 !important;
        margin-bottom: 16px !important;
        word-break: keep-all !important;
        white-space: nowrap !important;
    }

    /* Monthly cost text - NO BREAKING */
    .vs-result {
        padding: 20px !important;
        overflow: visible !important;
        text-align: center !important;
    }

    .vs-result strong {
        display: inline-block !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        font-size: 28px !important;
    }

    /* Fix "$997/month" and "$1,375+/month" breaking */
    .vs-result span,
    .vs-result strong,
    [class*="result"] strong {
        white-space: nowrap !important;
        word-break: keep-all !important;
        display: inline-block !important;
    }
}

@media (max-width: 480px) {
    .vs-card {
        padding: 20px !important;
    }

    .vs-rate {
        font-size: 48px !important;
    }

    .vs-result strong {
        font-size: 24px !important;
    }
}

/* =====================================================================
   5. FIX SCENARIO/POS CARDS
   ===================================================================== */

@media (max-width: 768px) {
    /* Carousel wrapper */
    .pos-carousel {
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .carousel-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /* Individual cards */
    .scenario-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Fix "Online Payments" being cut off */
    .scenario-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin: 16px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }

    /* Fix rate numbers */
    .scenario-rate {
        font-size: 48px !important;
        line-height: 1 !important;
        margin: 16px 0 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    .scenario-rate span {
        display: block !important;
        font-size: 16px !important;
        margin-top: 8px !important;
        white-space: normal !important;
    }

    .scenario-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-top: 12px !important;
    }

    /* Fix images */
    .scenario-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/10 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
}

/* =====================================================================
   6. FIX EQUIPMENT CARDS
   ===================================================================== */

@media (max-width: 768px) {
    .equipment-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .equipment-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px !important;
        overflow: visible !important;
    }

    /* Fix "For Coffee Shops & Cafés" title breaking */
    .equipment-card h3,
    .equipment-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        hyphens: none !important;
        word-break: keep-all !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Equipment images */
    .equipment-image,
    .equipment-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    /* Feature lists */
    .equipment-features,
    .feature-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 16px 0 !important;
    }

    .equipment-features li,
    .feature-list li {
        padding: 8px 0 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}

/* =====================================================================
   7. FIX NAVIGATION
   ===================================================================== */

@media (max-width: 768px) {
    .nav {
        padding: 12px 16px !important;
        background: rgba(12, 14, 20, 0.98) !important;
    }

    .nav-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Hamburger menu - MUST be visible */
    .nav-toggle {
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        background: rgba(164, 210, 51, 0.15) !important;
        border: 1px solid rgba(164, 210, 51, 0.4) !important;
        border-radius: 8px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .nav-toggle span {
        width: 24px !important;
        height: 2px !important;
        background: #A4D233 !important;
        border-radius: 2px !important;
        display: block !important;
    }

    /* Logo */
    .logo-img {
        height: 40px !important;
        width: auto !important;
    }

    /* CTA Button */
    .nav-btn,
    .btn-primary {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }
}

/* =====================================================================
   8. FIX HERO SECTION
   ===================================================================== */

@media (max-width: 768px) {
    .hero-fullwidth {
        min-height: 85vh !important;
        padding: 140px 20px 60px !important;
        /* Fix blinking gray box on scroll */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
    }

    .hero-content-center {
        padding: 0 20px !important;
        max-width: 100% !important;
        /* Force GPU rendering for smooth scroll */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
    }

    .hero-overlay {
        /* Prevent overlay from blinking */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
        pointer-events: none !important;
    }

    .hero-description-center {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 32px !important;
    }

    /* Quiz container */
    .hero-quiz,
    #hero-quiz {
        max-width: 100% !important;
        padding: 24px !important;
        margin: 32px 0 !important;
    }

    /* Fix gray box - AGGRESSIVE override for inline styles */
    .hero-content-center > div[style],
    .hero-content-center > div[style*="border"],
    .hero-content-center > div[style*="background"],
    div[style*="backdrop-filter"] {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 20px !important;
    }

    /* Select inputs */
    select,
    input[type="text"],
    input[type="email"] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }

    /* Buttons */
    button,
    .btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
}

/* =====================================================================
   9. FIX ALL GRIDS (FORCE VERTICAL ON MOBILE)
   ===================================================================== */

@media (max-width: 768px) {
    [class*="-grid"],
    .grid,
    .feature-grid,
    .comparison-grid,
    .rates-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 20px !important;
    }

    [class*="-grid"] > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================================
   10. FIX CONTAINERS & SECTIONS
   ===================================================================== */

@media (max-width: 768px) {
    .container,
    .section-container,
    [class*="-container"] {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow-x: hidden !important;
    }

    section,
    [class*="-section"] {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .problem-solution-container {
        padding: 40px 20px !important;
        overflow-x: hidden !important;
    }

    .problem-solution {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* CRITICAL: Hide massive 700px decorator blob on mobile */
    .problem-solution::before {
        display: none !important;
    }
    
    /* =====================================================================
       11. FIX COMPARISON TABLE (HEAD TO HEAD SECTION)
       ===================================================================== */
    
    /* Hide desktop table on mobile */
    .comparison-table-modern {
        display: none !important;
    }
    
    /* Keep wrapper visible but remove overflow */
    .comparison-table-wrapper {
        overflow-x: visible !important;
        max-width: 100% !important;
    }
    
    /* Show mobile-optimized version */
    .comparison-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Make provider cards full-width */
    .provider-comparison-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* =====================================================================
   11. FIX IMAGES (NO OVERFLOW)
   ===================================================================== */

@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .hero-bg-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* =====================================================================
   12. FIX BUTTONS & TOUCH TARGETS
   ===================================================================== */

@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        border-radius: 8px !important;
        display: inline-block !important;
        text-align: center !important;
    }

    a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* =====================================================================
   13. FIX FOOTER
   ===================================================================== */

@media (max-width: 768px) {
    .footer {
        padding: 60px 20px !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .footer-column {
        width: 100% !important;
    }
}

/* =====================================================================
   14. EXTRA SMALL MOBILE (<480px)
   ===================================================================== */

@media (max-width: 480px) {
    .container,
    .section-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .vs-card {
        padding: 16px !important;
    }

    .scenario-card,
    .equipment-card {
        padding: 16px !important;
    }

    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    .hero-title-huge {
        font-size: 28px !important;
    }
}

/* =====================================================================
   15. FORCE REMOVE ALL TEXT OVERFLOW
   ===================================================================== */

@media (max-width: 768px) {
    * {
        text-overflow: clip !important;
    }

    /* Only these specific elements can have ellipsis */
    .truncate {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
}

/* =====================================================================
   16. LANDSCAPE MOBILE FIXES
   ===================================================================== */

@media (max-width: 896px) and (orientation: landscape) {
    .hero-fullwidth {
        min-height: auto !important;
        padding: 100px 20px 40px !important;
    }

    .hero-title-huge {
        font-size: 32px !important;
    }
}

/* =====================================================================
   17. HERO QUIZ FORM - WCAG AA TOUCH TARGETS (V17.1)
   ===================================================================== */

@media (max-width: 768px) {
    #hero-quiz-container {
        max-width: 600px !important;
        margin: 48px auto 32px !important;
        padding: 32px 20px !important;  /* Add side padding on mobile */
    }
    
    .hero-quiz-question label {
        display: block !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin-bottom: 16px !important;
    }
    
    .hero-quiz-question select,
    #quiz-volume,
    #quiz-industry {
        width: 100% !important;
        min-height: 48px !important;  /* WCAG AA compliance */
        padding: 16px !important;  /* Increased from 14px */
        font-size: 16px !important;
        border-radius: 8px !important;
        border: 2px solid rgba(139, 92, 246, 0.3) !important;
        background: rgba(26, 29, 40, 0.8) !important;
        color: #fff !important;
        font-family: Inter, sans-serif !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .hero-quiz-question button,
    #hero-quiz button {
        width: 100% !important;
        min-height: 48px !important;  /* WCAG AA compliance */
        padding: 16px 24px !important;  /* Increased from 14px */
        background: linear-gradient(135deg, #A4D233 0%, #8AB62A 100%) !important;
        color: #000 !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }
    
    #q-result a {
        display: inline-block !important;
        min-height: 48px !important;  /* WCAG AA compliance */
        padding: 16px 32px !important;
        background: linear-gradient(135deg, #A4D233 0%, #8AB62A 100%) !important;
        color: #000 !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   END MOBILE ULTIMATE FIX
   ===================================================================== */