/* Page-scoped overrides keep the existing registration hooks and shared theme untouched. */
.registration-page .register-header { min-height: 72px; }
.registration-page .register-layout { padding: 56px 24px 32px; }
html.code-design .registration-page .glass-panel {
  max-width: 620px;
  border: 1px solid var(--code-border);
  border-radius: 24px;
  background: var(--code-surface);
  box-shadow: 0 24px 64px rgb(0 0 0 / 7%);
}
.registration-page .register-form-panel { padding: 40px; }
.registration-page .form-heading { align-items: center; text-align: center; gap: 12px; margin-bottom: 32px; }
.registration-page .reg-title { font-size: 34px; font-weight: 600; line-height: 1.4; letter-spacing: -.7px; }
.registration-page .register-steps { margin-bottom: 32px; }
.registration-page #regForm { padding-top: 28px; border-top: 1px solid var(--code-border); }
/* The live summary remains available to screen readers without repeating the visible step labels. */
.registration-page .current-step-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.registration-page #step-1 > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.registration-page #step-1 > .grid > .sm\:col-span-2 { grid-column: 1 / -1; }
.registration-page #regForm .input-group { padding-top: 30px; margin-bottom: 12px; }
html.code-design .registration-page #regForm .code-floating-field > .floating-input { height: 52px; min-height: 52px; padding-inline: 14px 36px; border-radius: 14px !important; background-color: var(--code-canvas) !important; font-size: 16px; }
html.code-design .registration-page #regForm .code-floating-field > .code-floating-label,
html.code-design .registration-page #regForm .code-floating-field:has(> input:is(:focus, :autofill, :not(:placeholder-shown))) > .code-floating-label { top: 0 !important; inset-inline-start: 0 !important; max-width: 100%; padding: 0 !important; transform: none !important; font-size: 13px !important; line-height: 22px !important; color: var(--code-text) !important; background: transparent !important; transition: color 180ms ease !important; }
html.code-design .registration-page #regForm .code-floating-field > .input-icon { display: none !important; }
/* Keep label icons on one line so the toggle stays centered in the 52px field. */
html.code-design .registration-page #regForm .code-floating-field > .code-floating-label { display: flex !important; align-items: center; gap: 6px; }
html.code-design .registration-page #regForm .code-floating-label svg { display: block !important; width: 16px; height: 16px; flex: none; }
/* Password text is LTR while its wrapper is RTL: reserve the physical left side for the eye. */
html.code-design .registration-page #regForm .code-floating-field:has(> .password-toggle) > .floating-input { padding: 12px 14px 12px 54px !important; }
html.code-design .registration-page #regForm .code-floating-field > .password-toggle { top: 34px !important; inset-inline-start: auto !important; inset-inline-end: 6px !important; width: 44px; height: 44px; transform: none !important; }
html.code-design .registration-page #regForm .code-floating-field > .valid-check { top: 46px !important; }
.registration-page .register-step-heading { margin-bottom: 20px; }
.registration-page .register-step-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.registration-page .register-step-heading p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: var(--code-muted); }
.registration-page #regForm :is(.btn-premium, .btn-secondary) { min-height: 52px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.registration-page #regForm .btn-premium { box-shadow: 0 4px 12px rgb(27 131 84 / 14%); transition: background-color 180ms ease, transform 180ms ease; }
.registration-page #regForm .btn-premium:hover:not(:disabled) { transform: translateY(-1px); }
.registration-page #regForm .btn-premium:active:not(:disabled) { transform: none; }
.registration-page #regForm .mt-8 { margin-top: 24px; }
.registration-page .register-form-panel > .text-center:last-child { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--code-border); background: transparent; }
.registration-page #regForm .btn-premium { border-radius: 12px !important; box-shadow: none; }
.registration-page .register-form-panel > .text-center:last-child a { display: inline-block; padding: 4px 8px; }
.registration-page .register-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px 24px; }
.registration-page .register-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.registration-page .register-footer a { color: var(--code-muted); text-decoration: none; padding-block: 8px; }
.registration-page .register-footer a:hover { color: var(--code-link); text-decoration: underline; }
.registration-page .register-footer p { margin: 0; font-size: 11px; }
.registration-page .closed-overlay { border-radius: 18px; }
@media (max-width: 600px) {
  .registration-page .register-header { min-height: 64px; }
  .registration-page .register-layout { padding: 0 0 28px; }
  html.code-design .registration-page .glass-panel { border: 0; border-radius: 0; background: var(--code-canvas); box-shadow: none; }
  .registration-page .register-form-panel { padding: 32px 24px 24px; }
  .registration-page .form-heading { margin-bottom: 28px; }
  .registration-page .reg-title { font-size: 30px; }
  .registration-page .register-steps { margin-bottom: 24px; }
  .registration-page #regForm { padding-top: 24px; }
  .registration-page #step-1 > .grid { gap: 10px 16px; }
  .registration-page .register-form-panel > .text-center:last-child { margin-top: 24px; padding-top: 20px; }
}
@media (max-width: 350px) {
  .registration-page #step-1 > .grid { grid-template-columns: minmax(0, 1fr); }
}
html.code-design .registration-page #regForm .code-floating-field > .floating-input { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
html.code-design .registration-page #regForm .code-floating-field:not(.has-error):has(> input:focus) > .floating-input { border-color: var(--form-field-border-default) !important; box-shadow: var(--shadow-md) !important; }
/* The shared input background clips its underline to the rounded field; no second wrapper line. */
/* Keep the empty carrier for CustomSelect's placeholder without offering it as a choice. */
.registration-page .register-select-prompt { display: none !important; }
/* Registration's approved presentation exception clips the native underline to the rounded field, not its portalled menu. */
.registration-page .register-select .nds-form-control { overflow: hidden; border-radius: var(--input-radius); }
/* CustomSelect moves focus into its portalled menu; keep the underline visible while open. */
.registration-page .register-select:is([data-state~="open"], :focus-within) .nds-form-control::before { width: 100%; }
html.code-design .registration-page #regForm .code-floating-field:not(.has-error):has(> input:focus) > .code-floating-label { color: var(--code-link) !important; }
.registration-page #regForm :is(.btn-premium, .btn-secondary) > svg { transition: transform 180ms ease; }
.registration-page #regForm .btn-premium:hover:not(:disabled) > svg { transform: translateX(-3px); }
.registration-page #regForm .btn-secondary:hover:not(:disabled) > svg { transform: translateX(3px); }
.registration-page :is(a, button):focus-visible { outline: 2px solid var(--code-link); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .registration-page .form-heading { animation: register-heading-in 420ms cubic-bezier(.22, 1, .36, 1); }
  .registration-page .wizard-step.active { animation: none; }
  /* Opacity-only entrances avoid transformed stacking contexts trapping dropdown menus. */
  .registration-page .wizard-step.active .stagger-item { animation: register-field-in 360ms ease backwards; }
  .registration-page .wizard-step.active .stagger-item:nth-child(2) { animation-delay: 40ms; }
  .registration-page .wizard-step.active .stagger-item:nth-child(3) { animation-delay: 80ms; }
  .registration-page .wizard-step.active .stagger-item:nth-child(4) { animation-delay: 120ms; }
  .registration-page .wizard-step.active .stagger-item:nth-child(5) { animation-delay: 160ms; }
}
/* Match field ink and surfaces to the shared light/dark palette. */
.registration-page {
  --register-field-ink: var(--code-text);
  --register-field-surface: var(--code-surface);
  --form-field-border-pressed: var(--register-field-ink);
  --form-field-text-focused: var(--register-field-ink);
  --form-field-text-hovered: var(--register-field-ink);
  --form-field-text-pressed: var(--register-field-ink);
  --form-field-text-placeholder: var(--register-field-ink);
  --form-field-background-default: var(--register-field-surface);
  --form-field-background-lighter: var(--code-canvas);
  --form-field-background-darker: var(--code-soft);
}
.registration-page .register-select { --input-size: 52px; --input-radius: 14px; --form-field-text-label: var(--code-text); margin-block: 12px 16px; }
/* v1.12.0 snapshots portal minimum width in pixels; clamp it after orientation/viewport changes. */
.registration-page .nds-select-menu { min-width: min(var(--dropmenu-min-width, 0px), calc(100vw - 16px)); }
.registration-page .register-select-hint { margin: 0; font-size: 12px; color: var(--code-muted); }
.registration-page .register-select .nds-form-header .nds-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.registration-page .register-select .nds-form-header svg { width: 18px; height: 18px; flex: none; }
html.code-design .registration-page #regForm .code-floating-field > .floating-input {
  color: var(--register-field-ink) !important;
  -webkit-text-fill-color: var(--register-field-ink) !important;
  background-color: var(--register-field-surface) !important;
  caret-color: var(--register-field-ink);
  color-scheme: inherit;
}
html.code-design .registration-page #regForm .floating-input:autofill { -webkit-box-shadow: 0 0 0 1000px var(--register-field-surface) inset !important; }
/* The shared theme puts borders/backgrounds on every input; NDS owns those on the wrapper. */
html.code-design .registration-page .nds-form-control > input:not([type="hidden"]) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--register-field-ink) !important;
  -webkit-text-fill-color: var(--register-field-ink) !important;
  padding-inline-end: 24px;
  font-size: 16px;
  text-align: start;
}
html.code-design .registration-page .nds-form-control > input::placeholder { color: var(--register-field-ink); opacity: 1; }
@keyframes register-field-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes register-heading-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .registration-page *, .registration-page *::before, .registration-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .registration-page #regForm :is(.btn-premium, .btn-secondary), .registration-page #regForm :is(.btn-premium, .btn-secondary) > svg { transform: none !important; }
}