/* ============================================
   onboarding.css — Shared onboarding styles
   Used by: schedule, company_info, confirmation
   ============================================ */

/* ── Multi-step progress indicators ─────── */
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A2438;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-dot.active {
  background: #FE7BCD;
  width: 24px;
  border-radius: 4px;
}
.step-dot.done {
  background: #FE7BCD;
}

/* ── Form field interactions ─────────────── */
input:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(254, 123, 205, 0.35);
  transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
input,
select {
  transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
input.error,
select.error {
  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.35);
}

/* ── Inline validation messages ──────────── */
.field-error {
  display: none;
  color: #BA1A1A;
  font-size: 11px;
  margin-top: 4px;
}
.field-error.show {
  display: block;
  animation: fadeUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Page entrance ───────────────────────── */
.fade-up {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}