/* 12. Wizard */

.stepper {
  display: flex;
  align-items: center;
  overflow: auto;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 14px;
}

.step {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.step span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--step-bg);
}

.step.active {
  color: var(--white);
}

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

.stepper i {
  height: 1px;
  min-width: 24px;
  flex: 1;
  background: var(--step-line);
  margin: 0 var(--space-2);
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin: var(--space-4) 0;
  gap: 10px;
}

.step[aria-current=step] {
  color: var(--gold);
}

.step.done span {
  background: var(--step-done-bg);
}

.workflow {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.workflow .btn {
  flex: 1;
  min-width: 110px;
}

progress {
  width: 100%;
  accent-color: var(--gold);
  height: 20px;
}