/* ===== FAQ 區塊（Mobile First） ===== */
.faq-section {
  background: #efefef; /* 淡灰底，和你稿件一致 */
  padding: clamp(36px, 6vw, 72px) 0;
}
.faq-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(22px, 5.2vw, 28px);
  margin-bottom: 14px;
}

/* 列表容器寬度控制（置中、可讀） */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

/* 單題外框 */
.faq-item {
  margin-bottom: 10px;
}

/* 問題列（可點擊的按鈕） */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  /* border-radius: 10px; */
  background: #ffffff;
  border: 1px solid #e6e6e6;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
  position: relative;
}

/* 左側細色條（品牌色） */
.faq-q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px; /* 可依整體比例調整，例如 4px 或 8px */
  background: rgba(44, 41, 90, 0.8); /* #2c295a 淡版 */
}

/* 讓整個條目都有左側品牌色條（含展開的答案） */
.faq-item {
  position: relative; /* 提供 ::before 定位基準 */
}
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; /* 填滿上下 */
  width: 8px; /* 與你原設定一致，可改 4~8px */
  background: rgba(182, 182, 182, 0.8); /* 品牌色 */
  pointer-events: none;
}

/* 調整問題/答案左內距，避免貼到色條 */
.faq-q,
.faq-a-inner {
  padding-left: 22px; /* 8px 色條 + ~14px 間距，可依喜好改 20~24px */
}

/* 問題文字 */
.faq-q .q-text {
  font-size: 1rem;
  color: #222;
  font-weight: 600;
  line-height: 1.5;
}

/* 右側 + 圓鈕 */
.faq-q .q-icon {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 1px solid #dcdcdc;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.faq-q .q-icon::before,
.faq-q .q-icon::after {
  content: "";
  position: absolute;
  background: #444;
  transition: transform 0.2s ease, background 0.2s ease;
}
.faq-q .q-icon::before {
  width: 12px;
  height: 2px;
}
.faq-q .q-icon::after {
  width: 2px;
  height: 12px;
}

/* hover（桌機） */
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #ddd;
  }
}

/* 展開中的狀態：底色變亮、+ 變 x（縱線旋轉消失） */
.faq-q[aria-expanded="true"] {
  background: #fafafa;
}
.faq-q[aria-expanded="true"] .q-icon {
  background: #2c295a;
  border-color: #2c295a;
}
.faq-q[aria-expanded="true"] .q-icon::before {
  background: #fff;
}
.faq-q[aria-expanded="true"] .q-icon::after {
  transform: rotate(90deg);
  background: transparent;
}

/* 答案區 */
.faq-a {
  /* Bootstrap 會處理 height 過渡；這裡只管外觀 */
}
.faq-a-inner {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-top: none; /* 和問題列視覺接在一起 */
  padding: 12px 14px;
  color: #444;
  line-height: 1.7;
}

/* 「更多常見問題」按鈕（無 JS 文字切換） */
.btn-faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--text-secondary);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease;
}

.faq-section .btn-faq-toggle {
  display: block; /* 改成 block，佔滿容器寬度 */
  width: 100%;
  max-width: 720px; /* 與上方 FAQ 一致 */
  margin: 0 auto; /* 水平置中 */
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.btn-faq-toggle .when-expanded {
  display: none;
}
.btn-faq-toggle.collapsed .when-collapsed {
  display: inline;
}
.btn-faq-toggle.collapsed .when-expanded {
  display: none;
}
.btn-faq-toggle:not(.collapsed) .when-collapsed {
  display: none;
}
.btn-faq-toggle:not(.collapsed) .when-expanded {
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  .btn-faq-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
    background: #2c295a;
    color: #fff;
  }
}

/* 無障礙：鍵盤聚焦 */
.faq-q:focus-visible,
.btn-faq-toggle:focus-visible {
  outline: 3px solid #83c6bf;
  outline-offset: 3px;
}

/* 微調：第一個答案圓角不被覆蓋（在展開時） */
.faq-item .faq-q[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}