/* ==========================================================================
   全站樣式微調

   放「不屬於單一功能」的零星覆蓋。頁內錨點選單移入 header 的樣式在
   page-menu-header.css,兩者互不相干。
   載入順序必須在 app.css 之後(見 _Layout.cshtml)。

   ※ 首頁多數區塊的 HTML 存在資料庫、由 CKEditor 編輯,經 @Html.Raw 原樣輸出
     (見 Index.cshtml 的 @Html.Raw(ViewBag.xxxContent))。這些 markup 改不到,
     只能靠 CSS 覆蓋。
   ========================================================================== */

/* --------------------------------------------------------------------------
   比較區塊(.box-compare)上方的大圖:about7-1.png / about7-2.png

   CKEditor 在內容裡寫死了 width="537",而 .img-fluid 只給 max-width:100%,
   所以圖片最寬只到原生的 537px,不會跟著卡片(.inner)一起變寬。
   改為填滿卡片寬度。CSS 的 width 優先於 HTML 的 width 屬性,不需要 !important。

   ※ .img-top 是絕對定位、寬度 100%,對應的包含區塊是 .inner 的 padding box,
     所以 width:100% 就是卡片的可見寬度。
   ※ 卡片內清單的「勝」小圖(about7-3.png)在 .list-compare li .img,不在
     .img-top 底下,不受這條影響。
   -------------------------------------------------------------------------- */
.box-compare .img-top img {
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   訂車流程(#carBookingProcess)改版

   來源:設計端交付包 /Users/markyaoyao/Downloads/personalrent
        原始註記為 "carBookingProcess Edited by Wendy (2026.07.23)",
        該包是把這段附加在 app.css 尾端。此處改放到本檔,避免動到打包產物
        app.css —— 原團隊重新 build 前端時會被還原。
   內容與交付包完全一致,未做任何修改。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 991.98px){
    .service-process_item{
        padding-left: 16px;
        padding-right: 16px;
    }
}
@media screen and (max-width: 479px) {
    .service-process_item {
        max-width: 100%;
    }
}
.carBooking-process{
    flex: 0 0 auto;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    position: relative;
}
.carBooking-process .process-img,
.expiration .process-img{
    max-width: 200px;
    width: 100%;
    height: auto;
}
.carBooking-process .text,
.expiration .text{
    display: flex;
    align-items: center;
}
.carBooking-process .text h4,
.expiration .text h4{
    font-size: 22px;
}
.carBooking-process .text img,
.expiration .text img{
    width: 24px;
    height: 24px;
}

.carBooking-process .process-arrow{
    position: absolute;
    right: -20px;
    top:30%;
    width: 40px;
    height: 40px;
}
@media (max-width: 991.98px){
    .carBooking-process{
        flex: 0 0 auto;
        width: 50%;
    }
    .carBooking-process:nth-child(3),
    .carBooking-process:last-child{
        margin-top: 40px;
    }
}
@media (max-width: 639.98px){
    .carBooking-process{
        flex: 0 0 auto;
        width: 100%;
    }
    .carBooking-process:nth-child(2),
    .carBooking-process:nth-child(3),
    .carBooking-process:last-child{
        margin-top: 60px;
    }    
    .carBooking-process .process-arrow{
        right: 50%;
        transform: translateX(50%) rotate(90deg);
        top:105%;
    }
}

.expiration{
    flex: 0 0 auto;
    width: calc((100% - 120px) / 2 );
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.expiration:nth-child(2){
    width: 120px;
    align-items: flex-start;
    text-align: center;
}

.expiration:nth-child(2) .process-img{
    position: absolute;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    width: 400px;
    height: auto;
    z-index: 1;
}

.expiration:nth-child(2) .title-en{  
    font-size: 32px;
    height: 48px;
    position: relative
}

.expiration:nth-child(2) .red-line{
    position:absolute;
    bottom:0;
    left:0;
    height:0;
    width:38px;
    border-style:solid;
    border-color:#d7000f transparent transparent #d7000f;
    border-width:3px 38px 3px 0;
    transform:rotate(-5deg);
}

.expiration .process-txt{
    display: flex;
    flex-direction: column;
    align-items: center; 
}

@media (max-width: 991.98px){
    .expiration{
        flex-direction: column;
    }
    .expiration:nth-child(2){
        align-items: center;
    }
    .expiration:first-child .process-txt{
        order: 1;
    }
    .expiration:nth-child(2) .process-img{
        width: 300px;
    }
}

@media (max-width: 639.98px){
    .expiration,
    .expiration:nth-child(2){
        width:100%;
        margin-top: 16px;
    }
    .expiration:nth-child(2) .process-img{
        display: none;
    }
}

/* --------------------------------------------------------------------------
   專案推薦搜尋表單(#case .form-1)的 label 寬度

   app.css:17175 在 ≥1072px 把 .form-1 .col-form-label 固定為
   width:115px + padding-left:30px,實際可用寬度只有 85px。
   「月租金預算」5 個中文字約 80px,剛好卡在邊緣而換行,該列的 label 變成兩行高,
   select 就跟其他列對不齊。加寬到 140px(可用 110px)即可容納。

   另外 768~1071px 這段沒有上述固定寬度規則,col-md-auto 讓每個 label 各自
   依字數收縮,select 起始位置也會參差,因此這裡從 768px 起就統一寬度。

   ※ #rent .form-1 的「車價折扣舉例」(6 字)有完全相同的問題,
     若要一併處理,把選擇器改成 .form-1 即可(會同時套用到兩個表單)。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    #case .form-1 .col-form-label {
        flex: 0 0 auto;
        width: 140px;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   專案推薦 Step2 卡片跟著撐高,與 Step1 對齊(#case)

   app.css:17075 已有 .case .inner .left .form-box { height:100% },Step1 卡片
   會撐滿整列;右欄沒有對應規則,Step2 卡片維持內容高度,看起來就沒對齊。

   右欄改為直向 flex,讓 #search 吃掉剩餘空間、其中的 .form-box 再撐滿。
   底下的按鈕列(#searchrent_RC)仍留在最下方,不會被推出去;
   #recommend 預設 hidden,不佔空間。

   ※ 這是「跟著撐高、底部對齊」,不是讓兩張卡片的高度數值相等 ——
     按鈕列與 .right 的 padding 都在右欄內,Step2 卡片本身仍會略矮一些。
   ※ 只在 ≥992px 生效。以下寬度 .col-lg 會改為上下堆疊,撐高只會多出一塊空白。
   ※ 若 Step2 內容本來就比 Step1 高,flex-grow 不會把它壓縮,行為不變。
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .case .inner .right {
        display: flex;
        flex-direction: column;
    }

    .case .inner .right > #search {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .case .inner .right > #search > .form-box {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Step2 專案清單(#selectPrj)的捲軸

   app.css:13022 一帶把全站捲軸設成 width:3px,而且沒有任何
   ::-webkit-scrollbar-button 規則 —— WebKit 在捲軸被自訂樣式接管後,
   若沒有明確定義按鈕就不會畫出上下箭頭,所以現在只有一條細線。

   這裡只針對 #selectPrj 覆蓋:加寬到 16px,並補上上下箭頭按鈕。
   選擇器權重 (1,0,0) 高於 app.css 的 body:not(.ext-mac) ␣ (0,1,1),可直接蓋過。

   ※ ::-webkit-scrollbar-* 僅 Chromium / Safari 支援。Firefox 只吃
     scrollbar-width / scrollbar-color,無法做出箭頭,會退回系統原生捲軸。
   ※ 箭頭用內嵌 SVG,顏色中的 # 必須寫成 %23,否則會被當成片段識別字。
   -------------------------------------------------------------------------- */
#selectPrj::-webkit-scrollbar {
    width: 16px;
}

#selectPrj::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

#selectPrj::-webkit-scrollbar-thumb {
    background-color: #9a9a9a;
    border: 3px solid #f1f1f1;
    border-radius: 8px;
}

    #selectPrj::-webkit-scrollbar-thumb:hover {
        background-color: #6f6f6f;
    }

/* 上下箭頭:必須明確指定 single-button 與尺寸,否則 WebKit 不會顯示 */
#selectPrj::-webkit-scrollbar-button:single-button {
    display: block;
    width: 16px;
    height: 16px;
    background-color: #f1f1f1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px 8px;
}

    #selectPrj::-webkit-scrollbar-button:single-button:hover {
        background-color: #e2e2e2;
    }

    #selectPrj::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 1 L8 6 L0 6 Z' fill='%23555555'/></svg>");
    }

    #selectPrj::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 7 L0 2 L8 2 Z' fill='%23555555'/></svg>");
    }

/* --------------------------------------------------------------------------
   我要預訂車輛 Modal(#bookingModal / #bookingDone)

   app.css:16347 一帶有專案自訂的覆寫:
       .modal .modal-content { background-color: inherit; }   ← 白底被改成透明
       .modal .modal-body    { background-color: #fff; }      ← 只有 body 補回白底
   這是為了配合影片 Modal(#mv) —— 它只有 header + body,header 透明剛好讓白色
   關閉鈕浮在深色影片背景上。但完整的 header + body + footer 結構就會露出透明底。

   這裡只針對新增的兩個 Modal 補回白底,不改動 app.css,既有 Modal 行為不受影響。
   -------------------------------------------------------------------------- */
#bookingModal .modal-content,
#bookingDone .modal-content {
    background-color: #fff;
}

#bookingModal .modal-header {
    background-color: #fff;
    border-bottom: 1px solid #d6d6d6;   /* app.css 的 .modal .modal-header 把 border 拿掉了 */
    min-height: auto;                   /* 同上,原本被撐成 70px */
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

#bookingModal .modal-footer {
    background-color: #fff;
    border-top: 1px solid #d6d6d6;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

/* .modal .modal-body 的 padding 被設為 0,這裡的表單需要內距 */
#bookingModal .modal-body,
#bookingDone .modal-body {
    background-color: #fff;
}

/* 關閉鈕:app.css 的 .modal .close 是絕對定位(供影片 Modal 用),此處不需要 */
#bookingModal .modal-header .btn-icon {
    color: #120703;
    line-height: 1;
}

    #bookingModal .modal-header .btn-icon:hover {
        color: #d7000f;
    }

/* --------------------------------------------------------------------------
   我要預訂車輛 Modal 的表單排版(#bookingForm)

   對齊問題:markup 上的 label 雖然帶了 label-width,但那個 class 的定義是
       .form-1 .label-width { width: 140px }   (app.css:17190)
   需要祖先有 form-1 class 才會生效,而本表單是 #bookingForm、沒有該 class,
   所以 label 各自依字數收縮(「姓名」2 字 vs「身分證字號」5 字),input 起始
   位置便參差不齊。這裡直接指定寬度,不套用 .form-1(那會連帶帶進一整組
   為頁面主表單設計的樣式)。

   高度:Modal 內共 11 列,.form-control 預設 font-size 1.125rem + line-height 1.8
   疊起來過高。改用 app.css 既有的 sm 尺寸數值,並縮小列距。
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
    #bookingForm .col-form-label {
        flex: 0 0 auto;
        width: 112px;          /* 最長的「身分證字號」5 字 + 星號約 92px,留 20px 餘裕 */
        white-space: nowrap;
        text-align: left;
    }
}

/* 列距由 mb-3(1rem) 縮為 0.5rem,11 列共省下約 5.5rem */
#bookingForm .row {
    margin-bottom: 0.5rem !important;
}

/* 比照 app.css 的 .form-control-sm / .form-select-sm,不必在 11 個元素上逐一加 class */
#bookingForm .form-control,
#bookingForm .form-select {
    font-size: 0.984375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
    min-height: auto;
}

#bookingForm .col-form-label {
    font-size: 0.984375rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

#bookingForm textarea.form-control {
    line-height: 1.5;
}

/* 驗證碼圖與輸入框同高 */
#bookingForm #bkCaptcha {
    height: 32px;
    width: 72px;
}

/* --------------------------------------------------------------------------
   我要預訂車輛 Modal「出生年月日」

   原生 type="date" 的提示字(年/月/日)由瀏覽器語系決定,無法改成 yyyy/mm/dd,
   因此顯示用文字欄位,右側疊一顆月曆鈕;真正的 type="date"(.bk-date-picker)
   只負責提供原生日期選擇器,本身不顯示。
   不能用 display:none —— 那樣 showPicker() 會失效,且選擇器也需要定位點,
   所以縮成 1px、透明,放在月曆鈕底下。
   -------------------------------------------------------------------------- */
#bookingModal .bk-date-wrap {
    position: relative;
}

    #bookingModal .bk-date-wrap .form-control {
        padding-right: 2.5rem; /* 讓出月曆鈕的位置 */
    }

#bookingModal .bk-date-picker {
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

#bookingModal .bk-date-btn {
    position: absolute;
    top: 50%;
    right: calc(var(--bs-gutter-x, 0.25rem) * 0.5 + 0.25rem);
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    border: 0;
    background: transparent;
    color: #495057;
    line-height: 1;
    cursor: pointer;
}

    #bookingModal .bk-date-btn:hover {
        color: #000;
    }

/* --------------------------------------------------------------------------
   我要預訂車輛 Modal 右欄「您所選擇的方案總覽」

   Reboot 給 dl 的預設 margin-bottom 是 1rem,六列疊起來間距過大。
   -------------------------------------------------------------------------- */
#bookingModal .form-box dl.row {
    margin-bottom: 0.35rem;
}

    #bookingModal .form-box dl.row dt,
    #bookingModal .form-box dl.row dd {
        margin-bottom: 0;
        line-height: 1.6;
    }

/* 涵蓋服務的六個項目,間距比照試算區但略為收斂 */
#bookingModal .form-box .form-check {
    margin-bottom: 0.15rem;
    min-height: auto;
}

    #bookingModal .form-box .form-check:last-child {
        margin-bottom: 0;
    }

    #bookingModal .form-box .form-check .form-check-label {
        line-height: 1.5;
    }

/* --------------------------------------------------------------------------
   Modal 開啟時鎖定背景捲動(#bookingModal / #bookingDone)

   問題:app.css:13017 的 html, body { width:100vw; overflow-x:hidden } 讓
   **html** 成為捲動容器,而 Bootstrap 5 的捲動鎖只在 body 上設 overflow:hidden。
   實測(1200px 視窗):
       開啟前 header 寬 1200px、捲軸 15px
       開啟後 header 寬 1185px、捲軸「仍是 15px」
   也就是背景根本沒被鎖住(還能捲動),Bootstrap 卻多加了 15px 的 padding-right
   補償,把內容往內壓縮而造成位移 —— 兩個症狀同源。

   修法:改在 html 上鎖(由 JS 掛 .bk-modal-lock),並取消 Bootstrap 那個
   算錯對象的 padding 補償。實測修正後 header 前後皆為 1200px、捲軸歸零。
   -------------------------------------------------------------------------- */
html.bk-modal-lock {
    overflow: hidden !important;
}

/* Bootstrap 依 body 捲軸寬度加的補償,在本專案是多餘的(捲軸在 html 上) */
body.modal-open {
    padding-right: 0 !important;
}

/* ==========================================================================
   前台訂單查詢頁 (Views/Home/OrderQuery.cshtml)

   這是本站第一個「非首頁」的前台頁面，所以沒有既有版型可沿用；
   下面的規則都建立在既有的原子 class 之上（.container-max-text / .form-box /
   .form-title-header / .rent-list / .btn-w），只補版面必要的差異。
   ========================================================================== */

/* 滿版背景圖(設計師交付 order1-1.jpeg,藍天/汽車/人物)。
   ::before 疊一層左深右淺的漸層,讓左/中的白色標題與標籤在亮部也讀得清楚,
   右側人物維持明亮 —— 與示意圖的自然明暗一致。 */
.order-query {
    position: relative;
    /* 相對於本 CSS 檔(styles/css/)的路徑,正式站的 /Personal 虛擬目錄下也正確 */
    background: url("../img/order1-1.jpeg") center center / cover no-repeat;
    /* 讓背景圖成為一條像樣的橫幅;結果列表步驟內容較高時會自然超過 */
    min-height: 460px;
}

.order-query::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.08));
    pointer-events: none;
}

.order-query > .content {
    position: relative;
    z-index: 1;
}

.order-query h2 {
    margin-bottom: 8px;
    color: #fff;
}

/* 手機輸入 / OTP 步驟的說明文字直接浮在背景圖上,改白字。
   (結果列表步驟沒有用到 .oq-subtext,不受影響) */
.order-query .oq-subtext {
    color: #fff;
}

/* 輸入步驟的表單容器:依示意圖直接浮在背景上,不要白卡片。
   標籤白字、輸入框維持預設白底,置中且限寬。 */
.order-query .oq-form-plain {
    max-width: 760px;
    margin: 0 auto;
}

.order-query .oq-form-plain .oq-label {
    color: #fff;
}

.order-query .oq-form-plain a {
    color: #fff;
    text-decoration: underline;
}

/* .form-box 是四角全圓，接在 .form-title-header（上圓角）底下會露出縫。
   這裡把上方兩角拉直，讓標題橫幅與內容盒接成一塊。
   ※ 不用 app.css 既有的 .form-box-t —— 它是「上圓下直」，方向剛好相反。 */
.order-query-box {
    border-radius: 0 0 15px 15px;
}

/* 欄位標籤：置中版面下用固定寬度才對得齊，
   沿用 .form-1 那組的話會因為沒有 .form-1 祖先而完全不生效。 */
.order-query .oq-label {
    width: 120px;
    text-align: right;
    padding-right: 12px;
    margin-bottom: 0;
    /* 「簡訊驗證碼」5 個字比其他標籤長，固定寬度下會折行 */
    white-space: nowrap;
}

/* 簡訊驗證碼輸入框：只有 6 碼，不需要撐滿整欄 */
.order-query .oq-code-input {
    width: 160px;
}

/* 圖形驗證碼列：輸入框 + 驗證碼圖並排，中間留間隔、兩者同高 */
.order-query .oq-vcode-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-query .oq-vcode-row .form-control {
    flex: 1 1 auto;
}

.order-query .oq-captcha-img {
    flex: 0 0 auto;
    height: 38px;          /* 與 form-control 預設高度一致 */
    width: auto;
    border-radius: 4px;
    cursor: pointer;
}

@media screen and (max-width: 575px) {
    .order-query .oq-label {
        width: auto;
        text-align: left;
        padding-right: 0;
    }
}

/* 單筆訂單卡片 */
.order-query .order-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background-color: #fff;
}

.order-query .order-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.order-query .order-card-head .order-no {
    font-weight: 700;
    font-size: 1.05rem;
}

.order-query .order-card-head .order-date {
    color: #888;
    font-size: .9rem;
}

/* .rent-list 的 dt 在首頁是 min-width:140px，
   這一頁欄位名稱較長（初期保證金），略放寬避免換行 */
.order-query .rent-list .dt {
    min-width: 120px;
}

.order-query .rent-list {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   錨點選單多了「預約訂單查詢」後共 8 項。
   page-menu-header.css 在 992–1110px 已經把左右間距縮到 10px，
   8 項在這個區間仍可能撐爆一列，這裡再收一點並縮小字級。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) and (min-width: 992px) {
    #header .page-menu .nav > ul > li {
        margin: 0 7px;
    }

    #header .page-menu-list .list-link {
        font-size: .95rem;
    }
}

/* 訂單查詢結果頁：上方三行說明 + 下方注意事項
   （文字沿用預訂確認信 Booking_user_tw.html，樣式仿信件的灰字/灰底注意事項框） */
.order-query .oq-note-top {
    color: #666;
    line-height: 1.9;
    margin-bottom: 20px;
}

.order-query .oq-note-top .oq-mylink {
    color: #d7000f;
    text-decoration: underline;
}

.order-query .oq-note-bottom {
    color: #666;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 24px;
    line-height: 1.9;
    font-size: .9rem;
}

/* ==========================================================================
   AI 客服浮動按鈕（_Footer.cshtml）—— 智能客服暫未上線，整段先註解停用，
   恢復原「客服專線 / 留言洽詢」面板的排版。上線時拿掉此註解即可。
   說明：.float-right 原本是 block 容器,子元素靠左排。原 .quick-link 與
   .scroll-to-top 都是 40px 才剛好對齊;智能客服按鈕較寬(54px),需要讓容器
   置中對齊,兩顆按鈕才會共用同一垂直中線。
   ==========================================================================

.float-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.float-right .ai-chat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    padding: 10px 0 8px;
    margin-bottom: 10px;
    border-radius: 16px;
    background-color: #fff;
    color: #333;
    font-size: 12px;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 5px 12px 20px -5px rgba(36, 36, 36, 0.4);
    transition: color 0.2s ease-in-out;
}

.float-right .ai-chat-btn:hover {
    color: #d7000f;
}

.float-right .ai-chat-btn .ai-icon {
    (ai_service.png 為 170x200 的客服人員插圖,維持比例)
    width: 44px;
    height: auto;
    margin-bottom: 4px;
}
*/