body {
    .hw-user-widget {
        position: relative;
        display: inline-block;
    }
    .hw-avatar-wrapper {
        width: 45px;
        height: 45px;
        border-radius: 45px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .hw-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 45px;
    }
    .hw-user-popup {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        background-color: #D0D2D3;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 12px;
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }
    .hw-user-widget:hover .hw-user-popup {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(110%);
    }
    .hw-popup-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .hw-avatar-small {
        width: 40px;
        height: 40px;
        border-radius: 45px !important;
        object-fit: cover;
        margin-right: 10px;
    }
    .hw-user-name {
        font-weight: bold;
    }
    .hw-popup-divider {
        border-top: 1px solid #6d6e70;
        margin: 10px 0;
    }
    .hw-logout {
        display: inline-block;
        margin-top: 5px;
        color: #231f20;
        text-decoration: none;
        font-size: 14px;
        text-align: center;
    }
}