/* Mobile Navigation Custom Styles - Logo Size Reduction & Button Management */

/* Reduce mobile logo size for better mobile experience */
@media (max-width: 991px) {
    /* Mobile logo text size reduction */
    .navbar-area .mobile-nav .logo {
        font-size: 16px !important; /* Reduced from 20px */
    }
    
    /* If logo is an image, reduce its size */
    .navbar-area .mobile-nav .logo img,
    .mobile-nav .logo img,
    .navbar-brand img {
        max-height: 18px !important; /* Reduced size for mobile */
        width: auto;
    }
    
    /* Hide login/signup buttons from mobile nav bar - only show in dropdown */
    .mobile-auth-buttons,
    .navbar-area .mobile-nav .other-option,
    .mobile-nav .other-option {
        display: none !important;
    }
    
    /* Ensure buttons only appear in the dropdown menu */
    .mean-nav .mobile-menu-auth {
        display: block !important;
        padding: 15px;
        border-top: 1px solid #eee;
        margin-top: 10px;
        background-color: #f8f9fa;
    }
    
    /* Style buttons in dropdown menu */
    .mean-nav .mobile-menu-auth .mobile-btn,
    .mean-nav .mobile-menu-auth .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding: 12px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    /* Sign up button in dropdown */
    .mean-nav .mobile-menu-auth .signup-btn,
    .mean-nav .mobile-menu-auth .mobile-signup-btn {
        background-color: #ff2d55;
        color: #fff;
        border: 1px solid #ff2d55;
    }
    
    .mean-nav .mobile-menu-auth .signup-btn:hover,
    .mean-nav .mobile-menu-auth .mobile-signup-btn:hover {
        background-color: #e02347;
        color: #fff;
    }
    
    /* Sign in button in dropdown */
    .mean-nav .mobile-menu-auth .signin-btn,
    .mean-nav .mobile-menu-auth .mobile-signin-btn {
        background-color: transparent;
        color: #ff2d55;
        border: 1px solid #ff2d55;
    }
    
    .mean-nav .mobile-menu-auth .signin-btn:hover,
    .mean-nav .mobile-menu-auth .mobile-signin-btn:hover {
        background-color: #ff2d55;
        color: #fff;
    }
    
    /* Dashboard button in dropdown */
    .mean-nav .mobile-menu-auth .dashboard-btn,
    .mean-nav .mobile-menu-auth .mobile-dashboard-btn {
        background-color: #28a745;
        color: #fff;
        border: 1px solid #28a745;
    }
    
    .mean-nav .mobile-menu-auth .dashboard-btn:hover,
    .mean-nav .mobile-menu-auth .mobile-dashboard-btn:hover {
        background-color: #218838;
        color: #fff;
    }
    
    /* Logout button in dropdown */
    .mean-nav .mobile-menu-auth .logout-btn,
    .mean-nav .mobile-menu-auth .mobile-logout-btn {
        background-color: transparent;
        color: #dc3545;
        border: 1px solid #dc3545;
    }
    
    .mean-nav .mobile-menu-auth .logout-btn:hover,
    .mean-nav .mobile-menu-auth .mobile-logout-btn:hover {
        background-color: #dc3545;
        color: #fff;
    }
}

/* Extra small screens - further reduction */
@media (max-width: 480px) {
    .navbar-area .mobile-nav .logo {
        font-size: 14px !important; /* Even smaller for very small screens */
    }
    
    .navbar-area .mobile-nav .logo img,
    .mobile-nav .logo img,
    .navbar-brand img {
        max-height: 40px !important;
        width: auto;
    }
    
    /* Adjust dropdown button padding for smaller screens */
    .mean-nav .mobile-menu-auth .mobile-btn,
    .mean-nav .mobile-menu-auth .btn {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Very small screens - minimal size */
@media (max-width: 360px) {
    .navbar-area .mobile-nav .logo {
        font-size: 12px !important; /* Minimal size for tiny screens */
    }
    
    .navbar-area .mobile-nav .logo img,
    .mobile-nav .logo img,
    .navbar-brand img {
        max-height: 14px !important;
        width: auto;
    }
    
    /* Further adjust dropdown buttons for very small screens */
    .mean-nav .mobile-menu-auth .mobile-btn,
    .mean-nav .mobile-menu-auth .btn {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Hide buttons on desktop - ensure they only show in mobile dropdown */
@media (min-width: 992px) {
    .mobile-menu-auth {
        display: none !impor