﻿/* ============================================================
   rentpage.css — 租屋模組 2026 覆寫層
   搭配：search.css + buylist.css（2026 共用）+ houseList.css（2023，selectPanel 依賴）
   用途：
   1. Canvas 變數映射（houseList.css 舊面板依賴）
   2. 舊 Angular selectPanel 搜尋列換皮為 2026 search-strip 欄位風格
   3. 租屋卡片（list-item 家族）租金顯示微調
   ============================================================ */

/* ===== Canvas 變數映射 ===== */

/* ===== 搜尋列換皮 ===== */
/* ⚠ 搜尋列樣式由 search.css（ct-* directive）提供；rent_list.aspx 2026-07-25 已重寫為 buyhouse
   ct-* directive 架構（比照 search-strip-inner），此處不再重複搜尋列規則 */

/* ===== 租屋卡片微調（list-item 家族由 buylist.css 提供）===== */
.list-price .rent-unit { font-size: var(--font-xs); color: var(--gray-600); font-weight: 400; margin-left: 2px; }

/* ============================================================
   租屋詳情（rent_list_detail）2026 — 搭配 housepage.css 共用樣式
   booking 表單為 rent-house.js Vue 掛載（.house__booking），
   markup 不可動，僅以 CSS 覆寫視覺
   ============================================================ */
/* 租金價格（title-right）：元/月 單位縮小 */
.house.rent .house-price { font-size: var(--font-xl); display: flex;align-items: flex-end;gap: 0.5rem;}
.house.rent .house-price .house-price-unit { font-size: var(--font-md); }
.house.rent .house-price .price-sub{font-size: var(--font-md);}
@media (max-width:768){.house.rent .house-price{justify-content: flex-start;}}
/* [20261106] rent-detail.js(Vue bundle) 的舊 Maps 元件會在 body 尾端塞 #houseMap_VUE（區域地圖/生活街景），頁面已改用 Map8 #dynamicMap，隱藏之 */
#houseMap_VUE, .house__map_VUE { display: none !important; }

/* 收藏鈕（.house__func .btn3 hook 保留，外觀用 sticky-fav） */
.house.rent .house-name .house__func { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.house.rent .house-name .house__func .btn3.sticky-fav,
.house.rent .share-actions .house__func .btn3.sticky-fav { font-size: var(--font-sm); font-weight: 400; justify-content:center;}
.house.rent .share-actions .house__func { display: inline-flex; align-items: center; margin-right: 8px; }
.house.rent .house-name .house__func .btn3.on .heartI,
.house.rent .share-actions .house__func .btn3.on .heartI { color: var(--orange); }

/* booking 表單（Vue render 內容）：卡內收斂 */
.house.rent .house__booking { border: 0; padding: 8px 0 0; margin: 0; }
/* [20261105 B] 聯絡卡：預約表單外包容器（比照 house.aspx .contact-form 的 padding）+ 店家/經紀人區 */
.house.rent .rent-booking-wrap { padding: 16px 20px; }
.house.rent .house__booking .inputRow { display: flex; flex-direction: row; gap: 0.5rem; }
.house.rent .house__booking .inputRow .ipt2 { flex: 1 1 0; min-width: 0; }
.house.rent .house__booking .ipt2 {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-family: inherit;
}
.house.rent .house__booking .ipt2:focus { border-color: var(--green); outline: none; }
.house.rent .house__booking .timeRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: var(--font-sm); color: var(--gray-600); }
.house.rent .house__booking .timeRow .timeRowTitle { width: 100%; font-size: var(--font-xs); color: var(--gray-600); }
.house.rent .house__booking .timeRow label { display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px; border: 1px solid var(--gray-200); border-radius: 16px; cursor: pointer; font-size: var(--font-xs); }
.house.rent .house__booking .txt__hint { font-size: var(--font-xs); color: var(--gray-600); margin-top: 8px; line-height: 1.5; }
.house.rent .house__booking .code_box { margin-top: 10px; }
.house.rent .house__booking .btnRow { margin-top: 12px; }
.house.rent .house__booking .btnRow .reservation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px;
    background: var(--green);
    color: #fff;
    border-radius: 8px;
    font-size: var(--font-sm);
    font-weight: 600;
    transition: background .2s;
}
.house.rent .house__booking .btnRow .reservation:hover { background: var(--green-dark); text-decoration: none; }
/*置頂sticky bar*/
.house.rent .stickBar__top .top__left .floatInfo, .house.rent .stickBar__top .top__right .stickBar__tel,
    .house.rent .stickBar__top .top__right .stickBar__price {color:white}
/* [20261105 B] 店家/經紀人資訊（比照 house.aspx；原內嵌 style 抽出） */
.house.rent .agent-info{gap: 0.5rem;}
.house.rent .contact-card .reservation {background:var(--green);color: white;flex: 1; padding: 10px; border-radius: 8px; font-size: var(--font-sm); font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0.5rem;}
.house.rent .contact-card .store-info { flex: 1; }
.house.rent .contact-card .store-card-addr { font-size: var(--font-sm); color: var(--gray-600); margin-top: 1px; }
.house.rent .contact-card .store-line-link { margin-left: 6px; }
.house.rent .contact-card .store-line-link img { height: 18px; vertical-align: middle; }
.house.rent .contact-card .contact-qrcode { padding-left: 5px; flex-shrink: 0; }
.house.rent .contact-card .contact-qrcode .qrcode__img { width: 48px; height: 48px; }
.house.rent .contact-card .ct-orange-text-button { font-size: var(--font-xs); white-space: nowrap; }
/* 電話大鈕：橘底白字（同 house.aspx） */
.house.rent .contact-card .store-card-tel-btn {
    justify-content: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    border: 1.5px solid var(--orange);
    background-color: var(--orange);
    border-radius: 8px;
    padding: 10px;
    margin: -4px 0 4px;
    width: 100%;
}
.house.rent .contact-card .store-card-tel-btn i { color: #fff; font-size: 15px; }
.house.rent .contact-card .store-card-tel-btn a { color: #fff; }
.house.rent .house__booking .noteRow { font-size: var(--font-xs); color: var(--gray-600); margin-top: 10px; line-height: 1.6; }

/* [20261105 D] stickBar：電話 + 收藏（比照 house.aspx）；收藏 on 狀態由 rent-house.js toggleClass('on') */
.house.rent .stickBar .top__right { display: flex; align-items: center; gap: 12px; }
.house.rent .stickBar .stickBar__tel { padding: 0; font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); display: inline-flex; align-items: center; gap: 6px; }
.house.rent .stickBar .stickBar__tel i { font-size: var(--font-md); color: var(--green); }
.house.rent .stickBar .stickBar__save { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--gray-200); border-radius: 50%; color: var(--gray-600); background: #fff; }
.house.rent .stickBar .stickBar__save:hover,
.house.rent .stickBar .stickBar__save.on { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.house.rent .stickBar .stickBar__save.on i::before,
.house.rent .house__func .btn3.on .fa-heart::before { font-weight: 900; }

/* [20261105 D] 行動版底部列：沿用 housepage.css .mobile_bottom-menu（綠底、預約=橘色）；
   rent 差異：外層 .house__func 包收藏鈕、mobileonly 的 display:block !important 需覆回 flex */
@media (max-width: 1023px) {
    .house.rent .mobile_bottom-menu.mobileonly { display: flex !important; }
    .house.rent .mobile_bottom-menu > .house__func { flex: 1; display: flex; border-right: 1px solid rgba(255,255,255,.2); }
    .house.rent .mobile_bottom-menu > .house__func > .btn3 { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; margin: 0; background: none; }
    .house.rent .mobile_bottom-menu .heartI { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: var(--font-sm); }
    .house.rent .mobile_bottom-menu .btn3.on .heartI { color: #fff; }
    /* custom.css 的 .btn3 .heartI 會疊一張深色愛心背景圖，與 FA 愛心重複 → 底部列只留 FA 圖示 */
    .house.rent .mobile_bottom-menu .btn3 .heartI,
    .house.rent .mobile_bottom-menu .btn3.on .heartI { background: none; padding-left: 0; }
}

/* [20261105 E3] 自 rent_list_detail.css 併入（該檔其餘為 2020 舊版 mainRow/btnRow2/house__map_VUE 死碼，已隨檔刪除）
   以下三條 + 手機 popup 高度，仍作用於本頁 jqModal 彈窗（轉寄親友 / 預約成功） */
.jqmOverlay { background: var(--bs-gray-600); }
.popup-bg { background: rgba(110,110,110,0.5) !important; }
.popup__con .item__btn1 { background-color: var(--green); }
@media screen and (max-width: 760px) {
    .house .popup .popup__wrap .con__wrap {
        height: -webkit-calc(90vh - 45px);
        height: calc(90vh - 45px);
        margin-top: 0;
    }
}

/* [20261105 rent.css 清理] 自 rent.css 併入仍有作用的規則（其餘為列表頁 searchRaw/object-list-head/objlist__item、
   舊 house__call/storeName/title-info-section/price-info 等死碼，已隨檔刪除；詳見 doc/file_note.md E-5） */
.house.rent .wrapper-1176 { max-width: 1296px !important; display: flex; flex-direction: column; } /* stickBar 內層 */
.house.rent .w100 { width: 100% !important; }                                                      /* showRentdetail 全寬項目 */
@media screen and (max-width: 560px) {
    .house.rent .rent_type_item > span { text-wrap: nowrap; }
    .house.rent .detail-row > .rent_type_item { width: 100%; }
    .house.rent .detail-photo-section { padding: 0 !important; }
}
