/* ========================================
   Mobile Menu Golden Logo Styling
   ======================================== */

/* Mobile Menu Logo Container */
.mobile-menu-logo {
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001 !important;
    display: inline-block;
    transition: all 0.3s ease;
}

.mobile-menu-logo:hover {
    transform: translateY(-50%) scale(1.05) !important;
}

/* Golden Logo Image Styling */
.mobile-menu-logo img {
    height: 50px !important;
    width: auto !important;
    display: block;
    /* Golden color filter removed - logo displays in original colors */
    transition: all 0.3s ease;
}

/* Alternative golden effect on hover */
.mobile-menu-logo:hover img {
    transform: scale(1.05);
}

/* Ensure mobile menu bar has proper styling */
.mean-container .mean-bar {
    background: #19142d !important;
    min-height: 70px !important;
    padding: 10px 0 !important;
}

/* Adjust menu toggle button position */
.mean-container a.meanmenu-reveal {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 15px !important;
    padding: 15px !important;
}

/* Menu toggle button styling */
.mean-container a.meanmenu-reveal span {
    background: #FFD700 !important;
    height: 3px;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.mean-container a.meanmenu-reveal:hover span {
    background: #FFA500 !important;
}

/* Mobile menu navigation styling */
.mean-container .mean-nav {
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mean-container .mean-nav ul li {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

.mean-container .mean-nav ul li a {
    background: #fff !important;
    color: #141422 !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.mean-container .mean-nav ul li a:hover {
    background: #f8f8f8 !important;
    color: #B8860B !important;
    padding-left: 25px !important;
}

/* Active menu item */
.mean-container .mean-nav ul li a.active {
    color: #B8860B !important;
    font-weight: 600 !important;
}

/* Sub-menu styling */
.mean-container .mean-nav ul li li a {
    background: #f9f9f9 !important;
    padding: 12px 20px 12px 40px !important;
    font-size: 15px !important;
}

.mean-container .mean-nav ul li li a:hover {
    background: #f0f0f0 !important;
    color: #B8860B !important;
}

/* Expand button for sub-menus */
.mean-container .mean-nav ul li a.mean-expand {
    background: transparent !important;
    color: #B8860B !important;
    font-size: 20px !important;
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important;
    text-align: center !important;
    top: 5px !important;
    border: none !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: rgba(184, 134, 11, 0.1) !important;
    color: #8B6914 !important;
}

/* Sticky mobile menu enhancement */
.mobile-menu-area.sticky-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Body padding when sticky menu is active */
body.mobile-menu-sticky {
    padding-top: 70px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-menu-logo img {
        height: 45px !important;
    }
    
    .mean-container .mean-bar {
        min-height: 65px !important;
    }
    
    .mean-container a.meanmenu-reveal {
        padding: 12px !important;
    }
}

/* Ensure logo is only visible on mobile */
@media (min-width: 992px) {
    .mobile-menu-logo {
        display: none !important;
    }
}

/* Loading animation for logo */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.mobile-menu-logo {
    animation: logoFadeIn 0.4s ease-out;
}

/* Menu overlay backdrop */
.mean-container .mean-nav {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

/* Custom scrollbar for mobile menu */
.mean-container .mean-nav::-webkit-scrollbar {
    width: 6px;
}

.mean-container .mean-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mean-container .mean-nav::-webkit-scrollbar-thumb {
    background: #B8860B;
    border-radius: 3px;
}

.mean-container .mean-nav::-webkit-scrollbar-thumb:hover {
    background: #8B6914;
}