/* Mobile Side Panel Fixes */

/* Reduce logo container height drastically - precise spacing */
.m-main-menu .menu-bar .logo {
    padding: 8px 15px !important; /* Drastically reduced vertical padding */
    border-bottom: 1px solid #ddd;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

.m-main-menu .menu-bar .logo a {
    display: inline-block;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
}

.m-main-menu .menu-bar .logo img {
    width: 250px !important; /* 2.5x larger (100px × 2.5) */
    max-height: 125px !important; /* 2.5x larger (50px × 2.5) - proportional to container */
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 0 !important;
}

/* Ensure side panel overlays Request Custom Furniture button */
.m-main-menu {
    z-index: 10000 !important; /* Higher than floating button (1000) */
}

.m-main-menu .overlay {
    z-index: 9999 !important;
}

/* Fix close button positioning in mobile side panel */
.m-main-menu .mobile-menu-close-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 10001 !important;
}

/* Ensure menu items are visible and properly spaced */
.m-main-menu .menu-bar {
    padding-top: 50px !important; /* Reduced space for close button */
}

.m-main-menu .menu-bar .nav-item {
    padding: 10px 20px !important; /* Reduced padding for better spacing */
}

.m-main-menu .menu-bar .nav-item:first-of-type {
    margin-top: 0 !important; /* Remove extra margin from first nav item */
}

/* Remove any extra spacing around logo container */
.m-main-menu .menu-bar .logo + .nav-item {
    margin-top: 0 !important;
}

/* Make side panel overlay Request Custom Furniture button */
@media (max-width: 991px) {
    .m-main-menu.active {
        z-index: 10000 !important;
    }
    
    .m-main-menu.active .menu-bar {
        z-index: 10001 !important; /* Ensure menu bar is above everything */
    }
    
    /* Hide floating button and Tidio chat when mobile side menu is active */
    /* Using :has() selector for modern browsers */
    body:has(.m-main-menu.active) .floating-button,
    body:has(.m-main-menu.active) #tidio-chat {
        display: none !important; /* Hide completely when menu is open */
        z-index: 500 !important; /* Much lower than side panel */
    }
    
    /* Fallback for browsers that don't support :has() */
    .m-main-menu.active ~ .floating-button,
    .m-main-menu.active ~ #tidio-chat {
        display: none !important;
        z-index: 500 !important;
    }
}

/* General rule: Lower floating button z-index on mobile */
@media (max-width: 991px) {
    .floating-button {
        z-index: 999 !important; /* Lower than side panel (10000) */
    }
}