/* ==========================================================================
   Tracking bar — "Restaurant Request (EN)" from the Figma Illustrations page,
   animated through its 4 states (not sent → sent → confirmed → completed).
   Sizes and colours are those of the Figma component (54.25rem wide).
   Motion principle: soft cross-fades only, no scaling, no overshoot.
   ========================================================================== */

.tb {
  --tb-green: #1eac44;
  --tb-grey: #999999;
  --tb-text: #525252;
  --tb-ease: cubic-bezier(0.4, 0, 0.2, 1); /* gentle in-out, no overshoot */
  --tb-fade: 900ms;
  margin: 0;
  width: min(54.25rem, 100%);
  font-family: var(--font-text, "Open Sans", system-ui, sans-serif);
  letter-spacing: 0.165px;
}

.tb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

/* Progress bar ---------------------------------------------------------- */

.tb-bar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;
  flex: none;
  width: 3.875rem;
}

.tb-label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tb-text);
  white-space: nowrap;
  /* No transition on font-weight: animating it re-lays out the text every frame (jerky on iPhone) */
}

.tb-step[data-phase="live"] .tb-label,
.tb-step[data-phase="done"] .tb-label {
  font-weight: 600;
}

/* Each dot stacks 3 layers (grey icon, green icon, green check) that simply cross-fade */
.tb-dot {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
}

.tb-ico {
  position: absolute;
  inset: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--tb-fade) var(--tb-ease);
  will-change: opacity;
}

.tb-ico--idle { background: var(--tb-grey); opacity: 1; }
.tb-ico--live,
.tb-ico--done { background: var(--tb-green); }

.tb-step[data-phase="live"] .tb-ico--live,
.tb-step[data-phase="done"] .tb-ico--done { opacity: 1; }

/* Lines: grey rail as in Figma, filled in green from left to right as the request progresses */
.tb-line {
  position: relative;
  flex: 0 1 11.875rem;
  min-width: 2.5rem;
  height: 2.25rem;
}

.tb-line::before,
.tb-line::after {
  content: "";
  position: absolute;
  top: 1.0313rem;
  left: 0;
  right: 0;
  height: 0.1875rem;
}

.tb-line::before { background: var(--tb-grey); }

.tb-line::after {
  background: var(--tb-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tb-fill, 1200ms) var(--tb-ease);
  will-change: transform;
}

.tb-line.is-filled::after { transform: scaleX(1); }

/* Status message: the old one fades out, then the new one fades in, rising 0.25rem */

/* Each message is centred on its own; they never overlap since one fades out before the next fades in */
.tb-statuses {
  display: grid;
  justify-items: center;
}

.tb-status {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
  opacity: 0;
  transform: translateY(0.25rem);
  transition:
    opacity 450ms var(--tb-ease),
    transform 450ms var(--tb-ease);
  will-change: opacity, transform;
}

.tb-status.is-active {
  opacity: 1;
  transform: none;
  transition:
    opacity 800ms var(--tb-ease) 450ms,
    transform 800ms var(--tb-ease) 450ms; /* starts once the previous message has gone: never two at once */
}

.tb-status.is-past { transform: none; }

/* After a stepper click: same motion, but brisk, so the click feels immediate */
.tb.is-manual {
  --tb-fade: 350ms;
  --tb-fill: 450ms;
}

.tb.is-manual .tb-status {
  transition:
    opacity 180ms var(--tb-ease),
    transform 180ms var(--tb-ease);
}

.tb.is-manual .tb-status.is-active {
  transition:
    opacity 320ms var(--tb-ease) 150ms,
    transform 320ms var(--tb-ease) 150ms;
}

.tb-status__ico {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tb-green);
}

.tb-status__ico.is-grey { background: var(--tb-grey); }

.tb-status__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0.5625rem 0;
  font-size: 0.875rem;
  color: var(--tb-text);
  text-align: left; /* the hero centres text; Figma aligns the status text left, next to its icon */
  white-space: nowrap;
}

.tb-status__text strong {
  font-weight: 600;
  color: #000;
}

/* Stepper under the bar: dots in a light capsule, the current one stretches into a pill.
   Only shown with JS, since it drives the animation. */
.tb-nav {
  display: none;
  align-items: center;
  position: relative;
  isolation: isolate; /* keeps the capsule (z-index -1) behind the dots, inside the stepper */
  margin-top: 1.25rem;
  padding: 0 0.375rem;
}

/* The capsule is drawn shorter than the buttons, which keep a 2.75rem touch target */
.tb-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 50% 0 auto;
  height: 2.25rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.js .tb-nav { display: inline-flex; }

/* 2.75rem-high hit area around an 0.5rem dot; neighbours touch, so no click falls in a gap */
.tb-nav__dot {
  display: grid;
  place-items: center;
  height: 2.75rem;
  padding: 0 0.375rem;
  touch-action: manipulation;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tb-nav__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  transition:
    width 350ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 200ms ease,
    transform 120ms ease;
}

.tb-nav__dot:hover::before { background: rgba(0, 0, 0, 0.42); }

/* Pressed: the dot gives way slightly, as soon as the finger or mouse goes down */
.tb-nav__dot:active::before { transform: scale(0.8); }

.tb-nav__dot[aria-current]::before {
  width: 1.75rem;
  background: rgba(0, 0, 0, 0.72);
}

.tb-nav__dot:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: -2px;
  border-radius: 999px;
}

/* Small screens: the status text may wrap */
@media (max-width: 599.98px) {
  .tb-inner { padding-inline: 1.5rem; }
  .tb-status__text { white-space: normal; }
}

/* Reset without animation (used before a replay) */
.tb.is-resetting *,
.tb.is-resetting *::before,
.tb.is-resetting *::after {
  transition: none !important;
  animation: none !important;
}

/* No motion: the final state is shown directly */
@media (prefers-reduced-motion: reduce) {
  .tb *,
  .tb *::before,
  .tb *::after,
  .tb-nav__dot::before {
    transition: none !important;
    animation: none !important;
  }
}