/* ── reset / base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 16px 64px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 14px;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
  color: #0f172a;
}
.h1-sub {
  font-weight: 400;
  color: #64748b;
}

/* ── shared box ───────────────────────────────────────────────────── */
.box {
  margin-bottom: 16px;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid transparent;
}

.box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.box-icon   { font-size: 18px; line-height: 1; }
.box-title  { font-weight: 700; font-size: 15px; }
.box-badge  {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  background: #e2e8f0;
  color: #475569;
  white-space: nowrap;
}

/* ── PCI Island box ───────────────────────────────────────────────── */
.box--pci {
  background: #eff6ff;
  border-color: #3b82f6;
}
.box--pci .box-title { color: #1d4ed8; }
.box--pci .box-badge { background: #dbeafe; color: #1d4ed8; }

/* ── Business Fields box ──────────────────────────────────────────── */
.box--biz {
  background: #ffffff;
  border-color: #e2e8f0;
}
.box--biz .box-title { color: #334155; }

/* ── Response box ─────────────────────────────────────────────────── */
.box--response {
  background: #0f172a;
  border-color: #1e293b;
}
.box--response .box-title { color: #e2e8f0; }
.box--response .box-badge { background: #1e293b; color: #94a3b8; }
.box--response #output {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #7dd3fc;
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  min-height: 80px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* response badge states */
.badge--ok       { background: #dcfce7 !important; color: #15803d !important; }
.badge--declined { background: #fee2e2 !important; color: #b91c1c !important; }
.badge--error    { background: #fef3c7 !important; color: #92400e !important; }
.badge--redirect { background: #f3e8ff !important; color: #7e22ce !important; }

/* ── field-label (used in both boxes) ─────────────────────────────── */
.field-label {
  display: block;
  margin: 12px 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── inputs ───────────────────────────────────────────────────────── */
input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.payment-sdk-slot { width: 100%; }

/* ── business fields grid ─────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.field-cell { min-width: 0; }
.field-cell--wide { grid-column: span 2; }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--pay {
  margin: 4px 0 16px;
  background: #0f172a;
  color: #fff;
  font-size: 16px;
  height: 48px;
}
.btn--pay:hover { background: #1e293b; }

.btn--secondary {
  margin-top: 18px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.btn--secondary:hover { background: #e2e8f0; }

/* ── test cards ───────────────────────────────────────────────────── */
.test-cards { margin-top: 32px; }

.test-cards h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.test-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.test-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
}

.test-card-result {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 3px 0;
}
.test-card-result.success { color: #15803d; }
.test-card-result.decline { color: #b91c1c; }
.test-card-result.threeds { color: #7e22ce; }

.test-card-table {
  border-collapse: collapse;
  width: 100%;
}
.test-card-table td { padding: 2px 4px 2px 0; vertical-align: middle; }
.tc-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-right: 8px !important;
}
.tc-value {
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12.5px;
  color: #0f172a;
  width: 100%;
}

.copy-btn {
  padding: 2px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.copy-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.copy-btn--ok   { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }