/* KurTech TapPay — 結帳頁刷卡欄位
   深色為預設，淺色由 .kt-tappay--light 覆寫。
   中文寬度一律 px／rem，不用 ch；段落不使用 text-wrap: balance / pretty。 */

.kt-tappay-wrap { display: flex; flex-direction: column; gap: 14px; }

.kt-tappay-desc {
  margin: 0;
  max-width: 620px;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(246, 241, 255, .68);
  text-wrap: normal;
}

.kt-tappay-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-tappay-brands span {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 3px 9px;
  border: 1px solid rgba(213, 197, 255, .2);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  font: 700 10.5px/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  color: rgba(246, 241, 255, .6);
}

.kt-tappay-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(213, 197, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

.kt-tappay-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.kt-tappay-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.kt-tappay-field label,
.kt-tappay-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(246, 241, 255, .72);
}

.kt-tappay-slot {
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(213, 197, 255, .22);
  border-radius: 10px;
  background: rgba(5, 6, 16, .55);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kt-tappay-slot:hover { border-color: rgba(184, 156, 255, .42); }
.kt-tappay-slot:focus-within { border-color: #b89cff; box-shadow: 0 0 0 3px rgba(124, 60, 255, .22); }
.kt-tappay-field.is-invalid .kt-tappay-slot { border-color: #ff2f92; box-shadow: 0 0 0 3px rgba(255, 47, 146, .18); }

.kt-tappay-hint {
  margin: 0;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(246, 241, 255, .52);
  text-wrap: normal;
}

.kt-tappay-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 47, 146, .45);
  border-radius: 10px;
  background: rgba(255, 47, 146, .1);
  font-size: 13px;
  line-height: 1.75;
  color: #ffd0e4;
  text-wrap: normal;
}

.kt-tappay-title { font-weight: 700; }

.kt-tappay-applepay-hint {
  margin: 0;
  max-width: 560px;
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(246, 241, 255, .56);
  text-wrap: normal;
}

/* ── 淺色 ── */
.kt-tappay--light .kt-tappay-card { border-color: #dcdcde; background: #fff; }
.kt-tappay--light .kt-tappay-slot { border-color: #8c8f94; background: #fff; }
.kt-tappay--light .kt-tappay-slot:hover { border-color: #2271b1; }
.kt-tappay--light .kt-tappay-slot:focus-within { border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34, 113, 177, .18); }
.kt-tappay--light .kt-tappay-field label,
.kt-tappay--light .kt-tappay-label { color: #2c3338; }
.kt-tappay--light .kt-tappay-hint,
.kt-tappay--light .kt-tappay-applepay-hint { color: #646970; }
.kt-tappay--light .kt-tappay-desc { color: #3c434a; }
.kt-tappay--light .kt-tappay-brands span { border-color: #dcdcde; background: #f6f7f7; color: #646970; }
.kt-tappay--light .kt-tappay-error { border-color: #b32d2e; background: #fcf0f1; color: #8a1f21; }

@media (max-width: 480px) {
  .kt-tappay-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 待付款訂單的 3D 驗證續做提示 ---- */
.kt-tappay-resume {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255,122,47,.34);
  border-radius: 14px;
  background: rgba(255,122,47,.08);
}
.kt-tappay-resume__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--acc-text, #f6f1ff);
  text-wrap: normal;
}
.kt-tappay-resume__action { margin: 12px 0 0; }
.kt-tappay-resume__action .button { flex: 0 0 auto; white-space: nowrap; }

/* ---- 分期選單 ----
   用 flex column 而不是預設的區塊流：這一塊會被放進主題與 WooCommerce
   各自的容器裡，其中有些是 flex row —— 那時說明文字會被擠到選單右邊那條窄縫，
   中文於是每四五個字就斷一次。宣告成 column 就不受外層影響。 */
.kt-tappay-instalment {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 16px 0 0;
  width: 100%;
}
.kt-tappay-instalment__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.kt-tappay-instalment__select {
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--kt-tappay-line, rgba(255,255,255,.14));
  border-radius: 10px;
  background: var(--kt-tappay-field, rgba(0,0,0,.24));
  color: inherit;
  font: inherit;
  font-size: 14px;
}
.kt-tappay-instalment__note {
  flex: 1 1 100%;
  margin: 2px 0 0;
  max-width: 720px;
  font-size: 11.5px;
  line-height: 1.85;
  opacity: .72;
  text-wrap: normal;
}