/* Mobile Responsive Fixes for Horizontal Overflow */

/* Global box-sizing fix */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow on all containers */
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all main containers respect viewport width */
.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg,
.max-w-md,
.max-w-sm,
.max-w-xs {
    box-sizing: border-box;
    max-width: 100%;
}

/* Mobile-specific fixes for iPhone breakpoints */
@media (max-width: 428px) {
    /* iPhone 14 Pro Max, iPhone 13 Pro Max, iPhone 12 Pro Max */
    .hero-section,
    .testimonial-rotator,
    .services-section,
    .pricing-section,
    .why-section,
    .final-cta-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure proper header spacing */
    .glass-pill-container {
        top: 10px !important;
        width: calc(100% - 20px) !important;
    }
    
    /* Ensure trust bar wraps properly on smallest screens */
    .trust-bar {
        gap: 0.75rem !important;
    }
    
    .trust-bar > div {
        flex-shrink: 1;
        min-width: 0;
    }
    
    .trust-bar span {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 414px) {
    /* iPhone 14 Plus, iPhone 13, iPhone 12, iPhone 11 Pro Max */
    .hero-section .grid {
        gap: 1rem;
    }
    
    .hero-section .space-y-8 > * + * {
        margin-top: 1.5rem;
    }
}

@media (max-width: 390px) {
    /* iPhone 14, iPhone 13 Pro, iPhone 12 Pro, iPhone 11 Pro */
    .hero-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Ensure proper header spacing for 390px screens */
    .glass-pill-container {
        top: 8px !important;
        width: calc(100% - 16px) !important;
    }
    
    /* Make trust bar items stack on very small screens */
    .trust-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .trust-bar > div {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 375px) {
    /* iPhone SE, iPhone 8, iPhone 7, iPhone 6s */
    .hero-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Ensure proper header spacing for smallest screens */
    .glass-pill-container {
        top: 6px !important;
        width: calc(100% - 12px) !important;
    }
    
    /* Reduce font sizes on smallest screens */
    .hero-section h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .hero-section p {
        font-size: 0.9rem;
    }
    
    /* Make benefit grid single column on very small screens */
    .benefits-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Fix for testimonial rotator overflow */
.testimonial-rotator {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

.testimonial-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

/* Fix for any absolute positioned elements */
.absolute {
    max-width: 100%;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for any transforms that might cause overflow */
.transform {
    transform-origin: center;
}

/* Ensure flex items don't overflow */
.flex {
    min-width: 0;
}

.flex > * {
    min-width: 0;
}

/* Fix for grid items */
.grid > * {
    min-width: 0;
}

/* Specific fix for hero section trust bar */
.hero-section .flex.flex-wrap {
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .hero-section .flex.flex-wrap {
        gap: 2rem;
    }
}

/* Fix for button groups */
.btn-group,
.button-group {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .btn-group,
    .button-group {
        flex-wrap: nowrap;
        gap: 1rem;
    }
}

/* Ensure no element exceeds viewport width */
* {
    max-width: 100%;
}

/* Exception for specific elements that need to be wider */
.testimonial-track,
.marquee-content {
    max-width: none;
}

/* Fix for any pseudo-elements */
*::before,
*::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* iOS Safe Area Support for Notched iPhones (iPhone X and newer) */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Fix for fixed header on iOS */
    .glass-pill-container,
    .modeno-header-v2 {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    
    /* Fix for mobile menu on iOS */
    .mobile-nav-content {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* iOS 100vh Fix - Use CSS custom properties for dynamic viewport height */
:root {
    --vh: 1vh;
}

/* Fix for mobile nav height on iOS Safari */
.mobile-nav-content {
    height: 100vh; /* Fallback for older browsers */
    height: calc(var(--vh, 1vh) * 100); /* Dynamic viewport height */
}

/* Fix for full-height sections on iOS */
@media (max-width: 768px) {
    .hero-section,
    section[id] {
        min-height: 100vh; /* Fallback */
        min-height: calc(var(--vh, 1vh) * 100); /* Dynamic viewport height */
    }
}

/* Android-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Chrome/Android specific fixes */
    .mobile-nav-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* Touch action improvements for better mobile performance */
button,
.btn,
a,
input[type="button"],
input[type="submit"],
.mobile-menu-btn-v2,
.cta-button-v2 {
    touch-action: manipulation; /* Prevents double-tap zoom delay */
}

/* Prevent text size adjustment on iOS */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}