/* 大白卡容器（付款方式清單、發票設定、會員資料表單共用） */
.set-card{background:var(--card);border-radius:var(--r);padding:var(--pad)}
/* 區塊間距沿用 components.css 的慣例：內容區塊之後接下一個區塊標題＝32px
   （同 .plan-grid + .sec-h、.wide-bar + .sec-h） */
.set-card + .sec-h{margin-top:32px}

.set-card + .set-card{margin-top:16px}
/* ===== 付款方式清單 ===== */
/* 這裡是「管理已綁定的卡」，不是選付款方式（結帳時才選），故不做單選；
   設為預設與刪除都收進「⋯」選單 */

.pm-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.pm-row:first-of-type{padding-top:0}
/* 最後一列不畫線，避免與底部「新增…」動作之間出現雙線；padding 不另外收窄，
   維持與其他列相同的 16px 節奏 */
.pm-row:not(:has(~ .pm-row)){border-bottom:0}
.pm-row + .btn-text-block{margin-top:4px}
.pm-row .s-main{flex:1;min-width:0}
/* 預設 chip（24.8px）比卡名那行（21px）高，切換預設卡時整列會跳動；
   固定標題列最小高度＝chip 高度，讓有無 chip 的高度一致 */
.pm-row .s-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:25px}
.pm-row .s-title b{font-size:15px;font-weight:700}
.pm-row .s-meta{font-size:13px;color:var(--muted);font-weight:500;margin-top:2px}
/* 「⋯」永遠釘在該列最右側：margin-left:auto 讓它不受 .s-main 內容寬度影響；
   .pm-row 不換行（下方無 flex-wrap 規則），窄螢幕也不會掉到下一排。 */
.pm-row .s-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

.pm-row .tag{display:none}
.pm-row.on .tag{display:inline-flex}
/* 「已過期」不受上面那條限制：它是卡片不可用的警訊，不是預設卡的裝飾，
   任何一列都必須看得見（.pm-row.on 的預設卡過期時也一樣顯示這一個）。 */
.pm-row .tag-fail{display:inline-flex}
/* 保留為第二道防線：app.js 已改為「預設卡不渲染這個選項」，
   但若未來有人改回無條件渲染，這條仍能擋住「對已是預設的卡再按一次」。 */
.pm-row.on [data-set-default]{display:none}
/* 一般信用卡圖示（不是卡組織品牌，也不是按鈕）：30px 盒子維持列內對齊，
   卡片名稱文字承擔可讀資訊。
   ⚠️ 這一顆是全站唯一的內嵌 SVG 特例，不是圖示字型 —— 尺寸來源是 width 而不是
      font-size，改尺寸不要去找 .ico 的規則。理由與授權標示在 app.js 的
      CREDIT_CARD_ICON 上方。高度留給 viewBox 比例算，不寫死。 */
.pm-brand{width:30px;height:30px;color:var(--ink-2);display:grid;place-items:center;flex:none}
.pm-brand-ico{width:22px;height:auto;display:block}
/* ===== 發票設定清單 =====
   與付款方式清單共用 .pm-row 的全部版型（padding／分隔線／首末列／不換行），
   .inv-row 只是「這列沒有信用卡圖示」的語意標記，不再另外覆寫版型。 */

/* 「⋯」更多操作：破壞性動作收在裡面，不與日常操作並列。
   選單往上對齊該列的操作鈕，不往下壓到下一列（往下彈會看起來像屬於下一筆）。 */
.pm-menu{position:absolute;bottom:calc(100% - 42px);right:0;background:#fff;border-radius:var(--r-sm);padding:6px;box-shadow:0 10px 30px rgba(16,19,22,.16);display:none;flex-direction:column;min-width:180px;z-index:10}
.pm-menu.open{display:flex}
.pm-menu button{text-align:left;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:11px 14px;border-radius:var(--r-ctl);white-space:nowrap}
.pm-menu button:hover{background:var(--bg)}
.pm-menu button.danger{color:var(--danger)}
.pm-menu button.danger:hover{background:var(--danger-surface)}
/* 尚未綁卡的空狀態：與卡片列同一個節奏（下方 20px 後接新增動作） */
.pm-empty{padding:0 0 20px}
.pm-empty b{font-size:15px;font-weight:700;display:block}
.pm-empty span{font-size:13px;color:var(--muted);font-weight:500;display:block;margin-top:4px;line-height:1.5}
/* 卡片底部的新增動作使用全站 .btn-text-block。 */

/* ===== 發票設定：唯讀顯示列（上 label、下值），該列動作鈕在該列右側 ===== */
.inv-main{display:flex;flex-direction:column;gap:20px}
.drow{display:flex;align-items:center;gap:16px}
.drow .d-main{flex:1;min-width:0}
.drow .btn{flex:none}
/* 欄位標籤沿用全站 .field label 的規格（13px / --ink-2 / 600），跨頁一致 */
.drow .dl{font-size:13px;color:var(--ink-2);font-weight:600}
.drow .dv{font-size:15px;font-weight:600;color:var(--ink);margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drow .dsub{font-size:12px;color:var(--muted);font-weight:500;margin-top:4px}

/* 發票類型下拉選中後展開的對應欄位 */
.opt-fields{margin-top:18px}
.opt-fields[hidden]{display:none}
/* 單一欄位的彈窗較窄 */
.modal.narrow{width:min(440px,100%)}
/* components.css 的 .fhint 綁在 .field 底下；本頁有放在 .field 之外的說明，補一條全域 */
.fhint{font-size:12px;color:var(--muted);font-weight:500;line-height:1.5}

/* ===== 帳號設定：直接編輯表單 ===== */
.form{display:flex;flex-direction:column;gap:22px}
.form .field{margin-bottom:0}
/* 唯讀欄位：灰底、灰字，一看就知道不能改。與 components.css 的 `.field input[readonly]`
   同一套；caret 也要收掉，否則點下去冒出輸入游標，等於邀請使用者去改一個改不動的欄位。 */
.form input[readonly]{background:var(--bg);color:var(--muted);cursor:default;caret-color:transparent}

.form input[readonly]:focus{border-color:var(--control-line)}
.form-foot{display:flex;justify-content:flex-end;margin-top:26px}

@media(max-width:900px){
  .form-foot .btn{width:100%}
}


.dbody .dtext{font-size:14px;color:var(--ink-2);line-height:1.7;padding:18px 0 0}
/* 抽屜內的提示框：不帶圖示、寬度隨抽屜 */
.dnote{font-size:13px;color:var(--ink-2);line-height:1.65;background:var(--bg);border-radius:12px;padding:13px 15px;margin-top:16px}
/* 綠＝安全，其餘＝灰：基底是中性的，只有安全／信任說明才掛 .is-secure。
   讓每個說明框都是綠，綠就從「安全」滑成「泛用提示」，也會跟主動作按鈕搶同一個顏色。 */
.dnote.is-secure{background:var(--green-50);color:var(--green-700)}
/* 抽屜底部動作列：與 .dhead 對稱（不隨 .dbody 捲動），主要動作靠右 */
.dfoot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:18px var(--pad-overlay);border-top:1px solid var(--line)}


/* 付款方式列的補充說明（不可綁卡的原因、缺通路資訊等） */
.payment-method-note{display:block;font-size:12px;color:var(--muted);font-weight:500;line-height:1.6;margin-top:6px}

/* 綁卡流程的安全說明框。掛載容器 .ecpay-binding-frame、狀態列 .ecpay-binding-status
   與表單本身的 #ECPayPayment 覆寫都在 components.css，這裡不要再放一份 —— /wallet 也會
   開綁卡但不載本檔，重複定義只會讓兩邊不同步。 */
.payment-safe-note{font-size:13px;color:var(--ink-2);line-height:1.65;background:var(--bg);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.payment-safe-note.is-warning{background:var(--danger-surface)}