/* ============================================================================
   SUPPORTER AVATAR BADGE
   ============================================================================
   Canonical styles for the curved-SUPPORTER-arc avatar wrapper injected by
   /js/comment-js/comment-supporter-badge.js.

   Previously inlined inside comment-system.ftlh, chat.ftlh, and
   board-post-card.ftlh — but the messages page also loads the JS without
   the styles, which let the SVG inflate to fill its message-bubble
   container. Extracted to a shared file so every template that renders
   supporter avatars stays sized.

   Required by any page that calls SupporterBadgeGenerator.generate(...)
   or loads the comment-supporter-badge.js MutationObserver:
   - messages-page.ftlh
   - comment-system.ftlh (and any embedder)
   - community/chat.ftlh
   - community/board-macros/board-post-card.ftlh
============================================================================ */

/* Supporter avatar container - wraps avatar + SVG badge.
   Larger than avatar column — overflows visually but doesn't affect layout. */
.supporter-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Size variants — natural size for SVG ring, centered in avatar column */
.supporter-avatar-wrapper.size-50 {
    width: 70px;
    height: 70px;
    margin: -8px -8px -8px -8px;
}

.supporter-avatar-wrapper.size-40 {
    width: 56px;
    height: 56px;
    margin: -6px -6px -6px -6px;
}

/* The actual avatar image inside — same size as regular avatars */
.supporter-avatar-wrapper .comment-avatar-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-circle);
    overflow: hidden;
    border: 1.5px solid var(--comment-primary, #3498db);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), height var(--transition-normal), transform var(--transition-normal), width var(--transition-normal);
}

.supporter-avatar-wrapper.size-50 .comment-avatar-img {
    width: 50px;
    height: 50px;
}

.supporter-avatar-wrapper.size-40 .comment-avatar-img {
    width: 40px;
    height: 40px;
}

.supporter-avatar-wrapper .comment-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover effect on avatar */
.supporter-avatar-wrapper:hover .comment-avatar-img {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: var(--supporter-color-1, #8B5CF6);
    box-shadow: var(--lift-purple);
}

/* SVG badge layer — explicit size so the SVG never inflates to its
   container when no width/height attributes are set on the element. */
.supporter-badge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Text styling */
.supporter-badge-text {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: var(--weight-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.supporter-avatar-wrapper.size-50 .supporter-badge-text {
    font-size: 0.4375rem;
    letter-spacing: 1.5px;
}

.supporter-avatar-wrapper.size-40 .supporter-badge-text {
    font-size: 0.375rem;
    letter-spacing: 1px;
}

/* Text group - hover transform (translate down) */
.supporter-text-group {
    transition: transform var(--dur-slow) var(--ease-spring);
}

.supporter-avatar-wrapper:hover .supporter-text-group {
    transform: translateY(2px);
}

/* Keep existing avatar badges working on supporter avatars */
.supporter-avatar-wrapper .avatar-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 5;
}

.supporter-avatar-wrapper.size-40 .avatar-badge {
    top: 4px !important;
    left: 4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 7px !important;
}

/* Mobile responsive — shrink badge proportionally */
@media (max-width: 768px) {
    .supporter-avatar-wrapper.size-50 {
        width: 56px;
        height: 56px;
        margin: -6px;
    }

    .supporter-avatar-wrapper.size-50 .comment-avatar-img {
        width: 40px;
        height: 40px;
    }

    .supporter-avatar-wrapper.size-40 {
        width: 46px;
        height: 46px;
        margin: -5px;
    }

    .supporter-avatar-wrapper.size-40 .comment-avatar-img {
        width: 32px;
        height: 32px;
    }
}