/* Анимация встряхивания формы при ошибке */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.animate-shake {
    animation: shake 0.5s;
}

/* Плавные переходы для сообщений */
#loginError, #loginSuccess, 
#registerError, #registerSuccess {
    transition: all 0.3s ease-in-out;
}

#loginError:not(.hidden),
#registerError:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

#loginSuccess:not(.hidden),
#registerSuccess:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

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

/* Стили для индикатора загрузки */
.animate-spin {
    animation: spin 1s linear infinite;
}

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

/* Улучшенный внешний вид сообщений об ошибках */
#loginError, #registerError {
    border-left: 4px solid #ef4444;
    background-color: #fee2e2;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
}

#loginSuccess, #registerSuccess {
    border-left: 4px solid #10b981;
    background-color: #d1fae5;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
}

/* Состояние disabled для кнопок */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}