/**
 * 省胜优铺 轻商城 - 全局样式
 * 主色调：#4A7CF7
 * 基于 WeUI 风格设计
 */

/* CSS变量 */
page {
  --primary: #4A7CF7;
  --primary-light: #7C9FFF;
  --primary-bg: #EEF2FF;
  --danger: #ee0a24;
  --success: #00B578;
  --warning: #FF8A00;
  --gray-1: #1a1a2e;
  --gray-2: #333333;
  --gray-3: #666666;
  --gray-4: #999999;
  --gray-5: #cccccc;
  --gray-6: #e8e8e8;
  --gray-7: #f5f6fa;
  --gray-8: #fafafa;
  --radius-sm: 6rpx;
  --radius: 12rpx;
  --radius-lg: 20rpx;
  --shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  --shadow-lg: 0 4rpx 20rpx rgba(0,0,0,0.1);
  font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  font-size: 28rpx;
  color: var(--gray-1);
  background: var(--gray-7);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* 重置 */
view, text, image, scroll-view, swiper {
  box-sizing: border-box;
}

image {
  display: block;
}

/* 通用容器 */
.page-container {
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.page-with-tabbar {
  padding-bottom: 120rpx;
}

/* 安全区适配 */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: var(--radius);
  margin: 16rpx 24rpx;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card-body {
  padding: 24rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx 0;
  font-size: 30rpx;
  font-weight: 600;
}

/* 按钮 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  transition: opacity 0.2s;
}

.btn-primary:active {
  opacity: 0.85;
}

.btn-primary[disabled] {
  opacity: 0.5;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
}

.btn-plain {
  background: transparent;
  color: var(--primary);
  border: 2rpx solid var(--primary);
  border-radius: 40rpx;
  padding: 18rpx 48rpx;
  font-size: 28rpx;
  text-align: center;
}

.btn-plain:active {
  background: var(--primary-bg);
}

.btn-small {
  padding: 12rpx 28rpx;
  font-size: 24rpx;
}

.btn-block {
  display: block;
  width: 100%;
}

/* 标签 */
.tag {
  display: inline-block;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
}

.tag-primary {
  background: var(--primary-bg);
  color: var(--primary);
}

.tag-danger {
  background: #fff0f0;
  color: var(--danger);
}

.tag-success {
  background: #e8f8f0;
  color: var(--success);
}

.tag-warning {
  background: #fff4e6;
  color: var(--warning);
}

/* 文字 */
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-gray { color: var(--gray-4); }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 价格 */
.price {
  color: var(--danger);
  font-weight: 700;
}

.price-symbol {
  font-size: 22rpx;
}

.price-value {
  font-size: 32rpx;
}

.price-large .price-value {
  font-size: 44rpx;
}

.original-price {
  color: var(--gray-4);
  text-decoration: line-through;
  font-size: 22rpx;
  margin-left: 8rpx;
}

/* 布局 */
.flex-row {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-1 {
  flex: 1;
}

.gap-8 { gap: 8rpx; }
.gap-12 { gap: 12rpx; }
.gap-16 { gap: 16rpx; }
.gap-20 { gap: 20rpx; }
.gap-24 { gap: 24rpx; }

/* 间距 */
.mt-8 { margin-top: 8rpx; }
.mt-12 { margin-top: 12rpx; }
.mt-16 { margin-top: 16rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-24 { margin-top: 24rpx; }
.mt-32 { margin-top: 32rpx; }
.mb-16 { margin-bottom: 16rpx; }
.mb-24 { margin-bottom: 24rpx; }
.p-24 { padding: 24rpx; }
.p-32 { padding: 32rpx; }

/* 商品网格 */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  padding: 0 24rpx;
}

/* 分割线 */
.divider {
  height: 2rpx;
  background: var(--gray-6);
  margin: 16rpx 0;
}

/* 表单输入 */
.input-group {
  background: #fff;
  padding: 0 24rpx;
}

.input-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid var(--gray-6);
  font-size: 28rpx;
}

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

.input-label {
  width: 140rpx;
  color: var(--gray-2);
  flex-shrink: 0;
}

.input-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28rpx;
  color: var(--gray-1);
  background: transparent;
  height: 48rpx;
  line-height: 48rpx;
}

.input-field::placeholder {
  color: var(--gray-5);
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2rpx solid var(--gray-6);
  padding: 16rpx 24rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  z-index: 100;
}

/* 加载状态 */
.loading-more {
  padding: 24rpx 0;
  text-align: center;
  color: var(--gray-4);
  font-size: 24rpx;
}

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--gray-7) 25%, var(--gray-6) 50%, var(--gray-7) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 下拉刷新自定义 */
.refresh-trigger {
  text-align: center;
  padding: 20rpx;
  font-size: 24rpx;
  color: var(--gray-4);
}
