/* ==================================================
   NEXROOT PUBLIC AUTH
   Official authentication experience
   ================================================== */

.nx-auth {
    min-height: calc(100vh - var(--nx-navbar-height));
    display: flex;
    align-items: center;
    padding: var(--nx-space-16) var(--nx-page-padding-desktop);
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(var(--nx-primary-rgb), .09),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 88%,
            rgba(var(--nx-secondary-rgb), .055),
            transparent 32%
        ),
        #f7f7f4;
}

.nx-auth__shell {
    width: min(1080px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: var(--nx-space-16);
    align-items: center;
}

.nx-auth--register .nx-auth__shell {
    width: min(1180px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(480px, 600px);
}

.nx-auth--register .nx-auth__card {
    width: 100%;
}

/* --------------------------------------------------
   INTRO
   -------------------------------------------------- */

.nx-auth__intro {
    max-width: 540px;
}

.nx-auth__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: var(--nx-space-4);
    padding: 0 var(--nx-space-3);
    border: 1px solid rgba(var(--nx-primary-rgb), .14);
    border-radius: var(--nx-radius-pill);
    background: rgba(var(--nx-primary-rgb), .06);
    color: var(--nx-primary);
    font-size: var(--nx-text-xs);
    font-weight: var(--nx-font-weight-extrabold);
    letter-spacing: .13em;
}

.nx-auth__intro h1 {
    margin: 0;
    color: var(--nx-graphite);
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.06;
    font-weight: var(--nx-font-weight-extrabold);
    letter-spacing: var(--nx-letter-tight);
}

.nx-auth__intro > p {
    max-width: 520px;
    margin: var(--nx-space-5) 0 0;
    color: #5f6668;
    font-size: var(--nx-text-base);
    line-height: 1.85;
}

/* --------------------------------------------------
   TRUST POINTS
   -------------------------------------------------- */

.nx-auth__trust {
    display: grid;
    gap: var(--nx-space-3);
    margin-top: var(--nx-space-8);
}

.nx-auth__trust div {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    color: #343a3c;
    font-size: var(--nx-text-sm);
    font-weight: var(--nx-font-weight-semibold);
}

.nx-auth__trust i {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(var(--nx-primary-rgb), .10);
    border-radius: 50%;
    background: rgba(var(--nx-primary-rgb), .075);
    color: var(--nx-primary);
    font-size: .95rem;
}

/* --------------------------------------------------
   CARD
   -------------------------------------------------- */

.nx-auth__card {
    padding: var(--nx-space-8);
    border: 1px solid rgba(var(--nx-graphite-rgb), .08);
    border-radius: var(--nx-radius-lg);
    background: #fff;
    box-shadow:
        0 24px 64px rgba(var(--nx-graphite-rgb), .075),
        0 4px 14px rgba(var(--nx-graphite-rgb), .035);
}

.nx-auth__card-header > span {
    color: var(--nx-primary);
    font-size: var(--nx-text-xs);
    font-weight: var(--nx-font-weight-extrabold);
    letter-spacing: .10em;
}

.nx-auth__card-header h2 {
    margin: var(--nx-space-2) 0 var(--nx-space-2);
    color: var(--nx-graphite);
    font-size: var(--nx-text-2xl);
    font-weight: var(--nx-font-weight-extrabold);
    letter-spacing: var(--nx-letter-tight);
}

.nx-auth__card-header p {
    margin: 0;
    color: #747a7c;
    font-size: var(--nx-text-sm);
    line-height: 1.7;
}

/* --------------------------------------------------
   FORM
   -------------------------------------------------- */

.nx-auth__form {
    display: grid;
    gap: var(--nx-space-5);
    margin-top: var(--nx-space-6);
}

.nx-auth__field {
    display: grid;
    gap: var(--nx-space-2);
}

.nx-auth__field label {
    color: #292e30;
    font-size: var(--nx-text-sm);
    font-weight: var(--nx-font-weight-bold);
}

.nx-auth__field input {
    width: 100%;
    min-height: var(--nx-button-height-lg);
    padding: 0 var(--nx-space-4);
    border: 1px solid #d8dddc;
    border-radius: var(--nx-radius-sm);
    outline: none;
    background: #fff;
    color: var(--nx-graphite);
    font-family: inherit;
    font-size: var(--nx-text-base);
    transition:
        border-color var(--nx-transition-fast),
        box-shadow var(--nx-transition-fast),
        background-color var(--nx-transition-fast);
}

.nx-auth__field input:hover {
    border-color: #bcc5c2;
}

.nx-auth__field input:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 4px rgba(var(--nx-primary-rgb), .09);
}

.nx-auth__field input::placeholder {
    color: #9ba1a2;
}

.nx-auth__hint {
    color: #858b8c;
    font-size: var(--nx-text-xs);
    line-height: 1.6;
}

/* --------------------------------------------------
   REMEMBER / FORGOT
   -------------------------------------------------- */

.nx-auth__check {
    display: flex;
    gap: var(--nx-space-2);
    align-items: center;
    color: #565d5f;
    font-size: var(--nx-text-sm);
    line-height: 1.5;
    cursor: pointer;
}

.nx-auth__check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--nx-primary);
}

.nx-auth__forgot {
    margin-top: calc(var(--nx-space-2) * -1);
    text-align: end;
}

.nx-auth__forgot a {
    color: var(--nx-primary);
    font-size: var(--nx-text-sm);
    font-weight: var(--nx-font-weight-semibold);
    text-decoration: none;
    transition: color var(--nx-transition-fast);
}

.nx-auth__forgot a:hover {
    color: var(--nx-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------
   SUBMIT
   -------------------------------------------------- */

.nx-auth__submit {
    display: flex;
    width: 100%;
    min-height: var(--nx-button-height-lg);
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-primary);
    color: #fff;
    font-family: inherit;
    font-size: var(--nx-text-base);
    font-weight: var(--nx-font-weight-bold);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--nx-primary-rgb), .12);
    transition:
        background-color var(--nx-transition-fast),
        transform var(--nx-transition-fast),
        box-shadow var(--nx-transition-fast);
}

.nx-auth__submit:hover {
    background: #0c4d3b;
    transform: translateY(-1px);
    box-shadow: var(--nx-shadow-primary);
}

.nx-auth__submit:active {
    transform: translateY(0);
}

.nx-auth__submit:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 3px;
    box-shadow: var(--nx-shadow-focus);
}

/* --------------------------------------------------
   ACCOUNT SWITCH
   -------------------------------------------------- */

.nx-auth__switch {
    margin-top: var(--nx-space-6);
    padding-top: var(--nx-space-5);
    border-top: 1px solid #eceeed;
    color: #6f7678;
    font-size: var(--nx-text-sm);
    text-align: center;
}

.nx-auth__switch a {
    margin-inline-start: var(--nx-space-1);
    color: var(--nx-primary);
    font-weight: var(--nx-font-weight-bold);
    text-decoration: none;
}

.nx-auth__switch a:hover {
    color: var(--nx-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------
   VALIDATION
   -------------------------------------------------- */

.nx-auth__validation {
    padding: var(--nx-space-3);
    border: 1px solid rgba(var(--nx-danger-rgb), .18);
    border-radius: var(--nx-radius-sm);
    background: rgba(var(--nx-danger-rgb), .055);
    color: var(--nx-danger);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
}

.nx-auth__validation:empty {
    display: none;
}

.nx-auth__field-error {
    color: var(--nx-danger);
    font-size: var(--nx-text-xs);
}

/* --------------------------------------------------
   DIRECTION
   -------------------------------------------------- */

[dir="ltr"] .nx-auth__submit i {
    transform: rotate(180deg);
}

/* --------------------------------------------------
   TABLET
   -------------------------------------------------- */

@media (max-width: 900px) {

    .nx-auth {
        min-height: auto;
        padding:
            var(--nx-space-12)
            var(--nx-page-padding-tablet)
            var(--nx-space-16);
    }

    .nx-auth__shell {
        grid-template-columns: 1fr;
        gap: var(--nx-space-10);
    }

    .nx-auth__intro {
        max-width: 680px;
    }

    .nx-auth__intro h1 {
        font-size: clamp(2.25rem, 7vw, 3.4rem);
    }

    .nx-auth__card {
        width: min(100%, 540px);
    }
}

/* --------------------------------------------------
   MOBILE
   -------------------------------------------------- */

@media (max-width: 560px) {

    .nx-auth {
        padding:
            var(--nx-space-8)
            var(--nx-page-padding-mobile)
            var(--nx-space-12);
    }

    .nx-auth__shell {
        gap: var(--nx-space-8);
    }

    .nx-auth__intro h1 {
        font-size: 2.25rem;
    }

    .nx-auth__intro > p {
        margin-top: var(--nx-space-4);
        font-size: var(--nx-text-sm);
        line-height: 1.75;
    }

    .nx-auth__trust {
        margin-top: var(--nx-space-6);
    }

    .nx-auth__card {
        padding: var(--nx-space-6) var(--nx-space-5);
        border-radius: var(--nx-radius-md);
    }
}
/* ==================================================
   P1-E8B-4 — AUTH INPUT SURFACE REFINEMENT
   ================================================== */

.nx-auth__field input,
.nx-auth__field input:-webkit-autofill,
.nx-auth__field input:-webkit-autofill:hover,
.nx-auth__field input:-webkit-autofill:focus,
.nx-auth__field input:-webkit-autofill:active {
    background-color: #ffffff !important;
    color: var(--nx-graphite) !important;
    -webkit-text-fill-color: var(--nx-graphite) !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: var(--nx-graphite);
}

/* ==================================================
   P1-E8C-4D-3B — AUTH CAPTCHA
   ================================================== */

.nx-auth__captcha {
    gap: var(--nx-space-2);
}

.nx-auth__captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .72fr);
    gap: var(--nx-space-3);
    align-items: stretch;
}

/*
   CAPTCHA challenge surface.
   Intentionally different from an editable input,
   while remaining inside the Nexroot auth language.
*/
.nx-auth__captcha-code {
    display: flex;
    min-width: 0;
    min-height: var(--nx-button-height-lg);
    align-items: center;
    justify-content: center;

    padding-inline: var(--nx-space-4);

    overflow: hidden;

    border: 1px solid rgba(var(--nx-primary-rgb), .18);
    border-radius: var(--nx-radius-sm);

    background:
        linear-gradient(
            135deg,
            rgba(var(--nx-primary-rgb), .055),
            rgba(var(--nx-primary-rgb), .015)
        ),
        #ffffff;

    color: var(--nx-primary);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .18em;
    text-align: center;
    direction: ltr;
    user-select: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .7);
}

/*
   Answer input.
   Base input styling continues to come from
   .nx-auth__field input.
*/
.nx-auth__captcha-input {
    min-width: 0;
    text-align: center;
    direction: ltr;

    font-weight: var(--nx-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/*
   Keep autofill/browser surfaces white and consistent.
*/
.nx-auth__captcha-input:-webkit-autofill,
.nx-auth__captcha-input:-webkit-autofill:hover,
.nx-auth__captcha-input:-webkit-autofill:focus,
.nx-auth__captcha-input:-webkit-autofill:active {
    background-color: #ffffff !important;
    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;
}

/*
   Mobile: challenge and answer become full-width rows.
*/
@media (max-width: 560px) {

    .nx-auth__captcha-row {
        grid-template-columns: 1fr;
    }

    .nx-auth__captcha-code {
        min-height: 52px;
    }
}

/*
   Accessibility: preserve code readability when the user
   requests stronger contrast.
*/
@media (prefers-contrast: more) {

    .nx-auth__captcha-code {
        border-color: var(--nx-primary);
    }
}

/* ==================================================
   REGISTER — PASSWORD ROW
   ================================================== */

.nx-auth--register .nx-auth__password-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-4);
    align-items: start;
}

    .nx-auth--register .nx-auth__password-row .nx-auth__field {
        min-width: 0;
    }

    /* Keep both password inputs visually aligned */
    .nx-auth--register .nx-auth__password-row input {
        width: 100%;
    }

/* Mobile / narrow screens */
@media (max-width: 700px) {
    .nx-auth--register .nx-auth__password-row {
        grid-template-columns: 1fr;
        gap: var(--nx-space-5);
    }
}

/* ==================================================
   LOGIN — DESKTOP REFINEMENT
   ================================================== */

.nx-auth--login .nx-auth__card {
    width: min(100%, 600px);
}

.nx-auth--login .nx-auth__login-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-4);
    align-items: start;
}

    .nx-auth--login .nx-auth__login-row .nx-auth__field {
        min-width: 0;
    }

    .nx-auth--login .nx-auth__login-row input {
        width: 100%;
    }

.nx-auth--login .nx-auth__login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-4);
}

.nx-auth--login .nx-auth__forgot {
    margin: 0;
}

    .nx-auth--login .nx-auth__forgot a {
        color: var(--nx-primary);
        font-size: var(--nx-text-sm);
        font-weight: var(--nx-font-weight-semibold);
        text-decoration: none;
    }

        .nx-auth--login .nx-auth__forgot a:hover {
            text-decoration: underline;
        }


/* --------------------------------------------------
   RESPONSIVE
   -------------------------------------------------- */

@media (max-width: 700px) {

    .nx-auth--login .nx-auth__login-row {
        grid-template-columns: 1fr;
        gap: var(--nx-space-5);
    }

    .nx-auth--login .nx-auth__login-options {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--nx-space-3);
    }
}

/* ==================================================
   FORGOT PASSWORD
   ================================================== */

.nx-auth--forgot .nx-auth__card {
    width: min(100%, 600px);
}

.nx-auth__success {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    margin-top: var(--nx-space-5);
    margin-bottom: var(--nx-space-5);
    padding: var(--nx-space-4);
    border: 1px solid rgba(var(--nx-primary-rgb), .16);
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), .06);
    color: var(--nx-primary);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
}

    .nx-auth__success i {
        flex: 0 0 auto;
        margin-top: .15rem;
        font-size: 1.05rem;
    }

    .nx-auth__success span {
        flex: 1;
    }

/* ==================================================
   EMAIL CONFIRMATION
   ================================================== */

.nx-auth--confirmation .nx-auth__card {
    width: min(100%, 600px);
}

.nx-auth__status-card {
    text-align: center;
}

.nx-auth__status-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--nx-space-5);
    place-items: center;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
}

.nx-auth__status-icon--success {
    border: 1px solid rgba(var(--nx-primary-rgb), .18);
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary);
}

.nx-auth__status-icon--warning {
    border: 1px solid rgba(181, 128, 31, .20);
    background: rgba(181, 128, 31, .08);
    color: #9a6814;
}

.nx-auth__status-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-3);
    margin-top: var(--nx-space-6);
    padding: var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
}

.nx-auth__status-message--success {
    border: 1px solid rgba(var(--nx-primary-rgb), .14);
    background: rgba(var(--nx-primary-rgb), .055);
    color: var(--nx-primary);
}

.nx-auth__status-message--warning {
    border: 1px solid rgba(181, 128, 31, .16);
    background: rgba(181, 128, 31, .055);
    color: #805710;
}

.nx-auth__action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--nx-space-5);
    text-decoration: none;
}

    .nx-auth__action-link:hover {
        color: #fff;
        text-decoration: none;
    }

.nx-auth__captcha-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-auth__captcha-refresh {
    position: absolute;
    inset-inline-start: .75rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 91, 70, .22);
    border-radius: 9px;
    background: rgba(15, 91, 70, .06);
    color: #0F5B46;
    cursor: pointer;
    transition: .18s ease;
}

    .nx-auth__captcha-refresh:hover {
        background: rgba(15, 91, 70, .12);
    }

    .nx-auth__captcha-refresh:disabled {
        opacity: .5;
        cursor: wait;
    }

.nx-auth__verify-card {
    background: #ffffff;
    color: #1A1D1F;
}

    .nx-auth__verify-card h1,
    .nx-auth__verify-card h2,
    .nx-auth__verify-title {
        color: #1A1D1F !important;
    }

    .nx-auth__verify-card p,
    .nx-auth__verify-text {
        color: #4f5b57 !important;
    }

.nx-auth__verify-email {
    color: #0F5B46 !important;
    font-weight: 700;
}

.nx-auth__verify-card a:not(.btn) {
    color: #0F5B46 !important;
    font-weight: 600;
}

.nx-auth__verify-card .text-muted {
    color: #6b7471 !important;
}