/* PXL SePay Payments 0.3.0 — payment UI only. Reuses PXL / calculator design tokens. */

/* V0.3.1: all checkout UI is owned by this modal plugin. */
html.pxl-sepay-modal-open,
body.pxl-sepay-modal-open { overflow:hidden !important; }

.pxl-sepay-modal[hidden] { display:none !important; }
.pxl-sepay-modal {
  position:fixed;
  inset:0;
  z-index:1000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  font-family:var(--crv1-font, var(--ecl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
}
.pxl-sepay-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,7,12,.76);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.pxl-sepay-modal__dialog {
  position:relative;
  z-index:1;
  width:min(100%, 540px);
  max-height:min(88vh, 820px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--crv1-border, var(--ecl-border, #30363d));
  border-radius:16px;
  background:var(--crv1-card, var(--ecl-surface, #0f141b));
  color:var(--crv1-text, var(--ecl-text, #e8edf2));
  box-shadow:0 24px 80px rgba(0,0,0,.52);
  outline:none;
}
.pxl-sepay-modal__topbar {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:15px 16px 13px;
  border-bottom:1px solid var(--crv1-border, var(--ecl-border, #30363d));
  background:var(--crv1-card-2, var(--ecl-surface-2, #111821));
}
.pxl-sepay-modal__title {
  color:var(--crv1-strong-text, var(--ecl-text-strong, #f0f4f8));
  font-size:16px;
  line-height:1.3;
  font-weight:850;
}
.pxl-sepay-modal__subtitle {
  margin-top:3px;
  color:var(--crv1-muted, var(--ecl-muted, #8e99a6));
  font-size:11.5px;
  line-height:1.4;
}
.pxl-sepay-modal__close {
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--crv1-border, var(--ecl-border, #30363d));
  border-radius:10px;
  background:transparent;
  color:var(--crv1-muted, var(--ecl-muted, #a7b0ba));
  font:700 23px/1 Arial,sans-serif;
  cursor:pointer;
}
.pxl-sepay-modal__close:hover {
  color:var(--crv1-text, #fff);
  background:rgba(255,255,255,.05);
}
.pxl-sepay-modal__body {
  overflow:auto;
  overscroll-behavior:contain;
  padding:15px 16px 17px;
  scrollbar-gutter:stable;
}

.crv1-paymentHead { text-align:left; margin-bottom:11px; }
.crv1-paymentTitle { color:var(--crv1-text,#e8edf2); font-size:16px; font-weight:850; margin-bottom:4px; }
.crv1-paymentLead { color:var(--crv1-muted,#8e99a6); font-size:12.5px; line-height:1.5; }
.pxl-sepay-qrBox {
  display:flex;
  justify-content:center;
  padding:4px 0 12px;
}
.pxl-sepay-qrImage {
  display:block;
  width:min(100%, 285px);
  height:auto;
  margin:0 auto;
  border-radius:11px;
  background:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
}
.pxl-sepay-details {
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pxl-sepay-paymentRow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:38px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.055);
  text-align:left;
  font-size:13px;
}
.pxl-sepay-paymentRow:first-child { border-top:0; }
.pxl-sepay-paymentLabel { color:var(--crv1-muted,#8e99a6); }
.pxl-sepay-paymentRow strong { color:var(--crv1-text,#e8edf2); text-align:right; overflow-wrap:anywhere; user-select:all; }
.pxl-sepay-paymentRow strong.pxl-sepay-paymentEmphasis { color:var(--pxl-primary-soft, #bdd1e6); font-size:14px; }
.pxl-sepay-paymentRow strong.pxl-sepay-paymentMemo { color:var(--pxl-primary-soft, #bdd1e6); letter-spacing:.02em; }
.pxl-sepay-memoWrap { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.pxl-sepay-copyBtn {
  flex:0 0 auto;
  min-height:28px;
  padding:4px 8px;
  border:1px solid var(--crv1-border,#30363d);
  border-radius:8px;
  background:transparent;
  color:var(--crv1-soft-blue,#bdd1e6);
  font:700 11px/1.2 inherit;
  cursor:pointer;
}
.pxl-sepay-copyBtn:hover { background:rgba(47,129,247,.09); }
.crv1-paymentWaiting {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:13px;
  color:var(--crv1-text,#e8edf2);
  font-size:12.5px;
  font-weight:700;
}
.crv1-waitDot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--crv1-accent,#2f81f7);
  box-shadow:0 0 0 0 rgba(47,129,247,.35);
  animation:pxl-sepay-waitPulse 1.8s infinite;
}
@keyframes pxl-sepay-waitPulse {
  0%{box-shadow:0 0 0 0 rgba(47,129,247,.35)}
  70%{box-shadow:0 0 0 7px rgba(47,129,247,0)}
  100%{box-shadow:0 0 0 0 rgba(47,129,247,0)}
}
.crv1-paymentSmall { margin-top:6px; color:var(--crv1-muted,#8e99a6); font-size:11.5px; line-height:1.45; text-align:center; }

.pxl-sepay-loading,
.pxl-sepay-state {
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  color:var(--crv1-muted,#8e99a6);
  font-size:12.5px;
}
.pxl-sepay-loading strong,
.pxl-sepay-state strong { color:var(--crv1-text,#e8edf2); font-size:16px; }
.pxl-sepay-spinner {
  width:34px;
  height:34px;
  margin-bottom:6px;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--crv1-accent,#2f81f7);
  border-radius:50%;
  animation:pxl-sepay-spin .8s linear infinite;
}
@keyframes pxl-sepay-spin { to { transform:rotate(360deg); } }
.pxl-sepay-state__icon {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border-radius:50%;
  border:1px solid var(--crv1-border,#30363d);
  font-size:27px;
  font-weight:900;
}
.pxl-sepay-state--success .pxl-sepay-state__icon { color:#3fb950; border-color:rgba(63,185,80,.52); background:rgba(63,185,80,.08); }
.pxl-sepay-state--error .pxl-sepay-state__icon { color:#f85149; border-color:rgba(248,81,73,.5); background:rgba(248,81,73,.07); }
.crv1-wrap .pxl-sepay-retryBtn,
.pxl-sepay-modal .pxl-sepay-retryBtn {
  margin-top:10px;
  min-width:150px;
  min-height:40px;
  background:var(--crv1-accent,var(--ecl-primary,#2f81f7)) !important;
  color:#fff !important;
}

/* International gateway controls reuse the same modal and the same PXL tokens. */
.crv1-wrap .pxl-sepay-intlBtn {
  background:transparent !important;
  color:var(--crv1-soft-blue,#bdd1e6) !important;
  border:1px solid color-mix(in srgb, var(--crv1-accent,#2f81f7) 50%, var(--crv1-border,#30363d)) !important;
}
.crv1-wrap .pxl-sepay-intlBtn:hover { background:color-mix(in srgb, var(--crv1-accent,#2f81f7) 11%, transparent) !important; }
.pxl-sepay-chooser {
  width:100%;
  padding:12px;
  border:1px solid var(--crv1-border,var(--ecl-border,#30363d));
  border-radius:12px;
  background:var(--crv1-card-2,var(--ecl-surface,#0f141b));
  text-align:left;
}
.pxl-sepay-chooser--compact { padding:11px; }
.pxl-sepay-chooser__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pxl-sepay-chooser__head strong { color:var(--crv1-strong-text,var(--ecl-text-strong,#e8edf2)); font-size:13.5px; }
.pxl-sepay-chooser__head span { color:var(--crv1-muted,var(--ecl-muted,#8e99a6)); font-size:11px; }
.pxl-sepay-chooser__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.crv1-wrap .pxl-sepay-methodBtn,
.pxl-sepay-modal .pxl-sepay-methodBtn {
  flex:1 1 210px;
  min-height:42px;
  border:1px solid var(--crv1-accent,var(--ecl-primary,#2f81f7));
  border-radius:10px;
  background:var(--crv1-accent,var(--ecl-primary,#2f81f7)) !important;
  color:#fff !important;
  font-weight:800;
  cursor:pointer;
}
.crv1-wrap .pxl-sepay-methodBtn:hover,
.pxl-sepay-modal .pxl-sepay-methodBtn:hover { background:var(--crv1-accent-hover,var(--ecl-primary-hover,#1f6feb)) !important; }
.pxl-sepay-chooser__hint { margin-top:9px; color:var(--crv1-muted,var(--ecl-muted,#8e99a6)); font-size:11.5px; line-height:1.5; }
.pxl-sepay-panelExtra { margin-top:14px; }
.pxl-sepay-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--crv1-muted,#8e99a6); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }
.pxl-sepay-divider:before,
.pxl-sepay-divider:after { content:""; height:1px; flex:1; background:var(--crv1-border,#30363d); }

.pxl-sepay-toast {
  position:fixed;
  z-index:1000001;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:min(92vw,520px);
  padding:12px 14px;
  border:1px solid var(--ecl-border,#30363d);
  border-radius:12px;
  background:var(--ecl-surface-2,#161b22);
  color:var(--ecl-text-strong,#e8edf2);
  box-shadow:0 14px 40px rgba(0,0,0,.36);
  font:600 13px/1.45 var(--ecl-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  text-align:center;
}
.pxl-sepay-toast--success { border-color:rgba(63,185,80,.55); }
.pxl-sepay-toast--error { border-color:rgba(248,81,73,.58); }
.pxl-sepay-toast--info { border-color:rgba(47,129,247,.55); }

@supports not (background:color-mix(in srgb,black 50%,transparent)) {
  .crv1-wrap .pxl-sepay-intlBtn { border-color:var(--crv1-border,#30363d) !important; }
  .crv1-wrap .pxl-sepay-intlBtn:hover { background:var(--crv1-card-2,#0f141b) !important; }
}

@media (max-width:640px) {
  .pxl-sepay-modal {
    align-items:flex-end;
    padding:0;
  }
  .pxl-sepay-modal__dialog {
    width:100%;
    max-height:92dvh;
    border-radius:17px 17px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }
  .pxl-sepay-modal__topbar { padding:14px 15px 12px; }
  .pxl-sepay-modal__body { padding:14px 15px calc(16px + env(safe-area-inset-bottom)); }
  .pxl-sepay-qrImage { width:min(100%,270px); }
  .pxl-sepay-paymentRow { align-items:flex-start; gap:10px; }
  .pxl-sepay-paymentRow--memo { flex-direction:column; gap:5px; }
  .pxl-sepay-memoWrap { width:100%; justify-content:space-between; }
  .pxl-sepay-chooser__actions { display:grid; grid-template-columns:1fr; }
  .crv1-wrap .pxl-sepay-methodBtn,
  .pxl-sepay-modal .pxl-sepay-methodBtn { width:100%; }
  .pxl-sepay-toast { bottom:14px; }
}

@media (max-height:700px) and (min-width:641px) {
  .pxl-sepay-modal { padding:12px; }
  .pxl-sepay-modal__dialog { max-height:94vh; }
  .pxl-sepay-qrImage { width:min(100%,230px); }
}

@media (prefers-reduced-motion:reduce) {
  .crv1-waitDot,
  .pxl-sepay-spinner { animation:none; }
}
/* v0.3.3 — central Icon Registry: preserve icon + label alignment in payment controls. */
.pxl-sepay-copyBtn,.crv1-wrap .pxl-sepay-intlBtn,.crv1-wrap .pxl-sepay-methodBtn,.pxl-sepay-modal .pxl-sepay-methodBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pxl-sepay-registry-icon{display:block;flex:0 0 auto}
.pxl-sepay-state__icon .pxl-sepay-registry-icon,.pxl-sepay-modal__close .pxl-sepay-registry-icon{font-size:1em}