.journey-phase-wrap { display: flex; align-items: center; justify-content: center; gap: clamp(0.35rem, 0.9vw, 0.7rem); width: 100%; max-width: 100%; margin: 0 auto 1rem; padding-top: 0.15rem; overflow: visible; }
.journey-phase-item { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; gap: 0.55rem; flex: 1 1 0; min-width: 0; max-width: 10.5rem; padding: 0.5rem 0.65rem; border-radius: 0.75rem; border: 1px solid rgba(158, 178, 191, 0.34); background: rgba(22, 41, 53, 0.72); color: #9eb2bf; box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); overflow: hidden; transform: translateY(0); transition: transform 280ms ease, border-color 280ms ease, background-color 280ms ease, color 280ms ease, box-shadow 320ms ease, opacity 220ms ease; animation: journey-phase-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--phase-index, 0) * 65ms); }
.journey-phase-item::before,
.journey-phase-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.journey-phase-item::before { z-index: -1; opacity: 0; background: radial-gradient(circle at 20% 50%, rgba(110, 231, 183, 0.18), transparent 48%), linear-gradient(115deg, rgba(110, 231, 183, 0.16), rgba(56, 189, 248, 0.1) 58%, transparent 92%); transform: scaleX(0.18); transform-origin: left center; transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 260ms ease; }
.journey-phase-item::after { inset: 1px; opacity: 0; background: linear-gradient(105deg, transparent 10%, rgba(232, 255, 246, 0.26) 48%, transparent 82%); transform: translateX(-145%); }
.journey-phase-item:not(:disabled):hover,
.journey-phase-item:focus-visible { z-index: 1; transform: translateY(-1px); }
.journey-phase-item.clickable { cursor: pointer; }
.journey-phase-item.current { border-color: rgba(52, 211, 153, 0.85); color: #d8fff0; background: rgba(16, 185, 129, 0.2); box-shadow: 0 18px 34px rgba(6, 78, 59, 0.18); transform: translateY(-1px); }
.journey-phase-item.completed { border-color: rgba(52, 211, 153, 0.6); color: #c6fce4; background: rgba(16, 185, 129, 0.12); box-shadow: 0 12px 26px rgba(6, 78, 59, 0.12); }
.journey-phase-item.blocked { border-color: rgba(248, 113, 113, 0.4); color: #f0b4b4; background: rgba(127, 29, 29, 0.16); }
.journey-phase-item.upcoming { color: #a6bcc8; }
.journey-phase-item:disabled { cursor: not-allowed; opacity: 0.72; }
.journey-phase-item:not(:disabled):active { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(214, 255, 240, 0.18), 0 0 0 3px rgba(110, 231, 183, 0.14); }
.journey-phase-item.current:not(:disabled):active,
.journey-phase-item.completed:not(:disabled):active { box-shadow: inset 0 0 0 1px rgba(214, 255, 240, 0.26), 0 0 0 4px rgba(110, 231, 183, 0.18); }
.journey-phase-dot { flex-shrink: 0; width: 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(158, 178, 191, 0.42); background: rgba(15, 25, 33, 0.64); font-size: 0.76rem; font-weight: 700; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, color 240ms ease, background-color 240ms ease, box-shadow 280ms ease; }
.journey-phase-item.current .journey-phase-dot,
.journey-phase-item.completed .journey-phase-dot { border-color: rgba(52, 211, 153, 0.82); color: #0f1a22; background: rgba(110, 231, 183, 0.9); box-shadow: 0 0 0 0.18rem rgba(110, 231, 183, 0.16); transform: scale(1.05); animation: journey-phase-dot-pop 420ms cubic-bezier(0.22, 1.2, 0.36, 1) both; }
.journey-phase-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.journey-phase-title { font-size: 0.8rem; font-weight: 700; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.journey-phase-connector { position: relative; flex: 0 1 1.5rem; min-width: 0.85rem; max-width: 2rem; height: 2px; overflow: visible; }
.journey-phase-connector-track,
.journey-phase-connector-fill { position: absolute; inset: 0; border-radius: 999px; }
.journey-phase-connector-track { background: rgba(158, 178, 191, 0.3); }
.journey-phase-connector-fill { opacity: 0; transform: scaleX(0.08); transform-origin: left center; background: linear-gradient(90deg, rgba(52, 211, 153, 0.28), rgba(94, 234, 212, 0.96)); box-shadow: 0 0 12px rgba(94, 234, 212, 0.55); transition: transform 560ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 220ms ease; transition-delay: calc(var(--phase-index, 0) * 55ms); }
.journey-phase-connector-fill::after { content: ''; position: absolute; top: 50%; right: -0.16rem; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: rgba(220, 255, 246, 0.95); box-shadow: 0 0 16px rgba(125, 249, 220, 0.9); transform: translateY(-50%) scale(0.5); opacity: 0; }
.journey-phase-connector.current .journey-phase-connector-fill,
.journey-phase-connector.completed .journey-phase-connector-fill,
.journey-phase-connector.blocked .journey-phase-connector-fill { opacity: 1; transform: scaleX(1); }
.journey-phase-connector.current .journey-phase-connector-fill::after,
.journey-phase-connector.completed .journey-phase-connector-fill::after { animation: journey-phase-spark 760ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--phase-index, 0) * 55ms + 140ms); }
.journey-phase-connector.blocked .journey-phase-connector-track { background: rgba(248, 113, 113, 0.18); }
.journey-phase-connector.blocked .journey-phase-connector-fill { background: linear-gradient(90deg, rgba(248, 113, 113, 0.26), rgba(248, 113, 113, 0.82)); box-shadow: 0 0 10px rgba(248, 113, 113, 0.36); }
.journey-phase-item.current::before,
.journey-phase-item.completed::before { opacity: 1; transform: scaleX(1); }
.journey-phase-item.current::after { opacity: 1; animation: journey-phase-sheen 900ms cubic-bezier(0.22, 1, 0.36, 1) 1; }
[dir='rtl'] .journey-phase-item::before,
[dir='rtl'] .journey-phase-connector-fill { transform-origin: right center; }
[dir='rtl'] .journey-phase-connector-fill::after { right: auto; left: -0.16rem; }
@keyframes journey-phase-enter { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes journey-phase-dot-pop { 0% { transform: scale(0.82); } 65% { transform: scale(1.12); } 100% { transform: scale(1.05); } }
@keyframes journey-phase-sheen { 0% { transform: translateX(-145%); } 100% { transform: translateX(145%); } }
@keyframes journey-phase-spark { 0% { opacity: 0; transform: translateY(-50%) scale(0.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
@media (min-width: 1024px) {
  .journey-phase-wrap { gap: clamp(0.45rem, 0.9vw, 0.75rem); margin-bottom: 1.15rem; }
  .journey-phase-item { max-width: 11.2rem; min-height: 3.55rem; padding: 0.58rem 0.78rem; gap: 0.62rem; border-radius: 0.9rem; }
  .journey-phase-dot { width: 1.72rem; height: 1.72rem; font-size: 0.84rem; }
  .journey-phase-title { font-size: 0.88rem; line-height: 1.18; }
  .journey-phase-connector { flex-basis: 1.75rem; max-width: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-phase-item,
  .journey-phase-item::before,
  .journey-phase-item::after,
  .journey-phase-dot,
  .journey-phase-connector-fill,
  .journey-phase-connector-fill::after { animation: none !important; transition: none !important; }
  .journey-phase-item::after,
  .journey-phase-connector-fill::after { opacity: 0 !important; }
  .journey-phase-item { transform: none !important; }
  .journey-phase-connector.current .journey-phase-connector-fill,
  .journey-phase-connector.completed .journey-phase-connector-fill,
  .journey-phase-connector.blocked .journey-phase-connector-fill { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 1023px) {
  .journey-phase-wrap { gap: 0.5rem; overflow-x: auto; justify-content: flex-start; padding-bottom: 0.2rem; }
  .journey-phase-item { flex: 0 0 auto; min-width: 7.4rem; max-width: none; }
}