/* ============================================================
   星火UI 组件库
   所有通用组件的样式定义
   ============================================================ */

/* ========== 1. 按钮组件 ========== */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ui-spacing-4);
  height: 36px;
  font-size: var(--ui-font-size-base);
  font-weight: var(--ui-font-weight-medium);
  border-radius: var(--ui-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ui-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.ui-btn:active {
  transform: scale(0.97);
}

.ui-btn-disabled,
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 按钮类型 */
.ui-btn-primary {
  background: var(--ui-gradient-primary);
  color: var(--ui-text-inverse);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

.ui-btn-primary:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.45);
  color: var(--ui-text-inverse);
}

.ui-btn-default {
  background-color: var(--ui-bg-card);
  color: var(--ui-text-regular);
  border-color: var(--ui-border-color);
}

.ui-btn-default:hover {
  border-color: var(--ui-primary-400);
  color: var(--ui-primary-500);
}

.ui-btn-danger {
  background-color: var(--ui-danger-500);
  color: var(--ui-text-inverse);
}

.ui-btn-danger:hover {
  background-color: var(--ui-danger-600);
  color: var(--ui-text-inverse);
}

.ui-btn-success {
  background-color: var(--ui-success-500);
  color: var(--ui-text-inverse);
}

.ui-btn-success:hover {
  background-color: var(--ui-success-600);
  color: var(--ui-text-inverse);
}

.ui-btn-warning {
  background-color: var(--ui-warning-500);
  color: var(--ui-text-inverse);
}

.ui-btn-warning:hover {
  background-color: var(--ui-warning-600);
  color: var(--ui-text-inverse);
}

.ui-btn-text {
  background: none;
  color: var(--ui-primary-500);
  border-color: transparent;
  padding: 0 var(--ui-spacing-2);
  height: auto;
}

.ui-btn-text:hover {
  color: var(--ui-primary-600);
}

/* 按钮尺寸 */
.ui-btn-sm {
  height: 28px;
  padding: 0 var(--ui-spacing-3);
  font-size: var(--ui-font-size-sm);
  border-radius: var(--ui-radius-sm);
}

.ui-btn-md {
  height: 36px;
  padding: 0 var(--ui-spacing-4);
  font-size: var(--ui-font-size-base);
}

.ui-btn-lg {
  height: 44px;
  padding: 0 var(--ui-spacing-6);
  font-size: var(--ui-font-size-lg);
  border-radius: var(--ui-radius-lg);
}

.ui-btn-block {
  display: flex;
  width: 100%;
  height: 44px;
  font-size: var(--ui-font-size-lg);
  border-radius: var(--ui-c-btn-radius);
}

/* 圆角按钮（C端常用） */
.ui-btn-rounded {
  border-radius: var(--ui-radius-full);
}

/* 按钮图标 */
.ui-btn-icon {
  margin-right: var(--ui-spacing-1);
  font-size: 1.1em;
}

/* ========== 2. 卡片组件 ========== */
.ui-card {
  background-color: var(--ui-bg-card);
  border-radius: var(--ui-c-card-radius);
  /* 微信小程序平层风格：淡边框 + 极淡阴影或无阴影，靠底色区分层次 */
  border: 1px solid var(--ui-gray-200);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: var(--ui-spacing-4);
  transition: box-shadow var(--ui-transition-normal);
}

.ui-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ui-card-plain {
  box-shadow: none;
  border: 1px solid var(--ui-border-color);
}

.ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-spacing-4) var(--ui-spacing-4) var(--ui-spacing-3);
  border-bottom: 1px solid var(--ui-border-light);
}

.ui-card-title {
  font-size: var(--ui-title-card-size);      /* 微信风格：16px */
  font-weight: var(--ui-title-card-weight);  /* 微信风格：500 */
  color: var(--ui-title-card-color);         /* 微信风格：#323233 */
  margin: 0;
  line-height: var(--ui-title-card-line-height, 1.4);
}

.ui-card-more {
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-secondary);
}

.ui-card-more:hover {
  color: var(--ui-primary-500);
}

.ui-card-body {
  padding: var(--ui-spacing-4);
}

.ui-card-footer {
  padding: var(--ui-spacing-3) var(--ui-spacing-4);
  border-top: 1px solid var(--ui-border-light);
  background-color: var(--ui-gray-50);
}

/* 卡片padding变体 */
.ui-card-padding-sm .ui-card-body { padding: var(--ui-spacing-3); }
.ui-card-padding-lg .ui-card-body { padding: var(--ui-spacing-6); }

/* ========== 3. 列表组件 ========== */
.ui-list {
  background-color: var(--ui-bg-card);
  border-radius: var(--ui-c-card-radius); /* 微信风格统一12px */
  border: 1px solid var(--ui-gray-200);
  overflow: hidden;
}

.ui-list-item {
  display: flex;
  align-items: center;
  padding: var(--ui-spacing-3) var(--ui-spacing-4);
  border-bottom: 1px solid var(--ui-border-light);
  transition: background-color var(--ui-transition-fast);
  color: var(--ui-text-primary);
  text-decoration: none;
}

.ui-list-item:last-child {
  border-bottom: none;
}

.ui-list-item:active {
  background-color: var(--ui-gray-50);
}

.ui-list-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: var(--ui-radius-md);
  background-color: var(--ui-primary-50);
  color: var(--ui-primary-500);
  margin-right: var(--ui-spacing-3);
  flex-shrink: 0;
}

.ui-list-content {
  flex: 1;
  min-width: 0;
}

.ui-list-title {
  font-size: var(--ui-title-section-size);   /* 微信风格：14px */
  font-weight: var(--ui-title-section-weight); /* 微信风格：500 */
  color: var(--ui-title-section-color);      /* 微信风格：#323233 */
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-list-desc {
  font-size: var(--ui-title-sub-size);       /* 微信风格：12px */
  color: var(--ui-title-sub-color);          /* 微信风格：#969799 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-list-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--ui-spacing-2);
}

.ui-list-right-text {
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-secondary);
  margin-right: var(--ui-spacing-1);
}

.ui-list-right-icon {
  font-size: 16px;
}

.ui-list-arrow {
  color: var(--ui-gray-400);
  font-size: 20px;
  margin-left: var(--ui-spacing-1);
  line-height: 1;
}

/* ========== 4. 表单组件 ========== */
.ui-form-item {
  margin-bottom: var(--ui-spacing-4);
}

.ui-form-label {
  display: block;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  color: var(--ui-text-regular);
  margin-bottom: var(--ui-spacing-2);
}

.ui-form-required {
  color: var(--ui-danger-500);
  margin-left: 2px;
}

.ui-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--ui-spacing-3);
  font-size: var(--ui-font-size-base);
  color: var(--ui-text-primary);
  background-color: var(--ui-bg-card);
  border: 1px solid var(--ui-border-color);
  border-radius: var(--ui-radius-md);
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-input:focus {
  border-color: var(--ui-primary-400);
  box-shadow: 0 0 0 3px var(--ui-primary-100);
}

.ui-input::placeholder {
  color: var(--ui-text-placeholder);
}

.ui-input:disabled {
  background-color: var(--ui-bg-disabled);
  color: var(--ui-text-disabled);
  cursor: not-allowed;
}

/* textarea */
.ui-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--ui-spacing-2) var(--ui-spacing-3);
  font-size: var(--ui-font-size-base);
  color: var(--ui-text-primary);
  background-color: var(--ui-bg-card);
  border: 1px solid var(--ui-border-color);
  border-radius: var(--ui-radius-md);
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
  line-height: 1.6;
}

.ui-textarea:focus {
  border-color: var(--ui-primary-400);
  box-shadow: 0 0 0 3px var(--ui-primary-100);
}

/* select */
.ui-select {
  width: 100%;
  height: 40px;
  padding: 0 var(--ui-spacing-3);
  font-size: var(--ui-font-size-base);
  color: var(--ui-text-primary);
  background-color: var(--ui-bg-card);
  border: 1px solid var(--ui-border-color);
  border-radius: var(--ui-radius-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ui-spacing-3) center;
  padding-right: var(--ui-spacing-8);
}

/* 表单行（图标+输入） */
.ui-input-group {
  display: flex;
  align-items: center;
  background-color: var(--ui-bg-card);
  border: 1px solid var(--ui-border-color);
  border-radius: var(--ui-radius-md);
  overflow: hidden;
}

.ui-input-group:focus-within {
  border-color: var(--ui-primary-400);
  box-shadow: 0 0 0 3px var(--ui-primary-100);
}

.ui-input-group .ui-input {
  border: none;
  flex: 1;
  box-shadow: none;
}

.ui-input-group-icon {
  padding: 0 var(--ui-spacing-3);
  color: var(--ui-text-secondary);
  font-size: 16px;
}

/* ========== 5. 标签/徽章 ========== */
.ui-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  border-radius: var(--ui-radius-full);
  line-height: 1.5;
  white-space: nowrap;
}

.ui-tag-default {
  background-color: var(--ui-gray-100);
  color: var(--ui-gray-600);
}

.ui-tag-primary {
  background-color: var(--ui-primary-100);
  color: var(--ui-primary-600);
}

.ui-tag-success {
  background-color: var(--ui-success-100);
  color: var(--ui-success-600);
}

.ui-tag-warning {
  background-color: var(--ui-warning-100);
  color: var(--ui-warning-600);
}

.ui-tag-danger {
  background-color: var(--ui-danger-100);
  color: var(--ui-danger-600);
}

.ui-tag-info {
  background-color: var(--ui-info-100);
  color: var(--ui-info-600);
}

/* 实心标签 */
.ui-tag-solid.ui-tag-primary {
  background-color: var(--ui-primary-500);
  color: var(--ui-text-inverse);
}

.ui-tag-solid.ui-tag-success {
  background-color: var(--ui-success-500);
  color: var(--ui-text-inverse);
}

/* ========== 6. 头像组件 ========== */
.ui-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ui-gradient-primary);
  color: var(--ui-text-inverse);
  font-weight: var(--ui-font-weight-semibold);
  flex-shrink: 0;
}

.ui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: var(--ui-font-size-sm);
}

.ui-avatar-md {
  width: 40px;
  height: 40px;
  font-size: var(--ui-font-size-lg);
}

.ui-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--ui-font-size-2xl);
}

.ui-avatar-xl {
  width: 80px;
  height: 80px;
  font-size: var(--ui-font-size-3xl);
}

/* ========== 7. 进度条 ========== */
.ui-progress {
  width: 100%;
}

.ui-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--ui-gray-100);
  border-radius: var(--ui-radius-full);
  overflow: hidden;
}

.ui-progress-fill {
  height: 100%;
  background: var(--ui-gradient-primary);
  border-radius: var(--ui-radius-full);
  transition: width var(--ui-transition-slow);
}

.ui-progress-success .ui-progress-fill {
  background: var(--ui-gradient-success);
}

.ui-progress-warning .ui-progress-fill {
  background: var(--ui-gradient-warning);
}

.ui-progress-danger .ui-progress-fill {
  background: var(--ui-gradient-danger);
}

.ui-progress-text {
  margin-top: var(--ui-spacing-2);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-secondary);
  text-align: center;
}

/* ========== 8. 价格组件 ========== */
.ui-price {
  font-weight: var(--ui-font-weight-bold);
  line-height: 1;
}

.ui-price-danger { color: var(--ui-danger-500); }
.ui-price-primary { color: var(--ui-primary-500); }
.ui-price-success { color: var(--ui-success-500); }
.ui-price-warning { color: var(--ui-warning-500); }

.ui-price-sm { font-size: var(--ui-font-size-base); }
.ui-price-md { font-size: var(--ui-font-size-xl); }
.ui-price-lg { font-size: var(--ui-font-size-3xl); }

/* ========== 9. 空状态 ========== */
.ui-empty {
  padding: var(--ui-spacing-12) var(--ui-spacing-4);
  text-align: center;
}

.ui-empty-icon {
  font-size: 48px;
  margin-bottom: var(--ui-spacing-3);
  opacity: 0.5;
}

.ui-empty-text {
  font-size: var(--ui-font-size-base);
  color: var(--ui-text-secondary);
  margin-bottom: var(--ui-spacing-4);
}

.ui-empty-btn {
  margin-top: var(--ui-spacing-2);
}

/* ========== 10. 分割线 ========== */
.ui-divider {
  height: 1px;
  background-color: var(--ui-border-light);
  margin: var(--ui-spacing-4) 0;
}

.ui-divider-text {
  display: flex;
  align-items: center;
  margin: var(--ui-spacing-4) 0;
  color: var(--ui-text-secondary);
  font-size: var(--ui-font-size-sm);
}

.ui-divider-text::before,
.ui-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--ui-border-light);
}

.ui-divider-text::before {
  margin-right: var(--ui-spacing-3);
}

.ui-divider-text::after {
  margin-left: var(--ui-spacing-3);
}

/* ========== 11. 徽标/角标 ========== */
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: var(--ui-font-weight-bold);
  line-height: 1;
  color: var(--ui-text-inverse);
  background-color: var(--ui-danger-500);
  border-radius: var(--ui-radius-full);
  white-space: nowrap;
}

.ui-badge-dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

/* ========== 12. 开关 ========== */
.ui-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.ui-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ui-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ui-gray-300);
  transition: var(--ui-transition-fast);
  border-radius: var(--ui-radius-full);
}

.ui-switch-slider::before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: var(--ui-transition-fast);
  border-radius: 50%;
  box-shadow: var(--ui-shadow-sm);
}

.ui-switch input:checked + .ui-switch-slider {
  background-color: var(--ui-primary-500);
}

.ui-switch input:checked + .ui-switch-slider::before {
  transform: translateX(20px);
}

/* ========== 13. 弹窗/模态框 ========== */
.ui-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ui-bg-mask);
  z-index: var(--ui-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-spacing-4);
}

.ui-modal {
  background-color: var(--ui-bg-card);
  border-radius: var(--ui-radius-xl);
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--ui-shadow-xl);
}

.ui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-spacing-4) var(--ui-spacing-4) var(--ui-spacing-3);
  border-bottom: 1px solid var(--ui-border-light);
}

.ui-modal-title {
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.ui-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color var(--ui-transition-fast);
}

.ui-modal-close:hover {
  background-color: var(--ui-gray-100);
}

.ui-modal-body {
  padding: var(--ui-spacing-4);
}

.ui-modal-footer {
  display: flex;
  gap: var(--ui-spacing-3);
  padding: var(--ui-spacing-3) var(--ui-spacing-4) var(--ui-spacing-4);
}

.ui-modal-footer .ui-btn {
  flex: 1;
}

/* ========== 14. Toast 提示 ========== */
.ui-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--ui-spacing-3) var(--ui-spacing-5);
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  font-size: var(--ui-font-size-base);
  border-radius: var(--ui-radius-md);
  z-index: var(--ui-z-toast);
  max-width: 80%;
  text-align: center;
}

/* ========== 15. 加载/Loading ========== */
.ui-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ui-gray-200);
  border-top-color: var(--ui-primary-500);
  border-radius: 50%;
  animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ========== 16. 步骤条 ========== */
.ui-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.ui-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ui-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
  background-color: var(--ui-gray-200);
  color: var(--ui-text-secondary);
  margin-bottom: var(--ui-spacing-2);
  z-index: 1;
}

.ui-step-active .ui-step-icon {
  background-color: var(--ui-primary-500);
  color: white;
}

.ui-step-done .ui-step-icon {
  background-color: var(--ui-success-500);
  color: white;
}

.ui-step-title {
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-secondary);
  text-align: center;
}

.ui-step-active .ui-step-title {
  color: var(--ui-primary-600);
  font-weight: var(--ui-font-weight-medium);
}

.ui-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background-color: var(--ui-gray-200);
}

.ui-step:last-child::after {
  display: none;
}

.ui-step-done::after {
  background-color: var(--ui-success-500);
}