/* Sandev/Streak — badge + popup */

/* Default: inline-flex in normal flow.
 * Used in: .comment-item__author, .lcomm__author, .login__title,
 *          <h1 class="uprofile__name">, .usp-popup__heading. */
.user-streak {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 20px;
    height: 24px;
    margin: 0 0 0 6px;
    cursor: pointer;
    background: url('/templates/Default/dleimages/streak-flame.svg') no-repeat center / contain;
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6);
    padding: 0 0 4px 0;
    box-sizing: border-box;
    vertical-align: middle;
    user-select: none;
    position: relative;
    top: 1px;
    flex: 0 0 auto;
}
.user-streak:hover           { transform: scale(1.08); transition: transform .12s ease; }
.user-streak--milestone      { filter: drop-shadow(0 0 4px #ffb142); }
.user-streak--legend         { filter: hue-rotate(180deg); }

/* Override: when used inside the small 24×30 .header__btn-profile button,
 * the badge sits as a corner overlay (replaces the old red dot). */
.header__btn-profile { position: relative; }
.header__btn-profile .user-streak {
    position: absolute;
    top: -10px;
    right: -10px;
    margin: 0;
    width: 22px;
    height: 26px;
    z-index: 5;
    padding: 0 0 5px 0;
}

/* Popup */
#streak-popup {
    position: absolute;
    z-index: 9999;
    min-width: 220px;
    max-width: 280px;
    padding: 12px 14px;
    background: #1e1e22;
    color: #f5f5f5;
    border: 1px solid #3a3a40;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    font-size: 13px;
    line-height: 1.4;
}
#streak-popup[hidden] { display: none; }
.streak-popup__head  { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.streak-popup__head .fas { color: #ff8a2b; margin-right: 4px; }
.streak-popup__row   { color: #ccc; margin-bottom: 8px; }
.streak-popup__help  { color: #cfcfcf; }
.streak-popup__help ul { margin: 4px 0 8px 16px; padding: 0; }
.streak-popup__help li { margin: 2px 0; }
#streak-popup hr     { border: 0; border-top: 1px solid #3a3a40; margin: 8px 0; }

.usp-popup__heading {
    display: flex; align-items: center;
    font-size: 16px; font-weight: 700;
    margin-bottom: 8px;
}

/* Corner-overlay anywhere we sit inside an .avatar-wrap (comments, lcomm, echat, profile, popup). */
.avatar-wrap, .uprofile__avatar, .usp-popup__img, .echat__msg-ava-link, .comment-item__img, .lcomm__avatar { position: relative; }
.avatar-wrap .user-streak,
.uprofile__avatar .user-streak,
.usp-popup__img .user-streak,
.echat__msg-ava-link .user-streak,
.comment-item__img .user-streak,
.lcomm__avatar .user-streak {
    position: absolute;
    top: -8px;
    right: -8px;
    margin: 0;
    width: 22px;
    height: 26px;
    z-index: 5;
    padding: 0 0 5px 0;
}


/* com-x.life — profile button (no .header__btn-profile class) */
.header__btn-ctrl.js-show-login { position: relative; }
.header__btn-ctrl.js-show-login .user-streak {
    position: absolute;
    top: -10px;
    right: -10px;
    margin: 0;
    width: 22px;
    height: 26px;
    z-index: 5;
    padding: 0 0 5px 0;
}