/* ==========================================================================
   Progress Tracker — Tickchak Design System (v2 — bars + label)
   5 steps: pricing → details → summary → payment → done
   Visual progression: right → left (RTL reading direction)
   Figma: Qw3YeURNIL8V1wdGubxIWQ node 875:3884
   Required: tokens.css
   ========================================================================== */

.pt{
  width:100%;
  padding:0 var(--space-lg);         /* Figma 875:3884 — 16px horizontal (token: space-lg), no vertical padding */
  margin-block:var(--space-lg);      /* 16px breathing room above + below (separates from header/banner/content) */
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  flex-shrink:0;
}

/* === Label row (text + icon) — text on left, icon on right === */
.pt__row{
  display:flex;
  flex-direction:row;
  direction:ltr;                     /* force LTR axis: DOM[text, icon] → visual [text][icon] */
  align-items:center;
  justify-content:flex-end;          /* push group to the right */
  gap:var(--space-xs);
  height:var(--dim-5);
}

.pt__label{
  font-family:var(--font-family-live);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-body);
  color:var(--ta-color-text-default);
  white-space:nowrap;
  transform-origin:right center;     /* RTL — text emerges from the right */
  transition:
    opacity .3s cubic-bezier(.4,0,.2,1),
    transform .4s cubic-bezier(.34,1.4,.64,1),
    filter .3s ease,
    letter-spacing .35s cubic-bezier(.4,0,.2,1);
}

.pt__icon{
  width:var(--dim-4);
  height:var(--dim-4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ta-color-text-default);
  flex-shrink:0;
  transform-origin:center;
  transition:
    opacity .3s cubic-bezier(.4,0,.2,1),
    transform .4s cubic-bezier(.34,1.4,.64,1),
    filter .3s ease;
}
.pt__icon svg,
.pt__icon img{
  width:100%;
  height:100%;
  display:block;
}

/* === Bars row — fixed LTR order regardless of page dir === */
.pt__bars{
  display:flex;
  direction:ltr;                     /* DOM order = visual L→R */
  flex-direction:row;
  gap:var(--space-sm);               /* Figma 875:3884 — 8px gap (was 2px) */
  width:100%;
  align-items:flex-start;
}

.pt__bar{
  flex:1 0 0;
  min-width:0;
  height:4px;
  border-radius:var(--border-radius-full);
  background:var(--color-grays-200);
  /* Old active bar shrinks IMMEDIATELY when data-step changes (no delay) */
  transition:
    background .3s cubic-bezier(.4,0,.2,1),
    flex .3s cubic-bezier(.4,0,.2,1),
    width .3s cubic-bezier(.4,0,.2,1);
}

/* Active bar per step — fixed 153px width, visually right-most = step 1 (pricing).
   New active bar grows AFTER the old one finishes shrinking — feels like the indicator
   "moves" from one slot to the next instead of cross-fading in place. */
.pt[data-step="pricing"]  .pt__bar:nth-child(5),
.pt[data-step="details"]  .pt__bar:nth-child(4),
.pt[data-step="summary"]  .pt__bar:nth-child(3),
.pt[data-step="payment"]  .pt__bar:nth-child(2),
.pt[data-step="done"]     .pt__bar:nth-child(1){
  background:#000;                   /* Figma: color/Solids/black */
  flex:0 0 153px;                    /* Figma: fixed 153px width — active bar emphasized */
  width:153px;
  transition-delay:.28s;             /* Wait for old bar to clear before growing here */
}

/* Label swap — RTL-natural reveal: old word slides + scales + blurs out, new word springs in fresh */
.pt.is-changing .pt__label{
  opacity:0;
  transform:translateX(16px) scale(.92);
  filter:blur(3px);
  letter-spacing:.04em;
}
.pt.is-changing .pt__icon{
  opacity:0;
  transform:scale(.7) rotate(-12deg);
  filter:blur(2px);
}
@media (prefers-reduced-motion:reduce){
  .pt__label,
  .pt__icon,
  .pt__bar{transition:none;}
}