/* =====================================================================
   FAQ AGGREGATION PAGE (FAQs 聚合页) — Mobile-first (xs < 576px)
   Design references (d:/mj/pages/.figma):
   - XS (<576):   2840_221736 (480px)
   - SM (>=576):  2840_220976 (576px)
   - MD (>=768):  2864_248039 (768px)
   - LG (>=992):  2849_242435 (992px)
   - XL (>=1200): 2840_218686 (1200px)
   - XXL (>=1400):2840_217913 (1400px)
   - XXXL (>=1920):2849_238842 (1920px)

   尺寸差异：
   - Hero 高度：xs 474px，其余尺寸 364px（内容始终垂直/水平居中）。
   - 主体：<1200 为单列 + “FAQs by product category” 分类下拉栏；
           >=1200 切换为左侧 400px “Contents” 侧栏 + 右侧 FAQ 折叠列表。
   - 列表行距：<1200 为 20px，>=1200 为 40px。
   - 内容区左右留白：<1600 为 20/40px，>=1600 为 240px。
   ===================================================================== */

:root {
  --fag-blue: #26a7fe;
  --fag-green: #02cb64;
  --fag-title: #132a3f;
  --fag-t-1: #000000e5;
  --fag-t-2: #000000b2;
  --fag-t-3: #00000080;
  --fag-card: #f5f5f5;
  --fag-border: #d6d6d6;
  --fag-gradient: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  --fag-head-gradient: linear-gradient(99.1deg, #26a7fe 0%, #02cb64 99.93%);
}

.faq-agg-page {
  background: #ffffff;
  font-family: Figtree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

/* =====================================================================
   HERO — 卡片 474px（<576）/ 364px（>=576），内容居中
   ===================================================================== */
.faq-agg-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px;
  overflow: hidden;
}

.faq-agg-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 20px;
  overflow: hidden;
  background-color: #ffffff;
  overflow: hidden;
  background-image: url(../images/common/review-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 0;
}

.faq-agg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.faq-agg-glow--blue {
  bottom: -709px;
  left: -407px;
  opacity: 0.2;
  background: var(--fag-blue);
  width: 998px;
  height: 998px;
  filter: blur(150px);
}

.faq-agg-glow--white {
  bottom: -246px;
  left: 30px;
  opacity: 0.3;
  background: #ffffff;
  width: 748px;
  height: 748px;
  filter: blur(250px);
}

.faq-agg-glow--green {
  top: -652px;
  right: -243px;
  opacity: 0.3;
  background: var(--fag-green);
  width: 910px;
  height: 910px;
  filter: blur(250px);
}

.faq-agg-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  row-gap: 16px;
}

.faq-agg-hero-title {
  margin: 0;
  align-self: stretch;
  text-align: center;
  color: var(--fag-title);
  font-size: 60px;
  font-weight: 800;
  line-height: 78px;
}

.faq-agg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  align-self: stretch;
  column-gap: 8px;
  row-gap: 8px;
}

.faq-agg-crumb {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  border-radius: 4px;
  padding: 4px;
  color: var(--fag-t-3);
  font-size: 18px;
  line-height: 29px;
}

.faq-agg-crumb-icon,
.faq-agg-crumb-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.faq-agg-crumb--active {
  background: var(--fag-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 2px 4px;
}

.faq-agg-breadcrumb a.faq-agg-crumb:hover {
  background: var(--fag-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* =====================================================================
   主体 — <1200: 单列（分类下拉栏 + 列表）
   ===================================================================== */
.faq-agg-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 100px 20px;
  row-gap: 20px;
}

/* ---- 分类下拉栏（<1200 显示）---- */
.faq-agg-cats {
  position: relative;
  align-self: stretch;
}

.faq-agg-cats-head {
  margin: 0;
}

.faq-agg-cats-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-agg-cats-title {
  flex: 1;
  color: #000000;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

/* 分类按钮图标（List）：收起为灰，展开为品牌蓝 */
.faq-agg-cats-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(../images/faq-aggregation/faq-list.svg) center / contain no-repeat;
}

.faq-agg-cats.is-open .faq-agg-cats-arrow {
  background-image: url(../images/faq-aggregation/faq-list-blue.svg);
}

.faq-agg-cats-panel {
  display: none;
  position: absolute;
  z-index: 5;
  top: calc(100% - 12px);
  right: 0;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  border: 1px solid var(--fag-border);
  border-radius: 20px;
  background: #ffffff;
  padding: 11px;
  row-gap: 4px;
}

.faq-agg-cats.is-open .faq-agg-cats-panel {
  display: flex;
}

.faq-agg-cat {
  display: flex;
  align-items: center;
  min-height: 64px;
  border-radius: 8px;
  padding: 20px 12px 20px 16px;
  color: var(--fag-t-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.faq-agg-cat--active {
  background: var(--fag-card);
  color: var(--fag-blue);
  font-weight: 700;
}

.faq-agg-cat:hover {
  color: var(--fag-blue);
}

/* ---- 侧栏（>=1200 显示）---- */
.faq-agg-aside {
  display: none;
}

.faq-agg-aside-card {
  border: 1px solid var(--fag-border);
  border-radius: 20px;
  overflow: hidden;
}

.faq-agg-aside-head {
  display: flex;
  align-items: center;
  column-gap: 4px;
  margin: 0;
  height: 64px;
  padding: 0 24px;
  background-image: var(--fag-head-gradient);
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

.faq-agg-aside-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.faq-agg-aside-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px;
  row-gap: 4px;
}

.faq-agg-aside-link {
  display: flex;
  align-items: center;
  min-height: 64px;
  border-radius: 8px;
  padding: 20px 12px 20px 16px;
  color: var(--fag-t-2);
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.faq-agg-aside-link--active {
  background: var(--fag-card);
  color: var(--fag-blue);
  font-weight: 700;
}

.faq-agg-aside-link:hover {
  color: var(--fag-blue);
}

/* =====================================================================
   FAQ 折叠列表
   ===================================================================== */
.faq-agg-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

.faq-agg-item {
  align-self: stretch;
  /* 预留 2px 描边位置，展开时不会因描边出现而跳动 */
  border: 2px solid transparent;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

/* 展开态：渐变描边（#26a7fe -> #02cb64）+ 原有蓝色投影 */
.faq-agg-item.is-open {
  background-image: linear-gradient(#ffffff, #ffffff), var(--fag-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 30px 0 #26a7fe33;
}

.faq-agg-q-head {
  margin: 0;
}

.faq-agg-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  width: 100%;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--fag-card);
  padding: 24px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-agg-q-text {
  flex: 1;
  color: var(--fag-t-1);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.faq-agg-item.is-open .faq-agg-q-text {
  color: var(--fag-blue);
}

.faq-agg-q-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-agg-item.is-open .faq-agg-q-icon {
  transform: rotate(180deg);
}

.faq-agg-a {
  display: none;
  padding: 10px 24px 24px;
}

.faq-agg-item.is-open .faq-agg-a {
  display: block;
}

.faq-agg-a-text {
  margin: 0;
  color: var(--fag-t-2);
  font-size: 18px;
  line-height: 32px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 答案段落内的锚链接：style.css 的全局 a 重置了颜色与下划线，需显式还原可点击样式 */
.faq-agg-a-text a {
  color: var(--fag-blue);
  text-decoration: underline;
}

.faq-agg-a-text a:hover {
  color: #51b9fd;
}

/* =====================================================================
   SM (>=576px): Hero 卡片收敛到 364px
   ===================================================================== */
@media (min-width: 576px) {
 
}

/* =====================================================================
   XL (>=1200px): 左侧 Contents 侧栏 + 右侧折叠列表
   ===================================================================== */
@media (min-width: 1200px) {
  .faq-agg-main {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 40px;
    row-gap: 0;
    padding: 100px 40px;
  }

  .faq-agg-hero-content {
    padding: 0 80px;
  }

  .faq-agg-cats {
    display: none;
  }

  .faq-agg-aside {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 400px;
  }

  .faq-agg-list {
    flex: 1;
    min-width: 0;
    row-gap: 40px;
  }
}

/* =====================================================================
   XXXL (>=1600px): 内容区左右留白 240px
   ===================================================================== */
@media (min-width: 1600px) {
  .faq-agg-main {
    padding: 100px 240px;
  }
}

@media (min-width: 1920px) {
  .faq-agg-main {
    padding: 100px 320px;
  }
}

/* Mobile (<420px): Hero 标题降为 48px，避免溢出 */
@media (max-width: 420px) {
  .faq-agg-hero-title {
    font-size: 48px;
    line-height: 62px;
  }
}