/* ======================================================================== */
/* --- ESTILOS DO MENU DO TOPO PROFISSIONAL (IA BLITER) --- */
/* v3.2 - Ajuste fino no tamanho do card de assinatura */
/* ======================================================================== */

/* COMENTÁRIO PARA LEIGOS: 
  As variáveis de cor aqui foram atualizadas para usar as mesmas da folha de
  estilo principal (painel.css). Isso garante que o menu superior tenha
  sempre a mesma aparência do resto do painel.
*/
:root {
    --ia-bg-dark: var(--panel-bg-elementos); 
    --ia-bg-light: var(--panel-bg-principal); 
    --ia-border: var(--panel-border);
    --ia-text-light: var(--panel-text-light);
    --ia-text-dark: var(--panel-text-dark);
    --ia-accent: var(--panel-accent); 
    --ia-accent-hover: var(--panel-accent-hover);
}

/* --- Base Badge (Contador de Pontos) --- */
.points-badge {
    position: relative;
    display: inline-flex;
    height: 44px;
    background-color: var(--ia-bg-dark);
    border: 1px solid var(--ia-border);
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.points-badge-content {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    gap: 8px;
    height: 100%;
}

.points-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-image: linear-gradient(to top right, #facc15, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
    transition: transform 0.3s ease;
}

.points-badge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.points-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ia-text-light);
}

.points-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ia-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.points-badge-action {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--ia-bg-light);
    border: 1px solid var(--ia-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80; /* Verde */
    margin-left: 4px;
    transition: all 0.3s ease;
}

.points-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-color: #facc15;
}
.points-badge:hover .points-badge-icon {
    transform: scale(1.1) rotate(-10deg);
}
.points-badge:hover .points-badge-action {
    background-color: #4ade80;
    color: white;
    transform: rotate(90deg) scale(1.1);
}
.points-badge:active {
    transform: translateY(0);
}

.points-badge-glow {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: conic-gradient(from 180deg at 50% 50%, #facc15, #f59e0b, #facc15);
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}
.points-badge:hover .points-badge-glow {
    opacity: 0.3;
}


/* --- Base Badge (Assinatura Premium) --- */
.premium-badge {
    position: relative;
    display: inline-flex;
    /* [ALTERADO] Altura do card reduzida para um visual mais compacto */
    height: 46px; 
    border-radius: 23px; /* Raio da borda ajustado para a nova altura */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: transparent;
    border: 1px solid transparent;
}

@keyframes rotate-border-ia {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.premium-badge::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from 180deg at 50% 50%,
        rgba(255, 255, 255, 0) 0%,
        var(--ia-accent) 35%,
        rgba(255, 255, 255, 0) 60%
    );
    animation: rotate-border-ia 4s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.premium-badge:hover::before {
    opacity: 1;
}

.premium-badge-content {
    display: flex;
    align-items: center;
    /* [ALTERADO] Padding interno ajustado */
    padding: 0 14px 0 5px; 
    gap: 10px; /* Espaçamento entre ícone e texto */
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: var(--ia-bg-dark);
    border: 1px solid var(--ia-border);
    border-radius: 23px; /* Raio da borda ajustado */
    transition: border-color 0.3s ease;
}

.premium-badge-icon {
    /* [ALTERADO] Tamanho do ícone ajustado para a nova altura */
    width: 36px; 
    height: 36px;
    border-radius: 50%;
    background-image: linear-gradient(to top right, var(--ia-accent), var(--ia-accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem; /* Tamanho do ícone (coroa) */
    box-shadow: 0 2px 5px rgba(0, 120, 215, 0.3);
}

.premium-badge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    /* [ALTERADO] Espaçamento entre o nome do plano e o timer */
    gap: 2px; 
}

.plan-name {
    font-weight: 700; /* Fonte mais forte */
    color: var(--ia-text-light);
    font-size: 0.9rem; /* Tamanho da fonte do plano */
}

.timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem; /* Tamanho da fonte do timer */
    font-weight: 700;
    color: var(--ia-text-dark);
}
.timer-seconds {
    /* A cor virá do --ia-accent (azul marinho) quando a classe .tick for aplicada */
    color: #004080; /* Cor base para os segundos, um azul mais escuro */
    transition: color 0.5s, transform 0.5s;
    display: inline-block; /* Necessário para o transform funcionar corretamente */
}

/* O efeito azul marinho brilhante nos segundos foi mantido aqui */
.timer-seconds.tick {
    color: var(--ia-accent); 
    transform: scale(1.15); /* Efeito de pulso ligeiramente maior */
}

.premium-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.premium-badge:hover .premium-badge-content {
    border-color: var(--ia-accent);
}

.premium-badge-glow {
    position: absolute;
    inset: -1px;
    border-radius: 23px; /* Raio da borda ajustado */
    background: conic-gradient(from 180deg at 50% 50%, var(--ia-accent), var(--ia-accent-hover), var(--ia-accent));
    filter: blur(12px); /* Efeito de brilho aumentado */
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}
.premium-badge:hover .premium-badge-glow {
    opacity: 0.4;
}