/* 用途：沿用原收銀台的青綠與灰白色系，支援手機及鍵盤操作；不影響後台樣式。 */
:root{font-family:"Segoe UI","Microsoft JhengHei",sans-serif;color:#203449;background:#eef3f7;font-size:16px}
*{box-sizing:border-box}body{margin:0}.shell{max-width:620px;margin:auto;padding:28px 18px}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.checkout-tutorial-link{font-weight:600;white-space:nowrap}
.card{background:#fff;border:1px solid #dbe4ec;border-radius:16px;padding:26px}.notice{background:#fff6e5;color:#77561d;padding:14px;border-radius:8px;line-height:1.6}
h1{font-size:26px;margin-top:0}p{line-height:1.7}label{display:block;font-weight:600;margin-bottom:8px}.field{margin-bottom:20px}
select,input:not([type=hidden]){width:100%;padding:12px;border:1px solid #b9c9d5;border-radius:8px;font:inherit}button{width:100%;padding:14px;margin:12px 0;background:#246c70;color:white;border:0;border-radius:8px;font:inherit;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}a{color:#18595d}a:focus-visible,button:focus-visible,input:focus,select:focus{outline:3px solid #26777b;outline-offset:3px}
dt{color:#526778;margin-top:16px}dd{margin:6px 0 16px;overflow-wrap:anywhere;font-weight:600}.errorlist{color:#982e2e;padding-left:22px}footer{text-align:center;font-size:14px;line-height:1.6;padding:20px;color:#526778}
/* 用途：訂單號旁顯示精簡複製按鈕；手機窄螢幕可換行，提示獨立顯示。 */
.order-number-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.order-number-row [data-order-number]{min-width:0;user-select:text}
.order-number-row button{width:auto;margin:0;padding:8px 12px}
.order-number-row [data-copy-order-result]{flex-basis:100%;font-size:14px;font-weight:400}
.order-number-row [data-copy-order-result]:empty{display:none}

/* 用途：表單整體錯誤以紅底框線與大字呈現；不靠顏色單獨表達錯誤。 */
.checkout-alert{margin:18px 0;padding:20px;background:#fff1f2;border:2px solid #be123c;border-left-width:6px;border-radius:10px;color:#881337;overflow-wrap:anywhere}
.checkout-alert strong{display:block;font-size:21px;line-height:1.5}
.checkout-alert p{font-size:18px;font-weight:600;line-height:1.7;margin:10px 0 0}
/* 用途：銀行搜尋與原生結果選單保持間距，手機仍可使用原生選取操作。 */
#bank-search{margin-bottom:10px}
#id_bank+small{display:block;margin-top:8px;color:#526778}
#id_bank[size]:not([size="1"]) option{padding:8px}

/* 用途：確認頁充值提醒以獨立高對比框呈現；執行：載入共用收銀台樣式，窄螢幕自然換行。注意：不使用持續閃爍或僅靠顏色表達。 */
.checkout-payment-notice{margin:20px 0;padding:18px;background:#fff6e5;border:2px solid #b7791f;border-left-width:6px;border-radius:10px;color:#654414;overflow-wrap:anywhere}
.checkout-payment-notice>strong{display:block;font-size:20px;line-height:1.5}
.checkout-payment-notice p{margin:10px 0 0;font-size:17px;line-height:1.8}

/* 用途：共用頁首優惠入口及原生對話框；執行：開啟才顯示，手機使用直式素材。注意：圖片完整縮放，不裁切活動條件。 */
/* 用途：優惠與教學使用相同尺寸的青綠輕量入口；執行：共用頁首載入。注意：不用陰影或強烈漸層，保留觸控及鍵盤焦點。 */
.checkout-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.checkout-header-actions a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 12px;border-radius:9px;border:1px solid #d5e2e6;background:#f8fbfc;color:#315b60;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.checkout-header-actions .checkout-promotion-link{border-color:#bad5d3;background:#e9f4f2;color:#205e60}
.checkout-header-actions a:hover{background:#dcece9;border-color:#9bbfba}
.checkout-header-actions a:active{background:#d1e5e1}
.checkout-header-icon{width:17px;height:17px;flex-shrink:0}
.checkout-promotion-dialog{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:#fff;color:#203449;box-shadow:0 16px 60px #0005}
.checkout-promotion-dialog:not([open]){display:none}
.checkout-promotion-dialog::backdrop{background:#142838b8}
.checkout-promotion-toolbar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 18px;background:#fff;border-bottom:1px solid #dbe4ec}
.checkout-promotion-toolbar h2{margin:0;font-size:19px;line-height:1.5}
.checkout-promotion-toolbar button{flex-shrink:0;width:auto;margin:0;padding:10px 14px}
/* 用途：勾選12小時免自動展示；執行：由優惠腳本保存目前瀏覽器到期時間。注意：勾選框獨立於充值表單，不傳送身分資料。 */
.checkout-promotion-snooze{display:flex;align-items:center;gap:8px;flex-basis:100%;margin:0;min-height:28px;font-size:14px;font-weight:400;color:#526778;cursor:pointer}
.checkout-promotion-snooze input[type=checkbox]{width:18px;height:18px;margin:0;padding:0;flex-shrink:0;accent-color:#246c70}
.checkout-promotion-storage-message{flex-basis:100%;margin:0;font-size:13px;color:#77561d}
.checkout-promotion-content{padding:0 16px 8px}
.checkout-promotion-content img,.checkout-promotion-content video{display:block;width:100%;height:auto;margin:0 auto}
.checkout-promotion-content [hidden]{display:none}
/* 用途：優惠詳情另開分頁；執行：點擊連結，保留目前收銀台內容。注意：不傳送來源網址。 */
.checkout-promotion-details-link{display:flex;align-items:center;justify-content:center;min-height:48px;margin:12px 0;padding:14px;border-radius:8px;background:#246c70;color:#fff;font-weight:600;text-decoration:none}
.checkout-promotion-details-link:hover{background:#1c5659}
/* 用途：以活動圖的藍金配色分層呈現優惠；執行：對話框下方自適應排版。注意：窄螢幕仍完整顯示金額及條件。 */
.checkout-promotion-details{margin:20px 0 8px;padding:22px;border:1px solid #dbe7ef;border-radius:14px;background:#f6faff;color:#203449}
.promotion-details-heading>span{font-size:13px;font-weight:700;letter-spacing:.08em;color:#246c70}
.promotion-details-heading h3{margin:6px 0 18px;font-size:21px;line-height:1.5}
.promotion-reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.promotion-reward-card{padding:18px 14px;border:1px solid #c5deee;border-radius:12px;background:#fff;color:#174d77}
.promotion-reward-card p{margin:0;font-size:14px;line-height:1.7}
.promotion-reward-card p>strong{display:block;font-size:20px}
.promotion-reward-rate{margin:8px 0;font-size:44px;font-weight:800;line-height:1.2}
.promotion-reward-rate>span{margin-left:3px;font-size:18px;font-weight:700}
.promotion-reward-card .promotion-reward-note>strong{display:inline;font-size:16px}
.promotion-reward-card-gold{border-color:#e6c986;background:#fff8e8;color:#795017}
.promotion-eligibility{margin-top:20px}
.promotion-eligibility h4{margin:0 0 10px;font-size:15px}
.promotion-eligibility ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.promotion-eligibility li{padding:6px 10px;border:1px solid #dbe7ef;border-radius:8px;background:#fff;font-size:14px}
.promotion-terms{margin:16px 0 0;padding-top:14px;border-top:1px solid #dbe7ef;font-size:13px;color:#526778}
@media(max-width:600px){.checkout-promotion-details{padding:14px;margin-top:14px}.promotion-details-heading h3{font-size:19px}.promotion-reward-grid{gap:8px}.promotion-reward-card{padding:14px 10px}.promotion-reward-card p>strong{font-size:18px}.promotion-reward-rate{font-size:36px}.promotion-reward-rate>span{font-size:15px}.promotion-reward-card .promotion-reward-note>strong{font-size:14px}}
html.checkout-promotion-open{overflow:hidden}
@media(max-width:600px){header{align-items:center;gap:10px;flex-wrap:wrap}header>strong{white-space:nowrap}.checkout-header-actions{gap:6px}.checkout-header-actions a{padding:9px 10px}.checkout-promotion-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.checkout-promotion-toolbar{padding:10px 12px}.checkout-promotion-toolbar h2{font-size:17px}.checkout-promotion-content{padding:0 10px 6px}}
@media(max-width:360px){.checkout-header-actions{width:100%;justify-content:flex-start}}