/* WC Order Progress Stepper
 * Horizontal stepper, collapses to vertical on small screens.
 * Colours use CSS custom properties so you can override per-theme.
 */

.wcop-stepper {
  --wcop-done: #2e7d32;
  --wcop-current: #1565c0;
  --wcop-upcoming: #c4c8cf;
  --wcop-line: #e0e3e8;
  --wcop-text: #1f2530;
  --wcop-muted: #6b7280;
  --wcop-node-size: 38px;

  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 1.5em 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--wcop-text);
}

.wcop-step {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  padding: 0 6px;
  min-width: 0;
}

/* Connector line sits behind, running left from each node to the previous. */
.wcop-step__connector {
  position: absolute;
  top: calc(var(--wcop-node-size) / 2);
  left: -50%;
  right: 50%;
  height: 3px;
  background: var(--wcop-line);
  z-index: 0;
}

.wcop-step:first-child .wcop-step__connector {
  display: none;
}

.wcop-step--done .wcop-step__connector,
.wcop-step--current .wcop-step__connector {
  background: var(--wcop-done);
}

.wcop-step__node {
  position: relative;
  z-index: 1;
  width: var(--wcop-node-size);
  height: var(--wcop-node-size);
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--wcop-upcoming);
  box-shadow: 0 0 0 4px #fff;
}

.wcop-step--done .wcop-step__node {
  background: var(--wcop-done);
}

.wcop-step--current .wcop-step__node {
  background: var(--wcop-current);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px rgba(21, 101, 192, 0.25);
  animation: wcop-pulse 2s ease-out infinite;
}

/* Gentle attention pulse on the active step. The 4px white ring is kept as a
   static base in the keyframes so it never disappears mid-animation. */
@keyframes wcop-pulse {
  0% {
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 7px rgba(21, 101, 192, 0.35);
  }
  70% {
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 14px rgba(21, 101, 192, 0);
  }
  100% {
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 14px rgba(21, 101, 192, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wcop-step--current .wcop-step__node {
    animation: none;
  }
}

.wcop-step__check {
  font-size: 18px;
  line-height: 1;
}

.wcop-step__icon {
  font-size: 18px;
  line-height: 1;
}

.wcop-step__label {
  font-weight: 600;
  margin-bottom: 2px;
}

.wcop-step__date {
  font-size: 12px;
  color: var(--wcop-muted);
  margin-bottom: 4px;
}

.wcop-step__text {
  font-size: 13px;
  color: var(--wcop-muted);
}

.wcop-step--current .wcop-step__label {
  color: var(--wcop-current);
}

/* Vertical layout on narrow screens. */
@media (max-width: 600px) {
  .wcop-stepper {
    flex-direction: column;
    gap: 0;
    padding: 0 20px;
  }

  .wcop-step {
    display: grid;
    grid-template-columns: var(--wcop-node-size) 1fr;
    gap: 0 14px;
    text-align: left;
    padding: 0 0 18px 0;
    min-height: 80px;
  }

  .wcop-step__node {
    margin: 0;
    grid-row: span 2;
  }

  .wcop-step__connector {
    top: var(--wcop-node-size);
    bottom: -18px;
    left: calc(var(--wcop-node-size) / 2 - 1.5px);
    right: auto;
    width: 3px;
    height: auto;
  }

  /* Desktop hides the FIRST step's connector because there it points
     backward (to the previous node). On mobile the connector points
     DOWNWARD to the next step, so the first step needs its line and only
     the last step should hide it. */
  .wcop-step:first-child .wcop-step__connector {
    display: block;
  }

  .wcop-step:last-child .wcop-step__connector {
    display: none;
  }

  .wcop-step__body {
    align-self: center;
  }
}

/* ---- Public lookup form ---- */
.wcop-lookup {
  margin: 1.5em auto;
  padding: 0 2em;
}

.wcop-lookup__form + .wcop-lookup__result {
  margin-top: 25px;
}

.wcop-lookup__form {
  max-width: 500px;
  margin: 0 auto;
}

.wcop-lookup__field {
  margin: 0 0 12px;
}

.wcop-lookup__field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}

.wcop-lookup__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #c4c8cf;
  border-radius: 6px;
  font-size: 15px;
}

.wcop-lookup__field input:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

.wcop-lookup__message {
  margin-top: 8px;
  font-size: 14px;
  color: #6b7280;
}

.wcop-lookup__message--error {
  color: #c62828;
}

.wcop-lookup__result:not(:empty) {
  margin-top: 8px;
}

/* When a result is shown, the stepper inside is full width regardless of the
   form's narrower column. */
.wcop-lookup__result .wcop-stepper {
  max-width: none;
}

/* ---- Courier tracking button ----
   Selectors are deliberately specific (element + class) so the theme's own
   anchor rules do not win and turn the button back into a plain link. */
.wcop-track {
  --wcop-track-bg: #1565c0;
  --wcop-track-fg: #ffffff;

  display: block;
  text-align: center;
  margin: 1.5em 0 0.5em;
}

.wcop-track a.wcop-track__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0 auto 10px;
  padding: 12px 26px;
  border: 0;
  border-radius: 8px;
  background: var(--wcop-track-bg);
  color: var(--wcop-track-fg);
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 4px 10px -3px rgba(21, 101, 192, 0.45);
  transition: filter 0.15s ease;
}

.wcop-track a.wcop-track__link:last-child {
  margin-bottom: 0;
}

.wcop-track a.wcop-track__link:hover,
.wcop-track a.wcop-track__link:focus {
  background: var(--wcop-track-bg);
  color: var(--wcop-track-fg);
  text-decoration: none;
  filter: brightness(1.1);
}

.wcop-track a.wcop-track__link:focus-visible {
  outline: 3px solid rgba(21, 101, 192, 0.4);
  outline-offset: 2px;
}

.wcop-track__code {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.wcop-track__plain {
  margin: 0;
  font-size: 14px;
  color: var(--wcop-muted, #6b7280);
}

.wcop-track__carrier {
  font-weight: 600;
}

/* ---- Terminal-state notice (cancelled / failed / refunded) ---- */
.wcop-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.5em 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.4;
  border: 1px solid #f0c8c8;
  background: #fdf4f4;
  color: #8a2b2b;
}

.wcop-notice__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: #c62828;
}

.wcop-notice--refunded {
  border-color: #d6c8a8;
  background: #fbf7ec;
  color: #7a5b1e;
}

.wcop-notice--refunded .wcop-notice__icon {
  background: #b8860b;
}

.wcop-notice__text {
  font-weight: 600;
}

.wcop-lookup__submit {
  width: 100%;
}

@media screen and (min-width: 600px) {
  .wcop-lookup__form + .wcop-lookup__result {
    margin-top: 40px;
  }
}

@media screen and (max-width: 599px) {
  .wcop-lookup__form + .wcop-lookup__result {
    margin-top: 25px;
  }
}