/* ============================================================
   FORM.CSS — Multi-step & Simple Form Styles
   ============================================================ */

/* Keep legacy .steps styles for any remaining use, but minimal */
.steps { position: relative; width: 100%; }
.steps fieldset { display: none; }
.steps fieldset:first-of-type { display: block; }

/* ============================================================
   Phone field wrapper (intl-tel-input)
   ============================================================ */
.phone-wrapper { width: 100%; }
.phone-wrapper .iti { width: 100%; }
.phone-wrapper .iti__flag-container { z-index: 10; }

/* ============================================================
   Multi-step form panel transitions
   ============================================================ */
.ms-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}
.ms-panel.active {
  display: flex;
  animation: msPanelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ms-panel.leaving {
  animation: msPanelOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes msPanelIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes msPanelOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

/* ============================================================
   Step indicator animations
   ============================================================ */
.ms-step-dot { transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.ms-step-line { transition: background 0.5s ease 0.1s; }
.ms-labels span { transition: color 0.3s ease, font-weight 0.3s ease; }

/* ============================================================
   Form validation states
   ============================================================ */
.ms-form input.invalid,
.simple-form input.invalid,
.ms-form textarea.invalid,
.simple-form textarea.invalid {
  border-color: #e05252 !important;
  background: rgba(224, 82, 82, 0.06) !important;
  animation: shakeField 0.3s ease;
}

@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

/* ============================================================
   Submit button loading state
   ============================================================ */
.btn-primary .fa-sync-alt { animation: spinBtn 0.8s linear infinite; }
@keyframes spinBtn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.btn-primary .fa-check { color: #fff; }

/* ============================================================
   Success overlay (after send)
   ============================================================ */
.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
  animation: fadeIn 0.4s ease;
}
.form-success.active { display: block; }
.form-success i { font-size: 48px; color: #25d366; margin-bottom: 16px; }
.form-success h4 { font-size: 18px; color: var(--text-1); margin-bottom: 8px; }
.form-success p  { font-size: 14px; color: var(--text-2); }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }