/**
 * Mobile Responsive Fix
 * Force mobile menu to show on small screens
 */

/* Force viewport behavior */
* {
    box-sizing: border-box !important;
}

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

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

/* Fix container overflow */
.custom-header,
.header-main-section,
.container,
.medacsicare-full-width {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ===========================
   MOBILE MENU TOGGLE FIX
   =========================== */
@media screen and (max-width: 1024px) {
    /* Force mobile menu toggle visible */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-menu-toggle svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        stroke: #ffffff !important;
    }
    
    /* Force desktop nav hidden */
    .header-nav.desktop-nav {
        display: none !important;
        visibility: hidden !important;
    }
}

@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 100 !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .header-nav.desktop-nav,
    .header-nav.desktop-nav * {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Header container fix */
    .header-main-section .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* Header actions spacing */
    .header-actions {
        gap: 8px !important;
    }
    
    .header-action-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small devices */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .header-logo img {
        max-height: 35px !important;
    }
    
    .header-actions {
        gap: 5px !important;
    }
    
    .header-action-btn {
        width: 38px !important;
        height: 38px !important;
    }
    
    .header-action-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ===========================
   HOMEPAGE BANNER RESPONSIVE
   =========================== */
.medacsicare-full-width,
.full-height-section,
.hero-section,
.seasonal-banner,
.auto-seasonal-banner,
.flash-sale-banner {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Banner wrappers */
.banner-wrapper,
.auto-banner-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Banner containers */
.banner-container,
.auto-banner-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}


.hero,
.hero-container,
.medacsicare-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

@media screen and (max-width: 768px) {
    
    /* Hero section responsive */
    .full-height-section {
        min-height: auto !important;
        padding: 80px 0 40px !important;
        width: 100% !important;
    }
    
    .medacsicare-inner {
        padding: 0 15px !important;
        width: 100% !important;
    }
    
    .hero {
        width: 100% !important;
    }
    
    .hero-heading {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        width: 100% !important;
    }
    
    .hero-subheading {
        font-size: 1rem !important;
        width: 100% !important;
    }
    
    .hero-image-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
    }
    
    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Seasonal banner responsive */
    .seasonal-banner,
    .auto-seasonal-banner {
        padding: 0 !important;
        margin: 15px 0 !important;
        width: 100% !important;
    }
    
    .banner-wrapper,
    .auto-banner-wrapper {
        min-height: 350px !important;
        width: 100% !important;
    }
    
    .banner-container,
    .auto-banner-container {
        padding: 40px 15px !important;
        width: 100% !important;
    }
    
    .seasonal-banner h2,
    .banner-title,
    .auto-banner-title {
        font-size: 2rem !important;
    }
    
    /* Flash sale banner responsive */
    .flash-sale-banner {
        padding: 30px 20px !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small devices - banners */
    .full-height-section {
        padding: 70px 0 30px !important;
        width: 100% !important;
    }
    
    .medacsicare-inner {
        padding: 0 12px !important;
        width: 100% !important;
    }
    
    .hero {
        width: 100% !important;
    }
    
    .hero-heading {
        font-size: 1.25rem !important;
        width: 100% !important;
    }
    
    .hero-subheading {
        font-size: 0.9rem !important;
        width: 100% !important;
    }
    
    .hero-features {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    
    .feature-item {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .hero-image-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .seasonal-banner,
    .auto-seasonal-banner {
        padding: 0 !important;
        margin: 8px 0 !important;
        width: 100% !important;
    }
    
    .banner-wrapper,
    .auto-banner-wrapper {
        min-height: 280px !important;
        width: 100% !important;
    }
    
    .banner-container,
    .auto-banner-container {
        padding: 25px 10px !important;
        width: 100% !important;
    }
    
    .seasonal-banner h2,
    .banner-title,
    .auto-banner-title {
        font-size: 1.25rem !important;
    }
    
    .banner-description,
    .auto-banner-description {
        font-size: 0.85rem !important;
    }
    
    .banner-btn,
    .auto-banner-btn {
        width: 100% !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .flash-sale-banner {
        padding: 20px 12px !important;
        width: 100% !important;
    }
    
    .flash-sale-banner h2 {
        font-size: 1.2rem !important;
    }
}

/* ===========================
   RECAPTCHA BADGE FIX - MOBILE
   =========================== */
/* Hide reCAPTCHA badge on mobile to prevent footer navigation blocking */
/* reCAPTCHA v3 still works even when badge is hidden - it's allowed by Google */
@media screen and (max-width: 768px) {
    .grecaptcha-badge {
        visibility: hidden !important;
        display: none !important;
    }
}

/* Alternative: Reposition instead of hiding (uncomment if you prefer to show it) */
/*
@media screen and (max-width: 768px) {
    .grecaptcha-badge {
        bottom: 150px !important;
        right: 5px !important;
        transform: scale(0.7) !important;
        opacity: 0.6 !important;
        z-index: 999 !important;
    }
}
*/

/* Desktop: Keep reCAPTCHA badge in bottom-right corner */
@media screen and (min-width: 769px) {
    .grecaptcha-badge {
        bottom: 14px !important;
        right: 14px !important;
        z-index: 9999 !important;
    }
}