/* 以租代購前台（結帳、卡號頁、結果頁、補繳）補充樣式；基礎元件沿用 site.css 與 shop.css */

/* 步驟列：① 填寫資料 ② 信用卡付款 ③ 完成 */
.rental-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: #6f8b98;
    font-size: .92rem;
    font-weight: 700;
}
.rental-steps li { display: flex; align-items: center; gap: 8px; }
.rental-steps li > b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #bfdce6;
    background: #fff;
    font-size: .85rem;
}
.rental-steps li.is-done > b { border-color: var(--blue); color: var(--blue); }
.rental-steps li.is-current { color: var(--ink); }
.rental-steps li.is-current > b { border-color: var(--blue); background: var(--blue); color: #fff; }

/* 管理員預覽提示（開關關閉但已登入後台） */
.rental-preview-notice { margin-top: 0; }

/* 租賃商品（一份合約限一台） */
.rental-product p { margin: 0; color: #31586d; font-weight: 700; }

/* 強制勾選：條款連結要醒目（藍色＋底線，老闆範本要求） */
.consent-card a.terms-link { color: #0a58ca; text-decoration: underline; text-underline-offset: 3px; margin: 0 2px; }
.rental-consent label { font-size: .92rem; line-height: 1.7; }

/* 右側合約摘要：.order-card>div 會把 .rental-math 變成 flex，改回區塊；長句改為標籤在上、內容在下 */
.order-card > .rental-math { display: block; margin: 0; color: inherit; font-size: .9rem; }
.rental-summary .rental-math > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
.rental-summary .rental-math > div > span { color: #6f8b98; font-size: .82rem; font-weight: 700; }
.rental-summary .rental-math b { text-align: left; color: var(--ink); font-weight: 700; }
.rental-summary .rental-math .rental-total { grid-template-columns: 1fr auto; align-items: center; }
.rental-summary .rental-math .rental-total > span,
.rental-summary .rental-math .rental-total b { color: #fff; }
.rental-summary .rental-math .rental-total b { text-align: right; font-size: 1.2rem; }
.rental-summary__product { margin: 0 0 14px; color: #31586d; font-weight: 700; }
.rental-summary .change-plan { color: #0579aa; }

/* 卡號頁：收件資料摘要 */
.rental-recipient dl { margin: 0; display: grid; gap: 10px; }
.rental-recipient dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; }
.rental-recipient dt { color: #6f8b98; font-size: .88rem; font-weight: 700; }
.rental-recipient dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* 卡號區：綠界表單注入 #ECPayPayment（不可 display:none；載入前保留高度避免跳動） */
.gateway-placeholder.rental-card { display: block; padding: 20px; }
.rental-card__loading { margin: 0 0 12px; color: #66818e; font-size: .9rem; }
.rental-card__error {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-left: 4px solid #d64545;
    border-radius: 0 12px 12px 0;
    background: #fff5f5;
    color: #8a2a2a;
    font-size: .9rem;
}
.rental-card .full-button { width: 100%; margin-top: 18px; }
.rental-card .primary-button:disabled { background: #b8c9d2; box-shadow: none; cursor: not-allowed; }
.rental-card-note { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; color: #66818e; font-size: .86rem; }
.rental-card-note .lock-icon { flex: 0 0 auto; width: 40px; height: 40px; font-size: 1.1rem; }
.rental-state { margin-top: 0; }

#ECPayPayment { width: 100%; }
#ECPayPayment:empty { min-height: 18rem; }
#ECPayPayment input { font-size: 1rem; }

/* 補繳頁：單欄版面、逾期明細表 */
.rental-single { max-width: 760px; display: grid; gap: 22px; padding-top: 58px; }
.rental-overdue-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rental-overdue-table th,
.rental-overdue-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.rental-overdue-table th { color: #6f8b98; font-size: .82rem; }
.rental-overdue-table td:last-child,
.rental-overdue-table th:last-child { text-align: right; }
.rental-overdue-table tfoot td { color: var(--ink); font-weight: 800; border-bottom: 0; }
.rental-single .info-panel { margin-top: 0; }

/* 結果頁、失效頁 */
.rental-result .form-errors { text-align: left; margin: 24px 0 0; }
.rental-result .success-card .primary-button { margin-top: 28px; }
.rental-result .success-card .primary-button + .secondary-button { margin-left: 10px; }
.rental-result .success-card > p + p { margin-top: 10px; }

@media (width <= 760px) {
    .rental-steps { gap: 8px 16px; font-size: .86rem; }
    .gateway-placeholder.rental-card { padding: 16px 14px; }
    .rental-single { width: calc(100% - 24px); padding-top: 38px; }
    .rental-result .success-card .primary-button,
    .rental-result .success-card .secondary-button { width: 100%; }
    .rental-result .success-card .primary-button + .secondary-button { margin-left: 0; margin-top: 12px; }
}