/* Estilos para o formulário */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group input[type="number"] {
    -moz-appearance: textfield;
}

.form-group input[type="number"]::-webkit-inner-spin-button,
.form-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 5px;
    display: none;
}

.form-group.invalid input {
    border-color: red;
}

.form-group.invalid .error-message {
    display: block;
}

/* Estilo para a mensagem de sucesso */
.mensagem-sucesso {
    padding: 20px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    margin-top: 20px;
    text-align: center;
    display: none; /* Inicialmente oculta */
}

/* Estilo para a mensagem de erro */
.mensagem-sucesso.error {
    background-color: #f8d7da; /* Vermelho claro para erro */
    color: #721c24; /* Vermelho escuro para o texto */
    border-color: #f5c6cb; /* Borda vermelha */
}

/* Oculta a div.formulario quando a classe 'hidden' é aplicada */
.hidden {
    display: none !important; /* Força a ocultação */
}


/* Estilo para a mensagem de sucesso */
.mensagem-sucesso {
    padding: 20px;
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde escuro */
    border: 1px solid #c3e6cb; /* Borda verde */
    border-radius: 8px; /* Cantos arredondados */
    margin-top: 20px;
    display: none; /* Inicialmente oculta */
    align-items: center; /* Alinha a imagem e o texto verticalmente */
    gap: 20px; /* Espaçamento entre a imagem e o texto */
    opacity: 0; /* Inicialmente transparente para o efeito de fade-in */
    animation: fadeIn 0.5s ease-in-out forwards; /* Efeito de fade-in */
}

/* Efeito de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Efeito de oscilação suave */
@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Posição inicial e final */
    }
    50% {
        transform: translateY(-10px); /* Move a imagem para cima */
    }
}

/* Efeito de brilho dourado */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); /* Brilho suave */
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.9); /* Brilho mais intenso */
    }
}

.sucesso-imagem {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Torna a imagem redonda (opcional) */
    animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite; /* Combina os efeitos */
}

/* Estilo para o container do texto */
.sucesso-texto {
    display: flex;
    flex-direction: column; /* Organiza o texto em coluna */
    gap: 10px; /* Espaçamento entre as linhas de texto */
}

/* Estilo para o título */
.sucesso-titulo {
    font-size: 1.2rem; /* Tamanho maior para o título */
    font-weight: bold; /* Texto em negrito */
    color: #155724; /* Verde escuro */
}

/* Estilo para os detalhes */
.sucesso-detalhe {
    font-size: 1rem; /* Tamanho padrão para os detalhes */
    line-height: 1.4; /* Espaçamento entre linhas */
}