/* ========== FAQ 页面容器 ========== */
.faq-page {
  margin: 4.375vw 0;
}

/* ========== FAQ Banner + 搜索模块 ========== */
.faq-banner {
  position: relative;
  width: 100%;
  height: 21.875vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, #EAF3FC 0%, #F7FBFE 45%, #E7F0FA 100%);
}
.faq-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faq-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.faq-banner-title {
  color: #FFF;
  text-align: center;
  font-family: 'Montserrat-SemiBold';
  font-size: 3.125vw;
  font-style: normal;
  line-height: 150%;
  text-transform: capitalize;
}

/* 搜索框 */
.faq-search {
  position: relative;
  width: 45.8333vw;
  max-width: 880px;
  height: 3.3333vw;
  max-height: 64px;
  margin: 3.3333vw auto 0;
}
.faq-search-input {
  width: 100%;
  height: 100%;
  padding: 1.0417vw 2.0833vw 1.0417vw 4.5833vw;
  border: 0.0521vw solid rgba(35, 24, 21, 0.20);
  border-radius: 0.8333vw;
  background: #FFF;
  font-family: 'Montserrat';
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #231815;
  outline: none;
}
.faq-search-input::placeholder {
  color: #9fa0a0;
  font-family: 'Montserrat';
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.faq-search .faq-search-icon {
  position: absolute;
  left: 2.0833vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25vw;
  color: #9FA0A0;
  cursor: pointer;
}
.faq-search .faq-clear-icon {
  position: absolute;
  right: 2.0833vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25vw;
  color: #d8d8d8;
  cursor: pointer;
  display: none;
}
.faq-search .faq-clear-icon:hover {
  color: #999;
}

/* 热门搜索下拉 */
.faq-hot {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.625vw);
  display: none;
  padding: 1.0417vw 1.25vw;
  border-radius: 0.8333vw;
  background: #ffffff;
  box-shadow: 0 0.4167vw 1.6667vw rgba(0, 0, 0, 0.12);
  text-align: left;
  z-index: 10;
}
.faq-hot-tips {
  margin-bottom: 0.8333vw;
  font-family: 'Montserrat';
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  color: #999999;
}
.faq-hot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8333vw;
}
.faq-hot-list li {
  padding: 0.4167vw 1.0417vw;
  border: 0.0521vw solid #d8d8d8;
  border-radius: 999px;
  font-family: 'Montserrat';
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s;
}
.faq-hot-list li:hover {
  color: #3A66FB;
  border-color: #3A66FB;
}

/* ========== FAQ 列表模块 ========== */
.faq-wrapper {
  padding: 0 0 5vw;
}

/* 模块二标题 */
.faq-section-title {
  color: #231815;
  text-align: left;
  font-family: 'Montserrat-SemiBold';
  font-size: 3.125vw;
  font-style: normal;
  line-height: 150%;
  text-transform: capitalize;
  margin-top: 2.0833vw;
  margin-bottom: 4.1667vw;
}

/* 分类导航 */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 6.25vw;
}
.faq-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0417vw;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s;
}
.faq-nav-item img {
  width: 4.1667vw;
  height: 4.1667vw;
  object-fit: contain;
}
.faq-nav-item span {
  color: #231815;
  text-align: center;
  font-family: 'Montserrat-Bold';
  font-size: 0.8333vw;
  font-style: normal;
  line-height: 150%;
  transition: color 0.3s;
}
.faq-nav-item.active span {
  color: #3A66FB;
  font-family: 'Montserrat-SemiBold';
}

/* 问题列表 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25vw;
}
.faq-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 1.4583vw 2.5vw 1.4583vw 2.0833vw;
  border-radius: 0.8333vw;
  background: #fafafa;
  transition: box-shadow 0.3s;
}
.faq-list-item:hover {
  cursor: pointer;
}
/* 置顶项：老官网用 faq-top 图片，新官网用背景色区分 */
.faq-list-item.is-hot {
  background: #f4f9ff;
}
.faq-list-number {
  color: #000;
  font-family: 'Montserrat';
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-right: 0.8333vw;
  flex-shrink: 0;
}
.faq-list-title {
  flex: 1;
  color: #231815;
  font-family: 'Montserrat';
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.faq-list-badge {
  display: flex;
  padding: 0.4167vw 1.0417vw;
  justify-content: center;
  align-items: center;
  gap: 0.5208vw;
  border-radius: 3.4375vw;
  background: #7C7C7C;
  color: #FFF;
  font-family: 'Montserrat-Medium';
  font-size: 0.9375vw;
  font-style: normal;
  line-height: 150%;
  flex-shrink: 0;
}
.faq-list-badge.is-hot {
  background: #5C7EF4;
}

/* 无数据 */
.faq-no-data {
  padding: 5vw 0;
  text-align: center;
  font-family: 'Montserrat-Bold';
  font-size: 1.6667vw;
  color: #999999;
}

/* Loading */
.faq-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw 0;
}
.faq-loading-spinner {
  width: 2.5vw;
  height: 2.5vw;
  border: 0.1563vw solid #e8e8e8;
  border-top-color: #3A66FB;
  border-radius: 50%;
  animation: faq-spin 0.8s linear infinite;
}
@keyframes faq-spin {
  to { transform: rotate(360deg); }
}

/* ========== 移动端适配 ========== */
@media screen and (max-width: 768px) {
  .faq-page {
    margin: 13.3333vw 0;
  }
  .faq-banner {
    height: 100vw;
  }
  .faq-banner-title {
    font-size: 6.4vw;
    line-height: 150%;
  }
  .faq-search {
    width: 88vw;
    height: 13.3333vw;
    max-width: none;
    max-height: none;
    margin-top: 8vw;
  }
  .faq-search-input {
    padding: 2.6667vw 4vw 2.6667vw 14vw;
    border-radius: 4.2667vw;
    font-size: 3.7333vw;
    line-height: 150%;
  }
  .faq-search-input::placeholder {
    font-size: 3.7333vw;
    line-height: 150%;
  }
  .faq-search .faq-search-icon {
    left: 4vw;
    font-size: 5.3333vw;
  }
  .faq-search .faq-clear-icon {
    right: 4vw;
    font-size: 5.3333vw;
  }
  .faq-hot {
    top: calc(100% + 1.6vw);
    padding: 2.667vw 3.2vw;
    border-radius: 2.133vw;
  }
  .faq-hot-tips {
    margin-bottom: 2.133vw;
    font-size: 2.667vw;
  }
  .faq-hot-list {
    gap: 1.6vw;
  }
  .faq-hot-list li {
    padding: 1.6vw 3.2vw;
    font-size: 3.2vw;
  }
  .faq-wrapper {
    padding: 0 0 10vw;
  }
  .faq-section-title {
    font-size: 7.4667vw;
    line-height: 150%;
    margin-top: 0;
    margin-bottom: 10.6667vw;
  }
  .faq-nav {
    justify-content: space-between;
    gap: 2.6667vw 0;
    margin-bottom: 10vw;
  }
  .faq-nav-item {
    flex: none;
    width: 50%;
    height: 13.8667vw;
    gap: 1.6vw;
    padding: 0;
  }
  .faq-nav-item img {
    width: 6.4vw;
    height: 6.4vw;
  }
  .faq-nav-item span {
    font-size: 3.2vw;
    line-height: 150%;
  }
  .faq-list {
    gap: 4.2667vw;
  }
  .faq-list-item {
    padding: 4.2667vw;
    border-radius: 4.2667vw;
  }
  .faq-list-number {
    font-size: 4.2667vw;
    margin-right: 4.2667vw;
  }
  .faq-list-title {
    font-size: 4.2667vw;
    line-height: 150%;
    margin-right: 2.1333vw;
  }
  .faq-list-badge {
    padding: 2.1333vw 5.3333vw;
    gap: 2.6667vw;
    border-radius: 8.5333vw;
    font-size: 3.7333vw;
  }
  .faq-no-data {
    padding: 12vw 0;
    font-size: 4.8vw;
  }
  .faq-loading {
    padding: 12vw 0;
  }
  .faq-loading-spinner {
    width: 10vw;
    height: 10vw;
    border-width: 0.8vw;
  }
}