/* Registration form -- every color/font/radius/spacing value is a design token, never a hardcoded
   brand value. See assets/css/platform-shell.css for the same convention applied to the shell. */

.npca-v2-registration h2 {
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--match-ink, #272F3D);
    margin-bottom: 4px;
}

/* 2026-07-05 visual QA: the register page felt like a generic account form dropped on a plain
   page, disconnected from the /match/ landing page's card-based, colorful energy. This panel plus
   the role-card treatment below borrow that landing page's visual language (soft tinted
   background, rounded card, role accent colors) without touching any submit/validation logic --
   still the same fields, same admin-post action. */
.npca-v2-registration-card {
    background: linear-gradient(180deg, var(--match-surface-tint, #F3F9F5) 0%, #fff 220px);
    border: 1px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 16px);
    box-shadow: 0 12px 32px rgba(39, 47, 61, 0.08);
    padding: var(--space-card, 24px);
}

/* 2026-07-05: a returning user landing on /match/register/ (e.g. from a bookmark or a shared
   landing-page link) had no way back to login without already knowing about the site nav's
   separate "Login" link -- Nathan flagged this should be obvious right at the top of the page. */
.npca-v2-registration-login-prompt {
    margin: 0 0 var(--space-card, 24px);
    text-align: right;
    color: var(--match-ink, #272F3D);
    opacity: 0.75;
    font-size: 0.95em;
}

.npca-v2-registration-login-prompt a {
    opacity: 1;
    font-weight: 700;
    color: var(--brand-primary, #009245);
    text-decoration: none;
}

.npca-v2-registration-login-prompt a:hover {
    text-decoration: underline;
}

.npca-v2-registration-intro {
    color: var(--match-ink, #272F3D);
    opacity: 0.75;
    margin: 0 0 var(--space-card, 24px);
    font-size: 1.05em;
}

.npca-v2-registration-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.npca-v2-field-row {
    display: flex;
    gap: 16px;
}

.npca-v2-field-row .npca-v2-field {
    flex: 1;
}

.npca-v2-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

/* 2026-07-05 visual QA fix: when two fields in the same row have labels of different lengths
   (e.g. "Years Active in Commercial Real Estate Credit" wraps to two lines while "Years Active in
   C-PACE" fits on one), reserving a shared minimum height for every label in a row keeps the
   input boxes aligned regardless of how any single label wraps. */
.npca-v2-field-row .npca-v2-field label {
    min-height: 2.6em;
}

.npca-v2-field input[type="text"],
.npca-v2-field input[type="email"],
.npca-v2-field input[type="tel"],
.npca-v2-field input[type="password"],
.npca-v2-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: calc(var(--radius-card, 16px) / 2);
    font: inherit;
}

/* Role selector: visual cards instead of a <select> dropdown (2026-07-05), echoing the three
   audience cards on /match/. Each role's accent comes from the same --match-role-* tokens used
   elsewhere (see includes/class-npca-design-tokens.php) -- data-role only selects which token a
   given card uses, it carries no color itself. A role outside the three known ones (a future 4th
   role) still renders correctly via the --brand-primary fallback set on .npca-v2-role-card. */
.npca-v2-role-field__label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.npca-v2-role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.npca-v2-role-card {
    --role-color: var(--brand-primary, #009245);
    position: relative;
    display: block;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 16px);
    padding: 16px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.npca-v2-role-card[data-role="property-owner"] { --role-color: var(--match-role-property-owner, #0044B3); }
.npca-v2-role-card[data-role="capital-provider"] { --role-color: var(--match-role-capital-provider, #036836); }
.npca-v2-role-card[data-role="contractor"] { --role-color: var(--match-role-contractor, #F86902); }

.npca-v2-role-card:hover {
    border-color: var(--role-color);
}

/* Visually hidden but still a real, focusable, keyboard-operable native radio -- not display:none
   (that would drop it from the tab order entirely). */
.npca-v2-role-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.npca-v2-role-card__body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.npca-v2-role-card__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--role-color);
    background: #fff;
    transition: background-color 0.15s ease;
}

.npca-v2-role-card__label {
    font-weight: 600;
    color: var(--match-ink, #272F3D);
}

.npca-v2-role-card:has(.npca-v2-role-card__input:checked) {
    border-color: var(--role-color);
    background: color-mix(in srgb, var(--role-color) 14%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color) 22%, transparent);
}

.npca-v2-role-card:has(.npca-v2-role-card__input:checked) .npca-v2-role-card__mark {
    background: var(--role-color);
}

.npca-v2-role-card__input:focus-visible ~ .npca-v2-role-card__body {
    outline: 2px solid var(--role-color);
    outline-offset: 3px;
    border-radius: calc(var(--radius-card, 16px) / 2);
}

/* The submit button borrows the selected role's color -- "green for Capital Provider" etc -- via
   :has() on the form ancestor, since the button and the role radios are siblings-of-siblings, not
   a direct relationship any simpler selector could express. Falls back to the default
   --brand-primary button color (below) until a role is chosen. */
.npca-v2-registration-form:has(#npca_v2_role_property-owner:checked) .npca-v2-button { background: var(--match-role-property-owner, #0044B3); }
.npca-v2-registration-form:has(#npca_v2_role_capital-provider:checked) .npca-v2-button { background: var(--match-role-capital-provider, #036836); }
.npca-v2-registration-form:has(#npca_v2_role_contractor:checked) .npca-v2-button { background: var(--match-role-contractor, #F86902); }

/* Stronger CTA treatment for this page specifically -- scoped to the registration form's own
   button so the shared .npca-v2-button base rule (also used by the onboarding wizard's Save/
   Continue/Submit buttons on the dashboard) is untouched. */
.npca-v2-registration-form .npca-v2-button {
    align-self: stretch;
    padding: 14px 24px;
    font-size: 1.05em;
    box-shadow: 0 6px 16px rgba(39, 47, 61, 0.18);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.npca-v2-registration-form .npca-v2-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(39, 47, 61, 0.24);
}

.npca-v2-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: normal;
}

/* Inline text-link styled as a <button>, not an <a> -- see legal-acceptance.php's Terms of
   Service trigger. A real button (not a link with href="#") because it opens an in-page modal via
   JS, not a navigation. */
.npca-v2-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--brand-secondary, #76BC21);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.npca-v2-link-button:hover {
    text-decoration: none;
}

.npca-v2-legal-version {
    color: var(--brand-secondary, #76BC21);
    font-size: 0.85em;
}

.npca-v2-button {
    align-self: flex-start;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: var(--brand-primary, #2E7D32);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.npca-v2-form-error {
    background: rgba(140, 31, 23, 0.1);
    color: #8A1F17;
    border: 1px solid rgba(140, 31, 23, 0.3);
    border-radius: var(--radius-card, 16px);
    padding: 12px 16px;
}