/* Shared by tier administration and the resource theme. Color/effect come from the tier, never the site accent. */
.membership-badge {
    --membership-badge-color: #64748B;
    position: relative;
    display: inline-flex;
    max-width: 14em;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    vertical-align: middle;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--membership-badge-color) 48%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--membership-badge-color) 16%, white);
    color: color-mix(in srgb, var(--membership-badge-color) 45%, #111827);
    filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--membership-badge-color) 22%, transparent));
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-align: center;
    white-space: normal;
    text-overflow: ellipsis;
}
.membership-badge[data-effect="shine"] {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--membership-badge-color) 82%, white) 0%,
        color-mix(in srgb, var(--membership-badge-color) 18%, #111827) 42%,
        color-mix(in srgb, var(--membership-badge-color) 62%, #111827) 100%);
    color: color-mix(in srgb, var(--membership-badge-color) 12%, white);
}
.membership-badge[data-effect="shine"]::after {
    position: absolute;
    inset: -80% auto -80% -55%;
    width: 32%;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.12) 65%, transparent 100%);
    transform: translateX(-220%) skewX(-20deg);
    animation: membership-badge-shine 2.8s linear infinite;
    will-change: transform;
}
@keyframes membership-badge-shine {
    0% { transform: translateX(-220%) skewX(-20deg); }
    100% { transform: translateX(430%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
    .membership-badge[data-effect="shine"] { animation: none; }
    .membership-badge[data-effect="shine"]::after { display: none; animation: none; }
}