/**
 * 服务领域模块样式（services/inbound + services/detail）
 * 提取自各模板内联 <style>，合并去重后按组件分区
 *
 * 引入方式：<link rel="stylesheet" href="/static/css/services.css" />
 * 全局基础样式已在 style.css 中定义，此处仅做页面级扩展
 */

/* ========================================================================
   1. FAQ 手风琴（services/inbound.htm；与 resource/faq.html 保持一致）
   ======================================================================== */

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; transition: border-color .25s; }
.faq-item:hover { border-color: var(--c-primary-soft-2); }
.faq-item.open { border-color: var(--c-primary-soft-2); box-shadow: 0 6px 18px rgba(20, 10, 60, .05); }
.faq-q { display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer; font-weight: 600; color: var(--c-ink); font-size: 1rem; line-height: 1.5; }
.faq-q .q-text { flex: 1; }
.faq-q .q-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--c-bg-soft); display: grid; place-items: center; flex-shrink: 0; transition: all .3s; color: var(--c-muted); }
.faq-q .q-ico svg { width: 16px; height: 16px; }
.faq-item.open .faq-q .q-ico { background: var(--c-grad); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 24px 22px 66px; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.8; }
.faq-a-inner a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ========================================================================
   2. 价格卡片（services/detail.htm；本页专属，使用设计令牌）
   ======================================================================== */

.price-card { position: relative; background: var(--c-card); border-radius: var(--r-lg); padding: var(--sp-xl) var(--sp-lg); box-shadow: var(--sh-sm); transition: all .3s cubic-bezier(.4, 0, .2, 1); border: 2px solid transparent; display: flex; flex-direction: column; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.price-card.featured { border-color: var(--c-primary); box-shadow: 0 12px 32px rgba(138, 14, 232, .15); transform: scale(1.03); }
.price-card.featured:hover { transform: scale(1.03) translateY(-6px); }
.price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--c-grad); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 5px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-sm); letter-spacing: .5px; }
.price-name { font-size: 1.15rem; font-weight: 700; color: var(--c-ink); margin-bottom: 8px; }
.price-desc { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 20px; min-height: 40px; }
.price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); }
.price-amount .currency { font-size: 1.1rem; font-weight: 700; color: var(--c-primary); }
.price-amount .num { font-size: 2.4rem; font-weight: 800; color: var(--c-ink); line-height: 1; }
.price-amount .unit { font-size: var(--fs-sm); color: var(--c-muted); }
.price-features { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: var(--fs-sm); color: var(--c-text); line-height: 1.6; }
.price-features li .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--c-grad-soft); color: var(--c-primary); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.price-features li .ck svg { width: 13px; height: 13px; }
.price-features li.disabled { color: var(--c-muted); opacity: .55; }
.price-features li.disabled .ck { background: var(--c-bg-soft); color: var(--c-muted); }
.price-features li.disabled .ck svg { display: none; }
.price-action { display: block; text-align: center; }

/* ========================================================================
   3. 延伸服务卡"了解更多"链接（services/detail.htm）
   ======================================================================== */

.ext-more { display: inline-flex; align-items: center; gap: 6px; color: var(--c-primary); font-weight: 600; font-size: var(--fs-sm); margin-top: 14px; transition: gap .25s; }
.ext-more svg { width: 16px; height: 16px; transition: transform .25s; }
.ext-more:hover { gap: 10px; }
.ext-more:hover svg { transform: translateX(2px); }

/* ========================================================================
   4. 响应式
   ======================================================================== */

@media (max-width: 768px) {
  /* FAQ 手风琴：紧凑化 */
  .faq-q { padding: 16px 18px; gap: 12px; font-size: var(--fs-sm); }
  .faq-q .q-ico { width: 24px; height: 24px; }
  .faq-q .q-ico svg { width: 14px; height: 14px; }
  .faq-a-inner { padding: 0 18px 18px 54px; font-size: var(--fs-xs); }
  /* 价格卡片：避免横向溢出 */
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-6px); }
  .price-amount .num { font-size: 2rem; }
  .price-amount .currency { font-size: 1rem; }
  .price-card { padding: var(--sp-lg) var(--sp-md); }
}

@media (max-width: 480px) {
  /* FAQ 手风琴：进一步紧凑 */
  .faq-q { padding: 14px 14px; gap: 10px; }
  .faq-a-inner { padding: 0 14px 16px 44px; line-height: 1.7; }
  /* 价格卡片：进一步紧凑 */
  .price-card { padding: var(--sp-md) var(--sp-sm); }
  .price-amount .num { font-size: 1.75rem; }
  .price-features li { padding: 6px 0; }
}