/* I01 — Payment journey (js/payment-journey.js): eight steps on a fire line, with what has been paid so far */
.pj { --pj-progress: 1; --pj-green: #2E8B57; --pj-green-soft: #6CC08B; --pj-green-bg: #EAF6EE; margin-top: 0; margin-bottom: 2rem; }
.pj__track { position: relative; padding: 1.75rem 1.5rem .5rem; overflow-x: auto; }
.pj__line { position: absolute; left: calc(1.5rem + 1.1rem); right: calc(1.5rem + 1.1rem); top: calc(1.75rem + 1.1rem); height: 3px; border-radius: 3px; background: var(--color-border); }
.pj__line i { position: absolute; inset: 0 auto 0 0; width: calc(var(--pj-progress) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--pj-green-soft), var(--pj-green)); transition: width .6s cubic-bezier(.16,1,.3,1); }
.pj__steps { position: relative; display: grid; grid-template-columns: repeat(8, minmax(5.5rem, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; min-width: 46rem; }
.pj__step { display: grid; justify-items: center; gap: .35rem; width: 100%; padding: 0 0 .75rem; border: 0; background: none; font: inherit; color: var(--color-text-2); text-align: center; cursor: pointer; }
.pj__dot { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-white); font-size: .85rem; font-weight: 600; color: var(--color-text-2); transition: background var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal), transform var(--duration-normal); }
.pj__step.is-done .pj__dot { border-color: var(--pj-green-soft); background: var(--pj-green-bg); color: var(--pj-green); }
.pj__step[aria-pressed="true"] .pj__dot { border-color: var(--pj-green); background: var(--pj-green); color: var(--color-white); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(46,139,87,.16); }
.pj__name { font-size: .82rem; font-weight: 600; line-height: 1.25; color: var(--color-text); }
.pj__sub { font-size: .72rem; line-height: 1.3; }
.pj__step:focus-visible { outline: 2px solid var(--pj-green); outline-offset: 2px; border-radius: 10px; }
.pj__panel { display: grid; gap: 1rem; padding: 1rem 1.5rem 0; border-top: 1px solid var(--color-border); }
@media (min-width: 760px) { .pj__panel { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; } }
.pj__ledger { display: grid; gap: .35rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--color-bg); }
.pj__ledger-label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-2); }
.pj__ledger strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; letter-spacing: var(--tracking-display); }
.pj__bar { display: flex; gap: 2px; height: .55rem; margin-top: .35rem; border-radius: 99px; background: var(--color-border); overflow: hidden; }
.pj__bar i { display: block; height: 100%; width: 0; transition: width .6s cubic-bezier(.16,1,.3,1); }
.pj__bar-deposit { background: var(--pj-green-soft); }
.pj__bar-balance { background: var(--pj-green); }
.pj[data-level="1"] .pj__bar-deposit, .pj[data-level="2"] .pj__bar-deposit { width: 8%; }
.pj[data-level="2"] .pj__bar-balance { flex: 1; }
.pj__bar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .72rem; color: var(--color-text-2); }
.pj__key { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; }
.pj__key--deposit { background: var(--pj-green-soft); } .pj__key--balance { background: var(--pj-green); margin-left: .4rem; }
.pj__notes { padding: 0; }
@media (prefers-reduced-motion: reduce) { .pj__line i, .pj__bar i, .pj__dot { transition: none; } }
.pj__step[aria-pressed="true"] { background: var(--pj-green-bg); border-radius: 12px; }
.pj__step[aria-pressed="true"] .pj__sub { color: var(--pj-green); }
.pj .sci__time { color: var(--pj-green); }
.pj .sci__scrub { accent-color: var(--pj-green); }
.pj .sci__scrub::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--pj-green) var(--scrub), rgba(46,139,87,.18) var(--scrub)); }
.pj .sci__scrub::-webkit-slider-thumb { background: var(--pj-green); }
.pj .sci__scrub::-moz-range-progress { background: var(--pj-green); }
.pj .sci__play-icon { color: var(--pj-green); }
/* Money is a worried moment: the whole payment section stays calm and green */
.pj .sci__header { border-top-color: var(--pj-green); }
.pj .sci__badge { color: var(--pj-green); border-color: rgba(46,139,87,.3); }
section[aria-labelledby="cost-payment"] .aud__step::before { color: #2E8B57; }