/* Approved checkout prototype: 1.3 seconds per step, then a 3-second hold. */
#checkout-flow{--checkout-blue:#4297ff;--checkout-green:#4ade80;display:flex;align-items:center;gap:30px;border-top:1px solid #202024;margin-top:35px;padding:38px 0 43px;min-height:150px}
#checkout-flow .process-label{flex:0 0 114px;margin:0;color:#646469;font-size:10px;line-height:1.7;letter-spacing:.14em}
#checkout-flow .process-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;flex:1;min-width:0;padding:0;margin:0}
#checkout-flow .process-step{display:flex;align-items:center;gap:13px;position:relative;min-width:0;padding-right:20px}
#checkout-flow .process-step:last-child{padding-right:0}
#checkout-flow .process-step::before{display:none}
#checkout-flow .step-status{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #2c2c30;border-radius:50%;background:#101012;color:#8f8f94;transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease}
#checkout-flow .step-status>span,#checkout-flow .step-status>svg{grid-area:1/1;opacity:0;transform:scale(.88);transition:opacity 150ms ease,transform 180ms ease;pointer-events:none}
#checkout-flow .step-status>svg{width:24px;height:24px}
#checkout-flow .step-number{font-size:15px;font-weight:400;font-variant-numeric:tabular-nums}
#checkout-flow .step-copy{font-size:15px;line-height:1.6;color:#8f8f94}
#checkout-flow .step-arrow{width:19px;height:19px;position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:#646469;transition:color 180ms ease}
#checkout-flow [data-state="waiting"] .step-number,#checkout-flow [data-state="active"] .step-clock,#checkout-flow [data-state="complete"] .step-check{opacity:1;transform:scale(1)}
#checkout-flow [data-state="active"] .step-status{background:rgba(129,164,214,.08);border-color:rgba(129,164,214,.16);color:var(--checkout-blue)}
#checkout-flow [data-state="complete"] .step-status{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.16);color:var(--checkout-green)}
#checkout-flow [data-state="complete"] .step-arrow{color:#52655b}
#checkout-flow [data-state="active"] .clock-hand{transform-origin:12px 14px;animation:checkout-clock-turn 2s linear infinite}
#checkout-flow[data-paused="true"] .clock-hand{animation-play-state:paused}
@keyframes checkout-clock-turn{to{transform:rotate(360deg)}}
@media(max-width:1000px){#checkout-flow{gap:22px}#checkout-flow .process-label{flex-basis:94px;font-size:9px}#checkout-flow .process-steps{gap:25px}#checkout-flow .process-step{gap:10px;padding-right:12px}#checkout-flow .step-copy{font-size:13px}#checkout-flow .step-arrow{right:-15px;width:17px}#checkout-flow .step-status{width:40px;height:40px;flex-basis:40px}#checkout-flow .step-status>svg{width:22px;height:22px}}
@media(max-width:700px){#checkout-flow{display:block;margin-top:26px;padding:26px 0 30px}#checkout-flow .process-label{font-size:10px;margin-bottom:25px}#checkout-flow .process-label br{display:none}#checkout-flow .process-steps{grid-template-columns:1fr;gap:26px}#checkout-flow .process-step{padding-right:0;gap:15px;min-height:44px}#checkout-flow .step-copy{font-size:15px;max-width:290px}#checkout-flow .step-status{width:44px;height:44px;flex-basis:44px}#checkout-flow .step-status>svg{width:24px;height:24px}#checkout-flow .step-arrow{display:none}}
@media(prefers-reduced-motion:reduce){#checkout-flow *,#checkout-flow *::before,#checkout-flow *::after{animation:none!important;transition:none!important}}