/**
 * Mobile CRO Optimizations
 * Purpose: Ensure all CRO elements work perfectly on mobile devices
 * Target: Reduce mobile bounce rate, improve mobile conversions
 */

/* ============================================
   MOBILE-FIRST CRO ENHANCEMENTS
   ============================================ */

/* Mobile: Below 768px */
@media (max-width: 767px) {
    
    /* ==================
       HERO SECTIONS
       ================== */
    
    /* Index.html Hero - Mobile Optimized */
    .hero-banner-content {
        padding: 30px 20px !important;
    }
    
    /* Social Proof Badge - Stack on Mobile */
    .hero-banner-content > div:first-child {
        flex-direction: column !important;
        text-align: center !important;
        padding: 12px 18px !important;
        font-size: 0.85rem !important;
    }
    
    /* Value Proposition Pills - Stack on Mobile */
    .hero-banner-content > div[style*="flex-wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .hero-banner-content > div[style*="flex-wrap"] > div {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        padding: 10px 16px !important;
    }
    
    /* CTA Button - Full Width on Mobile */
    .hero-banner-content a[style*="padding: 18px 45px"] {
        width: 100% !important;
        padding: 16px 30px !important;
        font-size: 1.05rem !important;
        box-sizing: border-box !important;
    }
    
    /* "Limited Time" Badge - Adjust Position */
    .hero-banner-content a[style*="padding: 18px 45px"] > div {
        top: -8px !important;
        right: -8px !important;
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
    }
    
    /* ==================
       SOCIAL PROOF SECTIONS
       ================== */
    
    /* Stats Grid - 2 Columns on Mobile */
    section[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Stat Numbers - Slightly Smaller on Mobile */
    section[style*="grid-template-columns"] div[style*="font-size: 3rem"] {
        font-size: 2.2rem !important;
    }
    
    section[style*="grid-template-columns"] div[style*="font-size: 1.1rem"] {
        font-size: 0.95rem !important;
    }
    
    /* ==================
       SUBSCRIBE PAGE
       ================== */
    
    /* Social Proof Banner - Mobile Responsive */
    .social-proof-banner > div {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 16px !important;
    }
    
    .social-proof-banner span {
        font-size: 0.9rem !important;
    }
    
    /* Value Proposition Banner - Stack on Mobile */
    div[style*="$750+ Save"] + div {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Savings Calculator - Mobile Optimized */
    #fullSavingsDisplay,
    #miniSavingsDisplay {
        font-size: 0.9rem !important;
        padding: 15px !important;
    }
    
    /* ==================
       CHECKOUT PAGE
       ================== */
    
    /* Subscription Terms Summary - Mobile Stack */
    div[style*="Your Subscription Summary"] > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Zone Checker - Mobile Stack */
    #postcodeChecker {
        min-width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    div[style*="flex: 1; min-width: 200px"] + button {
        width: 100% !important;
    }
    
    /* Security Badges - Single Column on Mobile */
    div[style*="256-bit SSL"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Expected Delivery Date - Mobile Optimized */
    #expectedDeliveryDate {
        font-size: 1.2rem !important;
    }
    
    /* ==================
       TESTIMONIALS
       ================== */
    
    /* Testimonials Grid - Single Column on Mobile */
    #testimonialsContainer {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Testimonial Cards - Mobile Padding */
    #testimonialsContainer > div {
        padding: 20px !important;
    }
    
    /* Testimonial Navigation - Larger Touch Targets */
    #testimonialPrev,
    #testimonialNext {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.4rem !important;
    }
    
    /* ==================
       EXIT INTENT POPUP
       ================== */
    
    /* Popup - Full Screen on Mobile */
    #exitIntentPopup > div {
        width: 95% !important;
        max-height: 95vh !important;
        border-radius: 12px !important;
    }
    
    #exitIntentPopup h2 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    #exitIntentPopup p {
        font-size: 1rem !important;
    }
    
    /* Email Form - Stack on Mobile */
    #exitIntentForm > div {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    #exitIntentEmail,
    #exitIntentForm button {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Benefits List - Mobile Spacing */
    #exitIntentPopup div[style*="display: flex; align-items: start"] {
        gap: 10px !important;
    }
    
    /* ==================
       SHOP PAGE UPSELL
       ================== */
    
    /* Subscription Upsell Banner - Stack on Mobile */
    section[style*="Save More with a Subscription"] > div > div {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    section[style*="Save More with a Subscription"] div[style*="font-size: 1.5rem"] {
        font-size: 1.3rem !important;
    }
    
    section[style*="Save More with a Subscription"] div[style*="flex: 1"] {
        min-width: 100% !important;
    }
    
    section[style*="Save More with a Subscription"] div[style*="display: flex; gap: 15px"] {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    /* ==================
       ACCOUNT PAGE
       ================== */
    
    /* Retention Stats - 2 Columns on Mobile */
    section[style*="Total Saved So Far"] > div > div {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    section[style*="Total Saved So Far"] div[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }
    
    /* Refer & Earn Card - Full Width on Small Mobile */
    @media (max-width: 480px) {
        section[style*="Total Saved So Far"] > div > div {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* ==================
       CONFIRMATION PAGE
       ================== */
    
    /* Referral Box - Mobile Stack */
    div[style*="Your Referral Link"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    div[style*="Your Referral Link"] > div,
    div[style*="Your Referral Link"] > button {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* ==================
       FLOATING ELEMENTS
       ================== */
    
    /* Floating Cart - Mobile Adjustments */
    .floating-cart-summary {
        bottom: 70px !important;
        right: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    /* Quick Actions - Mobile Position */
    .quick-actions {
        bottom: 10px !important;
        right: 10px !important;
    }
    
    /* ==================
       NAVIGATION
       ================== */
    
    /* Logo - Mobile Sizing */
    .logo img {
        height: 40px !important;
        max-width: 150px !important;
        width: auto !important;
    }
    
    /* Navigation Bar - Mobile Layout */
    .nav-wrapper {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
    }
    
    /* Mobile Menu Toggle - Visible */
    .mobile-menu-toggle {
        display: flex !important;
        order: 3 !important;
    }
    
    /* Navigation Menu - Hidden by Default on Mobile */
    .nav-menu {
        display: none !important;
        width: 100% !important;
        order: 4 !important;
    }
    
    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px 0 !important;
    }
    
    .nav-menu li {
        width: 100% !important;
        text-align: center !important;
        margin: 8px 0 !important;
    }
    
    /* Mobile Menu - Ensure CRO Badges Visible */
    .nav-cta {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px 0 !important;
        order: 5 !important;
        gap: 10px !important;
    }
    
    .nav-cta.active {
        display: flex !important;
    }
    
    .nav-cta a {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }
    
    .btn-badge {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }
    
    /* Primary CTA Button - Prominent on Mobile */
    .btn-primary-enhanced {
        background: var(--primary-green) !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3) !important;
    }
    
    /* Shop Button - Secondary Style */
    .btn-shop-onetime {
        background: white !important;
        color: var(--primary-green) !important;
        border: 2px solid var(--primary-green) !important;
    }
    
    /* ==================
       TYPOGRAPHY
       ================== */
    
    /* Headlines - Mobile Sizing */
    h1 {
        font-size: 1.8rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    /* Hero Headlines - Specific */
    .hero-banner-headline {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-banner-subtext {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* ==================
       SPACING & PADDING
       ================== */
    
    /* Section Padding - Mobile Reduced */
    section[style*="padding: 60px 0"],
    section[style*="padding: 50px 0"],
    section[style*="padding: 40px 0"] {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Container Padding - Mobile Margins */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* ==================
       TOUCH TARGETS
       ================== */
    
    /* Buttons - Minimum 44px Height for Touch */
    button,
    .btn-primary,
    .btn-secondary,
    a[class*="btn"] {
        min-height: 44px !important;
        padding: 12px 24px !important;
    }
    
    /* Links in Text - Larger Touch Area */
    a {
        padding: 4px 0 !important;
    }
    
    /* Checkbox/Radio - Larger Touch Targets */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
    }
    
    /* ==================
       FORMS
       ================== */
    
    /* Form Inputs - Mobile Friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 14px 16px !important;
    }
    
    /* Form Groups - Mobile Stack */
    .form-row.two-col {
        flex-direction: column !important;
    }
    
    .form-row.two-col .form-group {
        width: 100% !important;
    }
    
    /* ==================
       TABLES
       ================== */
    
    /* Order Summary Tables - Horizontal Scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* ==================
       IMAGES
       ================== */
    
    /* Hero Images - Mobile Optimized */
    .hero-banner-image {
        height: 400px !important;
        object-position: center !important;
    }
    
    /* Product Images - Consistent Size */
    .box-card img,
    .add-on-card img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ==================
       ANIMATIONS
       ================== */
    
    /* Reduce Motion for Performance */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   TABLET: 768px - 1024px
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* Stats Grid - 3-4 Columns on Tablet */
    section[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Testimonials - 2 Columns on Tablet */
    #testimonialsContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Exit Popup - 85% Width on Tablet */
    #exitIntentPopup > div {
        width: 85% !important;
    }
    
    /* Navigation - Tablet Adjustments */
    .nav-cta {
        gap: 10px !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE: Below 768px Height
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    
    /* Hero - Reduce Height in Landscape */
    .hero-banner-fullwidth {
        min-height: auto !important;
    }
    
    .hero-banner-image {
        height: 350px !important;
    }
    
    /* Exit Popup - Allow Scroll in Landscape */
    #exitIntentPopup > div {
        max-height: 98vh !important;
        overflow-y: auto !important;
    }
}

/* ============================================
   PROGRESSIVE ENHANCEMENT
   ============================================ */

/* Touch Hover States - Mobile Only */
@media (hover: none) and (pointer: coarse) {
    
    /* Remove Hover Effects on Touch Devices */
    *:hover {
        /* Disable desktop hover effects */
    }
    
    /* Add Touch Feedback */
    button:active,
    a:active,
    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce Expensive Operations on Mobile */
@media (max-width: 767px) {
    
    /* Simplify Shadows */
    * {
        box-shadow: none !important;
    }
    
    /* Re-add Essential Shadows */
    .box-card,
    .add-on-card,
    #exitIntentPopup > div,
    .floating-cart-summary {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Simplify Gradients - Use Solid Colors */
    [style*="linear-gradient"] {
        /* Consider using solid fallback colors for better performance */
        /* Example: background: #f8fdf9 !important; */
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus Indicators - Mobile Visible */
@media (max-width: 767px) {
    
    *:focus {
        outline: 3px solid var(--primary-green) !important;
        outline-offset: 2px !important;
    }
    
    /* Skip Links - Mobile Accessible */
    .skip-link:focus {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 100000 !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Mobile Display Utilities */
.mobile-hidden {
    display: none !important;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
    
    .mobile-hidden {
        display: block !important;
    }
}

/* Mobile Text Alignment */
.mobile-center {
    text-align: center !important;
}

.mobile-left {
    text-align: left !important;
}

/* Mobile Spacing */
.mobile-mt-0 { margin-top: 0 !important; }
.mobile-mt-1 { margin-top: 10px !important; }
.mobile-mt-2 { margin-top: 20px !important; }
.mobile-mb-0 { margin-bottom: 0 !important; }
.mobile-mb-1 { margin-bottom: 10px !important; }
.mobile-mb-2 { margin-bottom: 20px !important; }

/* ============================================
   PRINT STYLES (Bonus)
   ============================================ */

@media print {
    
    /* Hide CRO Elements When Printing */
    #exitIntentPopup,
    .floating-cart-summary,
    .quick-actions,
    nav,
    footer,
    [style*="position: fixed"],
    [style*="position: sticky"] {
        display: none !important;
    }
    
    /* Optimize for Printing */
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        text-decoration: underline !important;
    }
}