/* ============================================================
   常见问题（FAQ）页面样式
   延续 global.css 设计体系：主色 #308cd6 / #3497df，强调色 #e60013
   容器 .warp（1200px）；字体 'Roboto Light', Arial, sans-serif

   2026-09 调整：左侧分类导航（.faq-side）已移除，页面改为平铺问答列表，
   每题所属分类以 .faq-tag 标签形式标注在题目后方。
   ============================================================ */

.faqpage { padding: 70px 0 90px; background: #f0f1f5; }

/* ---------- 主内容（原左栏已移除，现为整宽） ---------- */
.faq-main { min-width: 0; }

/* 顶部直答块（GEO：自包含定义块） */
.faq-intro { background: #fff; padding: 34px 40px; margin-bottom: 20px; border-left: 4px solid #308cd6; }
.faq-intro h2 { font-size: 20px; color: #333; margin-bottom: 14px; }
.faq-intro p { font-size: 14px; color: #666; line-height: 2; }
.faq-intro p strong { color: #333; font-weight: 500; }
.faq-intro .facts { display: flex; flex-wrap: wrap; margin: 22px -8px 0; }
.faq-intro .facts div { width: calc(25% - 16px); margin: 0 8px 8px; background: #f7fbff; padding: 16px 18px; box-sizing: border-box; }
.faq-intro .facts b { display: block; font-size: 22px; color: #308cd6; font-weight: 500; line-height: 1.3; }
.faq-intro .facts span { display: block; font-size: 12px; color: #999; padding-top: 6px; }

/* ---------- 问答列表卡片（平铺，取代原分组卡片 .faq-group） ---------- */
.faq-list { background: #fff; padding: 8px 40px 12px; margin-bottom: 20px; }

/* 单条问答 */
.faq-item { padding: 26px 0; border-bottom: 1px dashed #eee; }
.faq-item:last-child { border-bottom: none; }

/* 题目行：分类标紧跟在题干文字之后（原为右对齐，改为"问题 + 标"顺排）。
   题干缩进（给 Q 圆形徽标留位）由 .faq-qrow 承担，这样标在换行时也能与
   题干文字左对齐，而不是掉到整行最左边。 */
.faq-qrow { display: flex; flex-wrap: wrap; align-items: baseline; position: relative; padding-left: 38px; padding-right: 34px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq-qrow .faq-q { flex: 0 1 auto; min-width: 0; padding-left: 0; }
.faq-qrow:hover .faq-q { color: #308cd6; }

/* 展开/收起角标（V 形箭头，展开时向上翻转） */
.faq-arrow { position: absolute; right: 2px; top: 50%; width: 22px; height: 22px; margin-top: -11px; flex: none; }
.faq-arrow:before, .faq-arrow:after { content: ""; position: absolute; top: 10px; width: 9px; height: 2px; background: #308cd6; border-radius: 2px; transition: transform .32s cubic-bezier(.25,.8,.25,1); }
.faq-arrow:before { left: 3px; transform: rotate(45deg); }
.faq-arrow:after { right: 3px; transform: rotate(-45deg); }
.faq-item.open .faq-arrow:before { transform: rotate(-45deg); }
.faq-item.open .faq-arrow:after { transform: rotate(45deg); }

.faq-q { font-size: 16px; font-weight: 500; color: #333; line-height: 1.7; position: relative; }
.faq-q i { position: absolute; left: -38px; top: 2px; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #308cd6; color: #fff; border-radius: 50%; font-size: 13px; font-style: normal; }

/* 分类标（内容 = 该题所属分类名） */
.faq-tag { flex: none; margin-left: 12px; display: inline-block; padding: 0 12px; line-height: 22px; font-size: 12px; color: #308cd6; background: #eef6fe; border: 1px solid #cfe6fa; border-radius: 20px; white-space: nowrap; }

.faq-list { overflow-anchor: none; }
/* 默认收起：max-height 由 JS 控制做展开动画；无 JS 时由 <noscript> 兜底全部展开 */
.faq-a { padding: 0 0 0 38px; font-size: 14px; color: #666; line-height: 2; max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.25,.8,.25,1), padding-top .32s cubic-bezier(.25,.8,.25,1); }
.faq-item.open .faq-a { padding-top: 14px; }
.faq-a p { margin-bottom: 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: #333; font-weight: 500; }
.faq-a .hl { color: #e60013; font-weight: 500; }
.faq-a ul { padding: 6px 0 10px; }
.faq-a li { position: relative; padding-left: 16px; line-height: 2; }
.faq-a li:before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: #85b0d2; }
.faq-a table { margin: 16px 0 6px; }
.faq-a table th { height: 52px; }
.faq-a table td { height: auto; padding: 14px 10px; line-height: 1.8; }
.faq-a .note { font-size: 12px; color: #999; padding-top: 8px; }

/* 首屏「一句话答案」强调段 */
.faq-a .lead { color: #333; background: #f7fbff; border-left: 3px solid #308cd6; padding: 12px 16px; margin-bottom: 16px; }
.faq-a .lead strong { color: #308cd6; }

/* 数据来源 */
.faq-src { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #eee; }
.faq-src .faq-src-t { font-size: 13px; color: #333; font-weight: 500; margin-bottom: 6px; }
.faq-src ol { padding: 0 0 0 20px; margin: 0; list-style: decimal; }
.faq-src li { font-size: 12px; color: #999; line-height: 1.9; padding-left: 0; }
.faq-src li:before { display: none; }
.faq-src a { color: #308cd6; word-break: break-all; }

/* 底部行动区 */
.faq-cta { background: #308cd6; color: #fff; padding: 44px 40px; text-align: center; margin-top: 30px; }
.faq-cta h2 { font-size: 24px; color: #fff; margin-bottom: 12px; }
.faq-cta p { font-size: 14px; color: rgba(255,255,255,.85); margin-bottom: 24px; }
.faq-cta a { display: inline-block; min-width: 110px; padding: 0 28px; line-height: 44px; border: 1px solid #fff; border-radius: 26px; color: #fff; font-size: 14px; margin: 0 8px; transition: .3s; }
.faq-cta a:hover { background: #fff; color: #308cd6; }

/* 免责声明 */
.faq-disclaimer { padding: 24px 0 0; font-size: 12px; color: #999; line-height: 1.9; }

/* ---------- 响应式 ---------- */
@media screen and (max-width: 1200px) {
  .faqpage .warp { width: auto; padding: 0 20px; }
}
@media screen and (max-width: 750px) {
  .faqpage { padding: 20px 0 40px; }
  .faq-main { width: 100%; }
  .faq-intro, .faq-list { padding: 24px 20px; }
  .faq-intro .facts div { width: calc(50% - 16px); }
  .faq-qrow { padding-left: 32px; }
  .faq-q { font-size: 15px; }
  .faq-q i { left: -32px; }
  .faq-tag { margin-left: 8px; }
  .faq-a { padding-left: 0; }
  .faq-cta { padding: 30px 20px; }
  .faq-cta a { margin-bottom: 10px; }
}