/* Error message styling for auth pages */

.alert {
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    opacity: 1;
}

.alert-danger {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.alert-warning {
    border-left-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
}

.alert-success {
    border-left-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.alert.fade {
    transition: opacity 0.3s linear;
}

.alert.fade.show {
    opacity: 1;
}

.alert .btn-close {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.alert .btn-close:hover {
    opacity: 1;
}

.alert i {
    font-size: 1.2rem;
}

.alert p.small {
    opacity: 0.8;
}

.alert a.alert-link {
    text-decoration: none;
    font-weight: 600;
}

.alert a.alert-link:hover {
    text-decoration: underline;
}

/* Animation for new alerts */
@keyframes highlightAlert {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.alert {
    animation: highlightAlert 0.3s ease-out forwards;
}

/* Custom validation styling */
.form-control.is-invalid {
    background-image: none;
    padding-right: 0.75rem;
}

.invalid-feedback {
    font-size: 80%;
    margin-top: 0.25rem;
}

/* Dark mode adjustments */
.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
}

.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.dark-mode .alert-success {
    background-color: rgba(40, 167, 69, 0.15);
}