/* ==========================================================================
   高雄租車常見問題 FAQ  .rf-faq
   適用：欣興高雄租車（SoberCMS / themes/zy001）
   放置位置：themes/zy001/css/rent_faq.css（以 <link> 引入）
   設計依據（與 rent_flow.css 同一套語彙）：
     · 區塊標題沿用站上 .indextitle（FAQ 高雄租車常見問題）
     · 平面直角、細邊框、品牌藍三階（#171c61 / #00539f / #3f93bf）
     · 陰影規格同流程卡：0 6px 18px rgba(23,28,97,.08)
   特性：使用原生 <details>，無 JS 也能展開；內容全在 DOM，利於 SEO 抓取
   v2.1：（1）標題與流程版塊統一為「英文大字 ＋ 中文小字 ＋ 長橫線」的 .indextitle
        （2）上方間距對齊流程版塊（桌機 70px／手機 50px）
        （3）clear:both：站上「安全有保障」是浮動排版，不清除會把標題推去貼底、間距歸零
   ========================================================================== */

.rf-faq{
  --faq-indent:76px;            /* 問答文字的左起點（編號 36 + 間距 18 + 內距 22） */
  --faq-ico:32px;
  position:relative;
  clear:both;                   /* ★ 關鍵：閃開上方浮動區塊，否則 .indextitle（BFC）會被推到浮動底部，
                                   上方間距實測會變成 0 */
  padding:70px 0 70px;          /* 上方 70px = 流程版塊上方的 .ide_m3 padding:70px，兩塊間距一致 */
  background:none;
  font-family:"Microsoft JhengHei",PMingLiU,sans-serif;
  color:#666;
  text-align:left;
}

/* ---------- 區塊標題：與流程版塊完全同一套 .indextitle（英文大字 → 中文小字 → 長橫線） ----------
   只覆寫顏色與間距，字級／字距／行高一律交給站上 .indextitle，
   確保與流程版塊（Process 高雄租車詳細流程）在任何裝置尺寸下都一模一樣。 */
.rf-faq .indextitle{
  color:#000;                   /* 站上預設白字，此處覆寫 */
  margin:0 0 22px 0;
  padding-left:10px;
}
.rf-faq .indextitle span:before{border-bottom-color:#000;}
.rf-faq .rf-faq-lead{
  margin:0 0 34px 10px;
  font-size:17px;line-height:1.9;color:#888;
}

/* ---------- 面板：一整塊白底，細線分隔 ---------- */
.rf-faq .rf-faq-panel{
  background:#fff;
  border:1px solid #e4ecf4;
  box-shadow:0 6px 18px rgba(23,28,97,.08),0 2px 4px rgba(23,28,97,.04);
}

/* ---------- 單一問答 ---------- */
.rf-faq .rf-faq-item{
  position:relative;
  border-top:1px solid #edf2f7;
}
.rf-faq .rf-faq-item:first-child{border-top:0;}

/* 展開時左側指示條（由上往下長出） */
.rf-faq .rf-faq-item:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:#00539f;
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.rf-faq .rf-faq-item[open]:before{transform:scaleY(1);}

/* 問題列（鍵盤操作時顯示焦點框） */
.rf-faq .rf-faq-item > summary{
  display:flex;align-items:center;gap:18px;
  padding:22px 26px 22px 22px;
  cursor:pointer;
  list-style:none;
  transition:background .25s ease;
}
.rf-faq .rf-faq-item > summary::-webkit-details-marker{display:none;}
.rf-faq .rf-faq-item > summary:focus{outline:none;}
.rf-faq .rf-faq-item > summary:focus-visible{
  outline:2px solid #00539f;outline-offset:-3px;
}
.rf-faq .rf-faq-item > summary:hover{background:#f8fbfe;}
.rf-faq .rf-faq-item[open] > summary{background:#f6fafd;}

.rf-faq .rf-faq-num{
  flex:0 0 auto;width:36px;
  font-family:Arial,Helvetica,"Microsoft JhengHei",sans-serif;
  font-size:13.5px;font-weight:bold;line-height:1;letter-spacing:.5px;
  color:#a7b8c8;
  transition:color .25s ease;
}
.rf-faq .rf-faq-item[open] .rf-faq-num{color:#00539f;}

.rf-faq .rf-faq-q{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:19px;font-weight:bold;line-height:1.6;letter-spacing:.2px;
  color:#1a1a1a;
  transition:color .25s ease;
}
.rf-faq .rf-faq-item > summary:hover .rf-faq-q{color:#00539f;}
.rf-faq .rf-faq-item[open] .rf-faq-q{color:#171c61;}

/* 加／減方框（直角，與站上語彙一致） */
.rf-faq .rf-faq-ico{
  position:relative;flex:0 0 auto;
  width:var(--faq-ico);height:var(--faq-ico);box-sizing:border-box;
  border:1px solid #cfdded;background:#fff;
  transition:background .3s ease,border-color .3s ease;
}
.rf-faq .rf-faq-ico:before,
.rf-faq .rf-faq-ico:after{
  content:"";position:absolute;left:50%;top:50%;
  background:#6b8298;
  transition:background .3s ease,transform .38s cubic-bezier(.22,.61,.36,1);
}
.rf-faq .rf-faq-ico:before{width:12px;height:1.5px;margin:-.75px 0 0 -6px;}
.rf-faq .rf-faq-ico:after{width:1.5px;height:12px;margin:-6px 0 0 -.75px;}
.rf-faq .rf-faq-item > summary:hover .rf-faq-ico{border-color:#a9c4da;background:#f2f8fc;}
.rf-faq .rf-faq-item[open] .rf-faq-ico{background:#171c61;border-color:#171c61;}
.rf-faq .rf-faq-item[open] .rf-faq-ico:before,
.rf-faq .rf-faq-item[open] .rf-faq-ico:after{background:#fff;}
.rf-faq .rf-faq-item[open] .rf-faq-ico:after{transform:rotate(90deg);}

/* 答案 */
.rf-faq .rf-faq-a{
  padding:0 76px 26px var(--faq-indent);
  animation:rfFaqIn .32s ease both;
}
.rf-faq .rf-faq-a p{
  margin:0 0 12px;max-width:860px;
  font-size:16.5px;line-height:1.95;color:#5f6a75;
  word-break:break-word;
}
.rf-faq .rf-faq-a p:last-child{margin-bottom:0;}
.rf-faq .rf-faq-a b,
.rf-faq .rf-faq-a strong{color:#2b3440;font-weight:bold;}

/* 答案中的價格／條件條列（Q6、Q8 使用） */
.rf-faq .rf-faq-list{
  margin:4px 0 12px;padding:0;max-width:860px;list-style:none;
}
.rf-faq .rf-faq-list li{
  position:relative;
  margin:0 0 7px;padding-left:16px;
  font-size:16.5px;line-height:1.9;color:#5f6a75;
}
.rf-faq .rf-faq-list li:last-child{margin-bottom:0;}
.rf-faq .rf-faq-list li:before{
  content:"";position:absolute;left:0;top:12px;
  width:4px;height:4px;border-radius:50%;background:#9dc0d8;
}
.rf-faq .rf-faq-list b{color:#2b3440;}

.rf-faq .rf-faq-a a{
  color:#00539f;text-decoration:none;
  border-bottom:1px solid #cfe0ee;
  transition:color .25s ease,border-color .25s ease;
}
.rf-faq .rf-faq-a a:hover{color:#0b3f74;border-bottom-color:#0b3f74;}

@keyframes rfFaqIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

/* ---------- 面板底部：找不到答案的聯絡列（低調，不與流程 CTA 搶視線） ---------- */
.rf-faq .rf-faq-more{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;
  padding:18px 26px 18px var(--faq-indent);
  background:#f7fafd;
  border-top:1px solid #e8eff6;
}
.rf-faq .rf-faq-more p{margin:0;font-size:16px;line-height:1.7;color:#5f6a75;}
.rf-faq .rf-faq-more p b{color:#171c61;}
.rf-faq .rf-faq-more-links{display:flex;flex-wrap:wrap;align-items:center;}
.rf-faq .rf-faq-more-links a{
  display:inline-block;padding:2px 16px;
  font-size:15.5px;font-weight:bold;line-height:1.5;
  color:#00539f;text-decoration:none;
  transition:color .25s ease;
}
.rf-faq .rf-faq-more-links a:first-child{padding-left:0;}
.rf-faq .rf-faq-more-links a + a{border-left:1px solid #d8e3ee;}
.rf-faq .rf-faq-more-links a:hover{color:#0b3f74;text-decoration:underline;text-underline-offset:4px;}

/* ---------- 響應式 ---------- */
@media (max-width:1199px){
  .rf-faq{--faq-indent:70px;}
  .rf-faq .rf-faq-q{font-size:18px;}
  .rf-faq .rf-faq-a{padding-right:40px;}
  .rf-faq .rf-faq-more{padding-right:22px;}
}
@media (max-width:991px){
  .rf-faq .rf-faq-item > summary{padding:20px 20px 20px 18px;gap:14px;}
  .rf-faq .rf-faq-num{width:30px;}
  .rf-faq{--faq-indent:62px;}
  .rf-faq .rf-faq-a{padding-right:22px;}
  .rf-faq .rf-faq-more{padding-left:var(--faq-indent);}
}
/* 站上 .ide_m3 從 768px 起 padding 改為 50px，這裡跟上，兩塊間距才一致 */
@media (max-width:768px){
  .rf-faq{padding-top:50px;}
}
@media (max-width:767px){
  .rf-faq{--faq-indent:50px;--faq-ico:28px;padding:50px 0 50px;}
  .rf-faq .rf-faq-lead{font-size:16px;margin-bottom:24px;}
  .rf-faq .rf-faq-item > summary{padding:18px 16px;gap:10px;align-items:flex-start;}
  .rf-faq .rf-faq-num{width:24px;padding-top:3px;font-size:12.5px;}
  .rf-faq .rf-faq-q{font-size:17px;line-height:1.65;}
  .rf-faq .rf-faq-ico{margin-top:1px;}
  .rf-faq .rf-faq-a{padding:0 16px 20px var(--faq-indent);}
  .rf-faq .rf-faq-a p,
  .rf-faq .rf-faq-list li{font-size:16px;line-height:1.9;}
  .rf-faq .rf-faq-more{padding:16px;justify-content:flex-start;}
  .rf-faq .rf-faq-more-links a{font-size:15px;padding:2px 12px;}
}

/* ---------- 尊重系統「減少動態」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .rf-faq .rf-faq-item:before,
  .rf-faq .rf-faq-ico,
  .rf-faq .rf-faq-ico:before,
  .rf-faq .rf-faq-ico:after{transition:none !important;}
  .rf-faq .rf-faq-a{animation:none;}
}