/* =========================================================
   wizard-steps.css — NEW FILE
   Path: assets/css/wizard-steps.css

   Shared step indicator for the guided application journey —
   Application → Documents → Appointment → Track Status — shown at
   the top of visa-application.html, document-upload.html,
   appointment-booking.html, and application-status.html so a user
   always knows where they are in the process, matching the guided,
   multi-step flow real visa consultancy sites use instead of leaving
   each page feeling like a disconnected standalone form.
   ========================================================= */

.wiz-steps {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 4px; max-width: 720px; margin: 0 auto var(--space-8);
  padding: 0 var(--space-3);
}
.wiz-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 1; min-width: 0; position: relative;
}
.wiz-step-circle {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: var(--fw-bold);
  border: 2px solid var(--color-border); color: var(--color-body); background: #fff;
  transition: all 0.25s ease; z-index: 1;
}
.wiz-step-circle .icon { width: 16px; height: 16px; }
.wiz-step-label {
  font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--color-body);
  text-align: center; white-space: nowrap;
}
.wiz-step::after {
  content: ""; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 2px; background: var(--color-border); z-index: 0;
}
.wiz-step:last-child::after { display: none; }

/* Completed step */
.wiz-step--done .wiz-step-circle { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.wiz-step--done .wiz-step-label { color: var(--color-heading); }
.wiz-step--done::after { background: var(--color-success); }

/* Active (current) step */
.wiz-step--active .wiz-step-circle { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px var(--color-primary-tint); }
.wiz-step--active .wiz-step-label { color: var(--color-primary); font-weight: var(--fw-bold); }

@media (max-width: 640px) {
  .wiz-step-label { font-size: 11px; }
  .wiz-step-circle { width: 28px; height: 28px; font-size: 12px; }
  .wiz-step::after { top: 14px; }
}