/**
 * Header Version 2 Styles for Zhaket Demo
 * 
 * @package MLM
 * @version 2.0
 */

/* Header V2 Base Styles */
.zhaket-header-v2 {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
}

/* Top Bar */
.header-v2-top-bar {
    padding: 12px 0;
    background-color: #fff;
}

.header-v2-top-bar .mlm-container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Logo */
.header-v2-logo img {
    max-height: 50px;
    width: auto;
    height: auto;
}

/* Login/Register Button */
.header-v2-login-btn {
    border-color: #dee2e6;
    color: #333;
    transition: all 0.3s ease;
}

.header-v2-login-btn:hover {
    border-color: #007bff;
    color: #007bff;
}

.header-v2-login-btn svg {
    flex-shrink: 0;
}

/* Cart Button */
.header-v2-cart-btn {
    color: #333;
    transition: color 0.3s ease;
}

.header-v2-cart-btn:hover {
    color: #007bff;
}

/* Notification Button */
.header-v2-notification-btn {
    color: #333;
    transition: color 0.3s ease;
}

.header-v2-notification-btn:hover {
    color: #007bff;
}

.header-v2-notification-badge {
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
}

.header-v2-cart-badge {
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Seller Link */
.header-v2-seller-link {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.header-v2-seller-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

.header-v2-seller-link svg {
    flex-shrink: 0;
}

/* Menu Bar */
.header-v2-menu-bar {
    padding: 10px 0;
    background-color: #f8f9fa;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    overflow: visible !important;
    position: relative;
    z-index: 1020;
}

.header-v2-menu-bar.menu-bar-hidden {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    padding: 0;
    margin: 0;
}

.header-v2-menu-bar .mlm-container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: visible !important;
    position: relative;
}

.header-v2-menu-bar .row {
    overflow: visible !important;
}

.header-v2-menu-bar .col-12 {
    overflow: visible !important;
}

.header-v2-menu-bar nav.d-flex {
    overflow: visible !important;
}

/* Main Menu */
.header-v2-main-menu {
    width: 100%;
    position: relative;
    z-index: 1021;
    overflow: visible !important;
}

.header-v2-main-menu-items {
    flex: 1;
}

.header-v2-menu-item {
    cursor: pointer;
    position: relative;
    z-index: 1022;
}

.header-v2-menu-item > a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-v2-menu-item > a:hover {
    color: #007bff;
}

.header-v2-menu-item.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-right: 5px;
    vertical-align: middle;
}

/* Dynamic Menu (3 items) */
.header-v2-dynamic-menu {
    background-color: #e9ecef;
    border-radius: 4px;
    padding: 5px;
}

.header-v2-dynamic-menu-item {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-v2-dynamic-menu-item:hover {
    color: #007bff;
    text-decoration: none;
}

/* Dynamic Menu in Header (when menu bar is hidden) */
.header-v2-dynamic-menu-in-header {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e9ecef;
    border-radius: 4px;
    padding: 5px;
    z-index: 10;
}

/* Search Field in Header */
.header-v2-search-field {
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, display 0.3s ease;
}

.header-v2-search-field.search-visible {
    opacity: 1;
    visibility: visible;
}

.header-v2-search-field .form-control {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
}

.header-v2-search-field .input-group-append .btn {
    padding: 0 8px;
}

.header-v2-search-field .input-group {
    position: relative;
}

.header-v2-search-field .header-v2-search-clear {
    cursor: pointer;
    z-index: 5;
}

.header-v2-search-field .header-v2-search-spinner {
    z-index: 5;
}

.header-v2-search-field .mlm-search-results {
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 5px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Search Overlay */
.header-v2-search-overlay {
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 800px;
    margin: 10px auto 0;
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
}

.search-overlay-content {
    max-height: calc(80vh - 32px);
    overflow-y: auto;
}

.search-section {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.search-section:last-child {
    border-bottom: none;
}

.section-title {
    color: #333;
    margin-bottom: 12px;
}

.search-tags {
    gap: 8px;
}

.search-tag {
    border-radius: 20px;
    transition: all 0.2s ease;
}

.search-tag:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    text-decoration: none;
}

.category-suggestions {
    gap: 8px;
}

.category-suggestion {
    transition: all 0.2s ease;
}

.category-suggestion:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff !important;
    text-decoration: none;
}

.search-results-section {
    margin-bottom: 15px;
}

.search-results-section .mlm-search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results-section .mlm-search-results li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.search-results-section .mlm-search-results li:last-child {
    border-bottom: none;
}

.search-results-section .mlm-search-results li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.search-results-section .mlm-search-results li a:hover {
    background-color: #f8f9fa;
}

.search-results-section .mlm-search-results .item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-left: 10px;
}

.search-results-section .mlm-search-results .item-title {
    font-size: 13px;
    margin: 0;
}

.search-actions {
    padding-top: 15px;
    border-top: 1px solid #eee;
}

body.search-overlay-open {
    overflow: hidden;
}

/* Mega Menu */
.header-v2-mega-menu {
    top: 100% !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: auto !important;
    z-index: 99999 !important;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 20px !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    position: fixed !important;
    margin-right: 0;
    margin-left: 0;
}

.header-v2-best-sellers-mega {
    top: 100% !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: auto !important;
    position: fixed !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    z-index: 99999 !important;
    border-radius: 8px;
    margin-top: 10px;
    margin-right: 0;
    margin-left: 0;
}

.header-v2-mega-menu.mega-menu-active,
.header-v2-best-sellers-mega.mega-menu-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* CSS Hover Fallback */
.header-v2-menu-item:hover .header-v2-mega-menu:not(.header-v2-best-sellers-mega),
.header-v2-menu-item.menu-item-has-children:hover .header-v2-mega-menu:not(.header-v2-best-sellers-mega) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Best Sellers Mega Menu - CSS fallback */
.header-v2-best-sellers:hover .header-v2-best-sellers-mega,
.header-v2-best-sellers.menu-item-has-children:hover .header-v2-best-sellers-mega {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Mega Menu Content */
.mega-menu-content {
    width: 100%;
}

.mega-menu-image {
    margin-left: 20px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.mega-menu-image img {
    border-radius: 4px;
    max-width: 200px;
    width: 100%;
    height: auto;
}

.mega-menu-columns-wrapper {
    width: 100%;
    padding: 0 20px;
}

.mega-menu-columns {
    display: flex;
    gap: 30px;
    width: 100%;
}

.mega-menu-column {
    flex: 1;
    min-width: 0;
}

.mega-menu-item {
    transition: background-color 0.2s ease;
}

.mega-menu-item a {
    color: #333;
    transition: all 0.2s ease;
}

.mega-menu-item a:hover {
    color: #007bff;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.mega-menu-item-hidden {
    display: none;
}

.mega-menu-show-more {
    border-top: 1px solid #e9ecef !important;
    margin-top: 10px;
    padding-top: 10px;
}

.mega-menu-show-more button {
    color: #666 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.mega-menu-show-more button:hover {
    color: #007bff !important;
    text-decoration: none !important;
}

.mega-menu-show-more button i {
    transition: transform 0.2s ease;
}

.mega-menu-show-more button.show-less i {
    transform: rotate(45deg);
}

/* Best Sellers Mega Menu */
.header-v2-best-sellers-mega {
    min-width: 900px;
    max-width: 1200px;
}

/* Best Sellers Categories */
.best-sellers-categories {
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.best-seller-category-item {
    padding: 12px;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.best-seller-category-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.best-seller-category-item i {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 20px;
    line-height: 1.5;
    margin-top: 2px;
}

.best-seller-category-item h6 {
    color: #212529;
    margin-bottom: 4px;
    line-height: 1.4;
    font-weight: 600;
}

.best-seller-category-item p {
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
}

/* Best Sellers Products Wrapper - Gray Background */
.best-sellers-products-wrapper {
    background-color: #f5f5f5 !important;
    border-radius: 8px;
    padding: 20px !important;
    margin-top: 20px;
}

/* Best Sellers Products */
.best-sellers-products {
    margin-top: 0;
}

.best-seller-product-card {
    padding: 16px;
    background-color: #ffffff;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.best-seller-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.1);
}

.best-seller-product-card .product-image-link {
    flex-shrink: 0;
    display: block;
}

.best-seller-product-card .product-image-link img {
    border-radius: 6px;
    display: block;
    transition: transform 0.3s ease;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.best-seller-product-card:hover .product-image-link img {
    transform: scale(1.05);
}

.best-seller-product-card .product-content {
    flex: 1;
    min-width: 0;
}

.best-seller-product-card .product-title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    text-align: right;
}

.best-seller-product-card .product-title a {
    color: #212529;
    transition: color 0.2s ease;
    text-decoration: none;
}

.best-seller-product-card:hover .product-title a {
    color: #007bff !important;
}

.best-seller-product-card .product-description {
    font-size: 11px;
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
    text-align: right;
    flex-grow: 1;
}

/* Mini Cart Hover Menu */
.header-v2-cart-btn {
    position: relative;
    transition: all 0.3s ease;
}

.header-v2-cart-btn:hover {
    opacity: 0.8;
}

.header-v2-cart-badge {
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    z-index: 1;
}

.header-v2-mini-cart {
    top: 100%;
    left: 0;
    right: auto;
    min-width: 380px;
    max-width: 420px;
    z-index: 9999;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.mini-cart-content {
    background: #fff;
}

.mini-cart-items {
    max-height: 350px;
    overflow-y: auto;
}

.mini-cart-item {
    transition: background-color 0.2s ease;
}

.mini-cart-item:hover {
    background-color: #f8f9fa;
}

.mini-cart-item:last-child {
    border-bottom: none !important;
}

.mini-cart-item .product-thumbnail {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.mini-cart-item .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mini-cart-item:hover .product-thumbnail img {
    transform: scale(1.05);
}

.mini-cart-item .product-name {
    margin-bottom: 6px;
}

.mini-cart-item .product-name strong {
    font-weight: 600;
}

.mini-cart-item .product-vendor {
    margin-bottom: 6px;
    line-height: 1.4;
}

.mini-cart-item .product-vendor a {
    transition: color 0.2s ease;
}

.mini-cart-item .product-vendor a:hover {
    color: #007bff !important;
}

.mini-cart-item .product-price {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mini-cart-item.cart-item-hover-trigger:hover .product-price {
    animation: priceSlideUp 0.4s ease;
}

@keyframes priceSlideUp {
    0% {
        transform: translateY(5px);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.mini-cart-gift-credit {
    background-color: #f8f9fa;
}

.mini-cart-tiered-purchase {
    background-color: #fff;
}

.tiered-purchase-visual {
    position: relative;
    padding: 10px 0;
}

.tier-point {
    position: relative;
}

.tier-line {
    position: absolute;
    top: 10px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 0;
    overflow: hidden;
}

.tier-line-fill {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #28a745;
    transition: width 0.3s ease, background 0.3s ease;
}

.tier-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dee2e6;
    margin: 0 auto 4px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.tier-point.active .tier-circle {
    background: #007bff;
    transform: scale(1.2);
}

.tier-point.completed .tier-circle {
    background: #28a745;
}

.tier-label {
    font-size: 10px;
    color: #6c757d;
    transition: color 0.3s ease;
}

.tier-point.active .tier-label {
    color: #007bff;
    font-weight: 600;
}

.tier-point.completed .tier-label {
    color: #28a745;
}

.tiered-purchase-next-tier {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
}

.tiered-purchase-next-tier .text-primary {
    color: #007bff !important;
}

.tiered-purchase-next-tier .text-success {
    color: #28a745 !important;
}

.mini-cart-footer {
    background-color: #fff;
}

.mini-cart-footer .btn {
    border-radius: 8px;
    padding: 12px;
}

/* Notification System */
.header-v2-notification-wrapper {
    position: relative;
}

.header-v2-notification-btn {
    position: relative;
    transition: all 0.3s ease;
    padding: 8px;
    color: #333;
}

.header-v2-notification-btn:hover {
    opacity: 0.8;
    color: #007bff;
}

.header-v2-notification-badge {
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    z-index: 1;
    border: 2px solid #fff;
}

.header-v2-notification-panel {
    top: 100%;
    left: 0;
    right: auto;
    min-width: 380px;
    max-width: 420px;
    z-index: 9999;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    direction: rtl;
    display: none !important;
}

.header-v2-notification-panel.panel-visible {
    display: block !important;
}

.notification-panel-header {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
}

.notification-panel-content {
    background: #fff;
    max-height: 400px;
    overflow-y: auto;
}

.notification-panel-content::-webkit-scrollbar {
    width: 6px;
}

.notification-panel-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-panel-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.notification-panel-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.notification-card {
    transition: background-color 0.2s ease;
}

.notification-card:hover {
    background-color: #f8f9fa;
}

.notification-card:last-child {
    border-bottom: none !important;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-card-success .notification-icon {
    background-color: #d4edda;
    color: #28a745;
}

.notification-card-danger .notification-icon {
    background-color: #f8d7da;
    color: #dc3545;
}

.notification-card-info .notification-icon {
    background-color: #d1ecf1;
    color: #17a2b8;
}

.notification-card-default .notification-icon {
    background-color: #e2e3e5;
    color: #6c757d;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    color: #333;
    line-height: 1.4;
}

.notification-excerpt {
    line-height: 1.5;
    color: #6c757d;
}

.notification-date {
    color: #999;
}

.notification-panel-footer {
    background: #fff;
    border-top: 1px solid #dee2e6;
}

.notification-panel-footer .btn {
    border-radius: 8px;
    padding: 8px 16px;
}

/* Tabler Icons Styles */
[class^="ti-"],
[class*=" ti-"] {
    font-family: "tabler-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block;
}

.header-v2-menu-item [class^="ti-"],
.header-v2-menu-item [class*=" ti-"] {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

/* User Avatar */
.header-v2-user-avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.header-v2-avatar-btn {
    transition: opacity 0.3s ease;
}

.header-v2-avatar-btn:hover {
    opacity: 0.8;
}

/* Spacer for fixed header */
.header-v2-spacer {
    width: 100%;
}

/* Responsive: Full width container */
@media (min-width: 1200px) {
    .header-v2-top-bar .mlm-container,
    .header-v2-menu-bar .mlm-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .header-v2-top-bar .mlm-container,
    .header-v2-menu-bar .mlm-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    /* Hide desktop header on mobile */
    .header-v2-top-bar,
    .header-v2-menu-bar {
        display: none !important;
    }
    
    /* Mobile Header Styles */
    .header-v2-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
    }
    
    .header-v2-mobile-top {
        border-bottom: 1px solid #dee2e6;
    }
    
    .header-v2-mobile-logo img {
        max-height: 40px;
        width: auto;
    }
    
    .header-v2-spacer {
        height: 70px !important;
    }
    
    /* Mobile Menu Overlay */
    .header-v2-mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        display: none;
    }
    
    .header-v2-mobile-menu-overlay.active {
        display: block;
    }
    
    .mobile-menu-overlay-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .header-v2-mobile-menu-overlay.active .mobile-menu-overlay-bg {
        opacity: 1;
    }
    
    .mobile-menu-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        background: #fff;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .header-v2-mobile-menu-overlay.active .mobile-menu-panel {
        transform: translateX(0);
    }
    
    .mobile-menu-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
    }
    
    .mobile-menu-nav-list {
        background: #fff;
    }
    
    .mobile-menu-item.has-children > a {
        cursor: pointer;
    }
    
    .mobile-menu-submenu,
    .mobile-menu-best-sellers-expanded {
        background: #f8f9fa;
    }
    
    .mobile-menu-seller-card {
        background: #28a745 !important;
    }
    
    .mobile-menu-dynamic-list {
        background: #e9ecef !important;
    }
    
    /* Mobile Avatar Menu (Slide from left) */
    .header-v2-mobile-avatar-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        display: none;
    }
    
    .header-v2-mobile-avatar-menu.active {
        display: block;
    }
    
    .mobile-avatar-panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 75%;
        max-width: 350px;
        background: #fff;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .header-v2-mobile-avatar-menu.active .mobile-avatar-panel {
        transform: translateX(0);
    }
    
    .mobile-avatar-user-info img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
    
    .mobile-avatar-nav-links a {
        color: #333;
        transition: background 0.2s ease;
    }
    
    .mobile-avatar-nav-links a:hover {
        background: #f8f9fa;
    }
    
    /* Mobile Notification Menu (Slide from right) */
    .header-v2-mobile-notification-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        display: none;
    }
    
    .header-v2-mobile-notification-menu.active {
        display: block;
    }
    
    .mobile-notification-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        background: #fff;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .header-v2-mobile-notification-menu.active .mobile-notification-panel {
        transform: translateX(0);
    }
    
    .mobile-notification-menu-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
    }
    
    /* Notification badge on mobile */
    .header-v2-notification-badge {
        top: -5px;
        right: -5px;
        width: 18px;
        height: 18px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}