.order-tracker-result {
  max-width: 700px;
  margin-top: 40px;
  padding: 30px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.order-tracker-header {
  margin-bottom: 35px;
}

.order-tracker-header h2 {
  margin: 0 0 15px;
}

.order-tracker-details {
  padding: 15px 20px;
  background: #f7f7f7;
  border-radius: 8px;
}

.order-tracker-details > div + div {
  margin-top: 5px;
}


/*
 * Timeline.
 */
.order-tracking-timeline {
  position: relative;
}

.tracking-step {
  position: relative;
  display: flex;
  min-height: 120px;
}


/*
 * Marker section.
 */
.tracking-marker {
  position: relative;
  flex: 0 0 40px;
}


/*
 * Timeline circle.
 */
.tracking-circle {
  position: relative;
  z-index: 2;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border: 3px solid #b5b5b5;
  border-radius: 50%;
  background: #fff;
}


/*
 * Vertical connecting line.
 */
.tracking-line {
  position: absolute;
  z-index: 1;
  top: 25px;
  bottom: 0;
  left: 9px;
  width: 3px;
  background: #d5d5d5;
}


/*
 * Tracking content.
 */
.tracking-content {
  flex: 1;
  padding: 0 0 30px 15px;
}

.tracking-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
}

.tracking-description {
  margin-bottom: 5px;
  color: #555;
}

.tracking-date {
  font-size: 14px;
  color: #777;
}


/*
 * Completed steps.
 */
.tracking-step--completed .tracking-circle {
  border-color: #28a745;
  background: #28a745;
}

.tracking-step--completed .tracking-line {
  background: #28a745;
}


/*
 * Current step.
 */
.tracking-step--current .tracking-circle {
  width: 22px;
  height: 22px;
  margin-left: -2px;
  margin-top: 3px;
  border: 4px solid #ff0000;
  background: #fff;
}

.tracking-step--current .tracking-title {
  color: #d60000;
}

.tracking-step--current .tracking-line {
  background: #d5d5d5;
}


/*
 * Pending steps.
 */
.tracking-step--pending .tracking-circle {
  border-color: #b5b5b5;
  background: #fff;
}

.tracking-step--pending .tracking-title,
.tracking-step--pending .tracking-description,
.tracking-step--pending .tracking-date {
  color: #999;
}

/*
 * Canceled order state.
 */
.tracking-step--canceled .tracking-circle {
  border-color: #dc3545;
  background: #dc3545;
}

.tracking-step--canceled .tracking-title {
  color: #dc3545;
}

.tracking-step--canceled .tracking-description {
  color: #dc3545;
}

.tracking-step--canceled .tracking-date {
  color: #dc3545;
}

/*
 * Shipping details.
 */
.tracking-shipping-details {
  margin: 12px 0;
  padding: 12px 15px;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}

.tracking-shipping-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tracking-shipping-item + .tracking-shipping-item {
  margin-top: 6px;
}

.tracking-shipping-item strong {
  font-weight: 600;
}

/*
 * Mobile.
 */
@media (max-width: 600px) {

  .order-tracker-result {
    padding: 20px 15px;
  }

  .tracking-step {
    min-height: 110px;
  }

  .tracking-title {
    font-size: 18px;
  }

}