/* ==========================================================================
   高雄租車流程版塊  .rf-flow   v4.0（四步驟色塊卡）
   適用：欣興高雄租車（SoberCMS / themes/zy001）
   放置位置：themes/zy001/css/rent_flow.css（以 <link> 引入）
   設計依據（皆取自站上 css.css）：
     · 區塊標題沿用 .indextitle（News 最新消息 / Car 車款介紹）同一套樣式
     · 容器交給 .indexcon.ide_m3 的 padding 控制，本區塊不再自帶左右留白
     · 站上為平面設計語彙（直角、細邊框、無漸層、無重陰影）
   v4.0 變更：四個步驟各自加上品牌藍色系底卡（由淺到深表示流程推進），
              卡片頂端 3px 色條、圓框改用該步驟的重色，四卡等高對齊。
   ========================================================================== */

.rf-flow{
  --rf-circle:126px;
  --rf-gap:34px;
  --rf-pad-top:30px;
  position:relative;
  margin-top:-25px;              /* 站上 .ide_m3 的 padding-top:70px 對本區塊偏大，
                                   用負 margin 回吸 25px → 上方實際 45px */
  padding:0 0 70px;              /* 下方因常與其他兄弟區塊相鄰，自行補 70px 避免貼邊 */
  background:none;
  font-family:"Microsoft JhengHei",PMingLiU,sans-serif;
  color:#666;
  text-align:left;
}

/* ---------- 區塊標題：完全沿用站上 .indextitle ---------- */
.rf-flow .indextitle{
  color:#000;                    /* 站上 .indextitle 預設為白色，此處覆寫為黑色 */
  margin:0 0 22px 0;
  padding-left:10px;
}
.rf-flow .indextitle span:before{
  border-bottom-color:#000;      /* 中文標題右側延伸的長橫線 */
}
.rf-flow .rf-lead{
  margin:0 0 40px 10px;
  font-size:16px;line-height:1.9;color:#888;
}

/* ---------- 四步驟：色塊卡 ---------- */
.rf-flow .rf-steps{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:var(--rf-gap);
  margin:0;padding:0;list-style:none;
}
.rf-flow .rf-step{
  position:relative;
  display:flex;flex-direction:column;
  flex:1 1 0;min-width:0;
  padding:var(--rf-pad-top) 20px 26px;
  box-sizing:border-box;
  background:#f3f8fc;
  border:1px solid #e0ecf5;
  border-radius:0;                          /* 站上為直角語彙 */
  text-align:center;
  /* 靜態柔和陰影（品牌藍染色，不用純黑，避免髒灰） */
  box-shadow:0 6px 18px rgba(23,28,97,.10),0 2px 4px rgba(23,28,97,.06);
  transition:background .3s ease,border-color .3s ease,
             box-shadow .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
/* 卡片頂端色條（3px，隨步驟加深） */
.rf-flow .rf-step:before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:#3f93bf;
}
/* 步驟色階：① 淺藍 → ④ 品牌深藍（底色） */
.rf-flow .rf-step:nth-child(1){background:#f4f9fd;border-color:#dfeaf4;}
.rf-flow .rf-step:nth-child(1):before{background:#3f93bf;}
.rf-flow .rf-step:nth-child(2){background:#ebf3fb;border-color:#d5e5f2;}
.rf-flow .rf-step:nth-child(2):before{background:#2b7bb0;}
.rf-flow .rf-step:nth-child(3){background:#e2eef8;border-color:#cbdfee;}
.rf-flow .rf-step:nth-child(3):before{background:#12558f;}
.rf-flow .rf-step:nth-child(4){background:#d9e7f4;border-color:#c2d8e9;}
.rf-flow .rf-step:nth-child(4):before{background:#171c61;}

/* 步驟箭頭（置於卡片間距中，對齊圓心） */
.rf-flow .rf-step:not(:last-child):after{
  content:"";position:absolute;
  top:calc(var(--rf-pad-top) + var(--rf-circle) / 2);
  right:calc(var(--rf-gap) * -1 + 2px);
  width:calc(var(--rf-gap) - 4px);height:14px;margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath d='M0 7h28M22 2l5 5-5 5' fill='none' stroke='%23809db8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  background-size:contain;z-index:3;pointer-events:none;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
/* 卡片上浮時箭頭反向位移，維持原高度不跟著跳 */
.rf-flow .rf-step:hover:after{transform:translateY(6px);}

/* ---------- 圓形圖示：實心色盤 + 白色線條圖示（隨步驟加深） ---------- */
.rf-flow .rf-circle{
  display:flex;align-items:center;justify-content:center;
  width:var(--rf-circle);height:var(--rf-circle);box-sizing:border-box;
  margin:0 auto 16px;
  border:1px solid #3f93bf;border-radius:50%;
  background:#3f93bf;
  transition:background .3s ease,border-color .3s ease,
             transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
.rf-flow .rf-circle svg{
  width:44%;height:44%;
  fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* 圓盤色階：隨卡片同步加深 */
.rf-flow .rf-step:nth-child(2) .rf-circle{background:#2b7bb0;border-color:#2b7bb0;}
.rf-flow .rf-step:nth-child(3) .rf-circle{background:#12558f;border-color:#12558f;}
.rf-flow .rf-step:nth-child(4) .rf-circle{background:#171c61;border-color:#171c61;}
/* 卡片 hover：整張上浮 6px + 陰影加深，圓盤微微放大並帶投影 */
.rf-flow .rf-step:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -14px rgba(23,28,97,.35),0 6px 12px rgba(23,28,97,.08);
}
.rf-flow .rf-step:hover .rf-circle{
  transform:scale(1.05);
  box-shadow:0 12px 22px -10px rgba(23,28,97,.55);
}
.rf-flow .rf-step:nth-child(1):hover{background:#edf5fc;border-color:#c9dfef;}
.rf-flow .rf-step:nth-child(2):hover{background:#e3eef9;border-color:#c0d9ed;}
.rf-flow .rf-step:nth-child(3):hover{background:#d9e8f6;border-color:#b6d2e9;}
.rf-flow .rf-step:nth-child(4):hover{background:#cfe0f1;border-color:#adc8e3;}
.rf-flow .rf-step:nth-child(1):hover .rf-circle{background:#3585b0;border-color:#3585b0;}
.rf-flow .rf-step:nth-child(2):hover .rf-circle{background:#226da0;border-color:#226da0;}
.rf-flow .rf-step:nth-child(3):hover .rf-circle{background:#0e4a7e;border-color:#0e4a7e;}
.rf-flow .rf-step:nth-child(4):hover .rf-circle{background:#101544;border-color:#101544;}

/* STEP 標籤（對應站上的英文小字） */
.rf-flow .rf-step-label{
  display:block;margin:0 0 8px;
  font-size:12.5px;font-weight:bold;line-height:1.6;letter-spacing:3px;
  color:#8b9cb0;
}
.rf-flow .rf-step:nth-child(1) .rf-step-label{color:#5f93b5;}
.rf-flow .rf-step:nth-child(2) .rf-step-label{color:#3c7ba6;}
.rf-flow .rf-step:nth-child(3) .rf-step-label{color:#2b6296;}
.rf-flow .rf-step:nth-child(4) .rf-step-label{color:#2b3477;}
.rf-flow .rf-step h3{
  margin:0 0 10px;
  font-size:21px;font-weight:bold;line-height:1.5;color:#111;letter-spacing:.5px;
}
.rf-flow .rf-desc{
  margin:0 auto 16px;max-width:100%;
  font-size:15px;line-height:1.8;color:#5e6b7a;
}

/* 細節：細線分隔，站上常見的淺灰層級；貼齊卡片底部使四卡對齊 */
.rf-flow .rf-list{
  margin:16px 0 0;padding:16px 0 0;max-width:100%;list-style:none;
  border-top:1px solid rgba(23,28,97,.10);text-align:left;
}
.rf-flow .rf-list li{
  position:relative;
  margin:0 0 9px;padding-left:15px;
  font-size:14.5px;line-height:1.85;color:#5f6a75;
  word-break:break-word;
}
.rf-flow .rf-list li:last-child{margin-bottom:0;}
.rf-flow .rf-list li:before{
  content:"";position:absolute;left:0;top:11px;
  width:4px;height:4px;border-radius:50%;background:#a9bccd;
}
.rf-flow .rf-step:nth-child(1) .rf-list li:before{background:#9dc0d8;}
.rf-flow .rf-step:nth-child(2) .rf-list li:before{background:#89aecb;}
.rf-flow .rf-step:nth-child(3) .rf-list li:before{background:#7c9dc0;}
.rf-flow .rf-step:nth-child(4) .rf-list li:before{background:#7688b4;}
.rf-flow .rf-list b{color:#333;font-weight:bold;}
.rf-flow .rf-list a{
  color:#00539f;text-decoration:none;border-bottom:1px solid #cfe0ee;
  transition:color .25s ease,border-color .25s ease;
}
.rf-flow .rf-list a:hover{color:#0b3f74;border-bottom-color:#0b3f74;}

/* ---------- 貨車 CTA：站上的深色帶狀區塊語彙 ---------- */
.rf-flow .rf-cta{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  margin-top:44px;padding:30px 34px;box-sizing:border-box;
  background:#171c61;
  border-radius:0;               /* 站上為直角語彙 */
  box-shadow:0 14px 30px -16px rgba(23,28,97,.65);
}
.rf-flow .rf-cta-txt{position:relative;z-index:2;flex:1 1 480px;min-width:0;}
.rf-flow .rf-cta-txt h3{
  margin:0 0 8px;font-size:20px;font-weight:bold;line-height:1.6;color:#fff;
}
.rf-flow .rf-cta-txt p{margin:0;font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.8);}
.rf-flow .rf-btns{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;}
.rf-flow .rf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 24px;
  font-size:15px;font-weight:bold;line-height:1;white-space:nowrap;
  border-radius:0;border:1px solid transparent;
  text-decoration:none !important;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.rf-flow .rf-btn-main{color:#171c61 !important;background:#fff;border-color:#fff;}
.rf-flow .rf-btn-main:hover{background:#dce6f3;border-color:#dce6f3;}
.rf-flow .rf-btn-line{color:#fff !important;background:transparent;border-color:rgba(255,255,255,.65);}
.rf-flow .rf-btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff;}

/* ---------- 進場滑入：由 JS 加上 .rf-anim 才啟用（無 JS／減少動態時直接顯示） ---------- */
.rf-flow.rf-anim .rf-step{
  opacity:0;transform:translateY(26px);
}
.rf-flow.rf-anim .rf-cta{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.rf-flow.rf-anim .rf-step.is-in,
.rf-flow.rf-anim .rf-cta.is-in{opacity:1;transform:translateY(0);}
/* 進場完成後 hover 仍要能上浮（優先序需高於 .is-in） */
.rf-flow.rf-anim .rf-step.is-in:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -14px rgba(23,28,97,.35),0 6px 12px rgba(23,28,97,.08);
}

/* ---------- 響應式 ---------- */
@media (max-width:1365px){
  .rf-flow{--rf-circle:112px;--rf-gap:26px;--rf-pad-top:26px;}
  .rf-flow .rf-step{padding-left:16px;padding-right:16px;}
  .rf-flow .rf-step h3{font-size:20px;}
  .rf-flow .rf-desc{font-size:14.5px;}
  .rf-flow .rf-list li{font-size:14px;}
}
@media (max-width:1199px){
  .rf-flow .rf-step:not(:last-child):after{display:none;}
  .rf-flow{--rf-circle:108px;}
}
@media (max-width:991px){
  .rf-flow{--rf-circle:104px;--rf-gap:24px;}
  .rf-flow .rf-step{flex:1 1 calc(50% - var(--rf-gap));}
  .rf-flow .rf-lead{margin-bottom:34px;}
  .rf-flow .rf-step h3{font-size:19px;}
  .rf-flow .rf-cta{padding:26px 24px;}
  .rf-flow .rf-cta-txt h3{font-size:18px;}
}
/* 站上 .ide_m3 在 768px 起 padding 變 50px，負 margin 同步縮小 → 上方維持 35px */
@media (max-width:768px){
  .rf-flow{margin-top:-15px;}
}
@media (max-width:767px){
  .rf-flow .rf-lead{font-size:15px;margin-bottom:28px;}
  .rf-flow{--rf-circle:96px;--rf-gap:18px;--rf-pad-top:26px;margin-top:-15px;}
  .rf-flow .rf-step{flex:1 1 100%;padding:26px 20px 24px;}
  .rf-flow .rf-step h3{font-size:19px;}
  .rf-flow .rf-desc{font-size:15px;}
  .rf-flow .rf-list{max-width:340px;margin-left:auto;margin-right:auto;}
  .rf-flow .rf-list li{font-size:14.5px;}
  .rf-flow .rf-cta{margin-top:30px;padding:24px 20px;gap:18px;}
  .rf-flow .rf-cta-txt h3{font-size:17px;}
  .rf-flow .rf-btns{width:100%;}
  .rf-flow .rf-btn{width:100%;}
  /* 手機為點擊操作，取消上浮避免點一下卡片跳動（保留陰影） */
  .rf-flow .rf-step:hover,
  .rf-flow.rf-anim .rf-step.is-in:hover{transform:none;}
  .rf-flow .rf-step:hover .rf-circle{transform:none;}
  .rf-flow .rf-step:hover:after{transform:none;}
}

/* ---------- 尊重系統「減少動態」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .rf-flow .rf-step,
  .rf-flow .rf-circle,
  .rf-flow .rf-step:not(:last-child):after,
  .rf-flow .rf-cta{transition:none !important;}
  .rf-flow.rf-anim .rf-step,
  .rf-flow.rf-anim .rf-cta{opacity:1;transform:none;}
  .rf-flow .rf-step:hover,
  .rf-flow.rf-anim .rf-step.is-in:hover{transform:none;}
  .rf-flow .rf-step:hover .rf-circle{transform:none;}
  .rf-flow .rf-step:hover:after{transform:none;}
}