/* ──────────────────────────────────────────────────────────────
   sponsor-badge.css — Lifetime sponsor tier badge + hover popover
   Used by Components/Shared/SponsorBadge.razor.
   Glass surface tokens & sizing mirror notifications.css so both
   floating panels share the same look and positioning approach.
   ────────────────────────────────────────────────────────────── */

/* ===== Sponsor badges =====
   Lifetime sponsor tier indicator. Reused in navbar (next to bell) and
   on the magnates leaderboard before the avatar. Three tiers, all use the
   gem icon with a distinctive metallic gradient. */
.sponsor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: help;
}

.sponsor-badge:hover {
    transform: scale(1.15);
}

.sponsor-badge i {
    color: #fff;
    font-size: 0.7em;
    /* Hard, tight outline + subtle drop so the white gem stays legible
       against the lighter parts of the gradients (especially gold). */
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.95),
        0 1px 1px rgba(0, 0, 0, 0.7),
        0 0 3px rgba(0, 0, 0, 0.45);
}

.sponsor-badge-silver {
    background: linear-gradient(135deg, #a8a8a8, #5e5e5e);
    box-shadow: 0 0 6px rgba(160, 160, 160, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.sponsor-badge-golden {
    background: linear-gradient(135deg, #d9a93b, #8a6310);
    box-shadow: 0 0 8px rgba(214, 165, 50, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(220, 180, 80, 0.5);
}

.sponsor-badge-platinum {
    background: linear-gradient(135deg, #9ec9d9, #3d8aa8 50%, #6c4eb3);
    box-shadow: 0 0 10px rgba(13, 150, 200, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(140, 180, 220, 0.55);
}

/* Diamond — top tier (1000€+). Distinct from Platinum's blue-violet: a
   brilliant light-blue faceted look with a slowly rotating conic
   gradient (diamond "fire" dispersion) and a sweeping inner shine. */
.sponsor-badge-diamond {
    position: relative;
    background:
        conic-gradient(from 0deg,
            #ffffff 0%,
            #d6efff 12%,
            #a8dcff 22%,
            #ffffff 33%,
            #c4e7ff 45%,
            #ffffff 58%,
            #7ec8ff 70%,
            #ffffff 82%,
            #b8e2ff 92%,
            #ffffff 100%);
    box-shadow:
        0 0 12px rgba(168, 220, 255, 0.9),
        0 0 22px rgba(126, 200, 255, 0.65),
        0 0 32px rgba(100, 180, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 6px rgba(214, 239, 255, 0.6);
    border: 1px solid rgba(220, 240, 255, 0.95);
    animation: sponsor-badge-diamond-spin 7s linear infinite;
    overflow: hidden;
}

/* Sweeping highlight that travels across the badge for an extra "sparkle". */
.sponsor-badge-diamond::before {
    content: "";
    position: absolute;
    inset: -25%;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 65%);
    animation: sponsor-badge-diamond-shine 2.8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

@keyframes sponsor-badge-diamond-spin {
    to { transform: rotate(360deg); }
}

@keyframes sponsor-badge-diamond-shine {
    0%, 100% { transform: translateX(-60%) rotate(-360deg); opacity: 0; }
    45%      { opacity: 1; }
    50%      { transform: translateX(60%) rotate(-360deg); opacity: 1; }
    55%      { opacity: 0; }
}

/* Counter-rotate the inner gem so the icon stays upright while the badge spins. */
.sponsor-badge-diamond i {
    position: relative;
    z-index: 1;
    color: #1a3a5c;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.95),
        0 0 4px rgba(190, 230, 255, 0.8),
        0 1px 1px rgba(0, 0, 0, 0.25);
    animation: sponsor-badge-diamond-spin 7s linear infinite reverse;
}

/* "None" tier — only shown inside the wrapper when ShowProgress is true so
   the user has something to hover. Uses the site's info-cyan accent so the
   default state still feels like part of the design system rather than an
   empty placeholder. */
.sponsor-badge-none {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.22), rgba(13, 202, 240, 0.08));
    border: 1px solid rgba(13, 202, 240, 0.45);
    box-shadow: 0 0 6px rgba(13, 202, 240, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sponsor-badge-none i {
    color: #0dcaf0;
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.85),
        0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Smaller variant used inside the popover rows. */
.sponsor-badge-sm {
    width: 1.2em;
    height: 1.2em;
}

.sponsor-badge-sm i {
    font-size: 0.55em;
}

/* ===== Sponsor badge hover popover =====
   Wrapper anchors the popover. The popover sits below the badge and only
   renders for SponsorBadge instances with ShowProgress=true (e.g. navmenu).
   Visual tokens mirror the notifications dropdown (notif-dropdown). */
.sponsor-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sponsor-badge-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(320px, 92vw);
    max-height: 70vh;
    padding: 0;
    background: rgba(15, 22, 33, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(13, 202, 240, 0.18);
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1080;
    pointer-events: none;
}

.sponsor-badge-wrapper:hover .sponsor-badge-popover,
.sponsor-badge-wrapper:focus-within .sponsor-badge-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sponsor-badge-popover-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(13, 202, 240, 0.04);
    color: #fff;
}

.sponsor-badge-popover-body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    overflow-y: auto;
}

.sponsor-progress-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.sponsor-progress-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sponsor-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sponsor-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sponsor-progress-fill-silver {
    background: linear-gradient(90deg, #b8b8b8, #f0f0f0);
}

.sponsor-progress-fill-golden {
    background: linear-gradient(90deg, #c8951c, #ffd86b);
}

.sponsor-progress-fill-platinum {
    background: linear-gradient(90deg, #6fc2e6, #b389ff);
}

.sponsor-progress-fill-diamond {
    background: linear-gradient(90deg,
        #ffffff 0%,
        #c4e7ff 25%,
        #7ec8ff 50%,
        #c4e7ff 75%,
        #ffffff 100%);
    box-shadow: 0 0 6px rgba(126, 200, 255, 0.65);
}

.sponsor-progress-meta {
    text-align: right;
}

/* ===== Max-tier (Diamond) celebratory popover variant =====
   Shown when the user has already reached the highest tier — replaces the
   progress bars with a thank-you message and the lifetime donation total.
   All inner sections share the same animated gold→violet→cyan gradient so
   the panel reads as one cohesive surface. */
.sponsor-badge-popover-max {
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(15, 22, 33, 0.95), rgba(15, 22, 33, 0.95)) padding-box,
        linear-gradient(135deg, #ffd86b 0%, #b389ff 35%, #6fc2e6 70%, #ffd86b 100%) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: sponsor-max-shift 6s ease infinite;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(214, 165, 50, 0.2),
        0 0 40px rgba(108, 78, 179, 0.15);
}

/* Single shared keyframe used by every gradient surface in the max popover
   so they animate in lockstep. */
@keyframes sponsor-max-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Shared gradient surface tokens for header / celebrate / total cards. */
.sponsor-badge-popover-max .sponsor-badge-popover-header,
.sponsor-max-celebrate,
.sponsor-max-total {
    background: linear-gradient(135deg,
        rgba(255, 216, 107, 0.16) 0%,
        rgba(179, 137, 255, 0.16) 35%,
        rgba(111, 194, 230, 0.16) 70%,
        rgba(255, 216, 107, 0.16) 100%);
    background-size: 300% 300%;
    animation: sponsor-max-shift 6s ease infinite;
    border-color: rgba(214, 165, 50, 0.3);
}

.sponsor-badge-popover-max .sponsor-badge-popover-header {
    position: relative;
    border-bottom: 1px solid rgba(214, 165, 50, 0.3);
    overflow: hidden;
}

/* Shimmer sweep across the header. */
.sponsor-badge-popover-max .sponsor-badge-popover-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%);
    transform: translateX(-100%);
    animation: sponsor-max-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sponsor-max-shimmer {
    0%        { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

.sponsor-badge-popover-max .sponsor-badge-popover-header i {
    color: #ffd86b;
    text-shadow: 0 0 8px rgba(255, 216, 107, 0.7);
    animation: sponsor-max-crown 2.4s ease-in-out infinite;
}

@keyframes sponsor-max-crown {
    0%, 100% { transform: rotate(-6deg) scale(1); }
    50%      { transform: rotate(6deg) scale(1.12); }
}

.sponsor-max-celebrate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(214, 165, 50, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

/* Floating sparkles behind the celebrate card. */
.sponsor-max-celebrate::before,
.sponsor-max-celebrate::after {
    content: "✦";
    position: absolute;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    pointer-events: none;
    animation: sponsor-max-sparkle 3s ease-in-out infinite;
}

.sponsor-max-celebrate::before {
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

.sponsor-max-celebrate::after {
    bottom: 14%;
    right: 8%;
    animation-delay: 1.2s;
}

@keyframes sponsor-max-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(180deg); }
}

.sponsor-max-text {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Larger badge to anchor the celebratory card, with a slow halo pulse. */
.sponsor-badge-lg {
    width: 2.6em;
    height: 2.6em;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    animation: sponsor-max-halo 2.6s ease-in-out infinite;
}

.sponsor-badge-lg i {
    font-size: 0.9em;
}

@keyframes sponsor-max-halo {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(13, 150, 200, 0.6),
            0 0 0 0 rgba(255, 216, 107, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 18px rgba(13, 150, 200, 0.85),
            0 0 0 6px rgba(255, 216, 107, 0),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

.sponsor-max-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(214, 165, 50, 0.3);
    border-radius: 10px;
    box-shadow: inset 0 0 12px rgba(214, 165, 50, 0.08);
}

.sponsor-max-amount {
    font-weight: 800;
    background: linear-gradient(90deg, #ffd86b, #ffb347, #ffd86b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 12px rgba(255, 195, 80, 0.35);
    animation: sponsor-max-amount-shine 3s linear infinite;
    letter-spacing: 0.02em;
}

@keyframes sponsor-max-amount-shine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ===== Compact tooltip (no-progress mode) =====
   Styled replacement for the native HTML title attribute. Shown for badges
   rendered with just a Tier (e.g. JewelsMagnates leaderboard) where the
   full progress popover would be overkill.

   The element is initially hidden inline next to the badge. On pointer
   enter, sponsor-badge-tooltip.js moves it to <body> and switches it to
   `position: fixed` (escaping any overflow:hidden / backdrop-filter /
   transform clipping ancestor) and sets left/top + a --sponsor-tooltip-caret-x
   CSS var so the caret stays aligned with the original badge center.
   `data-placement` flips the caret to the opposite side when the tooltip
   has to render below the badge instead of above. */
.sponsor-badge-tooltip {
    /* Hidden default state — invisible until JS lifts it to <body>. */
    position: absolute;
    left: -9999px;
    top: -9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(28, 38, 54, 0.96), rgba(15, 22, 33, 0.96));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(13, 202, 240, 0.28);
    border-radius: 8px;
    box-shadow:
        0 10px 24px -8px rgba(0, 0, 0, 0.7),
        0 4px 8px -4px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px) scale(0.96);
    transform-origin: bottom center;
    transition:
        opacity 0.16s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.16s ease;
    z-index: 1080;
}

/* Active (lifted to <body>) state — JS sets left/top in viewport coords. */
.sponsor-badge-tooltip-floating {
    position: fixed;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: translateY(0) scale(1);
}

.sponsor-badge-tooltip-floating[data-placement="bottom"] {
    transform-origin: top center;
}

/* Caret tying the tooltip to the badge — defaults to a downward caret on
   the bottom edge (tooltip above badge). Horizontal position comes from
   --sponsor-tooltip-caret-x set by the JS helper. */
.sponsor-badge-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--sponsor-tooltip-caret-x, 50%);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: rgba(15, 22, 33, 0.96);
    border-right: 1px solid rgba(13, 202, 240, 0.28);
    border-bottom: 1px solid rgba(13, 202, 240, 0.28);
    border-bottom-right-radius: 2px;
}

/* When the tooltip flips below the badge, move the caret to the top edge
   and use the opposing borders so it points upward. */
.sponsor-badge-tooltip[data-placement="bottom"]::after {
    top: 0;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(13, 202, 240, 0.28);
    border-left: 1px solid rgba(13, 202, 240, 0.28);
    border-bottom-right-radius: 0;
    border-top-left-radius: 2px;
}

.sponsor-badge-tooltip i {
    font-size: 0.7rem;
    color: #0dcaf0;
    filter: drop-shadow(0 0 4px rgba(13, 202, 240, 0.6));
}

/* Tier-specific accents — border + caret + gem icon match the badge color. */
.sponsor-badge-tooltip-silver {
    border-color: rgba(220, 220, 220, 0.55);
}
.sponsor-badge-tooltip-silver::after {
    border-right-color: rgba(220, 220, 220, 0.55);
    border-bottom-color: rgba(220, 220, 220, 0.55);
}
.sponsor-badge-tooltip-silver[data-placement="bottom"]::after {
    border-top-color: rgba(220, 220, 220, 0.55);
    border-left-color: rgba(220, 220, 220, 0.55);
}
.sponsor-badge-tooltip-silver i {
    color: #e8e8e8;
    filter: drop-shadow(0 0 4px rgba(220, 220, 220, 0.6));
}

.sponsor-badge-tooltip-golden {
    border-color: rgba(220, 180, 80, 0.6);
}
.sponsor-badge-tooltip-golden::after {
    border-right-color: rgba(220, 180, 80, 0.6);
    border-bottom-color: rgba(220, 180, 80, 0.6);
}
.sponsor-badge-tooltip-golden[data-placement="bottom"]::after {
    border-top-color: rgba(220, 180, 80, 0.6);
    border-left-color: rgba(220, 180, 80, 0.6);
}
.sponsor-badge-tooltip-golden i {
    color: #ffd86b;
    filter: drop-shadow(0 0 5px rgba(255, 195, 80, 0.65));
}

.sponsor-badge-tooltip-platinum {
    border-color: rgba(140, 180, 220, 0.6);
}
.sponsor-badge-tooltip-platinum::after {
    border-right-color: rgba(140, 180, 220, 0.6);
    border-bottom-color: rgba(140, 180, 220, 0.6);
}
.sponsor-badge-tooltip-platinum[data-placement="bottom"]::after {
    border-top-color: rgba(140, 180, 220, 0.6);
    border-left-color: rgba(140, 180, 220, 0.6);
}
.sponsor-badge-tooltip-platinum i {
    color: #b8d8f0;
    filter: drop-shadow(0 0 5px rgba(140, 180, 220, 0.7));
}

.sponsor-badge-tooltip-diamond {
    border-color: rgba(168, 220, 255, 0.85);
    box-shadow:
        0 10px 24px -8px rgba(0, 0, 0, 0.7),
        0 4px 8px -4px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(126, 200, 255, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.sponsor-badge-tooltip-diamond::after {
    border-right-color: rgba(168, 220, 255, 0.85);
    border-bottom-color: rgba(168, 220, 255, 0.85);
}
.sponsor-badge-tooltip-diamond[data-placement="bottom"]::after {
    border-top-color: rgba(168, 220, 255, 0.85);
    border-left-color: rgba(168, 220, 255, 0.85);
}
.sponsor-badge-tooltip-diamond i {
    color: #d6efff;
    filter: drop-shadow(0 0 6px rgba(126, 200, 255, 0.85));
}

.sponsor-badge-tooltip-none i {
    color: #0dcaf0;
}