html,
body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

.registration-page,
.registration-page * {
    box-sizing: border-box;
}

.registration-page {
    --nxt-login-content-inset: clamp(
        var(--space-9),
        26vh,
        calc(var(--space-10) + var(--space-10) + var(--space-8))
    );
    display: grid;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    color: var(--fg-primary);
    background: var(--bg-canvas);
    font-family: var(--font-sans);
    text-align: left;
}

.registration-wall {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    color: var(--fg-inverse);
    background: var(--bg-inverse);
}

.nxt-auth-wall-host,
.nxt-auth-wall-host > .nxt-auth-wall {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.registration-panel {
    display: grid;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--nxt-login-content-inset) auto minmax(var(--space-6), 1fr);
    align-items: start;
    padding-block: var(--space-6);
    padding-inline: var(--space-8);
    background: var(--bg-canvas);
}

.registration-panel__brand {
    display: block;
    width: 150px;
    height: auto;
    margin-bottom: var(--space-6);
    color: var(--fg-primary);
}

.registration-panel__body {
    width: 100%;
    max-width: 720px;
    min-width: 0;
    grid-row: 2;
    align-self: start;
    justify-self: center;
}

.registration-shell {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--fg-primary);
    background: transparent;
}

.registration-heading {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap-heading);
    margin: 0 0 var(--space-7);
}

.registration-heading--compact {
    margin-bottom: var(--space-6);
}

.registration-heading h1,
.registration-heading p,
.registration-section__description,
.registration-help,
.registration-status,
.registration-login-link,
.registration-status-copy,
.registration-alert p {
    margin: 0;
}

.registration-heading h1 {
    color: var(--fg-primary);
    font-family: var(--font-display);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-tight);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

.registration-heading > p:not(.registration-eyebrow):not(.registration-required-note) {
    max-width: 58ch;
    margin-top: var(--space-1);
    color: var(--fg-secondary);
    font-size: var(--text-md);
    line-height: var(--lh-normal);
}

.registration-eyebrow {
    color: var(--eyebrow-fg);
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
}

.registration-required-note {
    margin-top: var(--space-3) !important;
    color: var(--fg-tertiary);
    font-size: var(--text-sm);
}

.registration-back-link,
.registration-login-link a {
    color: var(--fg-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}

.registration-back-link {
    align-self: flex-start;
    margin-bottom: var(--space-4);
}

.registration-back-link:hover,
.registration-login-link a:hover {
    color: var(--fg-secondary);
}

.registration-choice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.registration-choice-button {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 148px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    overflow: hidden;
    color: var(--fg-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    isolation: isolate;
    text-decoration: none;
    transition:
        color var(--dur-fast) var(--ease-smooth),
        border-color var(--dur-fast) var(--ease-smooth),
        transform var(--dur-instant) var(--ease-smooth);
}

.registration-choice-button::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--neutral-fill);
    content: '';
    transform: translateX(-101%);
    transition: transform var(--dur-moderate) var(--ease-enter);
}

.registration-choice-button > * {
    position: relative;
    z-index: 1;
}

.registration-choice-button:hover,
.registration-choice-button:focus-visible {
    color: var(--neutral-fill-fg);
    border-color: var(--neutral-fill);
    text-decoration: none;
}

.registration-choice-button:hover::before,
.registration-choice-button:focus-visible::before {
    transform: translateX(0);
}

.registration-choice-button:active {
    transform: scale(.99);
}

.registration-choice-button__icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
}

.registration-choice-button__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
    color: inherit;
}

.registration-choice-button__content strong {
    color: inherit;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
}

.registration-choice-button__content span {
    color: inherit;
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    opacity: .8;
}

.registration-choice-button__arrow {
    color: inherit;
    font-size: var(--text-md);
    transition: transform var(--dur-fast) var(--ease-smooth);
}

.registration-choice-button:hover .registration-choice-button__arrow,
.registration-choice-button:focus-visible .registration-choice-button__arrow {
    transform: translateX(var(--space-1));
}

.registration-login-link {
    margin-top: var(--space-6);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-form {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-6);
}

/* The legacy form keeps its own flex rhythm; prevent the canonical layout's
   generic child margin from being added a second time. */
.registration-form.nxt-form-layout > * + * {
    margin-block-start: 0;
}

.registration-player-grid,
.registration-club-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.registration-field--phone,
.registration-field--club-select,
.registration-field--contact-phone {
    grid-column: 1 / -1;
}

.registration-field--club-select {
    max-width: none;
}

.registration-form .iti {
    display: block;
    max-width: 100%;
    width: 100%;
}

.ui.form.registration-form .registration-field .iti--allow-dropdown input,
.ui.form.registration-form .registration-field .iti--allow-dropdown input[type='text'],
.ui.form.registration-form .registration-field .iti--allow-dropdown input[type='tel'],
.ui.form.registration-form .registration-field .iti--separate-dial-code input,
.ui.form.registration-form .registration-field .iti--separate-dial-code input[type='text'],
.ui.form.registration-form .registration-field .iti--separate-dial-code input[type='tel'] {
    padding-inline-start: calc(var(--ctrl-block-h-md) + var(--space-2));
}

.registration-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    border: 0;
}

.registration-section + .registration-section {
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

.registration-section > legend {
    width: 100%;
    margin: 0 0 calc(var(--space-3) * -1);
    padding: 0;
    color: var(--fg-primary);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
}

.registration-section__description {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.registration-field > .nxt-field-control {
    width: 100%;
    min-width: 0;
    margin-block-start: 0;
}

.registration-field > .nxt-field-description,
.registration-field > .nxt-field-message {
    margin-block-start: 0;
}

.ui.form .registration-field > label {
    margin: 0;
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
}

.ui.form .registration-field input,
.ui.form .registration-field select,
.registration-search-control input {
    width: 100%;
    min-width: 0;
    min-height: var(--ctrl-block-h-md);
    padding: var(--ctrl-block-pad-md) var(--ctrl-inline-pad-md);
    color: var(--fg-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-tight);
}

.ui.form .registration-field input::placeholder,
.registration-search-control input::placeholder {
    color: var(--fg-muted);
    opacity: 1;
}

.ui.form .registration-field input:focus,
.ui.form .registration-field select:focus,
.registration-search-control input:focus {
    border-color: var(--border-strong);
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

.registration-form--club .ui.search.selection.dropdown {
    max-width: 100%;
    width: 100%;
    min-height: var(--ctrl-block-h-md);
    padding: var(--ctrl-block-pad-md) calc(var(--ctrl-inline-pad-md) + 24px) var(--ctrl-block-pad-md) var(--ctrl-inline-pad-md);
    color: var(--fg-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-tight);
}

.registration-form--club .ui.search.selection.dropdown.active,
.registration-form--club .ui.search.selection.dropdown:focus,
.registration-form--club .ui.search.selection.dropdown.visible {
    border-color: var(--border-strong);
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

.registration-form--club .ui.search.dropdown > input.search {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--ctrl-block-h-md) - 2px);
    padding: var(--ctrl-block-pad-md) calc(var(--ctrl-inline-pad-md) + 24px) var(--ctrl-block-pad-md) var(--ctrl-inline-pad-md);
    border: 0;
    outline: 0;
}

.registration-form--club .ui.selection.dropdown > .dropdown.icon {
    top: 50%;
    right: var(--space-3);
    margin: 0;
    transform: translateY(-50%);
}

.registration-form--club .ui.dropdown .menu {
    max-height: min(280px, 36vh);
    overflow-y: auto;
    border-color: var(--border-strong);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--elevation-floating);
}

.registration-form--club .ui.dropdown .menu > .item {
    padding: var(--space-3) var(--space-4) !important;
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}

.registration-form--club .ui.dropdown .menu > .item.selected,
.registration-form--club .ui.dropdown .menu > .item:hover {
    background: var(--secondary-soft-bg);
}

.registration-field.is-invalid input,
.registration-field.is-invalid select,
.registration-field.is-invalid .ui.dropdown,
.registration-section.is-invalid .registration-radio-card,
.registration-checkbox.is-invalid {
    border-color: var(--danger) !important;
}

.registration-help,
.registration-status,
.registration-status-copy {
    color: var(--fg-tertiary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-status-copy p {
    margin: var(--space-2) 0 0;
}

.registration-field-error,
.registration-error-summary {
    color: var(--danger);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-field-error:empty,
.registration-error-summary:empty,
.registration-field-error ul:empty,
.registration-error-summary ul:empty {
    display: none;
}

.registration-field-error.registration-client-error:empty,
.registration-field-error:has(.registration-client-error:empty):not(:has(ul)) {
    display: none;
}

.registration-field-error ul,
.registration-error-summary ul {
    margin: 0;
    padding-left: var(--space-5);
}

.registration-error-summary:not(:empty) {
    padding: var(--space-3) var(--space-4);
    color: var(--danger-soft-fg);
    background: var(--danger-soft-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
}

.registration-alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-alert--info {
    color: var(--secondary-soft-fg);
    background: var(--secondary-soft-bg);
    border-color: var(--secondary-outline);
}

.registration-alert i {
    margin-top: 3px;
}

.registration-alert__content,
.registration-club-privacy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.registration-radio-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.registration-radio-card {
    display: flex;
    min-width: 0;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.registration-radio-card:hover {
    border-color: var(--border-strong);
}

.registration-radio-card:has(input:checked) {
    color: var(--neutral-fill-fg);
    background: var(--neutral-fill);
    border-color: var(--neutral-fill);
}

.registration-radio-card:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

.registration-radio-card input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--neutral-fill);
}

.registration-radio-card span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.registration-radio-card strong {
    color: var(--fg-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.registration-radio-card:has(input:checked) strong {
    color: currentColor;
}

.registration-radio-card small {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--lh-normal);
}

.registration-radio-card:has(input:checked) small {
    color: currentColor;
    opacity: .78;
}

.registration-checkbox.ui.checkbox {
    display: flex;
    min-height: var(--ctrl-block-h-md);
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.registration-checkbox.ui.checkbox input,
.registration-checkbox.ui.checkbox label::before,
.registration-checkbox.ui.checkbox label::after {
    margin-top: 1px;
}

.registration-checkbox.ui.checkbox label {
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

.registration-details {
    color: var(--fg-secondary);
    font-size: var(--text-sm);
}

.registration-details summary {
    cursor: pointer;
    color: var(--fg-primary);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.registration-details__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-sunken);
    border-radius: var(--radius-md);
}

.registration-details__content p,
.registration-details__content ul {
    margin: 0;
}

.registration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--action-gap);
    justify-content: flex-end;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

/* Registration forms have more content than the shared authentication wall.
   Keep the brand visible, but reclaim the large login-only top inset. */
@media (min-width: 960px) {
    .registration-page:has(.registration-form) {
        --nxt-login-content-inset: var(--space-8);
    }
}

.registration-action-feedback {
    min-width: min(100%, 280px);
    margin-right: auto;
}

.registration-button,
.ui.form .registration-button {
    display: inline-flex;
    min-height: var(--ctrl-block-h-md);
    align-items: center;
    justify-content: center;
    padding: var(--ctrl-block-pad-md) var(--ctrl-inline-pad-md);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--lh-tight);
    text-decoration: none;
    transition:
        background-color var(--dur-snap) var(--ease-snap),
        color var(--dur-fast) var(--ease-smooth),
        border-color var(--dur-fast) var(--ease-smooth),
        transform var(--dur-instant) var(--ease-smooth),
        opacity var(--dur-fast) var(--ease-smooth);
}

.registration-button--primary {
    color: var(--neutral-fill-fg);
    background: var(--neutral-fill);
    border-color: var(--neutral-fill);
}

.registration-button--primary:hover:not(:disabled) {
    color: var(--neutral-fill-fg);
    background: var(--neutral-fill-hover);
    border-color: var(--neutral-fill-hover);
    text-decoration: none;
}

.registration-button--primary:active:not(:disabled) {
    background: var(--neutral-fill);
    border-color: var(--neutral-fill);
    transform: scale(.98);
}

.registration-button--ghost {
    color: var(--fg-primary);
    background: transparent;
    border-color: var(--border-strong);
}

.registration-button--ghost:hover:not(:disabled) {
    color: var(--fg-primary);
    background: var(--neutral-soft-bg);
    text-decoration: none;
}

.registration-button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.registration-button.loading {
    position: relative;
    color: transparent !important;
}

.registration-button.loading::after {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--neutral-fill-fg);
    border-right-color: transparent;
    border-radius: var(--radius-full);
    content: '';
    animation: registration-spin .7s linear infinite;
}

.registration-choice-button:focus-visible,
.registration-button:focus-visible,
.registration-back-link:focus-visible,
.registration-login-link a:focus-visible,
.registration-details summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

.registration-success {
    display: flex;
    max-width: 560px;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
}

.registration-success .registration-heading {
    margin-bottom: 0;
}

.registration-success__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: var(--secondary-fg);
    background: var(--secondary);
    border: 1px solid var(--secondary-press);
    border-radius: var(--radius-full);
    font-size: var(--text-xl);
}

.registration-success__icon--warning {
    color: var(--secondary-fg);
    background: var(--secondary);
    border-color: var(--secondary-press);
}

.registration-panel__body > .ui.grid {
    margin-top: var(--space-5);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes registration-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 959px) {
    .registration-page {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
    }

    .registration-wall {
        display: none;
    }

    .registration-panel {
        display: flex;
        min-height: 100vh;
        min-height: 100svh;
        align-items: stretch;
        justify-content: center;
        padding: var(--space-6) clamp(var(--space-4), 6vw, var(--space-8));
    }

    .registration-panel__brand {
        margin-bottom: var(--space-8);
    }

    .registration-panel__body {
        max-width: 720px;
        margin: auto;
    }

}

@media (min-width: 1200px) {
    .registration-page {
        grid-template-columns: minmax(0, 1.4fr) minmax(var(--field-w-long), 1fr);
    }
}

@media (max-width: 767px) {
    .registration-player-grid,
    .registration-club-grid,
    .registration-radio-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .registration-field--phone,
    .registration-field--club-select,
    .registration-field--contact-phone {
        grid-column: auto;
    }
}

@media (max-width: 599px) {
    .registration-panel {
        padding: var(--space-5) var(--space-4) var(--space-7);
    }

    .registration-panel__brand {
        width: 124px;
        margin-bottom: var(--space-5);
    }

    .registration-heading {
        margin-bottom: var(--space-6);
    }

    .registration-heading h1 {
        font-size: 40px;
    }

    .registration-heading--compact h1 {
        font-size: 36px;
    }

    .registration-form {
        gap: var(--space-4);
    }

    .registration-section {
        gap: var(--space-3);
    }

    .registration-section + .registration-section {
        padding-top: var(--space-5);
    }

    .ui.form .registration-field input,
    .ui.form .registration-field select,
    .registration-search-control input,
    .registration-form--club .ui.search.selection.dropdown {
        min-height: var(--ctrl-block-h-md);
        padding-block: var(--ctrl-block-pad-md);
        padding-inline: var(--ctrl-inline-pad-md);
    }

    .ui.form.registration-form .registration-field .iti--allow-dropdown input,
    .ui.form.registration-form .registration-field .iti--separate-dial-code input {
        padding-inline-start: calc(var(--ctrl-block-h-md) + var(--space-2));
        padding-inline-end: var(--ctrl-inline-pad-md);
    }

    .registration-form--club .ui.search.dropdown > input.search {
        min-height: calc(var(--ctrl-block-h-md) - 2px);
        padding-block: var(--ctrl-block-pad-md);
        padding-inline-start: var(--ctrl-inline-pad-md);
        padding-inline-end: calc(var(--ctrl-inline-pad-md) + 24px);
    }

    .registration-form--club .ui.search.selection.dropdown {
        padding-inline-start: var(--ctrl-inline-pad-md);
        padding-inline-end: calc(var(--ctrl-inline-pad-md) + 24px);
    }

    .registration-form--club .ui.selection.dropdown > .dropdown.icon {
        right: var(--space-2);
    }

    .registration-checkbox.ui.checkbox {
        min-height: var(--ctrl-block-h-md);
        padding: var(--space-2);
    }

    .registration-details__content {
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .registration-actions {
        padding-top: var(--space-5);
    }

    .registration-choice-button {
        min-height: 112px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .registration-choice-button__icon {
        width: 40px;
        height: 40px;
    }

    .registration-actions {
        flex-direction: column-reverse;
    }

    .registration-button,
    .ui.form .registration-button {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .registration-button,
    .registration-choice-button,
    .registration-radio-card,
    .registration-checkbox.ui.checkbox {
        border: 1px solid ButtonText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .registration-choice-button,
    .registration-choice-button::before,
    .registration-choice-button__arrow,
    .registration-button {
        transition: none;
    }

    .registration-button.loading::after {
        animation: none;
    }
}