/**
 * ============================================================================
 * 手机端 · 客户表单页专属样式  (mobile/css/customer-form.css)
 * ----------------------------------------------------------------------------
 * 作用：仅包含客户收集表单页（customer-form.html）需要的样式。
 *       通用基础样式（CSS 变量、重置、.page、.header、.progress-bar、
 *       .form-group、输入框、.option-btn、.btn-primary/.btn-secondary、
 *       .card、.upload-area、.toast 等）均由 base.css 提供，本文件只做：
 *         · 三步进度条的「表单页内包装」（吸顶容器）
 *         · 步骤表单区块的「默认隐藏 / 仅当前步显示」切换
 *         · 品类专项字段区域的显隐与卡片包装
 *         · 底部固定按钮组（上一步 / 下一步）
 *         · 拍照上传区块的标题与间距包装
 * 约定：本页所有颜色、间距、圆角、字号均复用 base.css 的 CSS 变量，
 *       不在此重新定义，保证整站视觉统一。
 * ============================================================================
 */

/* 让本页内容底部留出空间，避免被固定底部按钮组遮挡 */
.page {
  padding-bottom: 96px;          /* 60px 按钮 + 上下内边距 ≈ 92px，留 4px 余量 */
}

/* ====================== 1. 三步进度条（表单页内包装） ====================== */
/* 说明：进度条本体（.progress-bar / .progress-step）的样式在 base.css 中已定义，
 *       这里只包一层「吸顶白色容器」，让进度条滚动时贴合在蓝色头部下方。 */
.form-progress {
  position: sticky;
  top: 56px;                     /* base.css 中 .header 高度为 56px，故吸顶偏移一致 */
  z-index: 40;
  /* 利用负边距让白色容器左右出血到 .page 的 16px 内边距之外，视觉更满 */
  margin: 0 calc(-1 * var(--space-md)) var(--space-md);
  padding: var(--space-md) var(--space-md) 0;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* ====================== 2. 三个步骤的表单区块（默认只显示当前步） ====================== */
/* 关键：所有步骤默认隐藏，仅带 .active 的当前步骤显示。
 *       app.js 的 goStep() 会切换 .form-step 的 .active 类，此处与之配合。 */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: step-in 0.2s ease;  /* 步骤切换时的轻量淡入位移 */
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 每个步骤顶部的标题区（JS 渲染或 HTML 静态写入均可） */
.step-head {
  margin: var(--space-md) 0 var(--space-md);
}

.step-head h2 {
  margin: 0 0 4px;
  font-size: var(--font-xl);     /* 20px */
  font-weight: 700;
  color: var(--color-text);
}

.step-head p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ====================== 3. 品类专项字段区域 ====================== */
/* 默认隐藏，业务人员在第 1 步「选择品类」后由 JS 添加 .show 显示。 */
.category-fields {
  display: none;
}

.category-fields.show {
  display: block;
}

/* 专项字段所在的白色卡片（包住该品类下 2–3 个动态字段） */
.cat-fields-card {
  background: var(--color-white);
  border-radius: var(--radius-md);   /* 12px */
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* 卡片标题：品类名 + 右侧小徽标（如「电饭煲 · 专项关注」） */
.cat-fields-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-sm);
  font-size: var(--font-lg);     /* 18px */
  font-weight: 700;
}

.cat-fields-title .badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(26, 115, 232, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

/* 专项字段上方的引导说明 */
.cat-field-hint {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ====================== 4. 底部按钮组（上一步 / 下一步） ====================== */
/* 固定在页面底部，始终可点；两个按钮横向并列。 */
.form-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;              /* 与 .page 最大宽度保持一致、居中 */
  margin: 0 auto;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

/* 覆盖 base.css 中 .btn-primary / .btn-secondary 的 width:100%，
 * 使其在 flex 容器中各占一半并可伸缩。 */
.form-footer .btn {
  flex: 1 1 0;
  width: auto;
}

/* ====================== 5. 拍照上传区域（表单页包装） ====================== */
/* 复用 base.css 的 .upload-area（三列网格、.upload-item、.upload-add），
 * 这里只补「区块标题 + 计数 + 间距 + 提示」的卡片外壳。 */
.upload-section {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* 上传区标题：左侧「拍照 / 上传图片」，右侧实时张数（如 2/9） */
.upload-section .section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  font-size: var(--font-base);
  font-weight: 700;
}

.upload-section .section-label .count {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* 上传区下方的小字提示（如「可上传展位、产品、名片等，最多 9 张」） */
.upload-tip {
  margin: var(--space-sm) 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}