/* 加密貨幣轉帳:確認框(#cp_modal)＋回站結果列(.cp-st)。定價頁與用量頁都載
   (common/_crypto_pay.html)。spec designer/crypto-pay-2026-10。 */

/* ── 確認框:一般確認框 440;dark 頁上維持亮面,所以框內用 base token 不用角色變數
   (main.css body.dark-mode .modal .modal-content 已把 greyMedium 與勾選色釘回亮值) ── */
.cp-modal .modal-dialog {
  max-width: 440px;
}
.cp-modal .modal-content {
  padding: 0;
  color: var(--color-black);
}
.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-24) 0;
}
.cp-head h6 {
  margin: 0;
  color: var(--color-black);
}
.cp-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: calc(-1 * var(--space-12));
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-greyDark);
  font-size: 16px;
  transition: background var(--motion-fast) var(--ease-standard);
}
.cp-x:hover:not(:disabled) {
  background: var(--color-greyLight);
}
.cp-x:disabled {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}
.cp-body {
  padding: var(--space-16) var(--space-24) 0;
}
.cp-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24);
}

/* 內容表:列名淡、值靠右 tabular;列間最淡 hairline,表底不加線 */
.cp-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cp-kv td {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-greyLight);
  vertical-align: top;
}
.cp-kv tr:first-child td {
  border-top: 0;
}
/* 列名只佔自己的寬,值那欄的小字(匯率句)才不會在 390 折成三行 */
.cp-kv td.k {
  width: 1%;
  white-space: nowrap;
  padding-right: var(--space-12);
  color: var(--color-greyMedium);
}
.cp-kv td.v {
  color: var(--color-black);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-kv td.v b {
  font-weight: 600;
}
.cp-kv .sub {
  display: block;
  font-size: 12px;
  color: var(--color-greyMedium);
}
.cp-arrow {
  padding: 0 var(--space-4);
  color: var(--color-greyMedium);
}
/* 等報價:單行骨架;過了 blaveWait 的延遲才畫(.is-wait),之前只撐住那行的高度 */
.cp-sk {
  display: inline-block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-greyLight);
  vertical-align: middle;
  visibility: hidden;
}
.cp-body.is-wait .cp-sk {
  visibility: visible;
}

/* 表下規則:Feature bullets(em-dash 起頭) */
.cp-modal .cp-rules {
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-greyDark);
}
.cp-rules li {
  position: relative;
  margin-top: var(--space-4);
  padding-left: 20px;
}
.cp-rules li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-greyMedium);
}
.cp-rules b {
  color: var(--color-black);
  font-weight: 600;
}
.cp-modal .cp-moved {
  margin: var(--space-16) 0 0;
  font-size: 13px;
  color: var(--color-black);
}
.cp-modal .cp-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-greyDark);
}
.cp-store {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-16);
  margin-top: var(--space-4);
  font-size: 13px;
}
/* 熱區 44:行高 20 ＋上下 12 */
.cp-store a {
  display: inline-block;
  line-height: 20px;
  padding: var(--space-12) 0;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-store a:hover {
  color: var(--color-greyDark);
}

/* 腳的兩顆鈕:主鈕中性墨色(Black button),取消是文字鈕。
   .cp-modal 提權:main.css button:lang() 的字重是 (0,1,1) */
.cp-modal .cp-btn-black,
.cp-modal .cp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.cp-modal .cp-btn-black {
  min-width: 112px;
  padding: 0 var(--space-24);
  background: var(--color-black);
  color: var(--color-pureWhite);
  font-weight: 600;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.cp-modal .cp-btn-black:hover:not(:disabled) {
  opacity: 0.85;
}
.cp-modal .cp-btn-black:disabled {
  background: var(--color-greyLightMedium);
  color: var(--color-greyMedium);
  cursor: not-allowed;
}
/* 建單中:鈕內轉圈,鈕本身不換成失效灰 */
.cp-modal .cp-btn-black[aria-busy="true"]:disabled {
  background: var(--color-black);
  color: var(--color-pureWhite);
  cursor: progress;
}
.cp-modal .cp-btn-ghost {
  padding: 0 var(--space-16);
  background: transparent;
  color: var(--color-black);
  font-weight: 500;
  transition: background var(--motion-fast) var(--ease-standard);
}
.cp-modal .cp-btn-ghost:hover:not(:disabled) {
  background: var(--color-greyLight);
}
.cp-modal .cp-btn-ghost:disabled {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}

/* 方案單:補足框頂那句;ORDER_PENDING 框的腳(左邊安靜連結＋小字,右邊兩顆) */
.cp-modal .cp-lead-top {
  margin: 0 0 var(--space-12);
}
.cp-foot.is-split {
  justify-content: space-between;
  flex-wrap: wrap;
}
.cp-foot-l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.cp-foot-r {
  display: flex;
  gap: var(--space-8);
  margin-left: auto;
}
.cp-modal .cp-foot-note {
  font-size: 12px;
  color: var(--color-greyMedium);
}
.cp-modal .cp-btn-quiet {
  padding: var(--space-12) 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-black);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-modal .cp-btn-quiet:hover {
  color: var(--color-greyDark);
}

/* 576 以上 Bootstrap 是 margin auto,440 置中;<576 它給固定 .5rem 邊距,457–575 會靠左,所以補 auto＋上限
   (只寫 margin auto 會讓 <456 左右變 0、貼齊視窗) */
@media (max-width: 575.98px) {
  .cp-modal .modal-dialog {
    margin: 0.5rem auto;
    max-width: min(440px, calc(100% - 1rem));
  }
}
@media (max-width: 768px) {
  .cp-foot {
    flex-wrap: wrap;
  }
}

/* ── 回站結果列:狀態點(或轉圈)＋標題＋一句＋動作。頁面背景上,用角色變數 ── */
.cp-st {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.cp-st[hidden] {
  display: none;
}
.cp-st > .loader {
  flex: none;
  margin-top: 2px;
  color: var(--ink);
}
.cp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-greyLightMedium);
}
.cp-st--ok .cp-dot {
  background: var(--color-green);
}
.cp-st--bad .cp-dot {
  background: var(--color-red);
}
.cp-st-txt {
  min-width: 0;
}
.cp-st .cp-st-t {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.cp-st .cp-st-p {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cp-oid {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  word-break: break-all;
  user-select: all;
}
.cp-st-a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-12);
}
/* 安靜連結:墨色、常駐底線,上下 padding 撐熱區 44 */
.cp-st-a .cp-link {
  padding: var(--space-12) 0;
  font-size: 14px;
  color: var(--link-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-st-a .cp-link:hover {
  color: var(--link-quiet-hover);
}
/* Outlined control:視覺 32,熱區 ::before 補到 44 */
.cp-btn-out {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  transition: background var(--motion-fast) var(--ease-standard);
}
.cp-btn-out::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}
.cp-btn-out:hover {
  background: var(--surface-muted);
}

a.cp-btn-out {
  text-decoration: none;
}
a.cp-btn-out:hover {
  color: var(--ink);
}
/* 頁面上的安靜連結鈕(放棄、不補了、改用綁卡):同 .cp-link,上下 padding 撐熱區 44 */
.cp-st-a .cp-btn-quiet {
  padding: var(--space-12) 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--link-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-st-a .cp-btn-quiet:hover {
  color: var(--link-quiet-hover);
}
.cp-st-a .cp-btn-quiet:disabled {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}
.cp-st .cp-st-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* 常駐在方案卡／主機卡上的框住的一列(spec §1.1–§1.2:--border-frame 框) */
.cp-st--frame {
  position: relative;
  padding: var(--space-16);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-md);
}
.cp-st--frame + .cp-st--frame {
  margin-top: var(--space-12);
}
.cp-st-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: calc(-1 * var(--space-12)) calc(-1 * var(--space-12)) 0 auto;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  transition: background var(--motion-fast) var(--ease-standard);
}
.cp-st-x:hover {
  background: var(--surface-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cp-st-x,
  .cp-x,
  .cp-modal .cp-btn-black,
  .cp-modal .cp-btn-ghost,
  .cp-btn-out {
    transition: none;
  }
}