/* ═══════════════════════════════════════════════════
   Workflow — Timeline Progress
   ═══════════════════════════════════════════════════ */

/* ── Root ────────────────────────────────────────── */

.nb-workflow {
  display: grid;
  place-items: center;
}

.nb-workflow[data-flickering="1"] {
  opacity: 0;
}

/* ── Timeline ────────────────────────────────────── */

.nb-workflow__timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Step ─────────────────────────────────────────── */

.nb-workflow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
}

/* ── Badge ────────────────────────────────────────── */

.nb-workflow__badge {
  background: var(--nb-wf-badge-bg, #fff);
  display: flex;
  align-items: center;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.nb-workflow__step.is-active .nb-workflow__badge {
  background-color: var(--nb-wf-active-bg, #000);
}

/* ── Text ─────────────────────────────────────────── */

.nb-workflow__text {
  display: inline-block;
}

.nb-workflow__step.is-active .nb-workflow__text {
  animation: nb-wf-text-slide 0.25s ease-out;
}

@keyframes nb-wf-text-slide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Circular progress SVG ───────────────────────── */

.nb-workflow__progress {
  display: none;
  flex-shrink: 0;
}

.nb-workflow__step.is-active .nb-workflow__progress {
  display: block;
}

/* Circle stroke — draws when active */
.nb-workflow__circle-stroke {
  stroke: var(--nb-wf-progress-color, #c2da91);
  stroke-width: 12;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.nb-workflow__step.is-active .nb-workflow__circle-stroke {
  animation: nb-wf-draw var(--nb-wf-progress-dur, 1s) ease-out 0.5s forwards;
}

/* Completed state — circle fill + stroke color change */
.nb-workflow__step.is-completed .nb-workflow__circle-stroke {
  stroke: var(--nb-wf-completed-color, #fff);
  stroke-dashoffset: 0;
  animation: none;
}

.nb-workflow__circle-fill {
  transition: fill 0.15s ease-out;
}

.nb-workflow__step.is-completed .nb-workflow__circle-fill {
  fill: var(--nb-wf-completed-color, #fff);
}

/* Checkmark — draws when completed */
.nb-workflow__checkmark {
  stroke: var(--nb-wf-check-color, #000);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.nb-workflow__step.is-completed .nb-workflow__checkmark {
  animation: nb-wf-draw 0.3s ease-out forwards;
}

@keyframes nb-wf-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* ── Connector line ──────────────────────────────── */

.nb-workflow__connector {
  height: var(--nb-wf-line-h, 54px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.nb-workflow__line-track {
  width: var(--nb-wf-line-w, 2px);
  height: 100%;
  background: var(--nb-wf-line-bg, #fff);
  border-radius: 9999px;
  overflow: hidden;
}

.nb-workflow__line-fill {
  width: 100%;
  height: 0;
  background: var(--nb-wf-line-fill, #000);
  border-radius: 9999px;
}