/**
 * ============================================================================
 * 手机端 · 竞品表单页专属样式  (mobile/css/competitor-form.css)
 * ----------------------------------------------------------------------------
 * 作用：仅包含竞品收集表单页（competitor-form.html）需要的样式。
 *       通用基础样式（CSS 变量、重置、.page、.header、.form-group、输入框、
 *       .option-btn / .option-btn.selected、.card、.upload-area、.toast 等）
 *       均由 base.css 提供，本文件只补充竞品页特有的三块：
 *         1) 拍照区域三列网格布局（含标题/计数/提示的卡片外壳）
 *         2) 选项按钮组（两列 / 三列网格容器）
 *         3) 底部保存大按钮（固定底栏 + 全宽主按钮）
 * 约定：所有颜色、间距、圆角、字号复用 base.css 的 CSS 变量，不在此重定义。
 *
 * 说明：本页按「单页长表单」设计（无多步进度条）。若后续竞品表单也采用
 *       与客户表单相同的「三步」结构，请在该页 HTML 中一并引入
 *       css/customer-form.css（含 .form-progress / .form-step / .category-fields
 *       / .form-footer 等），本文件仅补充竞品页特有样式即可。
 * ============================================================================
 */

/* 让本页内容底部留出空间，避免被固定保存栏遮挡（60px 按钮 + 上下内边距） */
.page {
  padding-bottom: 96px;
}

/* ====================== 1. 拍照区域（三分类 · 三列并排） ====================== */
/* 三列网格容器：主推产品 / 展位全景 / 价格标签 并排显示 */
.photo-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* 单列卡片：分类标题（含张数）+ 单张上传格 */
.photo-col {
  background: var(--color-white);
  border-radius: var(--radius-md);     /* 12px */
  box-shadow: var(--shadow-card);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
}

/* 分类标题：居中显示分类名 + 实时张数 */
.photo-col .col-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.photo-col .col-title .count {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* 每个分类内单格上传区（一列：添加块 / 缩略图）
 * 覆盖 base.css 的 .upload-area 默认三列，改为单列 */
.photo-col .upload-area {
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

/* ====================== 2. 选项按钮组 ====================== */
/* 两列网格容器（默认）；带 .grid-3 时切换为三列。
 * 内部按钮直接用 base.css 的 .option-btn（含 .selected 选中态），此处只管排布。 */
.comp-opt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.comp-opt-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ====================== 3. 底部保存大按钮 ====================== */
/* 固定底栏：始终可见，点击即可保存 */
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;                    /* 与 .page 最大宽度一致、居中 */
  margin: 0 auto;
  padding: var(--space-md);
  background: var(--color-white);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

/* 保存主按钮：全宽、60px 高、蓝色 */
.btn-save {
  display: block;
  width: 100%;
  height: 60px;
  font-size: var(--font-lg);            /* 18px ≥ 要求 */
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.btn-save:active {
  background: var(--color-primary-dark);
}

/* ====================== 4. 品类专项字段（动态注入） ====================== */
/* 默认隐藏，选中品类后由 JS 添加 .show 显示 */
.category-fields {
  display: none;
  margin-bottom: var(--space-md);
}
.category-fields.show {
  display: block;
}
.cat-fields-card {
  background: var(--color-white);
  border: 1px solid var(--color-border, #e6e9f0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}
.cat-fields-title {
  font-size: var(--font-base, 15px);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.cat-fields-title .badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-primary);
  background: var(--color-primary-soft, #eef3fb);
  border-radius: 999px;
}
.cat-field-hint {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  color: var(--color-text-secondary, #8a93a6);
}