/* ==========================================================================
   Order wizard stepper - the numbered progress row above the form.
   Four steps: Calculate Price, Paper Details, Extras, Review & Pay.

   The first two steps keep the class hooks the existing validation.js drives
   (.stepToComeOne / .stepToComeTwo, .activeProg, .activeProgComplete), so the
   old script keeps working untouched; order-stepper.js mirrors the remaining
   two off the panel that currently has .show.
   ========================================================================== */

/* The legacy .allStepsName rules in css/order-new.css still apply (the class is
   kept so validation.js keeps finding its hooks), so the layout bits it sets -
   a 502px cap, the bottom rule under each heading, the coloured .stepNo text -
   are reset here first. Selectors are doubled up to out-specify them. */
.allStepsName.ordSteps {
  max-width: none;
  width: 100%;
  margin: 28px auto 34px;
  justify-content: center;
}
.allStepsName.ordSteps h2.ordStep {
  display: inline-flex;
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 15px;
  line-height: 1.3;
}
/* Idle numerals sit on the light-grey fill, so they need a readable slate -
   white is only right once the circle is filled with teal or green. The
   legacy sheet colours .stepNo, hence the doubled-up selectors. */
.allStepsName.ordSteps h2.ordStep .ordStep-num { color: var(--ost-idle-fg); }
.allStepsName.ordSteps h2.ordStep.activeProg .ordStep-num,
.allStepsName.ordSteps h2.ordStep.is-active .ordStep-num,
.allStepsName.ordSteps h2.ordStep.activeProgComplete .ordStep-num,
.allStepsName.ordSteps h2.ordStep.is-done .ordStep-num { color: #fff; }

.ordSteps {
  --ost-teal: #05ADA3;
  --ost-teal-d: #048E86;
  --ost-done: #10B981;
  --ost-idle: #E5E7EB;
  --ost-idle-fg: #64748B;
  --ost-fg: #111827;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin: 0 auto 8px;
  padding: 18px 16px;
  list-style: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ordStep {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ost-idle-fg);
  white-space: nowrap;
  transition: color .18s;
}

.ordStep-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ost-idle);
  color: var(--ost-idle-fg);
  font-size: 14px;
  font-weight: 600;
  transition: background .18s;
}

.ordStep-num svg { width: 16px; height: 16px; display: none; }

/* current step */
.ordStep.activeProg,
.ordStep.is-active { color: var(--ost-fg); font-weight: 600; }
.ordStep.activeProg .ordStep-num,
.ordStep.is-active .ordStep-num { background: var(--ost-teal); }

/* finished step - the number is swapped for a tick */
.ordStep.activeProgComplete,
.ordStep.is-done { color: var(--ost-fg); }
.ordStep.activeProgComplete .ordStep-num,
.ordStep.is-done .ordStep-num { background: var(--ost-done); }
.ordStep.activeProgComplete .ordStep-num span,
.ordStep.is-done .ordStep-num span { display: none; }
.ordStep.activeProgComplete .ordStep-num svg,
.ordStep.is-done .ordStep-num svg { display: block; }

@media (max-width: 760px) {
  .ordSteps { gap: 20px; padding: 14px 8px; align-items: flex-start; }
  /* the 120px cap needs the label to wrap, or it just overflows the step */
  .ordStep { padding: 0; font-size: 13px; gap: 8px; max-width: 120px; white-space: normal; }
  .ordStep-num { width: 32px; height: 32px; font-size: 13px; }
}

/* below phone width the labels would wrap two-per-line and read as a list,
   so only the current step keeps its label */
@media (max-width: 460px) {
  .ordStep-label { display: none; }
  .ordStep.activeProg .ordStep-label,
  .ordStep.is-active .ordStep-label { display: inline; }
  .ordStep { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ordStep, .ordStep-num { transition: none; }
}