/*
 * Me2 profile badges
 * Add new badge designs here with the .me2-profile-badge--{key} convention.
 */
.me2-profile-heading {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
}

.me2-profile-heading h2,
.me2-profile-heading h3 {
    min-width: 0;
    margin: 0;
}

.me2-profile-badges {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
}

.me2-profile-badges:empty {
    display: none;
}

.me2-profile-badge-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.me2-profile-badge-wrap--influencer {
    outline: 0;
}

.me2-profile-badge-tooltip {
    position: absolute;
    bottom: calc(100% + .4rem);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: min(18rem, calc(100vw - 3rem));
    padding: .65rem .75rem;
    visibility: hidden;
    color: #fff;
    background: #111116;
    border: .1rem solid rgba(255, 255, 255, .28);
    border-radius: .4rem;
    box-shadow: none;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(.3rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    white-space: normal;
}

.me2-profile-badge-wrap--influencer .me2-profile-badge-tooltip {
    right: auto;
    left: 0;
    max-width: min(16rem, calc(100vw - 3rem));
}

.me2-profile-badge-wrap:hover .me2-profile-badge-tooltip,
.me2-profile-badge-wrap:focus-within .me2-profile-badge-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.me2-profile-badge-wrap.is-tooltip-suppressed .me2-profile-badge-tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(.3rem) !important;
}

.stage2__identity .me2-profile-badges,
.senior-list__identity .me2-profile-badges {
    margin-top: .75rem;
}

.me2-profile-badge {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    padding: 0 .8rem;
    border-radius: 999rem;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.me2-profile-badge--first {
    gap: .45rem;
    color: #111116;
    background: #ffffff;
    border: .1rem solid #111116;
}

.me2-profile-badge--first::before {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    background: var(--brand-cyan);
    border-radius: 50%;
    box-shadow: 0 0 0 .2rem rgba(0, 205, 255, .15);
    content: "";
}

.me2-profile-badge--first > span {
    color: inherit;
}

.me2-profile-badge--influencer {
    color: #fff;
    background: linear-gradient(115deg, #d62976 0%, #fa7e1e 14%, #d62976 36%, #962fbf 65%, #4f5bd5 84%, #d62976 100%);
    background-size: 180% 100%;
    border: 0;
    border-radius: .6rem;
    box-shadow: none;
    font-weight: 500;
    animation: me2-influencer-list-glow 6s ease-in-out infinite alternate;
}

.me2-profile-badge--muysl-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: rgba(0, 0, 0, .76);
    background: #f4f4f4;
    border: 0;
    border-radius: .4rem;
    cursor: pointer;
    font-weight: 400;
}

.me2-profile-badge--muysl-card::before {
    position: absolute;
    inset: -42%;
    z-index: -2;
    background:
        linear-gradient(
            120deg,
            #f8f8f8 0%,
            #c7c7c7 24%,
            #ffffff 42%,
            #9f9f9f 62%,
            #e3e3e3 82%,
            #b0b0b0 100%
        );
    transform: rotate(10deg);
    content: "";
}

.me2-profile-badge--muysl-card-gold::before {
    background:
        linear-gradient(
            120deg,
            #d1b24a 0%,
            #e0c15c 18%,
            #b89433 36%,
            #f0d97a 54%,
            #b48b2c 74%,
            #d2af47 100%
        );
}

.me2-profile-badge--muysl-card-platinum::before {
    background:
        linear-gradient(
            120deg,
            #050505 0%,
            #1d1d1d 25%,
            #555555 43%,
            #0a0a0a 61%,
            #303030 80%,
            #000000 100%
        );
}

.me2-profile-badge--muysl-card-gold {
    color: rgba(35, 24, 4, .82);
}

.me2-profile-badge--muysl-card-platinum {
    color: rgba(255, 255, 255, .92);
    font-weight: 360;
}

.me2-profile-badge--muysl-card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .24);
    border-radius: inherit;
    content: "";
}

.me2-profile-badge--muysl-card-platinum::after {
    background: rgba(0, 0, 0, .12);
}

@media screen and (max-width: 640px) {
    .me2-profile-heading {
        gap: .6rem;
    }

    .me2-profile-badges {
        gap: .35rem;
    }

    .me2-profile-badge {
        min-height: 2rem;
        padding-inline: .6rem;
        font-size: .82rem;
    }
}