/**
 * Ficheiro de Estilos Globais (css/style.css)
 *
 * A maior parte do estilo deste projeto  feita com TailwindCSS,
 * que é carregado via CDN no ficheiro `templates/layout.phtml`.
 *
 * Este ficheiro pode ser usado para adicionar estilos personalizados ou
 * para sobrescrever classes do Tailwind, se necessário.
 */

body {
    /* Exemplo: Pode definir uma fonte global aqui se não gostar da padrão do navegador */
    /* font-family: 'Inter', sans-serif; */
}


/* --- ESTILOS DE MENSAGEM ATUALIZADOS --- */

/* Estilo base para todos os itens de mensagem */
.message-item {
    padding: 0.75rem;
    border-left: 4px solid transparent; /* Borda padrão, transparente */
    border-bottom: 1px solid #e5e7eb; /* Linha cinzenta clara divisória */
}

/* Remove a linha da última mensagem para um acabamento mais limpo */
.message-item:last-child {
    border-bottom: none;
}

.message-item:not(.private-message):not(.public-reply-message) {
    border-left-color: var(--user-color, #e5e7eb); /* Usa a cor do utilizador ou um cinzento padrão */
}

.message-item .username {
    color: var(--user-color, #1f2937); /* Usa a cor do utilizador ou um cinzento escuro padrão */
    font-weight: 600; /* Torna o nome um pouco mais destacado */
}

.private-message {
    background-color: #fffbeb; /* Amarelo muito claro */
    border-left-color: #facc15; /* Borda amarela mais forte */
    border-radius: 0.25rem; /* Adiciona um leve arredondamento para destacar */
}

.private-message .username {
    color: #b45309; /* Um tom de laranja/castanho para combinar com o amarelo */
}

.public-reply-message {
    background-color: #eff6ff; /* Azul muito claro */
    border-left-color: #60a5fa; /* Borda azul mais forte */
    border-radius: 0.25rem;
}

.public-reply-message .username {
    color: #1d4ed8; /* Um tom de azul escuro para combinar */
}

/* --- NOVOS ESTILOS PARA IMAGEM SEGURA --- */

/* Contentor que posiciona o botão sobre a imagem */
.image-container-blurred {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 0.5rem; /* Corresponde ao rounded-lg do Tailwind */
}

/* Aplica o efeito de desfoque na imagem */
.image-blurred {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

/* Estilo do botão "Permitir Visualizar" */
.unblur-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    white-space: nowrap; /* Impede que o texto do botão quebre a linha */
    transition: background-color 0.2s;
}

.unblur-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* --- ESTILOS PARA BANNER DE VOTAÇÃO --- */
@keyframes blink-animation {
    0%, 100% { background-color: #FEF3C7; } /* bg-yellow-100 */
    50% { background-color: #FBBF24; } /* bg-amber-400 */
}

.banner-blink {
    animation: blink-animation 1s infinite;
}

/* NOVO: Classe para limitar a largura do conteúdo principal */
.container-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* --- NOVOS ESTILOS PARA A PÁGINA DE PLANOS --- */

/* Container externo que cria a borda gradiente e prepara para o efeito de brilho */
.plan-card-gradient {
    position: relative; /* Necessário para o posicionamento do pseudo-elemento de brilho */
    overflow: hidden;   /* Esconde o brilho quando está fora do cartão */
    padding: 3px;       /* A 'espessura' da borda */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.plan-card-gradient:hover {
    transform: translateY(-5px);
}

/* Pseudo-elemento que cria o efeito de brilho/flash */
.plan-card-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Largura do feixe de luz */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg) translateX(-250%); /* Posição inicial fora da tela à esquerda */
    transition: transform 0.8s ease;
}

/* Aciona a animação do brilho ao passar o mouse */
.plan-card-gradient:hover::before {
    transform: skewX(-25deg) translateX(350%); /* Move o brilho para fora da tela à direita */
}

/* Gradiente Roxo para Laranja */
.gradient-border-purple-orange {
    background: linear-gradient(to bottom right, #8B5CF6, #F97316);
}

/* Gradiente Dourado para o plano em destaque */
.gradient-border-gold {
     background: linear-gradient(to bottom right, #FBBF24, #F59E0B, #D97706);
}

/* Container interno que tem a cor de fundo e o conteúdo */
.plan-card-inner {
    position: relative; /* Garante que o conteúdo fique acima do efeito de brilho */
    z-index: 2;
    background-color: white;
    height: 100%;
    border-radius: 0.375rem; /* 6px, um pouco menos que o container externo para a borda aparecer */
}