.nx-card-payment-public,
.nx-card-payment-dashboard,
.nx-card-payment-admin,
.nx-card-payment-public * ,
.nx-card-payment-dashboard * ,
.nx-card-payment-admin * { box-sizing: border-box; }

.nx-card-payment-public {
  width: min(430px, calc(100vw - 30px));
  max-width: 100%;
  margin: 18px auto 0;
  padding: 20px;
  border: 1px solid rgba(18, 42, 72, .12);
  border-radius: 24px;
  background: #fff;
  color: #172033;
  box-shadow: 0 16px 42px rgba(27, 48, 82, .10);
  text-align: right;
}
.nx-card-payment-public header small { color: #6b5cff; font-weight: 800; }
.nx-card-payment-public header h2 { margin: 7px 0 6px; font-size: 22px; }
.nx-card-payment-public header p { margin: 0 0 18px; color: #677185; line-height: 1.9; font-size: 13px; }
.nx-card-payment-public fieldset { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.nx-card-payment-public legend { margin-bottom: 9px; font-weight: 800; font-size: 13px; }
.nx-card-payment-amounts,
.nx-card-payment-gateways,
.nx-card-payment-gateway-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.nx-card-payment-amounts label,
.nx-card-payment-gateways label,
.nx-card-payment-gateway-checks label { position: relative; min-width: 0; }
.nx-card-payment-amounts input,
.nx-card-payment-gateways input,
.nx-card-payment-gateway-checks input { position: absolute; opacity: 0; pointer-events: none; }
.nx-card-payment-amounts span,
.nx-card-payment-gateways span,
.nx-card-payment-gateway-checks label span {
  display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 10px;
  border: 1px solid #dfe5ee; border-radius: 13px; background: #f8fafc; font-weight: 700; font-size: 12px; text-align: center;
}
.nx-card-payment-amounts input:checked + span,
.nx-card-payment-gateways input:checked + span,
.nx-card-payment-gateway-checks input:checked + span { border-color: #684ff3; background: #f0edff; color: #4933bf; box-shadow: 0 0 0 2px rgba(104,79,243,.09); }
.nx-card-payment-custom { display: grid; gap: 6px; margin-top: 11px; }
.nx-card-payment-custom span,
.nx-card-payment-payer label > span { font-size: 12px; font-weight: 800; }
.nx-card-payment-custom input,
.nx-card-payment-payer input,
.nx-card-payment-payer textarea,
.nx-card-payment-form-grid input,
.nx-card-payment-form-grid textarea,
.nx-card-payment-form-grid select {
  width: 100%; max-width: 100%; border: 1px solid #d9e0ea; border-radius: 12px; background: #fff; color: #172033;
  padding: 11px 12px; font: inherit; outline: 0;
}
.nx-card-payment-custom input:focus,
.nx-card-payment-payer input:focus,
.nx-card-payment-payer textarea:focus,
.nx-card-payment-form-grid input:focus,
.nx-card-payment-form-grid textarea:focus { border-color: #684ff3; box-shadow: 0 0 0 3px rgba(104,79,243,.10); }
.nx-card-payment-custom small { color: #7c8494; font-size: 10px; }
.nx-card-payment-payer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.nx-card-payment-payer label { display: grid; gap: 6px; min-width: 0; }
.nx-card-payment-payer label.is-wide { grid-column: 1 / -1; }
.nx-card-payment-payer textarea { resize: vertical; }
.nx-card-payment-notice { margin: 14px 0; padding: 11px 12px; border-radius: 12px; background: #eff6ff; color: #355476; font-size: 11px; line-height: 1.8; }
.nx-card-payment-submit,
.nx-card-payment-save { width: 100%; border: 0; border-radius: 14px; background: #173a63; color: #fff; padding: 13px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.nx-card-payment-submit:disabled { opacity: .68; cursor: wait; }

.nx-card-payment-dashboard { display: grid; gap: 18px; width: 100%; max-width: 1120px; margin-inline: auto; }
.nx-card-payment-dashboard-head,
.nx-card-payment-settings-card > header,
.nx-card-payment-report > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nx-card-payment-dashboard-head { padding: 22px; border-radius: 24px; background: linear-gradient(135deg,#17233e,#24375f); color: #fff; }
.nx-card-payment-dashboard-head small { color: #bfb7ff; font-weight: 800; }
.nx-card-payment-dashboard-head h1 { margin: 6px 0; font-size: 28px; }
.nx-card-payment-dashboard-head p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.9; }
.nx-card-payment-dashboard-head > span { white-space: nowrap; background: rgba(255,255,255,.11); padding: 8px 13px; border-radius: 999px; }
.nx-card-payment-flash { padding: 14px 17px; border-radius: 15px; border: 1px solid #b7dfc4; background: #effaf2; color: #17663a; font-weight: 700; }
.nx-card-payment-flash.is-error { border-color: #edbcbc; background: #fff0f0; color: #912727; }
.nx-card-payment-flash.is-warning { border-color: #edd38f; background: #fff8df; color: #785813; }
.nx-card-payment-settings-list { display: grid; gap: 16px; }
.nx-card-payment-settings-card,
.nx-card-payment-report { padding: 20px; border: 1px solid #dfe5ee; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(29,49,80,.07); min-width: 0; }
.nx-card-payment-settings-card > header { padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid #e8ecf2; }
.nx-card-payment-settings-card > header small,
.nx-card-payment-report > header small { color: #6b5cff; font-weight: 800; }
.nx-card-payment-settings-card > header h2,
.nx-card-payment-report > header h2 { margin: 5px 0; font-size: 20px; }
.nx-card-payment-settings-card > header p { margin: 0; color: #6f7889; overflow-wrap: anywhere; }
.nx-card-payment-settings-card > header > span { padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 11px; }
.nx-card-payment-settings-card > header > span.is-enabled { background: #e7f8ed; color: #17663a; }
.nx-card-payment-settings-card > header > span.is-disabled { background: #edf0f5; color: #677185; }
.nx-card-payment-warning { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #ead59b; border-radius: 14px; background: #fff8df; color: #735713; line-height: 1.8; }
.nx-card-payment-settings-card form { display: grid; gap: 16px; }
.nx-card-payment-switch { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #dfe5ee; border-radius: 15px; background: #f8fafc; }
.nx-card-payment-switch input { margin-top: 4px; }
.nx-card-payment-switch span { display: grid; gap: 4px; }
.nx-card-payment-switch small { color: #747d8e; line-height: 1.7; }
.nx-card-payment-switch.is-compact { align-self: end; }
.nx-card-payment-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.nx-card-payment-form-grid label { display: grid; gap: 6px; min-width: 0; font-weight: 700; }
.nx-card-payment-form-grid label.is-wide { grid-column: 1/-1; }
.nx-card-payment-form-grid small { color: #788193; font-weight: 400; }
.nx-card-payment-settings-card fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid #e0e5ed; border-radius: 16px; }
.nx-card-payment-settings-card legend { padding: 0 6px; font-weight: 800; }
.nx-card-payment-gateway-checks { grid-template-columns: repeat(3,minmax(0,1fr)); }
.nx-card-payment-report { overflow: hidden; }
.nx-card-payment-table-wrap { width: 100%; overflow-x: auto; margin-top: 15px; -webkit-overflow-scrolling: touch; }
.nx-card-payment-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.nx-card-payment-table th,
.nx-card-payment-table td { padding: 11px 10px; border-bottom: 1px solid #e8ecf2; text-align: right; vertical-align: middle; white-space: nowrap; }
.nx-card-payment-table th { color: #657084; font-size: 11px; }
.nx-card-payment-table td small { display: block; color: #788193; margin-top: 3px; }
.nx-card-payment-table td span { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.nx-card-payment-table td span.is-paid { background: #e7f8ed; color: #17663a; }
.nx-card-payment-table td span.is-failed { background: #fdeaea; color: #922b2b; }
.nx-card-payment-table td span.is-pending { background: #fff4d8; color: #7d5a12; }
.nx-card-payment-empty { padding: 22px; border: 1px dashed #cfd6e2; border-radius: 18px; color: #687285; text-align: center; background: #fafbfd; }

.nx-card-payment-admin { max-width: 1400px; }
.nx-card-payment-admin-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 12px; align-items: stretch; margin: 18px 0; }
.nx-card-payment-admin-metrics article { padding: 15px; border: 1px solid #dfe5ee; border-radius: 15px; background: #fff; display: grid; gap: 7px; }
.nx-card-payment-admin-metrics article small { color: #6d7687; }
.nx-card-payment-admin-metrics article b { font-size: 20px; }
.nx-card-payment-admin-metrics > a { align-self: center; }

@media (max-width: 760px) {
  .nx-card-payment-dashboard-head,
  .nx-card-payment-settings-card > header,
  .nx-card-payment-report > header { align-items: stretch; flex-direction: column; }
  .nx-card-payment-dashboard-head > span,
  .nx-card-payment-settings-card > header > span { align-self: flex-start; }
  .nx-card-payment-form-grid,
  .nx-card-payment-payer { grid-template-columns: 1fr; }
  .nx-card-payment-payer label.is-wide,
  .nx-card-payment-form-grid label.is-wide { grid-column: auto; }
  .nx-card-payment-gateway-checks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nx-card-payment-admin-metrics { grid-template-columns: 1fr; }
  .nx-card-payment-settings-card,
  .nx-card-payment-report { padding: 15px; border-radius: 18px; }
}
@media (max-width: 420px) {
  .nx-card-payment-public { padding: 15px; border-radius: 19px; }
  .nx-card-payment-amounts,
  .nx-card-payment-gateways,
  .nx-card-payment-gateway-checks { grid-template-columns: 1fr; }
  .nx-card-payment-dashboard-head h1 { font-size: 23px; }
}

/* NexID 0.29.0-beta40 — custom amount, automatic gateway fallback and owner receipt */
.nx-card-payment-auto-gateway {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #d9e6f5;
  border-radius: 14px;
  background: #f3f8ff;
  color: #294d72;
}
.nx-card-payment-auto-gateway b { font-size: 13px; }
.nx-card-payment-auto-gateway span { font-size: 11px; line-height: 1.8; }
.nx-card-payment-gateway-status {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.nx-card-payment-gateway-status > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #cfe6d7;
  border-radius: 13px;
  background: #effaf2;
  color: #17663a;
}
.nx-card-payment-gateway-status > span small { color: #54816a; line-height: 1.6; }
.nx-card-payment-gateway-status > span.is-empty { border-color: #ead59b; background: #fff8df; color: #735713; }
.nx-card-payment-field-help { margin: 11px 0 0; color: #6d788a; line-height: 1.8; font-size: 11px; }
.nx-card-payment-receipt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 10px;
  background: #edf3fa;
  color: #173a63;
  text-decoration: none;
  font-weight: 800;
  font-size: 11px;
}
.nx-card-payment-owner-receipt {
  padding: 20px;
  border: 1px solid #cfe6d7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(29,49,80,.07);
}
.nx-card-payment-owner-receipt > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.nx-card-payment-owner-receipt > header small { color: #6b5cff; font-weight: 800; }
.nx-card-payment-owner-receipt > header h2 { margin: 5px 0; font-size: 20px; }
.nx-card-payment-owner-receipt > header p { margin: 0; color: #6f7889; }
.nx-card-payment-owner-receipt > header > span { display: inline-flex; padding: 7px 11px; border-radius: 999px; font-weight: 800; font-size: 11px; }
.nx-card-payment-owner-receipt > header > span.is-paid { background: #e7f8ed; color: #17663a; }
.nx-card-payment-owner-receipt > header > span.is-failed { background: #fdeaea; color: #922b2b; }
.nx-card-payment-owner-receipt > header > span.is-pending { background: #fff4d8; color: #7d5a12; }
.nx-card-payment-receipt-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.nx-card-payment-receipt-grid > div { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid #e4e8f0; border-radius: 13px; background: #fafbfd; }
.nx-card-payment-receipt-grid > div.is-wide { grid-column: 1/-1; }
.nx-card-payment-receipt-grid span { color: #6d7687; font-size: 11px; }
.nx-card-payment-receipt-grid b,
.nx-card-payment-receipt-grid code,
.nx-card-payment-receipt-grid p { margin: 0; overflow-wrap: anywhere; }
.nx-card-payment-receipt-back { display: inline-flex; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: #173a63; color: #fff; text-decoration: none; font-weight: 800; }
@media (max-width:760px) {
  .nx-card-payment-gateway-status,
  .nx-card-payment-receipt-grid { grid-template-columns: 1fr; }
  .nx-card-payment-receipt-grid > div.is-wide { grid-column: auto; }
  .nx-card-payment-owner-receipt > header { align-items: flex-start; flex-direction: column; }
}

/* NexID 0.29.0-beta41 — payment capability can be prepared before domain/subdomain activation */
.nx-card-payment-settings-card > header > span.is-prepared { background: #fff4d6; color: #805500; }

/* NexID Core 0.29.0-beta61 — compact public payment modal */
.nx-card-payment-public header{padding-inline-end:42px;margin-bottom:15px}
.nx-card-payment-public header h2{margin-bottom:0}
.nx-card-payment-payer-simple{gap:10px}
.nx-card-payment-payer-simple .nx-card-payment-custom{margin-top:0}
.nx-card-payment-payer-simple .nx-card-payment-custom small{line-height:1.7}
.nx-card-payment-public[data-nx-payment-preview]{pointer-events:none;opacity:.88}
.nx-card-payment-public .nx-card-payment-submit{margin-top:14px;background:#173a63}