/* Estilos para mensagens de feedback do formulário - Usando Variáveis Globais */

.message {
  padding: 15px;
  border-radius: var(--border-radius); /* OK: Já usa variável */
  margin: 15px 0;
  font-weight: 500;
  transition: opacity 0.5s ease; /* OK: Mantém transição específica */
}

.success {
  background-color: var(--success-bg-color); /* Usa variável de fundo sucesso */
  color: var(--success-color); /* Usa variável de texto/borda sucesso */
  border: 1px solid var(--success-color); /* Usa variável de texto/borda sucesso */
}

.error {
  background-color: var(--error-bg-color); /* Usa variável de fundo erro */
  color: var(--error-color); /* Usa variável de texto/borda erro */
  border: 1px solid var(--error-color); /* Usa variável de texto/borda erro */
}

/* Estilo para o loader do botão */
.loader {
  display: inline-block;
  width: 16px;
  height: 16px;
  /* Mantém RGBA para a borda semi-transparente por simplicidade */
  /* Poderia criar --white-rgba-03 se quisesse TUDO com variável */
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--white); /* Usa variável para branco */
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}