.form-step { display: none; }
        .form-step-active { display: block; animation: fadeIn 0.4s ease-out; }
        .card { border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
        .progress { height: 10px; border-radius: 10px; margin-bottom: 30px; background-color: #e9ecef; }
        .progress-bar { background-color: #0d6efd; transition: width 0.4s ease; }
        .btn-next { background-color: #0d6efd; color: white; border-radius: 8px; padding: 12px 30px; border: none; }
        .btn-prev { background-color: #6c757d; color: white; border-radius: 8px; padding: 12px 30px; border: none; }
        .form-label { font-weight: 600; font-size: 0.9rem; color: #495057; }

        /* Ukrywamy wszystkie kroki domyślnie */
.form-step {
    display: none;
}

/* Pokazujemy tylko ten, który ma klasę active */
.form-step-active {
    display: block !important;
}

/* Opcjonalnie: styl dla błędnych pól */
.is-invalid {
    border: 2px solid #dc3545 !important;
} 

/* Styl dla czerwonej ramki (Bootstrap domyślnie to ma, ale możemy wzmocnić efekt) */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25 margin-bottom: rgba(220, 53, 69, 0.25) !important;
}

/* Opcjonalnie: animacja potrząsania przy błędzie (subtelna) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.is-invalid {
    animation: shake 0.2s ease-in-out 0s 2;
}