.service-order-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-icon {
  width: 20px;
  height: 20px;
  border-radius: $uni-border-radius-circle;
  background-color: #ffa500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.order-title {
  font-size: 16px;
  color: $uni-text-color;
}

.order-status {
  font-size: $uni-font-size-base;
  padding: 5px 10px;
  border-radius: 15px;
}

.status-canceled {
  color: $uni-text-color-grey;
  border: 1px solid #999;
}

.status-pending {
  color: #ff4d94;
  border: 1px solid #ff4d94;
}

.status-refundProcessing {
  color: #ff9900;
  border: 1px solid #ff9900;
}

.status-refunded {
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

.status-completed {
  color: #28a745;
  border: 1px solid #28a745;
}

.order-details {
  margin-top: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.detail-label {
  font-size: $uni-font-size-base;
  color: #666;
  margin-right: 10px;
}

.detail-value {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
}