/* Mobile Menu Spacing Fixes */

/* Increase mobile header logo size */
@media (max-width: 576px) {
    header.style-6 .header-logo a img,
    header.style-6 .mobile-logo-wrap img,
    header.inner-header .header-logo a img,
    header.inner-header .mobile-logo-wrap img {
        height: 80px !important;
        max-width: 200px !important;
    }
}

/* Reduce mobile menu white space - iPhone 12 Pro and similar devices */
@media (max-width: 991px) {
    /* Reduce main menu padding */
    header.style-6 .main-menu,
    header.inner-header .main-menu {
        padding: 20px 20px !important;
    }
    
    /* Reduce logo area spacing */
    header.style-6 .main-menu .mobile-logo-area,
    header.inner-header .main-menu .mobile-logo-area {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }
    
    /* Reduce menu list spacing */
    header.style-6 .main-menu .menu-list,
    header.inner-header .main-menu .menu-list {
        padding-top: 15px !important;
        padding-bottom: 12px !important;
    }
    
    /* Reduce menu item padding */
    header.style-6 .main-menu > ul > li a,
    header.inner-header .main-menu > ul > li a {
        padding: 10px 0 !important;
    }
    
    /* Reduce ul padding */
    header.style-6 .main-menu > ul,
    header.inner-header .main-menu > ul {
        padding: 0 0 10px 0 !important;
    }
    
    /* Remove mobile menu logo padding */
    header.style-6 .main-menu .mobile-menu-logo,
    header.inner-header .main-menu .mobile-menu-logo {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* iPhone 12 Pro specific fixes (390x844) and similar devices */
@media (max-width: 390px) and (max-height: 844px) {
    header.style-6 .main-menu,
    header.inner-header .main-menu {
        padding: 15px 15px !important;
    }
    
    header.style-6 .main-menu .mobile-logo-area,
    header.inner-header .main-menu .mobile-logo-area {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }
    
    header.style-6 .main-menu .menu-list,
    header.inner-header .main-menu .menu-list {
        padding-top: 12px !important;
        padding-bottom: 10px !important;
    }
    
    header.style-6 .main-menu > ul > li a,
    header.inner-header .main-menu > ul > li a {
        padding: 8px 0 !important;
    }
    
    header.style-6 .main-menu .btn-area,
    header.inner-header .main-menu .btn-area {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        gap: 6px !important;
    }
    
    header.style-6 .main-menu .btn-area .header-btn,
    header.style-6 .main-menu .btn-area .whatsapp-btn,
    header.inner-header .main-menu .btn-area .header-btn,
    header.inner-header .main-menu .btn-area .whatsapp-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* Fix mobile menu button area spacing for all headers */
@media (max-width: 991px) {
    /* Style-6 Header Mobile Menu */
    header.style-6 .main-menu .btn-area {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    header.style-6 .main-menu .btn-area .header-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 25px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
    
    header.style-6 .main-menu .btn-area .whatsapp-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 25px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
        border: none !important;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    }
    
    header.style-6 .main-menu .btn-area .whatsapp-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
        background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    }
    
    header.style-6 .main-menu .btn-area .whatsapp-btn svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
    
    /* Inner Header Mobile Menu */
    header.inner-header .main-menu .btn-area {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    header.inner-header .main-menu .btn-area .header-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 25px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }
    
    header.inner-header .main-menu .btn-area .whatsapp-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 25px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
        border: none !important;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    }
    
    header.inner-header .main-menu .btn-area .whatsapp-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
        background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    }
    
    header.inner-header .main-menu .btn-area .whatsapp-btn svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
}