/* Base */
body {
    background-color: #F9F9F9;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auth Cards */
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #EF3738;
    color: white; /* Ensure text is readable on dark background */
}

/* Logo */
.logo-img, .auth-logo {
    max-width: 180px;
    cursor: pointer;
}

a {
    color: #EF3738;
    text-decoration: none;
}

a:hover {
    color: #B71C1C;
}

/* Buttons */
.btn-primary {
    background-color: #EF3738;
    border: none;
}

.btn-primary:hover {
    background-color: #B71C1C; /* Slightly darker */
}

.btn-success {
    background-color: #28a745;
    border: none;
}

.btn-success:hover {
    background-color: #218838;
}

/* Forms */
.text-primary {
    color: #EF3738 !important;
}

.form-control:focus {
    border-color: #EF3738;
    box-shadow: 0 0 0 0.25rem rgba(239, 55, 56, 0.25);
}

.verification-input {
    letter-spacing: 0.5em;
    font-size: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}