/* 綠界站內付表單（#ECPayPayment）的樣式覆寫 —— 會員中心的綁卡彈窗與付款頁共用同一份。
   ⚠️ 兩邊都 <link> 這支檔案，不要各自複製一份：這裡每一條都對應綠界 DOM 的實作細節，
   分岔之後綠界一改版就會有一邊悄悄失效。
   ⚠️ 綠界 SDK 的 class 不是穩定契約；樣式失效時先確認 provider 是否改名。
   官方可自訂的 class 清單見綠界文件附錄「CSS參數定義列表」。 */

/* 這一段一律不用 !important：綠界官方文件明文要求（附錄「CSS參數定義列表」），
   而且開頭的 #ECPayPayment 已經夠了 —— 綠界那三支樣式表沒有任何 ID 選擇器也沒有
   !important，單一 ID 就壓得過他們最長的 class 鏈。唯一壓不過的是他們用 jQuery
   寫的 inline style，實際只有 .ecpay-red 的 display／visibility 以及
   .ecpay-card-info-tab／.ecpay-btn-box／.ecpay-edit-box 的 display，都不在下面覆寫的屬性裡。 */

/* 綠界外層自帶 30px 15px 40px 的內距，左右 15px 會讓表單比同一個彈窗裡的說明框窄一截、
   左緣對不齊。上下留白改由這裡統一，最後一列的 margin 收掉避免底部多一段空白。 */
#ECPayPayment .ecpay-MAIN-CONTENT{
  padding:20px 0;
}
#ECPayPayment .ecpay-select-input{
  margin-bottom:20px;
}
#ECPayPayment .ecpay-select-input.ecpay-mg{
  margin-top:0;
}
/* :last-of-type 而非 :last-child —— 容器最後一個節點是綠界的 hidden input，不是欄位 dl */
#ECPayPayment .ecpay-card-info-tab > dl.ecpay-select-input:last-of-type{
  margin-bottom:0;
}
#ECPayPayment .ecpay-select-input dt{
  float:none;
  width:100%;
  margin:0 0 6px;
  padding:0;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink-2);
}
/* ⚠️ 兩種寫法都要蓋：綁卡表單的欄位圖示是 .ecpay-cit-ic，付款表單是 .ecpay-cit-ic2
   （持卡人姓名實測為 <div class="ecpay-cit-ic2 ecpay-eci-member">），而且不在
   .ecpay-card-info-tab 底下。只寫其中一個，另一張表單就會留著圖示。 */
#ECPayPayment .ecpay-select-input dt::before,
#ECPayPayment .ecpay-cit-ic,
#ECPayPayment .ecpay-cit-ic2{
  display:none;
}
#ECPayPayment .ecpay-select-input dd{
  float:none;
  width:100%;
  margin:0;
}

/* 569px 是綠界的刻度不是我們的：綠界 style.css 有 max-width:568px 會把這兩欄改成整列堆疊，
   要讓那段生效，我們的兩欄版型只能從 569px 起算，不能改成站上其他頁用的 640／480。 */
@media (min-width:569px){
  #ECPayPayment .ecpay-select-input.ecpay-col-d-50{
    width:calc(50% - 6px);
    margin-right:12px;
  }
  #ECPayPayment .ecpay-select-input.ecpay-col-d-50 + .ecpay-select-input.ecpay-col-d-50{
    margin-right:0;
  }
}

/* 綠界 SDK class 並非穩定契約；若欄位樣式失效，先檢查 provider 是否已改名。 */
#ECPayPayment input.ecpay-cc-card,
#ECPayPayment input.ecpay-date,
#ECPayPayment input.ecpay-cc-cvc,
#ECPayPayment input.ecpay-cardholderName{
  height:36px;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:0 12px;
  font-family:var(--font);
  font-size:14px;
  font-weight:400;
  color:var(--ink);
  border-width:1px;
  border-style:solid;
  border-radius:var(--r-ctl);
  border-color:var(--control-line);
}
#ECPayPayment input.ecpay-cc-card::placeholder,
#ECPayPayment input.ecpay-date::placeholder,
#ECPayPayment input.ecpay-cc-cvc::placeholder,
#ECPayPayment input.ecpay-cardholderName::placeholder{
  color:var(--control-placeholder);
}
#ECPayPayment input.ecpay-cc-card:focus,
#ECPayPayment input.ecpay-date:focus,
#ECPayPayment input.ecpay-cc-cvc:focus,
#ECPayPayment input.ecpay-cardholderName:focus{
  border-color:var(--control-line-focus);
  outline:none;
}

/* 沒內容時整行不佔高度。綠界對這一行的處理是不一致的：信用卡號那行用 visibility:hidden
   （隱形但佔 20px），有效期限／安全碼／持卡人姓名那三行則不佔高度，於是四欄的下緣對不齊。
   這裡讓卡號那行跟其他三行一樣「有東西才撐開」。

   兩個條件都是「列舉已知的沒東西長相」，不是「列舉有東西的長相」——遇到沒列到的狀態時
   規則不成立、那行照常顯示，只是下緣不齊；反過來寫的話會把認不出卡別但有發卡行名稱的卡
   （有文字沒圖示）整段藏掉。實測綠界的兩種閒置長相：
     卡別 —— 剛載入是 <i class="">，一開始打字就把 .ecpay-card-detail 清成空字串，
             偵測到才塞回 <i class="ecpay-visa"> 之類。兩種都要列，只列前者的話
             打字當下會突然多一格空白。
     錯誤 —— 綠界對 .ecpay-red 混用 visibility:hidden 與 .hide()（display:none），
             兩種都要列。
   ⚠️ 第三種 <i> 長相只出現在付款表單：綁卡走 addBindingCard、未偵測時是 <i class="">，
      付款走 createEcpayPayment、未偵測時是完全沒有 class 屬性的 <i></i>。少列它，
      付款頁的卡號下面就會一直卡著一行空白（2026-08-12 實測）。
   這些都是綠界的實作細節，不在官方可自訂 class 清單裡。 */
#ECPayPayment .ecpay-card-status-line:has(.ecpay-card-detail:empty, .ecpay-card-detail > i[class=""], .ecpay-card-detail > i:not([class])):has(.ecpay-red[style*="hidden"], .ecpay-red[style*="none"]){
  display:none;
}
/* 卡號清空時把這一行收掉。綠界偵測到卡別後會把 class 寫進 .ecpay-card-detail，但卡號被
   刪光時不會還原，於是空欄位旁邊還掛著上一張卡的發卡行，看起來像系統認錯卡。
   ⚠️ 只解得了「清空」；若是刪掉幾碼再改打別家的卡，在綠界重新判定前仍會顯示舊卡別，
   那要它自己修。狀態列與卡號欄位同屬一個 .ecpay-select-input（實測），故可用 :has。
   ⚠️ 必須排除「這一行正在顯示錯誤」的情況：卡號空著送出時欄位仍是 :placeholder-shown，
      少了這個排除條件會連「請輸入卡號」一起藏掉，只剩紅框沒有訊息。 */
#ECPayPayment .ecpay-select-input:has(input.ecpay-cc-card:placeholder-shown) .ecpay-card-status-line:not(:has(.ecpay-red:not(:empty):not([style*="hidden"]):not([style*="none"]))){
  display:none;
}
#ECPayPayment .ecpay-card-status-line > .ecpay-red{
  font-size:12px;
  font-weight:400;
  color:var(--danger);
  margin-top:4px;
}

/* 四個欄位的錯誤顯示方式不一樣，2026-08-12 實機量到的 .ecpay-red 狀態（錯誤顯示中）：
     卡號 .ecpay-cc-card ......... inline "visibility: visible;"
     有效期限 .ecpay-date ........ 沒有 style 屬性
     安全碼 .ecpay-cc-cvc ........ 沒有 style 屬性
     持卡人姓名 .ecpay-cardholderName  沒有 style 屬性
   原本只寫 [style*="visible"]，等於只有卡號那欄會變紅框，另外三欄永遠是黑框
   （使用者實測回報）。那三欄沒有 inline style 可比對，補 [style*="block"] 也接不到，
   唯一的訊號是 .ecpay-red 有沒有文字 —— 沒錯誤時它是空的，所以用 :not(:empty) 當主判斷。
   ⚠️ 仍是正向偵測，不要簡化成「沒被藏起來就算有錯」：那樣在欄位還沒碰過、
      .ecpay-red 既空又沒 style 的初始狀態下會整排變紅框（fail open）。
   ⚠️ 後兩個 :not() 不能拿掉 —— 卡號那欄是靠 visibility 切換，藏起來時文字還留著，
      只看 :empty 會讓它在沒錯誤時也標紅。
   為什麼只能這樣寫（2026-08-12 查證，不必再查一次）：sdk-1.0.0.js 公開的方法只有
   initialize／createPayment／getPayToken／addBindingCard／deleteBindingCard／
   getBindCardPayToken／CreateApplePayment／getLanguage，callback 都在流程層級，
   沒有逐欄的驗證事件；官方 CSS 參數定義列表也沒有任何錯誤狀態 class。
   所以無法改成「由 SDK 回呼在我們自己的容器切 class」那種不依賴它 DOM 的做法。 */
#ECPayPayment .ecpay-select-input:has(.ecpay-red:not(:empty):not([style*="hidden"]):not([style*="none"])) input{
  border-color:var(--danger);
}