/* ========================================
   MOBILE RESPONSIVE EMERGENCY FIX
   ========================================
   This file consolidates all critical mobile responsive fixes
   to ensure consistency between localhost and staging server.
   Load this LAST to override all conflicting styles.
   
   Last Updated: February 2026
   Purpose: Fix mobile responsiveness issues on live/staging server
   ======================================== */

/* ========================================
   VIEWPORT & META FIXES
   ======================================== */
/* Ensure proper viewport behavior */
html {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

* {
    box-sizing: border-box !important;
}

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

/* ========================================
   HIDE SECTION IMAGES ON MOBILE
   ======================================== */

/* Hide ALL images on mobile EXCEPT hero sections and trusted by logos */
@media (max-width: 768px) {
    /* HIDE: Section images, feature images, benefit images */
    .section-image-wrapper,
    .section-image,
    .fbr-image,
    .feature-icon-wrapper,
    .feature-icon-img,
    .pm-feature-icon img,
    .pm-feature-icon svg,
    .benefit-card img,
    .why-card img,
    .product-card img,
    .industry-card img,
    .pos-hero-image img,
    .accounting-hero-image img,
    .practice-hero-image img {
        display: none !important;
    }
    
    /* KEEP: Hero section images VISIBLE */
    .modern-hero-section img,
    .home-hero-section img,
    .hero-section img,
    .hero-section-wrapper img,
    .hero-container-wrapper img,
    .practice-manager-hero-section img,
    .hero-row-wrapper img {
        display: block !important;
        visibility: visible !important;
    }
    
    /* KEEP: Trusted by logos VISIBLE */
    .trusted-by-section img,
    .trusted-by-img,
    .trusted-by-card img {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Adjust layout when images are hidden */
    .why-accountants-section .row,
    .fbr-compliance-section .row,
    .why-moneypex-section .row,
    .features-carousel-section .row,
    .benefits-wrapper-modern .row,
    .empowering-businesses-section .row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .why-accountants-section .col-lg-6,
    .fbr-compliance-section .col-lg-6,
    .why-moneypex-section .col-lg-6,
    .features-carousel-section .col-lg-6,
    .benefits-wrapper-modern .col-lg-6,
    .empowering-businesses-section .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Center content when images are hidden */
    .why-accountants-section .text-content,
    .fbr-compliance-section .text-content,
    .features-carousel-section .text-content,
    .benefits-wrapper-modern .text-content {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Special handling for FBR sections - hide all images */
    .fbr-compliance-section img,
    .fbr-compliance-section .section-image,
    .fbr-compliance-section .fbr-image {
        display: none !important;
    }
    
    /* Hide all feature section images */
    .features-section img,
    .feature-card img,
    .feature-page-card img,
    .retail-pos-feature-card img,
    .restaurant-pos-feature-card img {
        display: none !important;
    }
    
    /* Hide all benefit/why section images */
    .benefits-section img,
    .benefit-card img,
    .why-moneypex-section img,
    .why-accountants-section img {
        display: none !important;
    }
    
    /* Hide all industry/product section images */
    .industries-section img,
    .industry-card img,
    .mp-products-section img,
    .mp-products-card img {
        display: none !important;
    }
    
    /* Hide testimonial images */
    .testimonials-section img,
    .testimonial-card img {
        display: none !important;
    }
    
    /* Hide CTA section images */
    .cta-growth-section img,
    .cta-card img {
        display: none !important;
    }
    
    /* Hide pricing section images */
    .pricing-section img,
    .pricing-card img,
    .pos-pricing-card img {
        display: none !important;
    }
    
    /* Hide FAQ section images */
    .faq-section img,
    .faq-growth-section img {
        display: none !important;
    }
}

/* ========================================
   SECTION SPACING - MOBILE FIRST
   ======================================== */

/* Base section spacing - Override all conflicts */
section {
    padding: 2.5rem 0 !important;
}

/* Specific sections with reduced spacing */
.modern-hero-section,
.home-hero-section {
    padding: 3rem 0 2rem 0 !important;
}

.trusted-by-section {
    padding: 1.5rem 0 2rem !important;
}

.why-moneypex-section,
.mp-products-section,
.modern-products-section,
.fbr-compliance-section,
.features-carousel-section,
.benefits-wrapper-modern,
.empowering-businesses-section,
.empowering-businesses-section-new,
.cta-growth-section,
.industries-section,
.industries-carousel-section,
.pricing-section,
.testimonials-section,
.features-section,
.benefits-section,
.cta-section {
    padding: 2rem 0 !important;
}

.faq-growth-section,
.faq-section {
    padding: 2rem 0 2.5rem !important;
}

/* ========================================
   MOBILE BREAKPOINTS - AGGRESSIVE FIXES
   ======================================== */

/* Tablet (≤768px) */
@media (max-width: 768px) {
    section {
        padding: 1.5rem 0 !important;
    }
    
    .modern-hero-section,
    .home-hero-section {
        padding: 2rem 0 1.5rem 0 !important;
    }
    
    .trusted-by-section {
        padding: 1.25rem 0 1.5rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section {
        padding: 1.25rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 1.25rem 0 1.75rem !important;
    }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
    section {
        padding: 0.75rem 0 !important;
    }
    
    .modern-hero-section,
    .home-hero-section {
        padding: 1rem 0 0.75rem 0 !important;
    }
    
    .trusted-by-section {
        padding: 0.5rem 0 0.75rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section {
        padding: 0.625rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 0.625rem 0 1rem !important;
    }
    
    /* CTA Section specific fix */
    .cta-growth-section {
        padding: 0.875rem 0 !important;
    }
    
    .cta-growth-section .cta-card-growth {
        padding: 1rem 0.875rem !important;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    section {
        padding: 0.5rem 0 !important;
    }
    
    .modern-hero-section,
    .home-hero-section {
        padding: 0.75rem 0 0.5rem 0 !important;
    }
    
    .trusted-by-section {
        padding: 0.375rem 0 0.5rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section {
        padding: 0.5rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 0.5rem 0 0.75rem !important;
    }
}

/* ========================================
   CONTAINER & GRID FIXES
   ======================================== */

@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .container-fluid.container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 576px) {
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .container-fluid.container-md {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ========================================
   HEADING & TEXT FIXES
   ======================================== */

@media (max-width: 768px) {
    .text-center.mb-5 {
        margin-bottom: 0.5rem !important;
    }
    
    .text-center.mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    .text-center.mb-3 {
        margin-bottom: 0.375rem !important;
    }
    
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .section-subtitle,
    .section-text,
    .text-body-large {
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .text-center.mb-5 {
        margin-bottom: 0.375rem !important;
    }
    
    .text-center.mb-4 {
        margin-bottom: 0.375rem !important;
    }
    
    .text-center.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.375rem !important;
    }
    
    .section-subtitle,
    .section-text,
    .text-body-large {
        margin-bottom: 0.5rem !important;
    }
}

/* ========================================
   CARD & COMPONENT FIXES
   ======================================== */

@media (max-width: 768px) {
    .benefit-card-modern,
    .mp-products-card,
    .feature-card,
    .industry-card {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Adjust cards when images are hidden */
    .benefit-card-modern:has(.section-image-wrapper),
    .mp-products-card:has(.section-image-wrapper),
    .feature-card:has(.section-image-wrapper) {
        text-align: center !important;
        padding: 1.25rem !important;
    }
    
    /* Reduce grid gaps */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .benefit-card-modern,
    .mp-products-card,
    .feature-card,
    .industry-card {
        padding: 0.875rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    /* Adjust cards when images are hidden */
    .benefit-card-modern:has(.section-image-wrapper),
    .mp-products-card:has(.section-image-wrapper),
    .feature-card:has(.section-image-wrapper) {
        text-align: center !important;
        padding: 1rem !important;
    }
    
    /* Further reduce grid gaps */
    .row {
        margin-left: -0.375rem !important;
        margin-right: -0.375rem !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        margin-bottom: 0.625rem !important;
    }
}

/* ========================================
   PRICING DISPLAY FIX
   ======================================== */

@media (max-width: 768px) {
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }
    
    .pos-price-value {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .pos-price-period {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 576px) {
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }
    
    .pos-price-value {
        font-size: 1.875rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .pos-price-period {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure currency and amount stay together */
    .pos-price-currency + .pos-price-value {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
    }
}

/* ========================================
   EMERGENCY OVERRIDES
   ======================================== */

/* Force proper mobile behavior */
@media (max-width: 768px) {
    .row {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.875rem !important;
    }
}

/* ========================================
   DEBUG VISUALIZATION (Remove in production)
   ======================================== */

/* Uncomment for debugging - adds colored borders to see sections */
/*
@media (max-width: 768px) {
    section {
        border: 2px solid red !important;
        background: rgba(255, 0, 0, 0.05) !important;
    }
    
    .container {
        border: 2px solid blue !important;
        background: rgba(0, 0, 255, 0.05) !important;
    }
    
    .section-image-wrapper {
        border: 3px solid orange !important;
        background: rgba(255, 165, 0, 0.1) !important;
    }
}
*/