/* ==========================================================================
   步骤条组件 (Steps)
   ========================================================================== */

.zuoekai-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

/* 每一个步骤项 */
.zuoekai-steps__item {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.zuoekai-steps__item:last-child {
  flex: none; /* 最后一项不伸缩 */
}

/* 步骤图标/数字 */
.zuoekai-steps__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--zuoekai-color-surface-panel);
  border: 2px solid var(--zuoekai-color-border);
  color: var(--zuoekai-color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 1;
  transition: all 0.3s;
}

/* 步骤内容 */
.zuoekai-steps__content {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}

.zuoekai-steps__title {
  font-weight: 500;
  color: var(--zuoekai-color-text-secondary);
  transition: color 0.3s;
}

.zuoekai-steps__description {
  font-size: 12px;
  color: var(--zuoekai-color-text-muted);
  margin-top: 2px;
}

/* 连接线 */
.zuoekai-steps__line {
  flex: 1;
  height: 2px;
  background-color: var(--zuoekai-color-border);
  margin: 0 16px;
  transition: background-color 0.3s;
}

/* --- 状态 (States) --- */

/* 激活状态 (Active) - 当前正在进行的步骤 */
.zuoekai-steps__item--active .zuoekai-steps__icon {
  background-color: var(--zuoekai-color-brand-600);
  border-color: var(--zuoekai-color-brand-600);
  color: white;
}

.zuoekai-steps__item--active .zuoekai-steps__title {
  color: var(--zuoekai-color-text);
  font-weight: 600;
}

/* 完成状态 (Completed) - 已经完成的步骤 */
.zuoekai-steps__item--completed .zuoekai-steps__icon {
  background-color: var(--zuoekai-color-surface-panel);
  border-color: var(--zuoekai-color-brand-600);
  color: var(--zuoekai-color-brand-600);
}

.zuoekai-steps__item--completed .zuoekai-steps__title {
  color: var(--zuoekai-color-text);
}

.zuoekai-steps__item--completed .zuoekai-steps__line {
  background-color: var(--zuoekai-color-brand-600);
}

/* 错误状态 (Error) */
.zuoekai-steps__item--error .zuoekai-steps__icon {
  background-color: var(--zuoekai-color-error-600);
  border-color: var(--zuoekai-color-error-600);
  color: white;
}

.zuoekai-steps__item--error .zuoekai-steps__title {
  color: var(--zuoekai-color-error-600);
}

/* --- 变体 (Variants) --- */

/* 垂直步骤条 (Vertical) */
.zuoekai-steps--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.zuoekai-steps--vertical .zuoekai-steps__item {
  width: 100%;
  flex: none;
  padding-bottom: 32px; /* 间距 */
  align-items: flex-start; /* 顶部对齐 */
}

.zuoekai-steps--vertical .zuoekai-steps__item:last-child {
  padding-bottom: 0;
}

.zuoekai-steps--vertical .zuoekai-steps__line {
  position: absolute;
  top: 36px; /* Icon height + gap */
  left: 15px; /* Center of icon (32/2 - 1) */
  width: 2px;
  height: calc(100% - 36px);
  margin: 0;
}

.zuoekai-steps--vertical .zuoekai-steps__content {
  margin-top: 4px; /* Align with icon center visually */
}

/* 简单点状 (Dot) */
.zuoekai-steps--dot .zuoekai-steps__icon {
  width: 12px;
  height: 12px;
  border: 2px solid var(--zuoekai-color-border);
  background-color: transparent;
  margin-top: 6px; /* Vertical align with text */
}

.zuoekai-steps--dot .zuoekai-steps__item--active .zuoekai-steps__icon {
  background-color: var(--zuoekai-color-brand-600);
  border-color: var(--zuoekai-color-brand-600);
  transform: scale(1.2);
}

.zuoekai-steps--dot .zuoekai-steps__item--completed .zuoekai-steps__icon {
  background-color: var(--zuoekai-color-brand-600);
  border-color: var(--zuoekai-color-brand-600);
}

.zuoekai-steps--dot .zuoekai-steps__content {
  margin-left: 8px;
}

/* ==========================================================================
   响应式适配 - 小屏幕设备
   水平步骤条在 640px 以下自动切换为纵向布局，
   避免内容溢出和连接线挤压。
   ========================================================================== */
@media (max-width: 640px) {
  /* 小屏幕下水平步骤条自动转为纵向 */
  .zuoekai-steps:not(.zuoekai-steps--vertical) {
    flex-direction: column;
    align-items: flex-start;
  }

  .zuoekai-steps:not(.zuoekai-steps--vertical) .zuoekai-steps__item {
    width: 100%;
    flex: none;
    padding-bottom: 24px;
    align-items: flex-start;
  }

  .zuoekai-steps:not(.zuoekai-steps--vertical) .zuoekai-steps__item:last-child {
    padding-bottom: 0;
  }

  /* 连接线从水平改为纵向 */
  .zuoekai-steps:not(.zuoekai-steps--vertical) .zuoekai-steps__line {
    position: absolute;
    top: 36px;
    left: 15px;
    width: 2px;
    height: calc(100% - 36px);
    margin: 0;
  }
}