/* ============================================================
   EVO · Crypto payment panel — styles
   ВЕРСИЯ 2 · переведено на SSOT-токены
     site-evo/design-system/tokens.css → tokens.css
   Используем:
     --primary, --primary-fill, --primary-fill-2, --primary-border
     --success, --success-fill, --success-border
     --destructive, --destructive-fill, --destructive-border
     --warning, --warning-fill, --warning-border
     --bg, --card, --card-2, --border, --border-2
     --text, --text-strong, --muted, --muted-2
     --font-head (Plus Jakarta Sans), --font-body (Inter), --font-mono (JetBrains Mono)
   ============================================================ */

/* ───── Локальные fallback-переменные на случай, если каких-то нет в шаблоне ─── */
.cp{
  --cp-success-fill: var(--success-fill, color-mix(in oklab, var(--success) 14%, transparent));
  --cp-success-border: var(--success-border, color-mix(in oklab, var(--success) 30%, transparent));
  --cp-warning-fill: var(--warning-fill, color-mix(in oklab, var(--warning) 10%, transparent));
  --cp-warning-border: var(--warning-border, color-mix(in oklab, var(--warning) 28%, transparent));
  --cp-destructive-fill: var(--destructive-fill, color-mix(in oklab, var(--destructive) 10%, transparent));
  --cp-destructive-border: var(--destructive-border, color-mix(in oklab, var(--destructive) 28%, transparent));
  --cp-info-fill: color-mix(in oklab, var(--primary) 8%, transparent);

  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--text);
  display: flex; flex-direction: column; gap: 18px;
}

/* Hard hide — override любой компонентный display (inline-flex/grid/etc).
   JS управляет видимостью переключением атрибута [hidden] на элементах
   с [data-cp-shows] и на пилюле .cp-pill. */
.cp [hidden], .cp[hidden]{display:none !important}

.cp-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
}

.checkout-crypto-panel .cp-step-label{display:none}

/* ───── Head ───────────────────────────────────────────── */
.cp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.cp-hd-l h3{
  margin:0;
  font-family:var(--font-head,'Plus Jakarta Sans',system-ui,sans-serif);
  font-weight:700; font-size:19px; line-height:1.25;
  letter-spacing:-.01em; color:var(--text-strong);
}
.cp-sub{margin:6px 0 0;color:var(--text);font-size:13.5px;line-height:1.5;max-width:46ch}

.cp-pill{
  flex:0 0 auto; height:30px; padding:0 12px; border-radius:99px;
  background: var(--primary-fill);
  border:1px solid var(--primary-border);
  color:var(--primary);
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; font-weight:600; letter-spacing:.5px;
  display:inline-flex; align-items:center; gap:6px; text-transform:uppercase;
}
.cp-pill-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--primary);
}
.cp-pill-sep{opacity:.5}

/* ───── Step heading ───────────────────────────────────── */
.cp-step{display:flex; flex-direction:column; gap:10px}
.cp-step-label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text);
}
.cp-step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--card-2);
  border:1px solid var(--border);
  color:var(--text); font-size:10px; font-weight:600;
}

/* ───── Tabs (Telegram / WhatsApp / Email) ────────────── */
.cp-tabs{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  padding:4px; border-radius:12px;
  background:transparent; border:1px solid var(--border);
}
.cp-tab{
  height:38px; padding:0 10px; border-radius:8px;
  background:transparent; border:1px solid var(--btn-outline-border, var(--border-2)); cursor:pointer;
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:13.5px; font-weight:500; color:var(--btn-outline-text, var(--text));
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: border-color .15s, box-shadow .15s, color .15s, transform .15s;
}
.cp-tab .cp-ic{opacity:.7; transition:opacity .15s, color .15s}
.cp-tab:hover{
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.cp-tab:hover .cp-ic{opacity:1}
.cp-tab[aria-selected="true"]{
  background:transparent;
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.cp-tab[aria-selected="true"] .cp-ic{color:var(--primary); opacity:1}

/* ───── Input ──────────────────────────────────────────── */
.cp-input-wrap{position:relative}
.cp-input{
  width:100%; height:48px;
  padding:0 44px 0 14px;
  border-radius:12px;
  background:var(--card-2);
  border:1.5px solid var(--border);
  color:var(--text);
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:14.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cp-input::placeholder{color:var(--muted-2)}
.cp-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.cp:not([data-contact="valid"]):not([data-contact="invalid"]) .cp-input{
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}

/* Состояние поля */
.cp[data-contact="valid"] .cp-input{
  border-color: var(--success);
  box-shadow:none;
}
.cp[data-contact="invalid"] .cp-input{
  border-color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 6%, var(--card-2));
  box-shadow:none;
}

/* Иконка состояния справа в input */
.cp-input-state{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); pointer-events:none;
  transition: color .15s;
}
.cp[data-contact="valid"] .cp-input-state{color:var(--success)}
.cp[data-contact="invalid"] .cp-input-state{color:var(--destructive)}
.cp-input-state:empty{display:none}

.cp-input-msg{
  font-size:12.5px; min-height:16px;
  font-family:var(--font-body,'Inter',sans-serif);
  color:var(--text);
}
.cp[data-contact="invalid"] .cp-input-msg{color:var(--destructive)}
.cp[data-contact="valid"]   .cp-input-msg{color:var(--success)}
.cp-input-msg:empty{display:none}

/* ───── Pair selectors (Монета + Сеть) ─────────────────── */
.cp-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start;
}

.cp-pick{
  position:relative;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  row-gap:2px;
  text-align:left; padding:10px 38px 10px 14px;
  min-height:60px;
  border-radius:12px;
  background:var(--card-2);
  border:1.5px solid var(--border);
  cursor:pointer;
  font-family:var(--font-body,'Inter',sans-serif);
  transition: border-color .15s, background .15s, opacity .15s;
}
.cp-pick:hover:not([disabled]){border-color:var(--border-2)}
.cp-pick[disabled]{opacity:.45; cursor:not-allowed}
.cp[data-contact="valid"] .cp-pick:not([disabled]){
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.cp-pick[aria-expanded="true"]{
  border-color:var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  align-items:start;
  z-index:40;
}

.cp-pick-k{
  grid-column:1; grid-row:1;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text);
}
.cp-pick-v{
  grid-column:1; grid-row:2;
  font-size:15px; font-weight:600; color:var(--text-strong);
  letter-spacing:-.01em;
}
.cp-pick[data-empty="true"] .cp-pick-v{color:var(--muted-2); font-weight:500}
.cp-pick-chev{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--muted-2); transition:transform .2s, color .15s;
}
.cp-pick:hover:not([disabled]) .cp-pick-chev{color:var(--text)}
.cp-pick[aria-expanded="true"] .cp-pick-chev{transform:translateY(-50%) rotate(180deg); color:var(--primary)}
.cp-pick[aria-expanded="true"] .cp-pick-chev{top:30px}

/* Dropdown options */
.cp-options{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:6px; list-style:none;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: none;
  z-index:30;
  max-height:280px; overflow-y:auto;
}
.cp-pick[aria-expanded="true"] .cp-options{
  position:static;
  grid-column:1 / -1;
  width:100%;
  margin:10px 0 0;
  max-height:min(280px, 42vh);
}
.cp-opt{
  padding:10px 12px; border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13.5px; color:var(--text);
  cursor:pointer; transition: background .12s, color .12s;
}
.cp-opt:hover:not([data-disabled="true"]){background:var(--card-2)}
.cp-opt[aria-selected="true"]{
  background:var(--primary-fill);
  color:var(--primary); font-weight:600;
}
.cp-opt-r{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; color:var(--muted-2); letter-spacing:.3px;
}
.cp-opt[data-disabled="true"]{color:var(--muted-2); cursor:not-allowed}
.cp-opt[data-disabled="true"] .cp-opt-r{color:var(--destructive); opacity:.7}

/* Skeleton */
.cp-pick[data-loading="true"] .cp-pick-v{
  display:inline-block; height:14px; width:70px; border-radius:4px;
  background:linear-gradient(90deg, var(--border), var(--border-2), var(--border));
  background-size:200% 100%; animation: cp-skeleton 1.4s linear infinite;
  color:transparent;
}
@keyframes cp-skeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.cp-pair-msg{
  font-size:12.5px; min-height:16px;
  color:var(--text);
}
.cp-pair-msg.is-error{color:var(--destructive)}
.cp-pair-msg:empty{display:none}

/* ───── State visibility ────────────────────────────────
   Видимость управляется JS: на каждое изменение [data-state]
   функция syncVisibility() пробегает все [data-cp-shows] и
   расставляет атрибут [hidden] по совпадению.

   Глобальное правило `.cp [hidden]{display:none !important}`
   объявлено выше — оно гарантированно перебивает компонентные
   display:flex/inline-flex/grid у потомков.
   ─────────────────────────────────────────────────────── */

/* Когда инвойс выпущен — оставляем реквизиты, warning и CTA; выбранная пара видна в pill. */
.cp[data-state="creating"] .cp-step--contact,
.cp[data-state="ready"]    .cp-step--contact,
.cp[data-state="pending"]  .cp-step--contact,
.cp[data-state="expired"]  .cp-step--contact,
.cp[data-state="failed"]   .cp-step--contact,
.cp[data-state="fallback"] .cp-step--contact{ display:none }

.cp[data-state="creating"] .cp-step--pair,
.cp[data-state="ready"]    .cp-step--pair,
.cp[data-state="pending"]  .cp-step--pair,
.cp[data-state="expired"]  .cp-step--pair,
.cp[data-state="failed"]   .cp-step--pair,
.cp[data-state="fallback"] .cp-step--pair{ display:none }

/* Success — прячем шаги, оставляем только финал */
.cp[data-state="success"] .cp-step--contact,
.cp[data-state="success"] .cp-step--pair,
.cp[data-state="success"] .cp-step--invoice,
.cp[data-state="success"] .cp-alt{ display:none }

/* ───── Invoice grid (QR + поля) ───────────────────────── */
.cp-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){
  .cp-grid{grid-template-columns:200px 1fr; gap:18px; align-items:start}
}

.cp-qr-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px; padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.cp-qr-wrap{
  width:172px; height:172px; background:var(--text-strong); border-radius:10px; padding:10px;
  position:relative;
}
.cp-qr{width:100%; height:100%; display:block}
.cp-qr-img{width:100%; height:100%; display:block}
.cp-qr-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:8px;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px var(--text-strong);
}
.cp-qr-logo::after{content:""; width:12px; height:12px; border-radius:50%; background:var(--text-strong)}
.cp-qr-meta{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; color:var(--text);
  letter-spacing:.3px; text-transform:uppercase;
}
.cp-ic-ok{color:var(--success)}

/* Когда инвойс «потух» (expired/failed) — приглушаем QR */
.cp[data-state="expired"] .cp-qr-wrap,
.cp[data-state="failed"]  .cp-qr-wrap{filter: grayscale(1) brightness(.7); opacity:.7}

/* ───── Field cards (amount / address / invoice) ───────── */
.cp-fields{display:flex; flex-direction:column; gap:8px}
.cp-field.cp-field--invoice{display:none !important}
.cp-field{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:6px 12px;
  min-width:0;
  transition: border-color .15s;
}
.cp-field:hover{border-color:var(--border-2)}
.cp-k{
  grid-column:1;
  grid-row:1;
  font-size:11.5px; color:var(--text);
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  letter-spacing:.3px; text-transform:uppercase;
}
.cp-v{
  grid-column:1 / -1;
  grid-row:2;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:13.5px; color:var(--text-strong);
  font-weight:500;
  line-height:1.4;
  min-width:0;
  word-break:normal;
  overflow-wrap:anywhere;
}
.cp-unit{color:var(--text); font-weight:400; margin-left:6px}

.cp-field--amount .cp-v{
  font-family:var(--font-head,'Plus Jakarta Sans',sans-serif);
  font-size:20px; font-weight:700; letter-spacing:-.01em;
  color:var(--primary);
  white-space:nowrap;
  overflow-wrap:normal;
}
.cp-field--amount .cp-unit{
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:13px; font-weight:600; color:var(--text); letter-spacing:0;
  white-space:nowrap;
}

.cp-copy{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  flex:0 0 auto; height:32px; padding:0 10px;
  border-radius:8px;
  background:var(--card-2);
  border:1px solid var(--border-2);
  color:var(--text);
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition: all .15s;
}
.cp-copy:hover{
  color:var(--primary);
  border-color:var(--primary-border);
  background:var(--primary-fill);
}
.cp-copy.is-copied{
  color:var(--success);
  border-color:var(--cp-success-border);
  background:var(--cp-success-fill);
}

/* ───── Banners (warn / info) ──────────────────────────── */
.cp-banner{
  padding:12px 14px; border-radius:12px;
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; line-height:1.5;
}
.cp-banner b{font-weight:600}
.cp-banner--warn{
  background:var(--cp-warning-fill);
  border:1px solid var(--cp-warning-border);
  color:var(--warning);
}
.cp-banner--warn b{color:var(--text-strong)}
.cp-banner--warn .cp-ic{flex:0 0 auto; color:var(--warning); margin-top:1px}

.cp-banner--info{
  background:var(--cp-info-fill);
  border:1px solid var(--border);
  color:var(--text);
}
.cp-banner--info .cp-ic{flex:0 0 auto; color:var(--primary); margin-top:1px}
.cp-banner--info b{color:var(--text-strong)}

/* ───── Status (pending / success / expired / failed / fallback) ─ */
.cp-status{
  padding:14px 16px; border-radius:14px;
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--border);
  background:var(--card-2);
}
.cp-status-ico{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  background:var(--card);
  border:1px solid var(--border);
}
.cp-status-ttl{font-family:var(--font-head,'Plus Jakarta Sans',sans-serif); font-weight:600; font-size:15px; color:var(--text-strong); letter-spacing:-.01em}
.cp-status-sub{margin-top:4px; font-size:13px; color:var(--text); line-height:1.5}

.cp-status--pending{border-color: var(--primary-border); background: var(--primary-fill)}
.cp-status--pending .cp-status-ico{color:var(--primary); background:var(--card); border-color:var(--primary-border)}

.cp-status--success{border-color:var(--cp-success-border); background:var(--cp-success-fill)}
.cp-status--success .cp-status-ico{color:var(--success); border-color:var(--cp-success-border)}
.cp-status--success .cp-status-ttl{color:var(--success)}

.cp-status--error{border-color:var(--cp-destructive-border); background:var(--cp-destructive-fill)}
.cp-status--error .cp-status-ico{color:var(--destructive); border-color:var(--cp-destructive-border)}
.cp-status--error .cp-status-ttl{color:var(--destructive)}

.cp-status--neutral .cp-status-ico{color:var(--text)}

/* ───── Footer (timer + CTA) ───────────────────────────── */
.cp-footer{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px;
}
.cp-timer{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  background:var(--primary-fill);
  border:1px solid var(--primary-border);
}
.cp-timer-lbl{font-size:12.5px; color:var(--text); font-weight:500}
.cp-timer-val{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-weight:700; font-size:15px;
  color:var(--primary);
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.cp-timer .cp-ic{color:var(--primary)}

.cp-cta-wrap{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto}

.cp-cta{
  height:48px; padding:0 22px; border-radius:12px;
  background:var(--primary);
  color:var(--primary-ink);
  font-family:var(--font-body,'Inter',sans-serif);
  font-weight:700; font-size:14.5px;
  letter-spacing:-.01em; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition: opacity .15s, transform .12s, background .15s, color .15s, border-color .15s;
}
.cp-cta:hover:not([disabled]){opacity:.92}
.cp-cta:active:not([disabled]){transform: scale(.985)}
.cp-cta[disabled]{
  opacity:1;
  background:var(--card-2);
  color:var(--muted-2);
  cursor:not-allowed;
}
.cp-cta--outline{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--border-2);
}
.cp-cta--outline:hover:not([disabled]){border-color:var(--primary); color:var(--primary)}

.cp-recover{display:flex; flex-wrap:wrap; gap:8px}

/* ───── Alt methods link / list ────────────────────────── */
.cp-alt{
  padding-top:14px; border-top:1px dashed var(--border);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--text);
}
.cp-alt-link{
  background:transparent; border:none; padding:0; cursor:pointer;
  font-family:var(--font-body,'Inter',sans-serif);
  font-size:12.5px; font-weight:600;
  color:var(--primary);
  display:inline-flex; align-items:center; gap:4px;
}
.cp-alt-link:hover{text-decoration:underline; text-underline-offset:3px}

.cp-alt-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px;
  grid-template-columns: 1fr;
}
@media(min-width:560px){
  .cp-alt-list{grid-template-columns:1fr 1fr}
}
.cp-alt-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:var(--card-2);
  border:1px solid var(--border);
  cursor:pointer; transition: border-color .15s, background .15s;
  text-align:left; width:100%;
  font-family:var(--font-body,'Inter',sans-serif);
}
.cp-alt-item:hover{border-color:var(--primary-border)}
.cp-alt-item-ico{
  width:32px; height:32px; border-radius:8px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); flex:0 0 auto;
}
.cp-alt-item-body{flex:1; min-width:0}
.cp-alt-item-ttl{font-size:14px; font-weight:600; color:var(--text-strong)}
.cp-alt-item-sub{font-size:12px; color:var(--text); margin-top:2px}

/* ───── Toast ──────────────────────────────────────────── */
.cp-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 12px);
  padding:10px 16px; border-radius:10px;
  background:var(--card);
  border:1px solid var(--cp-success-border);
  color:var(--success);
  font-size:13px; font-weight:500;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  letter-spacing:.2px;
  box-shadow: none;
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
  z-index:60; display:inline-flex; align-items:center; gap:8px;
}
.cp-toast.is-show{opacity:1; transform:translate(-50%, 0)}

/* Checkout shell has a generic `.checkout-pp button` reset; keep cp buttons scoped and intact. */
.checkout-pp .cp-tab{
  background:transparent;
  border:1px solid var(--btn-outline-border, var(--border-2));
  color:var(--btn-outline-text, var(--text));
}
.checkout-pp .cp-tab:hover{
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.checkout-pp .cp-tab[aria-selected="true"]{
  background:transparent;
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.checkout-pp .cp-pick{
  background:var(--card-2);
  border:1.5px solid var(--border);
  color:var(--text);
}
.checkout-pp .cp[data-contact="valid"] .cp-pick:not([disabled]){
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary-border);
}
.checkout-pp .cp-pick[aria-expanded="true"]{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  align-items:start;
  z-index:40;
}
.checkout-pp .cp-pick[aria-expanded="true"] .cp-pick-chev{
  top:30px;
}
.checkout-pp .cp-pick[aria-expanded="true"] .cp-options{
  position:static;
  grid-column:1 / -1;
  width:100%;
  margin:10px 0 0;
  max-height:min(280px, 42vh);
}
.checkout-pp .cp-copy{
  flex:0 0 auto;
  height:32px;
  padding:0 10px;
  border-radius:8px;
  background:var(--card-2);
  border:1px solid var(--border-2);
  color:var(--text);
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px;
  line-height:1;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.checkout-pp .cp-copy:hover{
  background:var(--primary-fill);
  border-color:var(--primary-border);
  color:var(--primary);
}
.checkout-pp .cp-copy.is-copied{
  background:var(--cp-success-fill);
  border-color:var(--cp-success-border);
  color:var(--success);
}
.checkout-pp .cp-cta{
  height:48px;
  padding:0 22px;
  border-radius:12px;
  background:var(--primary);
  border:none;
  color:var(--primary-ink);
  font-family:var(--font-body,'Inter',sans-serif);
  font-weight:700;
  font-size:14.5px;
  line-height:1;
  letter-spacing:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.checkout-pp .cp-cta[disabled]{
  background:var(--card-2);
  color:var(--muted-2);
}
.checkout-pp .cp-cta--outline{
  background:transparent;
  border:1.5px solid var(--border-2);
  color:var(--text);
}
.checkout-pp .cp-cta--outline:hover:not([disabled]){
  border-color:var(--primary);
  color:var(--primary);
}
.checkout-pp .cp-alt-link{
  background:transparent;
  border:none;
  color:var(--primary);
}
.checkout-pp .cp-alt-item{
  background:var(--card-2);
  border:1px solid var(--border);
  color:var(--text);
}

/* ───── Responsive tune ───────────────────────────────── */
@media (max-width: 380px){
  .cp-hd{flex-direction:column}
  .cp-pill{align-self:flex-start}
  .cp-field{gap:6px 8px; padding:10px 12px}
  .cp-v{font-size:12.5px}
  .cp-field--amount .cp-v{font-size:18px}
  .cp-copy{padding:0 8px; font-size:10px}
  .cp-copy span{display:none}
  .cp-footer{flex-direction:column; align-items:stretch}
  .cp-cta-wrap{margin-left:0}
  .cp-cta{width:100%; justify-content:center}
  .cp-recover{flex-direction:column}
  .cp-recover .cp-cta{width:100%}
  .cp-pair{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .cp-pair{grid-template-columns:1fr}
  .cp-copy{
    padding:0 9px;
    font-size:10.5px;
  }
  .cp-copy span{
    display:inline;
  }
}