.commitment-header.login-header {
    margin-top: 4rem;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--dark-gray);
}

.commitment-description.login-subtitle {
    font-size: 1.2rem;
    text-align: center;
    width: 45%;
    margin: auto;
    color: var(--light-gray);
    margin-bottom: 3rem;
}

.forgot-pass {
    text-align: left;
    margin: 0.5rem 0;
    display: block;
}
        .error-message {
            background-color: #fee;
            color: #c33;
            padding: 0.8rem;
            border-radius: 0.7rem;
            border: 1px solid #fcc;
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 1rem;
            display: none;
        }
        
        .loading {
            display: none;
            text-align: center;
            color: var(--dark-turquoise);
            font-weight: 600;
            margin: 1rem 0;
        }
        
        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--dark-turquoise);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }