/* Shared checkout route: cart -> delivery/contact -> payment. */
.checkout-progress{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 18px;
  color:#675779;
  font-size:13px;
  font-weight:850;
}
.checkout-progress-step{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#675779;
  text-decoration:none;
}
.checkout-progress-step.done{color:#6849d7}
.checkout-progress-step.current{color:#21143c}
.checkout-progress-step.upcoming{color:#7c7089}
.checkout-progress-step.failed{color:#a52f50}
.checkout-progress-number{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:26px;
  height:26px;
  border:1px solid #8b65ff3d;
  border-radius:999px;
  background:#fffdf9;
  color:#6849d7;
  box-shadow:0 5px 14px #38235a12;
  font-size:12px;
}
.checkout-progress-step.done .checkout-progress-number{
  border-color:#82cfa470;
  background:#e9fff5;
  color:#28725b;
}
.checkout-progress-step.current .checkout-progress-number{
  border-color:#8b65ff85;
  background:#f0e9ff;
  color:#593ca8;
  box-shadow:0 0 0 3px #8b65ff12;
}
.checkout-progress-step.failed .checkout-progress-number{
  border-color:#d94f706b;
  background:#fff0f4;
  color:#a52f50;
}
.checkout-progress-arrow{
  color:#a394b4;
  font-size:14px;
}
a.checkout-progress-step.done:hover{color:#43259f}

@media(max-width:640px){
  .checkout-progress{
    align-items:stretch;
    gap:6px;
    font-size:11px;
  }
  .checkout-progress-step{
    flex:1 1 0;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    line-height:1.25;
  }
  .checkout-progress-arrow{
    flex:0 0 auto;
    align-self:flex-start;
    padding-top:6px;
  }
}