/**
 * KESHO Auth Popup UI — Popup #902
 * Version: 2.0.0 (plugin-owned)
 * UX 1.9.0: in-flow feedback; Welcome close remains available; no popup-level overlay messages.
 * Baseline: Bricks Popup #902 / current production structure
 * Compatible runtime baseline: KESHO Authentication 4.0.0-rc42
 *
 * Ownership:
 * - Bricks: structure, content, classes, attributes, interactions, form fields.
 * - KESHO Authentication plugin: Popup #902 presentation + scoped backdrop.
 * - Bricks Global Custom CSS: no Auth/Account ownership.
 * - Auth JS/PHP: state, validation, API, security, busy/error behavior.
 *
 * IMPORTANT:
 * - This file is plugin-owned and includes the backdrop scoped to Popup #902.
 * - Do NOT add Auth behavior/state here; JS/PHP own logic.
 * - Keep Bricks element-level presentation reset/empty where possible.
 */

/* =========================================================
   01. TOKENS + BASE
   ========================================================= */

.brxe-popup-902 {
    --ksh-auth-green: var(--kesho-green, #5D9A88);
    --ksh-auth-green-hover: var(--kesho-green-hover, #4B8373);
    --ksh-auth-deep: var(--kesho-deep, #2F4F47);
    --ksh-auth-text: var(--kesho-text, #5A5A5A);

    --ksh-auth-white: var(--kesho-white, #FFFFFF);
    --ksh-auth-mist: var(--kesho-mist, #F1F0F6);

    --ksh-auth-orange: var(--kesho-orange, #FE9456);
    --ksh-auth-orange-hover: var(--kesho-orange-hover, #E87645);
    --ksh-auth-orange-active: var(--kesho-orange-active, #D96A3F);

    --ksh-auth-border: var(--kesho-border, #E5E5E5);

    /* Error family stays orange, but text uses the darker brand-orange tone for contrast. */
    --ksh-auth-danger: var(--ksh-auth-orange-active);
    --ksh-auth-error-border: var(--ksh-auth-orange-active);
    --ksh-auth-error-surface: rgba(254, 148, 86, 0.10);

    --ksh-auth-info: #496579;
    --ksh-auth-info-surface: rgba(134, 162, 184, 0.12);
    --ksh-auth-info-border: rgba(134, 162, 184, 0.34);

    --ksh-auth-success: #3F7668;
    --ksh-auth-success-surface: rgba(93, 154, 136, 0.10);
    --ksh-auth-success-border: rgba(93, 154, 136, 0.34);

    --ksh-auth-radius: 20px;
    --ksh-auth-control-radius: 12px;

    --ksh-auth-control-height: 48px;
    --ksh-auth-input-height: 52px;
    --ksh-auth-button-height: 44px;
    --ksh-auth-field-width: 340px;
    --ksh-auth-touch: 44px;

    --ksh-auth-pad-desktop: 32px;
    --ksh-auth-pad-mobile: 24px;

    --ksh-auth-transition: 160ms ease;

    /*
     * Stable shell: Popup geometry must not change while Auth state changes.
     * One canonical shell height is used across every auth state.
     * State transitions are not allowed to resize this shell.
     */
    --ksh-auth-shell-height: 536px;

    /* Primary CTA uses the canonical KESHO green. */
    --ksh-auth-primary: var(--ksh-auth-green);
    --ksh-auth-primary-hover: var(--ksh-auth-green-hover);
    --ksh-auth-primary-active: #467C6C;

    /* Shared vertical anchor for every state title. */
    --ksh-auth-title-offset: 8px;

    direction: rtl;

    color: var(--ksh-auth-text);

    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
}


.brxe-popup-902,
.brxe-popup-902 *,
.brxe-popup-902 *::before,
.brxe-popup-902 *::after {
    box-sizing: border-box;
}


/*
 * Auth runtime owns state visibility.
 * hidden must always beat presentation.
 */
.brxe-popup-902 [hidden],
.brxe-popup-902 [aria-hidden="true"].ksh-auth-step {
    display: none !important;
}


/* Hard containment for inactive runtime states on mobile/WebKit/Blink. */
.brxe-popup-902 .ksh-auth-state-host > .ksh-auth-step[hidden],
.brxe-popup-902 .ksh-auth-state-host > .ksh-auth-step[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   02. MODAL SHELL

   Popup #902 presentation and its scoped backdrop are owned by
   this plugin stylesheet. Global Bricks Custom CSS must not
   define Auth backdrop rules.
   ========================================================= */

.brxe-popup-902 > .brx-popup-content {
    width: min(
        432px,
        calc(100vw - 32px)
    );

    max-width: 432px;

    height: var(--ksh-auth-shell-height);
    min-height: var(--ksh-auth-shell-height);
    max-height: var(--ksh-auth-shell-height);

    margin: auto;

    padding: 0;

    overflow: hidden;

    background: var(--ksh-auth-white);

    border: 0;

    border-radius: var(--ksh-auth-radius);

    box-shadow:
        0 20px 60px
        rgba(47, 79, 71, 0.12);
}


/* Root Section — mzasif */

.brxe-popup-902 #brxe-mzasif {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    width: 100%;

    min-width: 0;

    height: 100%;
    min-height: 100%;

    margin: 0;

    padding: 0;

    background: var(--ksh-auth-white);

    border: 0;

    border-radius: var(--ksh-auth-radius);

    box-shadow: none;
}


/* =========================================================
   03. HEADER / BRAND / CLOSE

   ngbymt = Header
   keersv = Brand
   eoknjh = Logo
   nrpgdp = Brand text
   absexc = Close wrapper
   pbvigo = Close icon
   ykptyb = Header divider
   ========================================================= */

.brxe-popup-902 #brxe-ngbymt {
    position: relative;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: flex-end;

    width: 100%;

    min-width: 0;

    min-height: 62px;

    margin: 0;

    padding:
        8px
        64px
        8px
        20px;

    z-index: 2;
}


.brxe-popup-902 #brxe-keersv {
    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: center;

    justify-content: center;

    width: auto;

    min-width: 0;

    height: auto;

    margin: 0;

    padding: 0;

    gap: 8px;
}


.brxe-popup-902 #brxe-eoknjh {
    display: block;

    width: 30px;

    min-width: 30px;

    height: auto;

    margin: 0;

    padding: 0;
}


.brxe-popup-902 #brxe-eoknjh img {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    margin: 0;

    padding: 0;
}


.brxe-popup-902 #brxe-nrpgdp {
    width: auto;

    min-width: 0;

    margin: 0;

    padding: 0;

    color: var(--ksh-auth-deep);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.6;

    text-align: center;

    white-space: nowrap;
}


/* Close wrapper */

.brxe-popup-902 #brxe-absexc {
    position: absolute;

    top: 9px;
    right: 10px;
    left: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--ksh-auth-touch);

    min-width: var(--ksh-auth-touch);

    height: var(--ksh-auth-touch);

    min-height: var(--ksh-auth-touch);

    margin: 0;

    padding: 0;

    z-index: 3;
}


/* Close icon itself */

.brxe-popup-902 .ksh-popup-close {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: var(--ksh-auth-touch);

    min-width: var(--ksh-auth-touch);

    height: var(--ksh-auth-touch);

    min-height: var(--ksh-auth-touch);

    margin: 0;

    padding: 0;

    color: var(--ksh-auth-text);

    background: transparent;

    border: 0;

    border-radius: 10px;

    box-shadow: none;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        color var(--ksh-auth-transition),
        background-color var(--ksh-auth-transition);

    -webkit-tap-highlight-color: transparent;
}


.brxe-popup-902 .ksh-popup-close:focus-visible {
    outline:
        3px solid
        rgba(93, 154, 136, 0.28);

    outline-offset: 2px;
}


/* Header divider */

.brxe-popup-902 #brxe-ykptyb {
    display: block;

    width: 100%;

    min-width: 0;

    height: 1px;

    min-height: 1px;

    margin: 0;

    padding: 0;
}


.brxe-popup-902 #brxe-ykptyb .line {
    width: 100%;

    margin: 0;

    border-color:
        rgba(93, 154, 136, 0.20);
}


/* =========================================================
   04. AUTH BODY / STATE HOST

   svudeq = Auth Box
   doyjwl = State Host
   ========================================================= */

.brxe-popup-902 #brxe-svudeq,
.brxe-popup-902 .ksh-auth-box {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    width: 100%;

    max-width: none;

    min-width: 0;

    flex: 1 1 auto;

    height: auto;

    min-height: 0;

    margin: 0;

    padding:
        34px
        var(--ksh-auth-pad-desktop)
        14px;

    gap: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}


.brxe-popup-902 #brxe-doyjwl,
.brxe-popup-902 .ksh-auth-state-host {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    width: 100%;

    max-width: none;

    min-width: 0;

    flex: 1 1 0;

    height: auto;

    min-height: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    order: 1;
}


/* =========================================================
   05. AUTH STATES
   ========================================================= */

.brxe-popup-902 .ksh-auth-step {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    width: 100%;

    max-width: none;

    min-width: 0;

    height: 100%;

    min-height: 0;

    margin: 0;

    padding: 0;

    gap: 13px;
}


/* =========================================================
   06. TYPOGRAPHY
   ========================================================= */

.brxe-popup-902 .ksh-auth-title {
    display: block;

    width: 100%;

    min-width: 0;

    margin:
        var(--ksh-auth-title-offset)
        0
        0;

    padding: 0;

    min-height: 30px;

    color: var(--ksh-auth-deep);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;
}


.brxe-popup-902 .ksh-auth-copy {
    display: block;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    color: var(--ksh-auth-text);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.8;

    text-align: center;

    overflow-wrap: anywhere;
}


.brxe-popup-902 .ksh-auth-copy strong {
    color: var(--ksh-auth-deep);

    font-weight: 600;
}


/*
 * Dynamic identifiers / addresses may contain Latin data.
 */

.brxe-popup-902 .ksh-otp-desc strong,
.brxe-popup-902 .ksh-security-address-destination,
.brxe-popup-902 .ksh-google-proof-copy,
.brxe-popup-902 .ksh-auth-destination {
    unicode-bidi: plaintext;
}

.brxe-popup-902 .ksh-auth-destination {
    display: inline;
    direction: ltr;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 600;
    color: var(--ksh-auth-deep);
}

.brxe-popup-902 .ksh-otp-desc strong {
    display: inline;
    direction: ltr;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.brxe-popup-902 .ksh-otp-desc {
    width: min(100%, var(--ksh-auth-field-width));
    max-width: var(--ksh-auth-field-width);
    align-self: center;
}


/* =========================================================
   06B. IDENTIFIER MODE — MOBILE / EMAIL
   ========================================================= */

.brxe-popup-902 .ksh-identifier-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, var(--ksh-auth-field-width));
    max-width: var(--ksh-auth-field-width);
    align-self: center;
    padding: 3px;
    gap: 3px;
    background: #EEF3F1;
    border: 1px solid #D7E3DF;
    border-radius: 12px;
}

.brxe-popup-902 .ksh-identifier-mode-button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ksh-auth-deep);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--ksh-auth-transition), color var(--ksh-auth-transition), border-color var(--ksh-auth-transition);
}

.brxe-popup-902 .ksh-identifier-mode-button[aria-pressed="true"],
.brxe-popup-902 .ksh-identifier-mode-button.is-active {
    background: var(--ksh-auth-green);
    border-color: var(--ksh-auth-green);
    color: var(--ksh-auth-white);
}

.brxe-popup-902 .ksh-identifier-mode-button:focus-visible {
    outline: 3px solid rgba(93, 154, 136, 0.18);
    outline-offset: 1px;
}


/* Runtime-injected mode controls in session-switch, step-up and recovery states. */
.brxe-popup-902 :is(.ksh-session-switch-step, .ksh-stepup-step, .ksh-recovery-identity-step) > .ksh-identifier-mode {
    flex: 0 0 auto;
}

.brxe-popup-902 .ksh-identifier-mode-button[hidden] {
    display: none !important;
}

.brxe-popup-902 .ksh-identifier-mode.is-single-option {
    grid-template-columns: 1fr;
}

/* =========================================================
   07. FORMS

   Current Bricks Meta form IDs:

   qcoqhu = Login Form
   nvurwu = OTP Form
   hmhiyf = Session Switch Form
   ujowfu = Step-up Form
   mcsdmg = Recovery Code Form
   dqdrwf = Recovery Identity Form
   bbtsix = Google Proof Form

   These IDs are intentionally part of the canonical selector.
   This lets the Snippet remain stronger than residual Bricks
   element CSS without using presentation !important rules.
   ========================================================= */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    min-width: 0;

    align-self: center;

    height: auto;

    min-height: 0;

    margin: 0;

    padding: 0;

    gap: 12px;
}


.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .form-group,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper {
    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;
}


/* Labels */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form label {
    display: block;

    width: 100%;

    margin:
        0
        0
        7px;

    padding: 0;

    color: var(--ksh-auth-deep);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.6;

    text-align: right;
}


/* Inputs */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input:not([type="submit"]),

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form textarea,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form select {
    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: var(--ksh-auth-input-height);

    margin: 0;

    padding:
        10px
        13px;

    color: var(--ksh-auth-deep);

    background: var(--ksh-auth-white);

    border:
        1px solid
        #C7DAD4;

    border-radius:
        var(--ksh-auth-control-radius);

    box-shadow: none;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5;

    caret-color:
        var(--ksh-auth-green);

    transition:
        border-color var(--ksh-auth-transition),
        box-shadow var(--ksh-auth-transition),
        background-color var(--ksh-auth-transition);
}


/* Placeholder */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input:not([type="submit"])::placeholder,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form textarea::placeholder {
    color: #8B8B8B;

    opacity: 1;
}


/* Focus */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input:not([type="submit"]):focus,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form textarea:focus,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form select:focus {
    outline: none;

    border-color:
        var(--ksh-auth-green);

    box-shadow:
        0 0 0 3px
        rgba(93, 154, 136, 0.13);
}


/* Invalid */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input[aria-invalid="true"],

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form textarea[aria-invalid="true"],

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form select[aria-invalid="true"] {
    border-color:
        var(--ksh-auth-error-border);

    background:
        var(--ksh-auth-error-surface);
}

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input[aria-invalid="true"]:focus {
    border-color: var(--ksh-auth-error-border);
    box-shadow: 0 0 0 3px rgba(217, 106, 63, 0.14);
}


/* Disabled */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form input:disabled,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form textarea:disabled,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form select:disabled {
    color: #777777;

    background: #F5F5F5;

    cursor: not-allowed;

    opacity: 0.78;
}


/*
 * Important:
 * CSS controls caret/text direction only.
 * Persian digit display/normalization is behavioral logic and is NOT implemented here.
 */

/*
 * Browser autocomplete dropdowns are native browser UI and cannot be styled
 * or repositioned reliably with CSS. Auth rc15 sets autocomplete=off on the
 * mode-specific identifier input; this stylesheet only owns presentation.
 */

/* Mode-specific examples are supplied by the Auth runtime. */
.brxe-popup-902 .ksh-login-form input[name="identifier"]::placeholder {
    color: #9A9A9A;
    opacity: 1;
}

/* =========================================================
   08. IDENTIFIER DIRECTIONS

   The input itself stays LTR even while empty so the caret never jumps
   from the right edge to the left edge on the first typed character.
   Persian placeholder text is aligned independently.
   ========================================================= */

.brxe-popup-902 :is(
    input[name="identifier"],
    input[name="switch_identifier"],
    input[name="stepup_identifier"],
    input[name="recovery_identifier"],
    input[name="google_proof_email"]
) {
    direction: ltr;

    text-align: left;

    unicode-bidi: plaintext;
}


.brxe-popup-902 :is(
    input[name="identifier"],
    input[name="switch_identifier"],
    input[name="stepup_identifier"],
    input[name="recovery_identifier"],
    input[name="google_proof_email"]
)::placeholder {
    direction: ltr;

    text-align: left;

    unicode-bidi: plaintext;
}


.brxe-popup-902 input[name="recovery_code"] {
    direction: ltr;

    text-align: center;

    letter-spacing: 0.08em;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   09. BUTTON SYSTEM
   ========================================================= */

.brxe-popup-902 .ksh-auth-button,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper button,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper input[type="submit"] {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    align-self: center;

    min-width: 0;

    min-height:
        var(--ksh-auth-button-height);

    margin: 0;

    padding:
        10px
        16px;

    color: inherit;

    background: transparent;

    border:
        1px solid
        transparent;

    border-radius:
        var(--ksh-auth-control-radius);

    box-shadow: none;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;

    text-align: center;

    text-decoration: none;

    white-space: normal;

    cursor: pointer;

    transition:
        background-color var(--ksh-auth-transition),
        border-color var(--ksh-auth-transition),
        color var(--ksh-auth-transition),
        box-shadow var(--ksh-auth-transition),
        transform 80ms ease;

    -webkit-tap-highlight-color:
        transparent;
}


/* Primary */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper button,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper input[type="submit"],

.brxe-popup-902 .ksh-auth-button--primary {
    color:
        var(--ksh-auth-white);

    background:
        var(--ksh-auth-primary);

    border-color:
        var(--ksh-auth-primary);
}


/* Secondary */

.brxe-popup-902 .ksh-auth-button--secondary {
    color:
        var(--ksh-auth-green);

    background:
        var(--ksh-auth-white);

    border-color:
        var(--ksh-auth-green);
}


/* Google Sign-in — light treatment with the standard multicolor G. */

.brxe-popup-902 .ksh-auth-button--google {
    position: relative;

    color: #1F1F1F;

    background:
        #FFFFFF;

    border-color: #747775;

    box-shadow: none;

    font-size: 14px;

    font-weight: 500;
}


/*
 * Google button with a real Bricks Image element.
 * Structure:
 * .ksh-google-wrap
 *   - Button: .ksh-auth-button .ksh-auth-button--google .ksh-google-login
 *   - Image:  .ksh-google-icon
 */
.brxe-popup-902 .ksh-google-wrap {
    position: relative;

    display: flex;

    align-items: center;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    min-width: 0;

    min-height: var(--ksh-auth-button-height);

    align-self: center;

    margin: 0;

    padding: 0;
}


.brxe-popup-902 .ksh-google-wrap[hidden] {
    display: none !important;
}


.brxe-popup-902 .ksh-google-wrap .ksh-auth-button--google {
    width: 100%;

    min-height: var(--ksh-auth-button-height);

    padding-inline:
        48px;
}


.brxe-popup-902 .ksh-google-icon {
    position: absolute;

    top: 50%;
    left: 15px;

    z-index: 2;

    display: block;

    width: 18px;
    min-width: 18px;

    height: 18px;
    min-height: 18px;

    margin: 0;

    padding: 0;

    transform:
        translateY(-50%);

    pointer-events: none;
}


.brxe-popup-902 .ksh-google-icon img,
.brxe-popup-902 img.ksh-google-icon {
    display: block;

    width: 18px;

    height: 18px;

    object-fit: contain;
}





/* Focus */

.brxe-popup-902 .ksh-auth-button:focus-visible,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper button:focus-visible,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper input[type="submit"]:focus-visible,

.brxe-popup-902 .ksh-auth-link:focus-visible {
    outline:
        3px solid
        rgba(93, 154, 136, 0.28);

    outline-offset: 2px;
}


/* Press */

.brxe-popup-902 .ksh-auth-button:active:not(:disabled):not([aria-disabled="true"]),

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper button:active:not(:disabled),

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper input[type="submit"]:active:not(:disabled) {
    transform:
        translateY(1px);
}


/* Disabled */

.brxe-popup-902 .ksh-auth-button:disabled,

.brxe-popup-902 .ksh-auth-button[aria-disabled="true"],

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper button:disabled,

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form .submit-button-wrapper input[type="submit"]:disabled {
    cursor: not-allowed;

    color: #5F716C;

    background: #E8EEEC;

    border-color: #E8EEEC;

    opacity: 1;

    transform: none;

    box-shadow: none;
}


/* Busy state supplied by Auth runtime */

.brxe-popup-902 [data-ksh-busy="1"] {
    cursor: wait;
    opacity: 0.58;
    pointer-events: none;
}


/* =========================================================
   10. AUTH DIVIDER
   ========================================================= */

.brxe-popup-902 .ksh-auth-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    align-self: center;

    min-width: 0;

    margin: 0;

    padding: 0;

    gap: 10px;

    color: #8A8A8A;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.5;

    text-align: center;
}


.brxe-popup-902 .ksh-auth-divider::before,
.brxe-popup-902 .ksh-auth-divider::after {
    content: "";

    flex:
        1 1 auto;

    min-width: 24px;

    height: 1px;

    background:
        var(--ksh-auth-border);
}


/* =========================================================
   11. LINK ACTIONS
   ========================================================= */

.brxe-popup-902 .ksh-auth-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    margin: 0;

    padding:
        5px
        8px;

    color:
        var(--ksh-auth-green);

    background: transparent;

    border: 0;

    border-radius: 8px;

    box-shadow: none;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.6;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition:
        color var(--ksh-auth-transition),
        background-color var(--ksh-auth-transition);

    -webkit-tap-highlight-color:
        transparent;
}


.brxe-popup-902 .ksh-auth-link[aria-disabled="true"] {
    color: #929292;

    cursor: default;

    pointer-events: none;

    opacity: 0.72;
}


.brxe-popup-902 .ksh-auth-recovery-link,
.brxe-popup-902 .ksh-auth-back-main {
    align-self: center;

    width: auto;

    max-width: 100%;
}


.brxe-popup-902 .ksh-identifier-step > .ksh-auth-recovery-link {
    margin-top: 2px;

    font-size: 13px;

    font-weight: 500;
}


/*
 * Identifier state visual order is explicit because its Bricks source order
 * predates the current UX hierarchy.
 */
.brxe-popup-902 .ksh-identifier-step > .ksh-auth-title {
    order: 1;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-auth-copy {
    order: 2;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-identifier-mode {
    order: 3;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-login-form {
    order: 4;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-auth-message-slot {
    order: 5;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-auth-divider {
    order: 6;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-google-wrap {
    order: 7;
}

.brxe-popup-902 .ksh-identifier-step > .ksh-auth-recovery-link {
    order: 8;
}


/*
 * Recovery entry is intentionally removed from the primary login screen.
 */
.brxe-popup-902 .ksh-identifier-step > .ksh-auth-recovery-link {
    display: none !important;
}


/* OTP keeps a stable reading and feedback order. */
.brxe-popup-902 .ksh-otp-step > .ksh-auth-title {
    order: 1;
}

.brxe-popup-902 .ksh-otp-step > .ksh-otp-desc {
    order: 2;
}

.brxe-popup-902 .ksh-otp-step > .ksh-otp-form {
    order: 3;
}

.brxe-popup-902 .ksh-otp-step > .ksh-auth-message-slot {
    order: 4;
}

.brxe-popup-902 .ksh-otp-step > .ksh-auth-inline-actions {
    order: 5;
}


/* State 03 has title after copy in legacy Bricks source; normalize visually. */
.brxe-popup-902 .ksh-conflict-step > .ksh-auth-title {
    order: -1;
}


/* =========================================================
   12. OTP
   nvurwu = current OTP Form
   ========================================================= */

.brxe-popup-902 #brxe-nvurwu.ksh-otp-form {
    display: grid;

    grid-template-columns:
        repeat(6, 36px);

    justify-content: center;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    min-width: 0;

    direction: ltr;

    column-gap: 7px;

    row-gap: 12px;
}


.brxe-popup-902
#brxe-nvurwu.ksh-otp-form
.form-group:not(.submit-button-wrapper) {
    width: auto;

    min-width: 0;

    margin: 0;

    padding: 0;
}


.brxe-popup-902
#brxe-nvurwu.ksh-otp-form
.form-group:not(.submit-button-wrapper)
input {
    width: 36px;

    max-width: 36px;

    min-width: 36px;

    height: 42px;

    min-height: 42px;

    margin: 0;

    padding: 0;

    direction: ltr;

    color:
        var(--ksh-auth-deep);

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    font-variant-numeric:
        tabular-nums;
}


.brxe-popup-902
#brxe-nvurwu.ksh-otp-form
.submit-button-wrapper {
    grid-column:
        1 / -1;

    width: 100%;

    margin-top: 2px;

    direction: rtl;
}


/* OTP actions */

.brxe-popup-902 .ksh-auth-inline-actions {
    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    width: min(100%, var(--ksh-auth-field-width));

    max-width: var(--ksh-auth-field-width);

    align-self: center;

    min-width: 0;

    margin:
        -2px
        0
        0;

    padding: 0;

    gap: 8px;

    direction: ltr;
}


.brxe-popup-902 .ksh-change-identifier,
.brxe-popup-902 .ksh-resend-otp {
    flex:
        0 1 auto;

    min-width: 0;

    direction: rtl;
}


.brxe-popup-902 .ksh-resend-otp {
    order: 1;

    min-inline-size: 150px;

    margin-right: auto;

    justify-content: flex-start;

    text-align: left;

    font-variant-numeric:
        tabular-nums;
}


.brxe-popup-902 .ksh-change-identifier {
    order: 2;

    margin-left: auto;

    text-align: right;
}


/* =========================================================
   13. FEEDBACK / ERROR / INFO
   ========================================================= */

.brxe-popup-902 .ksh-auth-message-slot {
    position: static;
    flex: 0 0 auto;
    width: min(100%, var(--ksh-auth-field-width));
    max-width: var(--ksh-auth-field-width);
    min-width: 0;
    min-height: 0;
    align-self: center;
    margin: 0;
    padding: 0;
}

/* Feedback stays in document flow. It may increase the state height, but it can
 * never cover another control or a card border. */
.brxe-popup-902 .ksh-auth-message {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    max-height: none;
    margin: 0;
    padding: 6px 10px;
    color: var(--ksh-auth-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    text-align: right;
    overflow: visible;
    overflow-wrap: anywhere;
}

.brxe-popup-902 .ksh-auth-message:empty {
    display: none;
}

.brxe-popup-902 .ksh-auth-message.is-error,
.brxe-popup-902 .ksh-auth-message[data-ksh-message-type="error"] {
    visibility: visible;
    color: var(--ksh-auth-orange-hover);
    background: var(--ksh-auth-error-surface);
    border-color: rgba(232, 118, 69, 0.42);
}

.brxe-popup-902 .ksh-auth-message.is-info,
.brxe-popup-902 .ksh-auth-message[data-ksh-message-type="info"] {
    visibility: visible;
    color: var(--ksh-auth-info);
    background: var(--ksh-auth-info-surface);
    border-color: var(--ksh-auth-info-border);
}

.brxe-popup-902 .ksh-auth-message.is-success,
.brxe-popup-902 .ksh-auth-message[data-ksh-message-type="success"] {
    visibility: visible;
    color: var(--ksh-auth-success);
    background: var(--ksh-auth-success-surface);
    border-color: var(--ksh-auth-success-border);
}

/* Google terminal state: once provider verification has completed, Auth becomes
 * intentionally non-editable until redirect/reload finishes. */
.brxe-popup-902 .ksh-auth-box.ksh-auth-is-finalizing {
    cursor: progress;
}

.brxe-popup-902 .ksh-auth-box.ksh-auth-is-finalizing :is(input, button, select, textarea, a, [role="button"]) {
    pointer-events: none !important;
}

.brxe-popup-902 .ksh-auth-box.ksh-auth-is-finalizing .ksh-generic-step {
    justify-content: center;
}

.brxe-popup-902 .ksh-auth-box.ksh-auth-is-finalizing .ksh-generic-title::before {
    content: "";
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    margin-inline-end: 8px;
    border: 2px solid rgba(93,154,136,.28);
    border-top-color: var(--ksh-auth-green);
    border-radius: 50%;
    vertical-align: -2px;
    animation: ksh-auth-finalizing-spin .8s linear infinite;
}

@keyframes ksh-auth-finalizing-spin {
    to { transform: rotate(360deg); }
}



/* =========================================================
   14. RECOVERY / STATUS
   ========================================================= */

.brxe-popup-902 .ksh-auth-code,
.brxe-popup-902 .ksh-auth-status {
    width: 100%;

    min-width: 0;

    margin: 0;

    padding:
        12px
        14px;

    color:
        var(--ksh-auth-deep);

    background:
        var(--ksh-auth-mist);

    border:
        1px solid
        var(--ksh-auth-border);

    border-radius:
        var(--ksh-auth-control-radius);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.7;

    text-align: center;

    overflow-wrap: anywhere;
}


.brxe-popup-902 .ksh-recovery-code-value {
    direction: ltr;

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

    font-size: 16px;

    letter-spacing: 0.06em;

    user-select: all;
}


/* =========================================================
   15. SECURITY FOOTER

   bzpfwm = Container
   mzojot = Lock icon
   bxljwj = Security text
   ========================================================= */

.brxe-popup-902 #brxe-bzpfwm {
    display: flex;

    position: relative;
    inset: auto;
    transform: none;
    order: 2;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-width: 0;

    flex: 0 0 auto;

    height: auto;

    margin:
        14px
        0
        0;

    padding:
        7px
        10px;

    gap: 7px;

    color:
        var(--ksh-auth-text);

    background:
        var(--ksh-auth-mist);

    border: 0;

    border-radius: 9px;

    box-shadow: none;
}


.brxe-popup-902 #brxe-mzojot {
    flex:
        0 0 auto;

    width: auto;

    height: auto;

    margin: 0;

    padding: 0;

    color:
        var(--ksh-auth-green);

    font-size: 16px;
}


.brxe-popup-902 #brxe-bxljwj {
    display: none !important;

    width: auto;

    min-width: 0;

    margin: 0;

    padding: 0;

    color:
        var(--ksh-auth-text);

    font-size: 13px;

    font-weight: 500;

    line-height: 1.65;

    text-align: center;
}


/* =========================================================
   16. POINTER HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .brxe-popup-902 .ksh-popup-close:hover {
        color:
            var(--ksh-auth-deep);

        background:
            var(--ksh-auth-mist);
    }


    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    input:not([type="submit"]):hover:not(:disabled):not(:focus),

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    textarea:hover:not(:disabled):not(:focus),

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    select:hover:not(:disabled):not(:focus) {
        border-color:
            #7FB2A3;
    }


    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    .submit-button-wrapper
    button:hover:not(:disabled),

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    .submit-button-wrapper
    input[type="submit"]:hover:not(:disabled),

    .brxe-popup-902
    .ksh-auth-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
        color:
            var(--ksh-auth-white);

        background:
            var(--ksh-auth-primary-hover);

        border-color:
            var(--ksh-auth-primary-hover);
    }


    .brxe-popup-902
    .ksh-auth-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
        color:
            var(--ksh-auth-white);

        background:
            var(--ksh-auth-green);

        border-color:
            var(--ksh-auth-green);
    }


    .brxe-popup-902
    .ksh-auth-button--google:hover:not(:disabled):not([aria-disabled="true"]) {
        color: #1F1F1F;

        background: #F8F9FA;

        border-color: #747775;
    }


    .brxe-popup-902
    .ksh-auth-link:hover:not([aria-disabled="true"]) {
        color:
            var(--ksh-auth-green-hover);

        background:
            rgba(93, 154, 136, 0.08);
    }
}


/* Active primary */

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form
.submit-button-wrapper
button:active:not(:disabled),

.brxe-popup-902 :is(
    #brxe-qcoqhu,
    #brxe-nvurwu,
    #brxe-hmhiyf,
    #brxe-ujowfu,
    #brxe-mcsdmg,
    #brxe-dqdrwf,
    #brxe-bbtsix
).ksh-auth-form
.submit-button-wrapper
input[type="submit"]:active:not(:disabled),

.brxe-popup-902
.ksh-auth-button--primary:active:not(:disabled):not([aria-disabled="true"]) {
    background:
        var(--ksh-auth-primary-active);

    border-color:
        var(--ksh-auth-primary-active);
}


/* =========================================================
   17. MOBILE PORTRAIT
   KESHO breakpoint: <= 478px
   ========================================================= */

@media (max-width: 478px) {

    .brxe-popup-902 > .brx-popup-content {
        width:
            calc(100vw - 32px);

        max-width: 432px;

        height: var(--ksh-auth-shell-height);
        min-height: var(--ksh-auth-shell-height);
        max-height: var(--ksh-auth-shell-height);

        border-radius:
            var(--ksh-auth-radius);
    }


    .brxe-popup-902 #brxe-ngbymt {
        min-height: 62px;

        padding:
            8px
            60px
            8px
            16px;
    }


    .brxe-popup-902 #brxe-absexc {
        top: 9px;
        right: 8px;
        left: auto;
    }


    .brxe-popup-902 #brxe-nrpgdp {
        font-size: 16px;
    }


    .brxe-popup-902 #brxe-eoknjh {
        width: 30px;

        min-width: 30px;
    }


    .brxe-popup-902 #brxe-svudeq,
    .brxe-popup-902 .ksh-auth-box {
        padding:
            30px
            22px
            14px;
    }


    .brxe-popup-902 .ksh-auth-step {
        gap: 13px;
    }


    .brxe-popup-902 .ksh-auth-title {
        font-size: 19px;
    }


    .brxe-popup-902 .ksh-auth-copy {
        font-size: 14px;

        line-height: 1.8;
    }


    /*
     * Minimum 16px prevents iOS input zoom.
     */

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    input:not([type="submit"]),

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    textarea,

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    select,

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    .submit-button-wrapper
    button,

    .brxe-popup-902 :is(
        #brxe-qcoqhu,
        #brxe-nvurwu,
        #brxe-hmhiyf,
        #brxe-ujowfu,
        #brxe-mcsdmg,
        #brxe-dqdrwf,
        #brxe-bbtsix
    ).ksh-auth-form
    .submit-button-wrapper
    input[type="submit"],

    .brxe-popup-902 .ksh-auth-button {
        font-size: 16px;
    }


    .brxe-popup-902 #brxe-nvurwu.ksh-otp-form {
        grid-template-columns:
            repeat(6, 34px);

        column-gap: 6px;

        row-gap: 11px;
    }


    .brxe-popup-902
    #brxe-nvurwu.ksh-otp-form
    .form-group:not(.submit-button-wrapper)
    input {
        width: 34px;

        max-width: 34px;

        min-width: 34px;

        height: 40px;

        min-height: 40px;

        padding-inline: 0;

        font-size: 15px;
    }


    .brxe-popup-902 .ksh-resend-otp {
        min-inline-size: 150px;
    }


    .brxe-popup-902 #brxe-bzpfwm {
        margin-top: 14px;
    }
}


/* =========================================================
   18. VERY NARROW MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .brxe-popup-902 #brxe-svudeq,
    .brxe-popup-902 .ksh-auth-box {
        padding-inline: 16px;
    }


    .brxe-popup-902 #brxe-nvurwu.ksh-otp-form {
        grid-template-columns:
            repeat(6, 32px);

        column-gap: 4px;
    }


    .brxe-popup-902
    #brxe-nvurwu.ksh-otp-form
    .form-group:not(.submit-button-wrapper)
    input {
        width: 32px;

        max-width: 32px;

        min-width: 32px;

        height: 38px;

        min-height: 38px;

        font-size: 15px;
    }


    .brxe-popup-902 .ksh-auth-inline-actions {
        gap: 4px;
    }


    .brxe-popup-902 .ksh-change-identifier,
    .brxe-popup-902 .ksh-resend-otp {
        min-inline-size: 0;

        font-size: 13px;
    }
}


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .brxe-popup-902 *,
    .brxe-popup-902 *::before,
    .brxe-popup-902 *::after {
        scroll-behavior: auto;

        transition-duration: 0.01ms;

        animation-duration: 0.01ms;

        animation-iteration-count: 1;
    }
}

/* =========================================================
   19. NEW ACCOUNT WELCOME ACTIONS
   ========================================================= */
.brxe-popup-902 .ksh-new-account-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, var(--ksh-auth-field-width));
    max-width: var(--ksh-auth-field-width);
    align-self: center;
    gap: 10px;
    margin-top: 4px;
}

.brxe-popup-902 .ksh-new-account-complete {
    width: 100%;
}

.brxe-popup-902 .ksh-new-account-later {
    appearance: none;
    border: 0;
    background: transparent;
    width: auto;
    min-height: 34px;
    align-self: center;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ksh-auth-green);
    cursor: pointer;
}

/* =========================================================
   20. MOBILE CLOSE CONTROL
   =========================================================
   Preserve the 44px wrapper as the touch target, but make the visible close
   control smaller so it does not look like an oversized framed button.
*/
@media (max-width: 478px) {
    .brxe-popup-902 #brxe-absexc {
        width: var(--ksh-auth-touch);
        min-width: var(--ksh-auth-touch);
        height: var(--ksh-auth-touch);
        min-height: var(--ksh-auth-touch);
    }

    .brxe-popup-902 .ksh-popup-close {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        border-radius: 8px;
        font-size: 18px;
    }
}

/* =========================================================
   AUTH POPUP #902 BACKDROP — plugin-owned
   No other Bricks popup inherits this layer/blur.
   ========================================================= */
.brxe-popup-902 > .brx-popup-backdrop,
.brx-popup.brxe-popup-902 > .brx-popup-backdrop {
    background: rgba(47, 79, 71, 0.24);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}