/* Member Navigation Styles */

/* Desktop Member Dropdown */
.group:hover .group-hover\\:opacity-100 {
    opacity: 1;
    visibility: visible;
    transform: translateY(8px);
}

.group:hover .group-hover\\:visible {
    visibility: visible;
}

/* Member Level Badge Styles */
.member-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.member-badge.premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.member-badge.vip {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

/* User Avatar Styles */
.user-avatar {
    background: linear-gradient(135deg, #10b981, #059669);
    transition: all 0.3s ease;
}

.user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Dropdown Menu Animations */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Member Info Card */
.member-info-card {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #bae6fd;
}

/* Mobile Member Section */
.mobile-member-section {
    background: rgba(22, 163, 74, 0.1);
    border-radius: 8px;
    margin: 8px 0;
}

.mobile-member-info {
    background: rgba(22, 163, 74, 0.2);
    backdrop-filter: blur(10px);
}

/* Navigation Icons */
.nav-icon {
    transition: all 0.3s ease;
}

.nav-icon:hover {
    transform: translateX(2px);
}

/* Member Status Indicators */
.status-online {
    position: relative;
}

.status-online::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border: 2px solid white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .desktop-only {
        display: none;
    }
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none;
    }
}

/* Member Level Colors */
.level-bronze {
    color: #cd7f32;
    background: linear-gradient(135deg, #cd7f32, #b8860b);
}

.level-silver {
    color: #c0c0c0;
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.level-gold {
    color: #ffd700;
    background: linear-gradient(135deg, #ffd700, #ffb347);
}

.level-platinum {
    color: #e5e4e2;
    background: linear-gradient(135deg, #e5e4e2, #d3d3d3);
}

.level-diamond {
    color: #b9f2ff;
    background: linear-gradient(135deg, #b9f2ff, #87ceeb);
}

/* Hover Effects */
.member-menu-item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.member-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
    transition: left 0.5s ease;
}

.member-menu-item:hover::before {
    left: 100%;
}

.member-menu-item:hover {
    transform: translateX(4px);
}

/* Member Points Display */
.points-display {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.3);
}

/* Special Member Glow Effect */
.member-glow {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    animation: memberGlow 3s ease-in-out infinite alternate;
}

@keyframes memberGlow {
    from {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }
    to {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    }
}