/**
 * Status Timeline (VX Toolkit) — structural styles + token defaults.
 *
 * All visual values are CSS variables. Defaults FALL BACK to your Elementor
 * global colours (var(--e-global-color-*)), so the widget matches the brand
 * with zero configuration. Every variable is overridden by the matching
 * Elementor control (which writes the var onto {{WRAPPER}} .vx-tl).
 *
 * State classes (set server-side in widget.php):
 *   .is-done   completed step
 *   .is-current  active step (ring; filled if .vx-tl--fill)
 *   .is-pending  not reached yet
 *   .is-rejected red "not approved" step
 *
 * Modifiers on root:
 *   .vx-tl--horizontal | .vx-tl--vertical | .vx-tl--stack | .vx-tl--fill | .vx-tl--noline
 */

.vx-tl {
  /* colour tokens — fall back to your global colours */
  --tl-done:        var(--e-global-color-primary, #4f46e5);
  --tl-current:     var(--tl-done);
  --tl-pending:     #d7dcea;                         /* track / outline */
  --tl-pending-bg:  var(--e-global-color-surface, #ffffff);
  --tl-rejected:    var(--e-global-color-danger, #dc2626);
  --tl-on:          #ffffff;                         /* text/icon on a filled marker */
  --tl-label:       var(--e-global-color-accent, #1f2540);
  --tl-muted:       #8a93ad;                         /* pending label */
  --tl-caption:     #8a93ad;
  --tl-line-done:    var(--tl-done);
  --tl-line-pending: var(--tl-pending);

  /* geometry tokens */
  --tl-marker-size: 38px;
  --tl-marker-bd:   3px;
  --tl-marker-radius: 50%;
  --tl-ring:        4px;
  --tl-line:        3px;
  --tl-gap:         6px;
  --tl-text-gap:    10px;
  --tl-step-min:    110px;   /* per-step width when the row scrolls (mobile) */

  display: flex;
  gap: var(--tl-gap);
  width: 100%;
}

/* ── Step ───────────────────────────────────────────── */
.vx-tl-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* connector: a line from this marker toward the next step */
.vx-tl-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--tl-marker-size) / 2);
  left: 50%;
  /* span the FULL distance to the next marker centre = own width + the gap,
     otherwise the line falls short by exactly the gap value. */
  width: calc(100% + var(--tl-gap));
  height: var(--tl-line);
  transform: translateY(-50%);
  background: var(--tl-line-pending);
  z-index: 0;
}
.vx-tl-step.is-done:not(:last-child)::after { background: var(--tl-line-done); }
.vx-tl--noline .vx-tl-step::after { display: none; }

/* ── Marker ─────────────────────────────────────────── */
.vx-tl-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--tl-marker-size);
  height: var(--tl-marker-size);
  border-radius: var(--tl-marker-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  background: var(--tl-pending-bg);
  color: var(--tl-muted);
  border: var(--tl-marker-bd) solid var(--tl-pending);
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.vx-tl-marker svg { display: block; }
.vx-tl-marker svg polyline,
.vx-tl-marker svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vx-tl-num { display: block; }

/* done */
.vx-tl-step.is-done .vx-tl-marker {
  background: var(--tl-done);
  border-color: var(--tl-done);
  color: var(--tl-on);
}
/* current — outlined ring by default */
.vx-tl-step.is-current .vx-tl-marker {
  border-color: var(--tl-current);
  color: var(--tl-current);
  box-shadow: 0 0 0 var(--tl-ring) color-mix(in srgb, var(--tl-current) 22%, transparent);
}
/* current — filled variant */
.vx-tl--fill .vx-tl-step.is-current .vx-tl-marker {
  background: var(--tl-current);
  color: var(--tl-on);
}
/* rejected */
.vx-tl-step.is-rejected .vx-tl-marker {
  background: var(--tl-rejected);
  border-color: var(--tl-rejected);
  color: var(--tl-on);
}

/* ── Text ───────────────────────────────────────────── */
.vx-tl-body { margin-top: var(--tl-text-gap); }
.vx-tl-label {
  display: block;
  font-weight: 600;
  color: var(--tl-label);
  line-height: 1.25;
}
.vx-tl-step.is-current .vx-tl-label { font-weight: 700; }
.vx-tl-step.is-pending .vx-tl-label { color: var(--tl-muted); font-weight: 500; }
.vx-tl-caption {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  color: var(--tl-caption);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════
   VERTICAL  (also used by .vx-tl--stack on mobile)
   ════════════════════════════════════════════════════ */
.vx-tl--vertical { flex-direction: column; gap: 0; }
.vx-tl--vertical .vx-tl-step {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--tl-text-gap);
  padding-bottom: calc(var(--tl-gap) + 14px);
}
.vx-tl--vertical .vx-tl-step:last-child { padding-bottom: 0; }
.vx-tl--vertical .vx-tl-step:not(:last-child)::after {
  top: var(--tl-marker-size);
  left: calc(var(--tl-marker-size) / 2);
  width: var(--tl-line);
  height: 100%;
  transform: translateX(-50%);
}
.vx-tl--vertical .vx-tl-body { margin-top: 0; padding-top: 2px; }

/* stack horizontal → vertical on small screens */
@media (max-width: 600px) {
  .vx-tl--stack { flex-direction: column; gap: 0; }
  .vx-tl--stack .vx-tl-step {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--tl-text-gap);
    padding-bottom: calc(var(--tl-gap) + 14px);
  }
  .vx-tl--stack .vx-tl-step:last-child { padding-bottom: 0; }
  .vx-tl--stack .vx-tl-step:not(:last-child)::after {
    top: var(--tl-marker-size);
    left: calc(var(--tl-marker-size) / 2);
    width: var(--tl-line);
    height: 100%;
    transform: translateX(-50%);
  }
  .vx-tl--stack .vx-tl-body { margin-top: 0; padding-top: 2px; }
}

/* ════════════════════════════════════════════════════
   MOBILE — horizontal scroll when stacking is OFF
   (so many steps swipe sideways instead of squishing)
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .vx-tl--horizontal:not(.vx-tl--stack) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;             /* Firefox */
    /* vertical breathing room so the current-step ring isn't clipped
       (overflow-x:auto forces overflow-y to compute to auto too). */
    padding-block: 8px;
  }
  .vx-tl--horizontal:not(.vx-tl--stack)::-webkit-scrollbar { display: none; }
  .vx-tl--horizontal:not(.vx-tl--stack) .vx-tl-step {
    flex: 0 0 var(--tl-step-min);      /* fixed width → overflow → scroll */
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-tl-marker { transition: none; }
}