/* Base do botão */
.likes-floating-btn {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #b58900;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    margin-left: 18px;

    animation: glow 2.2s ease-in-out infinite;

    /* preparação para o slide de cor */
    background-size: 200% 100%;
    background-position: right center; 

    transition:
        background 0.48s ease,
        background-position 0.18s ease-out,
        border-color 0.48s ease,
        box-shadow 0.48s ease,
        transform 0.40s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.40s ease;
}

/* ---------- TIER 0: 0–9 likes ---------- */
.likes-floating-btn.likes-tier-0 {
    background: linear-gradient(
        to right,
        #fff7da 0%,   /* cor nova (dourado) fica à esquerda */
        #fff7da 50%,
        #ffffff 50%,  /* cor antiga (branco) à direita */
        #ffffff 100%
    );
    background-size: 200% 100%;
    background-position: right center; /* começa mostrando mais branco */

    border-color: #b58900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    color: #3a2a00;
}

/* Curtido no tier 0: varre da esquerda para a direita (dourado entra) */
.likes-floating-btn.likes-tier-0.liked {
    background-position: left center;
    border-color: #e6c766;
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.55);
}

/* ---------- TIER 1: 10–49 likes ---------- */
.likes-floating-btn.likes-tier-1 {
    background: linear-gradient(
        to right,
        #ffe9a3 0%,   /* cor mais intensa */
        #ffe9a3 50%,
        #fff7da 50%,  /* cor mais suave */
        #fff7da 100%
    );
    background-size: 200% 100%;
    background-position: right center; /* começa com a cor mais suave dominando */

    border-color: #e6c766;
    box-shadow:
        0 3px 10px rgba(212, 160, 23, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    color: #3a2a00;
}

/* Curtido no tier 1: desliza para a esquerda (entra a cor forte da esquerda) */
.likes-floating-btn.likes-tier-1.liked {
    background-position: left center;
    border-color: #e0b843;
    box-shadow:
        0 4px 14px rgba(212, 160, 23, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.7);
    transform: scale(1.03);
}

/* ---------- TIER 2: 50+ likes ---------- */
.likes-floating-btn.likes-tier-2 {
    background: linear-gradient(
        to right,
        #f5c852 0%,   /* cor mais intensa */
        #f5c852 50%,
        #ffe9a3 50%,  /* cor mais suave */
        #ffe9a3 100%
    );
    background-size: 200% 100%;
    background-position: right center; /* começa mais suave */

    border-color: #8c6b1b;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.30),
        0 0 14px rgba(212, 160, 23, 0.85);
    color: #2a1f00;
}

/* Curtido no tier 2: varre da esquerda para a direita com dourado forte */
.likes-floating-btn.likes-tier-2.liked {
    background-position: left center;
    border-color: #705117;
    box-shadow:
        0 5px 18px rgba(0,0,0,0.35),
        0 0 18px rgba(212, 160, 23, 0.95);
    transform: scale(1.05);
}


/* Clique rápido em qualquer tier curtido */
.likes-floating-btn.liked:active {
    transform: scale(0.97);
}

/* Brilho padrão (para tiers 0/1/2 enquanto não curtido) */
@keyframes glow {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(0,0,0,0.20),
            0 0 0 rgba(181, 137, 0, 0);
    }
    50% {
        box-shadow:
            0 2px 8px rgba(0,0,0,0.20),
            0 0 12px rgba(181, 137, 0, 0.5);
    }
}

/* Tema escuro (mantém lógica geral, sem o slide se quiser simplificar) */
.theme-dark .likes-floating-btn.likes-tier-0 {
    background: #2b2b2b;
    border-color: #b58900;
    color: #f5f5f5;
    animation: glow-dark 2.2s ease-in-out infinite;
}

.theme-dark .likes-floating-btn.likes-tier-0.liked {
    background: #444028;
    border-color: #e6c766;
    box-shadow:
        0 3px 10px rgba(0,0,0,0.7),
        0 0 10px rgba(212, 160, 23, 0.7);
}

.theme-dark .likes-floating-btn.likes-tier-1 {
    background: radial-gradient(circle at 20% 0%, #4a3b1c, #2b2b2b 60%);
    border-color: #e6c766;
    box-shadow:
        0 3px 12px rgba(0,0,0,0.75),
        0 0 10px rgba(212, 160, 23, 0.6);
}

.theme-dark .likes-floating-btn.likes-tier-1.liked {
    background: radial-gradient(circle at 20% 0%, #5a451e, #2b2b2b 65%);
    border-color: #e0b843;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.8),
        0 0 14px rgba(212, 160, 23, 0.8);
    transform: scale(1.03);
}

.theme-dark .likes-floating-btn.likes-tier-2 {
    background: radial-gradient(circle at 20% 0%, #5f4a20, #2b2b2b 70%);
    border-color: #8c6b1b;
    box-shadow:
        0 4px 18px rgba(0,0,0,0.85),
        0 0 14px rgba(212, 160, 23, 0.9);
}

.theme-dark .likes-floating-btn.likes-tier-2.liked {
    background: radial-gradient(circle at 20% 0%, #6f5624, #2b2b2b 75%);
    border-color: #705117;
    box-shadow:
        0 5px 20px rgba(0,0,0,0.9),
        0 0 18px rgba(212, 160, 23, 1);
    transform: scale(1.05);
}

@keyframes glow-dark {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(0,0,0,0.4),
            0 0 0 rgba(181, 137, 0, 0);
    }
    50% {
        box-shadow:
            0 4px 12px rgba(0,0,0,0.4),
            0 0 12px rgba(181, 137, 0, 0.7);
    }
}

/* Tier 0: leve destaque na fonte */
.likes-floating-btn.likes-tier-0 {
    font-weight: 500;
}

/* Tier 1: mais negrito */
.likes-floating-btn.likes-tier-1 {
    font-weight: 600;
}

/* Tier 2: destaque máximo em toda a fonte do botão */
.likes-floating-btn.likes-tier-2 {
    font-weight: 700;
}


/* Ícone de ajuda / tooltip */
.likes-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.25);
    font-size: 11px;
    line-height: 1;
    cursor: help;
    color: #555;
    background: #f5f5f5;
}

.theme-dark .likes-help-icon {
    border-color: rgba(255,255,255,0.35);
    color: #eee;
    background: #333;
}

[data-tooltip] {
    position: relative;
}

/* Caixa do tooltip */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%);
    min-width: 330px;
    max-width: 660px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    white-space: pre-line;
    text-align: center;
    z-index: 9999;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Setinha do tooltip */
[data-tooltip]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.90) transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* Mostrar tooltip */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
    opacity: 1;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    transform: translateX(-50%) translateY(-2px);
}

/* Estado inicial: só estrela + contagem compacta */
.likes-floating-btn {
    overflow: hidden;
    white-space: nowrap;
}

.likes-floating-btn .likes-text-expanded {
    opacity: 0;
    max-width: 0;
    transform: translateX(4px);
    transition:
        opacity 0.5s ease-out,
        max-width 0.5s ease-out,
        transform 0.5s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* contagem compacta (sempre visível) */
.likes-floating-btn .likes-count-compact {
    display: inline-flex;
    align-items: center;
}

/* quando expandido: mostra legenda completa */
.likes-floating-btn.likes-expanded .likes-text-expanded {
    opacity: 1;
    max-width: 400px; /* suficiente para a frase */
    transform: translateX(0);
}

/* se quiser, esconde a contagem compacta quando expandido
   (a contagem aparece na parte expandida) */
.likes-floating-btn.likes-expanded .likes-count-compact {
    display: none;
}

/* Tooltip base (desktop continua igual) */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%);
    min-width: 330px;
    max-width: 660px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    white-space: pre-line;
    text-align: center;
    z-index: 9999;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

[data-tooltip]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.90) transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* Mobile: manter tooltip dentro da tela */
@media (max-width: 600px) {
    [data-tooltip]::before {
        left: 50%;
        bottom: 130%;
        transform: translateX(-50%);
        min-width: auto;
        max-width: calc(100vw - 32px); /* 16px de margem de cada lado */
        box-sizing: border-box;
        padding: 8px 10px;
        font-size: 14px;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    [data-tooltip]::after {
        left: 50%;
        bottom: 120%;
        transform: translateX(-50%);
    }
}