/* ===================== 货代问答页 ===================== */
.faq-page {
  background: #F4F8FD;
}

/* ---------- 顶部 ---------- */
.faq-hero {
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.5rem .9rem;
  background: linear-gradient(120deg, #081F38 0%, #0B4A93 48%, #0E86F6 100%);
}
.faq-hero::before {
  content: '';
  position: absolute;
  top: -2.6rem;
  right: -1.6rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
}
.faq-hero::after {
  content: '';
  position: absolute;
  left: -3rem;
  bottom: -5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 134, 246, .35) 0%, rgba(8, 31, 56, 0) 70%);
}
.faq-hero-inner {
  position: relative;
  z-index: 2;
  width: 17rem;
  margin: 0 auto;
}
.faq-crumb {
  display: flex;
  align-items: center;
  gap: .08rem;
  font-size: .1625rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: .45rem;
}
.faq-crumb a {
  color: rgba(255, 255, 255, .75);
  transition: color .2s ease;
}
.faq-crumb a:hover {
  color: #fff;
}
.faq-hero h1 {
  font-size: .6rem;
  line-height: 1.3;
  color: #fff;
  font-weight: bold;
  letter-spacing: .01rem;
}
.faq-hero .faq-sub {
  max-width: 11.5rem;
  margin-top: .22rem;
  font-size: .19rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .82);
}
.faq-search {
  display: flex;
  align-items: center;
  width: 7.2rem;
  height: .58rem;
  margin-top: .42rem;
  background: #fff;
  border-radius: .06rem;
  overflow: hidden;
  box-shadow: 0 .1rem .3rem rgba(4, 30, 60, .25);
}
.faq-search input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 .22rem;
  font-size: .18rem;
  color: #16233A;
  background: transparent;
}
.faq-search input::placeholder {
  color: #9AA9BA;
}
.faq-search button {
  width: 1.35rem;
  height: 100%;
  border: none;
  background: #0E86F6;
  color: #fff;
  font-size: .18rem;
  cursor: pointer;
  transition: background .2s ease;
}
.faq-search button:hover {
  background: #0B6FD0;
}
.faq-stats {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .32rem;
  font-size: .1625rem;
  color: rgba(255, 255, 255, .7);
}
.faq-stats b {
  margin-right: .04rem;
  font-size: .225rem;
  color: #FDAC15;
}

/* ---------- 主体 ---------- */
.faq-main {
  width: 17rem;
  margin: 0 auto;
  padding: .45rem 0 .75rem;
}
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  align-items: center;
}
.faq-tab {
  padding: .1rem .22rem;
  border: 1px solid #E1EAF5;
  border-radius: .3rem;
  background: #fff;
  color: #43566C;
  font-size: .1625rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.faq-tab:hover {
  border-color: #0E86F6;
  color: #0E86F6;
}
.faq-tab.active {
  border-color: #0E86F6;
  background: #0E86F6;
  color: #fff;
  font-weight: bold;
}
.faq-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .18rem;
  font-size: .1625rem;
  color: #8C9CAF;
}
.faq-tools .faq-expand {
  border: none;
  background: transparent;
  color: #0E86F6;
  font-size: .1625rem;
  cursor: pointer;
}
.faq-tools .faq-expand:hover {
  text-decoration: underline;
}

/* ---------- 分类 ---------- */
.faq-group {
  margin-top: .42rem;
}
.faq-group-title {
  display: flex;
  align-items: baseline;
  gap: .14rem;
  margin-bottom: .18rem;
  font-size: .28rem;
  font-weight: bold;
  color: #0A2A4A;
}
.faq-group-title::before {
  content: '';
  width: .05rem;
  height: .22rem;
  border-radius: .03rem;
  background: #0E86F6;
  transform: translateY(.02rem);
}
.faq-group-title span {
  font-size: .1625rem;
  font-weight: normal;
  color: #8C9CAF;
}
.faq-group[hidden] {
  display: none;
}

/* ---------- 问答条目 ---------- */
details.faq-item {
  margin-bottom: .12rem;
  border: 1px solid #E7EEF7;
  border-radius: .06rem;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
details.faq-item:hover {
  border-color: #BBD8F7;
}
details.faq-item[open] {
  border-color: #0E86F6;
  box-shadow: 0 .06rem .28rem rgba(14, 134, 246, .12);
}
details.faq-item summary {
  display: flex;
  align-items: center;
  gap: .16rem;
  padding: .19rem .24rem;
  list-style: none;
  cursor: pointer;
}
details.faq-item summary::-webkit-details-marker {
  display: none;
}
details.faq-item summary::-moz-list-bullet {
  display: none;
}
details.faq-item summary h3 {
  flex: 1;
  font-size: .19rem;
  font-weight: bold;
  line-height: 1.6;
  color: #16233A;
}
details.faq-item summary .faq-idx {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: .42rem;
  height: .32rem;
  border-radius: .05rem;
  background: #EFF6FF;
  color: #0E86F6;
  font-size: .15rem;
  font-weight: bold;
  flex: 0 0 auto;
}
details.faq-item[open] summary .faq-idx {
  background: #0E86F6;
  color: #fff;
}
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: .3rem;
  height: .3rem;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #0E86F6;
  border-radius: .02rem;
  transition: transform .25s ease, opacity .25s ease;
}
.faq-icon::before {
  width: .18rem;
  height: .03rem;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: .03rem;
  height: .18rem;
  transform: translate(-50%, -50%);
}
details.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-a {
  margin: 0 .24rem .22rem .82rem;
  padding-top: .15rem;
  border-top: 1px dashed #E7EEF7;
  font-size: .175rem;
  line-height: 2;
  color: #55687D;
  word-break: break-word;
}
.faq-a p + p {
  margin-top: .12rem;
}
.faq-a strong {
  color: #0A2A4A;
}
.faq-a a {
  color: #0E86F6;
}
.faq-a a:hover {
  text-decoration: underline;
}
.faq-a ul {
  margin: .08rem 0 .08rem .28rem;
  list-style: disc;
}
.faq-a li {
  margin-top: .04rem;
  font-size: .175rem;
  line-height: 1.9;
  color: #55687D;
}

/* ---------- 空状态 ---------- */
.faq-empty {
  display: none;
  padding: 1rem 0;
  text-align: center;
  font-size: .19rem;
  color: #8C9CAF;
}
.faq-empty.show {
  display: block;
}

/* ---------- 转化区 ---------- */
.faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .55rem;
  padding: .42rem .5rem;
  border-radius: .08rem;
  background: linear-gradient(120deg, #0A2A4A 0%, #0B5CB0 60%, #0E86F6 100%);
}
.faq-cta-text .c-title {
  font-size: .32rem;
  font-weight: bold;
  color: #fff;
}
.faq-cta-text .c-desc {
  margin-top: .1rem;
  font-size: .175rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .8);
}
.faq-cta-btns {
  display: flex;
  gap: .15rem;
  flex: 0 0 auto;
}
.faq-cta-btns a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .5rem;
  padding: 0 .32rem;
  border-radius: .04rem;
  font-size: .175rem;
  font-weight: bold;
  white-space: nowrap;
  transition: all .2s ease;
}
.faq-cta-btns .btn-main {
  background: #FDAC15;
  color: #3A2A00;
}
.faq-cta-btns .btn-main:hover {
  background: #FFC24A;
}
.faq-cta-btns .btn-line {
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.faq-cta-btns .btn-line:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* ---------- 相关产品 ---------- */
.faq-related {
  display: flex;
  gap: .2rem;
  margin-top: .45rem;
}
.faq-related a {
  flex: 1;
  padding: .26rem .3rem;
  border: 1px solid #E7EEF7;
  border-radius: .06rem;
  background: #fff;
  transition: all .25s ease;
}
.faq-related a:hover {
  border-color: #0E86F6;
  box-shadow: 0 .08rem .28rem rgba(14, 134, 246, .12);
  transform: translateY(-.03rem);
}
.faq-related .r-title {
  font-size: .2rem;
  font-weight: bold;
  color: #0A2A4A;
}
.faq-related .r-desc {
  margin-top: .08rem;
  font-size: .1625rem;
  line-height: 1.7;
  color: #8C9CAF;
}

/* ===================== 移动端 ===================== */
@media (max-width: 768px) {
  .faq-hero {
    padding: 92px 20px 34px;
  }
  .faq-hero::before {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -60px;
  }
  .faq-hero::after {
    display: none;
  }
  .faq-hero-inner {
    width: 100%;
  }
  .faq-crumb {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .faq-hero h1 {
    font-size: 27px;
    line-height: 1.35;
  }
  .faq-hero .faq-sub {
    max-width: none;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
  }
  .faq-search {
    width: 100%;
    height: 46px;
    margin-top: 20px;
    border-radius: 8px;
  }
  .faq-search input {
    padding: 0 14px;
    font-size: 14px;
  }
  .faq-search button {
    width: 76px;
    font-size: 14px;
  }
  .faq-stats {
    gap: 16px;
    margin-top: 16px;
    font-size: 12px;
  }
  .faq-stats b {
    font-size: 16px;
  }
  .faq-main {
    width: 100%;
    padding: 20px 16px 34px;
  }
  .faq-toolbar {
    gap: 8px;
  }
  .faq-tab {
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
  }
  .faq-tools {
    margin-top: 12px;
    font-size: 12px;
  }
  .faq-tools .faq-expand {
    font-size: 12px;
  }
  .faq-group {
    margin-top: 26px;
  }
  .faq-group-title {
    gap: 8px;
    margin-bottom: 12px;
    font-size: 18px;
  }
  .faq-group-title::before {
    width: 4px;
    height: 16px;
  }
  .faq-group-title span {
    font-size: 12px;
  }
  details.faq-item {
    margin-bottom: 10px;
    border-radius: 8px;
  }
  details.faq-item summary {
    gap: 10px;
    padding: 14px;
  }
  details.faq-item summary h3 {
    font-size: 15px;
    line-height: 1.6;
  }
  details.faq-item summary .faq-idx {
    min-width: 26px;
    height: 24px;
    border-radius: 4px;
    font-size: 12px;
  }
  .faq-icon {
    width: 20px;
    height: 20px;
  }
  .faq-icon::before {
    width: 12px;
    height: 2px;
  }
  .faq-icon::after {
    width: 2px;
    height: 12px;
  }
  .faq-a {
    margin: 0 14px 14px 50px;
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.9;
  }
  .faq-a li {
    font-size: 14px;
    line-height: 1.9;
  }
  .faq-empty {
    padding: 50px 0;
    font-size: 14px;
  }
  .faq-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
    padding: 24px 18px;
  }
  .faq-cta-text .c-title {
    font-size: 19px;
  }
  .faq-cta-text .c-desc {
    font-size: 13px;
  }
  .faq-cta-btns {
    width: 100%;
  }
  .faq-cta-btns a {
    flex: 1;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
  }
  .faq-related {
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
  }
  .faq-related a {
    padding: 16px 18px;
    border-radius: 8px;
  }
  .faq-related .r-title {
    font-size: 15px;
  }
  .faq-related .r-desc {
    font-size: 12px;
  }
}