.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

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

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.progress-step {
  width: 30%;
  height: 6px;
  background: var(--gray);
  border-radius: 3px;
}

.progress-step.active {
  background: var(--accent);
}

.nav-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn-secondary {
  background: var(--gray);
  color: var(--text);
}

.dob-group {
  display: flex;
  gap: 10px;
}

.dob-group select {
  flex: 1;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.checkbox-group input {
  width: auto;
  margin-top: 4px;
}

/* --- PREMIUM FORM VALIDATION ANIMATIONS --- */
.input-error-animate {
    border-color: var(--error) !important;
    animation: shakeError 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3) !important;
    background-color: #fff8f8;
}

@keyframes shakeError {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.dynamic-error-msg {
    color: var(--error);
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
    display: block;
    animation: fadeIn 0.3s ease-in;
}