/* ===========================
   Order Steps
=========================== */
#order_steps {
  padding: 0.85rem 0 0.35rem;
  background: transparent;
}

#order_steps .order-step-bar {
  --step-accent: #071653;
  --step-border: #d8deea;
  --step-text: #172033;
  --step-muted: #6f7a8a;
  --step-line: #c9d0dc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.65rem 0;
  background: transparent;
}

#order_steps .step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.65rem;
  min-width: 0;
  flex: 0 1 auto;
}

#order_steps .step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
}

#order_steps .circle {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid var(--step-border);
  background: #fff;
  color: var(--step-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

#order_steps .step-icon {
  width: 2rem;
  min-width: 2rem;
  display: flex;
  justify-content: center;
  color: #1f2937;
  font-size: 1.35rem;
  line-height: 1;
}

#order_steps .step-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

#order_steps .label {
  color: var(--step-text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

#order_steps .caption {
  color: var(--step-muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

#order_steps .step.is-active .circle {
  border-color: var(--step-accent);
  background: var(--step-accent);
  color: #fff;
}

#order_steps .step.is-active .label,
#order_steps .step.is-active .step-icon {
  color: var(--step-accent);
}

#order_steps .step.is-complete .circle {
  border-color: var(--step-accent);
  background: var(--step-accent);
  color: #fff;
}

#order_steps .step.is-complete .label {
  color: var(--step-text);
}

#order_steps .step.is-upcoming .label {
  color: #6d817d;
}

#order_steps .step-connector {
  width: 4.2rem;
  min-width: 2.4rem;
  border-top: 2px dashed var(--step-line);
  opacity: 0.9;
}

@media (max-width: 991.98px) {
  #order_steps .order-step-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 640px;
    padding: 1rem;
  }

  #order_steps .step {
    justify-content: flex-start;
  }

  #order_steps .step-connector {
    display: none;
  }
}

@media (max-width: 575.98px) {
  #order_steps {
    padding: 0.5rem 0 0.25rem;
  }

  #order_steps .order-step-bar {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    max-width: 100%;
    padding: 0.95rem;
  }

  #order_steps .step {
    gap: 0.65rem;
    padding: 0;
    justify-content: flex-start;
  }

  #order_steps .circle {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.68rem;
  }

  #order_steps .label {
    font-size: 0.86rem;
  }

  #order_steps .caption {
    font-size: 0.68rem;
  }
}