/* css/journey.css — the 1 · 2 · 3 journey bar (plan 17 WP-6, T10 / D6-A).
 *
 * style.css is FROZEN — linked after it in index.html. Rendered by
 * lib/ui/journey.mjs into the empty `.journey-bar` node under the top-nav of
 * the confirm, cart, paymethod, tip and pager screens; empty everywhere else
 * and therefore hidden (:empty).
 *
 * Deliberately smaller and flatter than the item step bar (.step-bar,
 * style.css): that one is "where am I in THIS dish", this one is "where am I
 * in the ORDER", and the confirm screen shows both, one above the other. */
.journey-bar {
  display: flex;
  align-items: stretch;
  height: 56px;
  padding: 0 32px;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.journey-bar:empty { display: none; }
.journey-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--mid-gray);
  border-bottom: 4px solid transparent;
  white-space: nowrap;
}
.journey-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  background: var(--light-gray);
  color: var(--mid-gray);
}
.journey-step.is-active {
  color: var(--red);
  font-weight: 800;
  border-bottom-color: var(--red);
}
.journey-step.is-active .journey-num {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(232,25,44,0.28);
}
.journey-step.is-done { color: var(--dark); }
.journey-step.is-done .journey-num {
  background: var(--dark);
  color: var(--white);
}

/* ===== CART CTA: "FIZETÉS · 12 340 Ft ›" (D6-C) =====
 * The button says where it leads AND what it costs; the amount is filled by
 * app.js updateFooterTotal() into .js-cart-pay-amount. Reuses the product-list
 * CTA's .cta-sep / .cta-amount / .cta-go pieces (css/browse.css). */
#cart-pay-btn { gap: 14px; }