/* Create account (approved prototype designs/customer-panel/register/page.css): one card with the form and a side pane (beside it from 56rem, below it on phones).
   Same build as the merchant prototype's register card; the auth kit (fields, alerts, captcha line) is shared. */
.nx-cxr-card { width: 100%; max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.nx-cxr-main { display: flex; flex-direction: column; gap: 1.125rem; padding: 2rem; min-width: 0; }
.nx-cxr-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 1.75rem; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, var(--card)); min-width: 0; }
@media (min-width: 56rem) {
  .nx-cxr-card { grid-template-columns: minmax(0, 1fr) 19rem; }
  .nx-cxr-side { border-top: 0; border-inline-start: 1px solid var(--border); padding: 2rem 1.5rem; }
}
@media (max-width: 39.98rem) { .nx-cxr-main { padding: 1.5rem 1.25rem; } .nx-cxr-side { padding: 1.25rem; } }
.nx-cxr-alt { padding-top: 1.125rem; border-top: 1px solid var(--border); }

/* alert: every error at once, each a link to its field */
.nx-cxr-card .kt-alert .kt-alert-content p { font-size: .8125rem; line-height: 1.5; color: var(--secondary-foreground); text-wrap: pretty; }
.nx-cxr-card .kt-alert:focus { outline: none; }
.nx-cxr-errlist { display: flex; flex-direction: column; gap: .125rem; margin: 0; padding-inline-start: 1rem; list-style: disc; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-cxr-errlist .nx-inline-link { font-weight: 500; text-align: start; }

/* side: the order from Buy now */
.nx-cxr-order { display: flex; flex-direction: column; gap: .625rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border); }
.nx-cxr-tools { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.nx-cxr-tools li { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.nx-cxr-tools b { font-size: .8125rem; font-weight: 600; color: var(--mono); line-height: 1.3; }
.nx-cxr-tools small { font-size: .6875rem; color: var(--muted-foreground); }
.nx-cxr-tools .nx-num { margin-inline-start: auto; font-size: .75rem; font-weight: 500; color: var(--mono); }
.nx-cxr-order > p { font-size: .75rem; line-height: 1.5; color: var(--secondary-foreground); text-wrap: pretty; }

/* side: how it works (numbered in the store accent, like the customer kit's nx-howto) */
.nx-cxr-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: nx-cxr; }
.nx-cxr-steps li { position: relative; counter-increment: nx-cxr; display: flex; flex-direction: column; gap: .125rem; padding: 0 0 1.125rem 2.5rem; }
.nx-cxr-steps li:last-child { padding-bottom: 0; }
.nx-cxr-steps li::before { content: counter(nx-cxr); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px;
  font: 600 .75rem/1 var(--nx-mono); color: color-mix(in oklab, var(--nx-store-tint) 75%, black); background: color-mix(in oklab, var(--nx-store-tint) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--nx-store-tint) 26%, transparent); }
.dark .nx-cxr-steps li::before { color: color-mix(in oklab, var(--nx-store-tint) 45%, white); background: color-mix(in oklab, var(--nx-store-tint) 20%, var(--card)); }
.nx-cxr-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(.875rem - .5px); top: 2.125rem; bottom: .375rem; width: 1px; background: var(--border); }
.nx-cxr-steps b { font-size: .8125rem; font-weight: 600; color: var(--mono); line-height: 1.35; padding-top: .1875rem; }
.nx-cxr-steps span { font-size: .75rem; line-height: 1.5; color: var(--secondary-foreground); text-wrap: pretty; }

/* side: contacts */
.nx-cxr-help { display: flex; flex-direction: column; gap: .375rem; padding-top: .875rem; border-top: 1px dashed var(--border); font-size: .75rem; color: var(--secondary-foreground); }
.nx-cxr-help-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.nx-cxr-help-links .nx-inline-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; }

/* partials.recaptcha prints its own inline error under the button; the alert above already explains it */
.nx-cxr-card form > p.text-destructive { display: none; }