/* /public_html/css/public_style.css */

/* --- 1. BRANDING E FUNDO (A identidade visual ZAAZ) --- */
.branding-column {
    position: relative;
    /* Garante que a imagem cubra tudo */
    background-color: #1e1630; /* Cor de fundo de segurança (Roxo escuro) */
    background-image: url('../img/background-zaaz.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Adiciona uma camada escura por cima da imagem para o texto branco ler melhor */
.branding-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradiente roxo suave sobre a imagem */
    background: linear-gradient(135deg, rgba(58, 44, 90, 0.85) 0%, rgba(30, 22, 48, 0.95) 100%);
    z-index: -1; /* Fica atrás do texto, mas na frente da imagem */
}

/* --- 2. ANIMAÇÕES DE ENTRADA --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    animation: fadeInUp 0.6s ease-out forwards; /* Aplica a animação ao carregar */
}

/* --- 3. COMPONENTES ESPECÍFICOS --- */
/* Botão personalizado ZAAZ (sobrescreve o Tailwind levemente para interações) */
.btn-zaaz {
    transition: all 0.3s ease;
}
.btn-zaaz:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.4); /* Sombra dourada */
}
.btn-zaaz:active {
    transform: translateY(0);
}

/* --- 4. MENSAGENS DE FEEDBACK --- */
.feedback-box {
    transition: all 0.3s ease;
    border-left-width: 4px;
}

/* --- BOTÕES PADRÃO ZAAZ --- */
.btn-primary {
    display: block;
    width: 100%;
    background-color: #fdb913; /* zaaz-gold */
    color: #3a2c5a; /* zaaz-purple-dark */
    font-weight: 700; /* Bold */
    padding-top: 0.75rem;    /* py-3 equivalent */
    padding-bottom: 0.75rem;
    padding-left: 1rem;      /* px-4 equivalent */
    padding-right: 1rem;
    border-radius: 0.5rem;   /* rounded-lg */
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
    background-color: #e5a000; /* zaaz-gold-dark (um pouco mais escuro) */
    transform: translateY(-2px); /* Efeito de subir */
    box-shadow: 0 10px 15px -3px rgba(253, 185, 19, 0.3); /* Sombra amarela */
}

.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.5); /* Anel de foco */
}