/* === ESTILOS CENTRALIZADOS PARA MENSAGENS MODAIS === */

/* Container principal das mensagens */
#messages {
    position: fixed; /* Posicionamento fixo na tela */
    top: 20px; /* Distância do topo da tela */
    right: 20px; /* Distância da direita da tela */
    z-index: 10000; /* Garante que apareça sempre por cima de outros elementos, incluindo modais (3500) */
    max-width: 400px; /* Largura máxima para não ocupar toda a tela */
    pointer-events: none; /* Permite clicar através das mensagens */
}

/* Estilo base para todas as mensagens */
.message {
    background: rgba(255, 255, 255, 0.95); /* Fundo branco semi-transparente */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    border-radius: 12px; /* Cantos bem arredondados */
    padding: 16px 20px; /* Espaçamento interno generoso */
    margin-bottom: 12px; /* Espaçamento entre mensagens */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* Sombra suave e elegante */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
    font-weight: 500; /* Peso da fonte médio */
    font-size: 14px; /* Tamanho da fonte legível */
    line-height: 1.4; /* Altura da linha para melhor legibilidade */
    text-align: left; /* Alinhamento à esquerda para melhor leitura */
    opacity: 0; /* Começa invisível */
    transform: translateX(100%) scale(0.9); /* Começa deslocado para a direita e menor */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Animação suave e elegante */
    pointer-events: auto; /* Permite interação com a mensagem */
    position: relative; /* Para posicionamento de elementos filhos */
}

/* Estado visível da mensagem */
.message.show {
    opacity: 1; /* Torna totalmente visível */
    transform: translateX(0) scale(1); /* Move para posição normal e tamanho normal */
}

/* Mensagens de sucesso */
.message.success {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.95), rgba(46, 204, 113, 0.95)); /* Gradiente verde */
    color: white; /* Texto branco para contraste */
    border-color: rgba(39, 174, 96, 0.3); /* Borda verde sutil */
    box-shadow: 0 8px 32px rgba(39, 174, 96, 0.25); /* Sombra verde */
}

/* Mensagens de erro */
.message.error {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.95), rgba(192, 57, 43, 0.95)); /* Gradiente vermelho */
    color: white; /* Texto branco para contraste */
    border-color: rgba(231, 76, 60, 0.3); /* Borda vermelha sutil */
    box-shadow: 0 8px 32px rgba(231, 76, 60, 0.25); /* Sombra vermelha */
}

/* Mensagens de aviso */
.message.warning {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.95), rgba(230, 126, 34, 0.95)); /* Gradiente laranja */
    color: white; /* Texto branco para contraste */
    border-color: rgba(243, 156, 18, 0.3); /* Borda laranja sutil */
    box-shadow: 0 8px 32px rgba(243, 156, 18, 0.25); /* Sombra laranja */
}

/* Mensagens informativas */
.message.info {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.95), rgba(41, 128, 185, 0.95)); /* Gradiente azul */
    color: white; /* Texto branco para contraste */
    border-color: rgba(52, 152, 219, 0.3); /* Borda azul sutil */
    box-shadow: 0 8px 32px rgba(52, 152, 219, 0.25); /* Sombra azul */
}

/* Ícone antes do texto (opcional) */
.message::before {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    display: inline-block; /* Exibe como bloco inline */
    width: 20px; /* Largura do ícone */
    height: 20px; /* Altura do ícone */
    margin-right: 12px; /* Espaçamento à direita do ícone */
    vertical-align: middle; /* Alinhamento vertical */
    background-size: contain; /* Tamanho do ícone */
    background-repeat: no-repeat; /* Não repete o ícone */
    background-position: center; /* Centraliza o ícone */
}

/* Ícones específicos para cada tipo de mensagem */
.message.success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); /* Ícone de check */
}

.message.error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); /* Ícone de X */
}

.message.warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); /* Ícone de triângulo de aviso */
}

.message.info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); /* Ícone de informação */
}

/* Barra de progresso para indicar tempo restante */
.message::after {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Na parte inferior */
    left: 0; /* Alinhado à esquerda */
    height: 3px; /* Altura da barra de progresso */
    background: rgba(255, 255, 255, 0.3); /* Cor da barra de progresso */
    width: 100%; /* Largura total */
    transform-origin: left; /* Origem da transformação à esquerda */
    animation: progressBar 4s linear forwards; /* Animação da barra de progresso */
}

/* Animação da barra de progresso */
@keyframes progressBar {
    0% {
        transform: scaleX(1); /* Começa com largura total */
    }
    100% {
        transform: scaleX(0); /* Termina com largura zero */
    }
}

/* Efeito hover para interatividade */
.message:hover {
    transform: translateX(-5px) scale(1.02); /* Move ligeiramente para a esquerda e aumenta */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); /* Sombra mais pronunciada */
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    #messages {
        top: 10px; /* Menor distância do topo */
        right: 10px; /* Menor distância da direita */
        left: 10px; /* Também à esquerda para ocupar mais espaço */
        max-width: none; /* Remove limitação de largura */
    }
    
    .message {
        padding: 14px 16px; /* Padding menor para dispositivos móveis */
        font-size: 13px; /* Fonte menor para dispositivos móveis */
        margin-bottom: 8px; /* Espaçamento menor entre mensagens */
    }
}

/* Animações de entrada e saída mais suaves */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* Aplicação das animações */
.message.show {
    animation: slideInRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.message.hiding {
    animation: slideOutRight 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ==========================================================================
   MENSAGENS DE UPGRADE PREMIUM
   ========================================================================== */

/* Estilo para a mensagem de upgrade premium na parte de baixo */
#premium-upgrade-message {
    /* Espaço do topo */
    margin-top: 20px;
    /* Espaçamento interno */
    padding: 15px;
    /* Cantos arredondados */
    border-radius: 8px;
    /* Cor azul suave */
    background-color: #2e86c1;
    /* Texto branco */
    color: #ffffff;
    /* Peso da fonte */
    font-weight: 500;
    /* Sombra no texto */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    /* Sombra no elemento */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /* Centraliza na página */
    margin-left: auto;
    margin-right: auto;
    /* Largura */
    width: 90%;
    /* Limita a largura para melhor leitura */
    max-width: 700px;
    /* Adiciona uma animação */
    animation: fadeIn 0.5s ease-out;
}

/* Animação de fade in para mensagem premium */
@keyframes fadeIn {
    /* Estado inicial */
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    /* Estado final */
    to {
        opacity: 1;
        transform: translateY(0);
    }
}