/* BB Onboarding Stepper — steps only, transparent (drops into your existing section) */
.bb-stepper{
  --bb-gold:#E5A93A;
  --bb-gold-soft:#f0c163;
  --bb-idle:#222a52;
  --bb-idle-line:#2c3566;
  --bb-idle-text:#7b84ad;
  --bb-label:#eef1ff;
  --bb-line-h:3px;
  --bb-node:74px;                 /* max diameter (set from plugin settings, inline) */
  /* fluid diameter: scales with viewport but never exceeds the configured size */
  --bb-d:clamp(48px, 7vw, var(--bb-node));
  --bb-gap:clamp(12px, 1.6vw, 18px);
  position:relative;
  font-family:inherit;
  color:inherit;
  box-sizing:border-box;
}
.bb-stepper *,
.bb-stepper *::before,
.bb-stepper *::after{box-sizing:border-box}

.bb-track{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  position:relative;
}
.bb-step{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:var(--bb-gap);
  text-align:center;min-width:0;            /* allow labels to shrink, not overflow */
}

/* connecting line: idle base + gold fill that grows over the whole step.
   Positioned by node centre (--bb-d), so it stays aligned no matter how tall labels wrap. */
.bb-step:not(:last-child)::before{
  content:"";position:absolute;z-index:0;
  top:calc(var(--bb-d)/2 - var(--bb-line-h)/2);
  left:50%;width:100%;height:var(--bb-line-h);
  background:var(--bb-idle-line);border-radius:99px;transform-origin:left center;
}
.bb-step:not(:last-child)::after{
  content:"";position:absolute;z-index:1;
  top:calc(var(--bb-d)/2 - var(--bb-line-h)/2);
  left:50%;width:100%;height:var(--bb-line-h);
  background:linear-gradient(90deg,var(--bb-gold),var(--bb-gold-soft));
  border-radius:99px;transform-origin:left center;transform:scaleX(0);
  /* linear = constant speed, so the gold never slows down at a node → continuous flow */
  transition:transform var(--bb-flow,1100ms) linear;
}
.bb-step.is-filled::after{transform:scaleX(1)}

.bb-node{
  position:relative;z-index:2;
  width:var(--bb-d);height:var(--bb-d);flex:0 0 var(--bb-d);
  display:grid;place-items:center;border-radius:50%;
  background:var(--bb-idle);
  border:1.5px solid var(--bb-idle-line);
  color:var(--bb-idle-text);
  font-size:calc(var(--bb-d) * .34);font-weight:600;line-height:1;
  transition:background .45s ease-out,border-color .45s ease-out,color .45s ease-out,box-shadow .45s ease-out,transform .45s ease-out;
}
.bb-node b{color:var(--bb-num,#fff);transition:color .6s ease}

/* completed — gold + steady glow that STAYS on the trail */
.bb-step.is-done .bb-node{
  background:var(--bb-gold);border-color:var(--bb-gold);color:#1a1a2e;
  box-shadow:0 0 0 4px rgba(229,169,58,.12),0 0 18px 2px rgba(229,169,58,.40);
}
/* current — same glow, breathing brighter + lifted */
.bb-step.is-active .bb-node{
  background:var(--bb-gold);border-color:var(--bb-gold-soft);color:#1a1a2e;
  transform:translateY(-2px) scale(1.05);
  animation:bb-breathe 2.2s ease-in-out infinite;
}
@keyframes bb-breathe{
  0%,100%{box-shadow:0 0 0 5px rgba(229,169,58,.16),0 0 22px 3px rgba(229,169,58,.45)}
  50%    {box-shadow:0 0 0 9px rgba(229,169,58,.08),0 0 36px 8px rgba(229,169,58,.70)}
}
.bb-step.is-done .bb-node b,.bb-step.is-active .bb-node b{color:var(--bb-num,#fff)}

.bb-label{
  max-width:100%;font-size:clamp(11px,1.25vw,15px);line-height:1.3;
  color:var(--bb-idle-text);transition:color .6s ease;
  overflow-wrap:break-word;hyphens:auto;padding-inline:4px;
}
.bb-step.is-done .bb-label,.bb-step.is-active .bb-label{color:var(--bb-label)}

/* ── Tablet: tighten the 5-across layout before it gets cramped ── */
@media (max-width:1024px){
  .bb-stepper{--bb-d:clamp(46px, 8vw, var(--bb-node))}
}

/* ── Phone / narrow: switch to a clean vertical timeline ── */
@media (max-width:720px){
  .bb-stepper{--bb-d:clamp(46px, 13vw, 64px); --bb-row-gap:clamp(26px,7vw,34px)}
  .bb-track{grid-auto-flow:row;gap:var(--bb-row-gap)}
  .bb-step{flex-direction:row;gap:16px;text-align:left;justify-content:flex-start;align-items:center}
  .bb-step:not(:last-child)::before,
  .bb-step:not(:last-child)::after{
    top:var(--bb-d);left:calc(var(--bb-d)/2 - var(--bb-line-h)/2);
    width:var(--bb-line-h);height:calc(100% + var(--bb-row-gap));transform-origin:center top;
  }
  .bb-step:not(:last-child)::after{transform:scaleY(0)}
  .bb-step:not(:last-child).is-filled::after{transform:scaleY(1)}
  .bb-label{max-width:none;font-size:clamp(13px,3.6vw,16px);padding-inline:0}
}

/* instant, non-animated reset between plays */
.bb-noanim .bb-step::after,
.bb-noanim .bb-node{transition:none !important}

@media (prefers-reduced-motion:reduce){
  .bb-step::after{transition:none}
  .bb-node{transition:none;animation:none}
  .bb-step.is-active .bb-node{animation:none}
}