/** * LMSCrafter User Menu & Redirects - Frontend Styles * * BuddyBoss-inspired styling for user menu items. * * @package LMSCRSUMRedirection * @since 3.3.0 */
/* ========================================================================== Avatar Menu Item ========================================================================== */
.rsum-avatar-item a {
    display: flex !important;
    align-items: center;
    gap: 0
}

/* Base avatar styles - specific styling comes from dynamic inline CSS */
.rsum-avatar-item .rsum-avatar {
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease, box-shadow 0.2s ease
}

/* Gradient wrapper container */
.rsum-avatar-item .rsum-avatar-wrapper {
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease
}

.rsum-avatar-item .rsum-avatar-wrapper .rsum-avatar {
    display: block
}

.rsum-avatar-item:hover .rsum-avatar,
.rsum-avatar-item:hover .rsum-avatar-wrapper {
    transform: scale(1.05)
}

/* Avatar sizes - ensure proper sizing */
.rsum-avatar-item .rsum-avatar[width="24"] {
    min-width: 24px;
    min-height: 24px
}

.rsum-avatar-item .rsum-avatar[width="32"] {
    min-width: 32px;
    min-height: 32px
}

.rsum-avatar-item .rsum-avatar[width="48"] {
    min-width: 48px;
    min-height: 48px
}

.rsum-avatar-item .rsum-avatar[width="64"] {
    min-width: 64px;
    min-height: 64px
}

/* ========================================================================== Username Menu Item ========================================================================== */
.rsum-username-item a {
    display: flex !important;
    align-items: center;
    font-weight: 500;
    color: inherit;
    transition: opacity 0.2s ease
}

.rsum-username-item:hover a {
    opacity: 0.8
}

/* ========================================================================== Combined Avatar + Username (when used together) ========================================================================== */
/* When avatar is followed by username in submenu */
.menu-item.rsum-avatar-item+.menu-item.rsum-username-item {
    margin-left: 0
}

/* User profile dropdown style (BuddyBoss-inspired) */
.rsum-user-menu-wrapper {
    display: flex;
    align-items: center;
    gap: 10px
}

/* ========================================================================== Header Navigation Compatibility ========================================================================== */
/* Astra theme */
.ast-header-sections-navigation .rsum-avatar-item .rsum-avatar,
.ast-primary-header-bar .rsum-avatar-item .rsum-avatar {
    border-radius: 50% !important;
    margin: 0 4px
}

/* Kadence theme */
.kadence-site-header .rsum-avatar-item .rsum-avatar {
    border-radius: 50% !important;
    margin: 0 4px
}

/* GeneratePress */
.main-navigation .rsum-avatar-item .rsum-avatar {
    border-radius: 50% !important
}

/* BuddyBoss - enhance existing avatar */
.bb-primary-nav .rsum-avatar-item .rsum-avatar {
    border-radius: 50% !important
}

/* Flavor theme */
.flavor-primary-menu .rsum-avatar-item .rsum-avatar {
    border-radius: 50% !important
}

/* ========================================================================== Responsive Adjustments ========================================================================== */
@media (max-width:768px) {
    .rsum-avatar-item .rsum-avatar {
        width: 32px !important;
        height: 32px !important
    }

    .rsum-username-item a {
        font-size: 14px
    }
}

/* Mobile menu - stack avatar nicely */
@media (max-width:480px) {

    .rsum-avatar-item a,
    .rsum-username-item a {
        justify-content: center
    }
}

/* ========================================================================== Dark Mode Support ========================================================================== */
@media (prefers-color-scheme:dark) {
    .rsum-avatar-item .rsum-avatar {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)
    }

    .rsum-avatar-item:hover .rsum-avatar {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4)
    }
}

/* Online indicator (optional enhancement) */
.rsum-avatar-item.rsum-online .rsum-avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #20bf6b;
    border: 2px solid #fff;
    border-radius: 50%
}

.rsum-avatar-item.rsum-online {
    position: relative
}

/* ========================================================================== Dropdown User Menu (when enabled) ========================================================================== */
/* Container for avatar with dropdown */
.rsum-has-dropdown {
    position: relative
}

.rsum-has-dropdown>a {
    display: flex !important;
    align-items: center
}

/* The dropdown menu container */
.rsum-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 99999;
    padding: 8px 0;
    margin-top: 8px
}

/* Show dropdown on hover */
.rsum-has-dropdown:hover .rsum-dropdown-menu,
.rsum-has-dropdown:focus-within .rsum-dropdown-menu,
.rsum-has-dropdown.rsum-dropdown-open .rsum-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

/* Arrow pointer */
.rsum-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05)
}

/* User info header in dropdown */
.rsum-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px
}

.rsum-dropdown-header .rsum-dropdown-name {
    font-weight: 600;
    font-size: 14px;
    color: #1d2327;
    margin: 0 0 4px 0
}

.rsum-dropdown-header .rsum-dropdown-email {
    font-size: 12px;
    color: #757575;
    margin: 0
}

/* Dropdown menu links */
.rsum-dropdown-menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #1d2327 !important;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s
}

.rsum-dropdown-menu a:hover {
    background: #f5f5f5;
    color: #2271b1 !important
}

.rsum-dropdown-menu a i {
    width: 18px;
    text-align: center;
    color: #757575;
    font-size: 14px
}

.rsum-dropdown-menu a:hover i {
    color: #2271b1
}

/* Separator line */
.rsum-dropdown-separator {
    height: 1px;
    background: #eee;
    margin: 8px 0
}

/* Logout link styling */
.rsum-dropdown-menu a.rsum-logout-link {
    color: #d63638 !important
}

.rsum-dropdown-menu a.rsum-logout-link i {
    color: #d63638
}

.rsum-dropdown-menu a.rsum-logout-link:hover {
    background: #fef1f1
}

/* Mobile responsive */
@media (max-width:768px) {
    .rsum-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        margin-top: 0;
        padding: 16px 0
    }

    .rsum-dropdown-menu::before {
        display: none
    }

    .rsum-dropdown-menu a {
        padding: 14px 20px;
        font-size: 16px
    }
}