/* BB Account shared component layer.
   Loaded after every route stylesheet. All routes are peers; shared controls are authoritative here. */
/* BB Account shared design tokens. Every account route is a peer and inherits these values. */
body.bb-account-unified-route,
#bb-account-root,
.bb-account-module {
    --white:#ffffff;
    --black:#000000;
    --spinner:#008888;
    --text-primary:#444448;
    --text-secondary:#6e6e73;
    --input-bg:#f5f5f7;
    --input-text:#1d1d1f;
    --error-red:#F45;
    --caps-error:#f80;
    --error-bg:#F451;
    --button-bg:#008888;
    --button-bg-hover:#008888;
    --button-text:#ffffff;
    --button-disabled-bg:#e0e0e0;
    --button-disabled-text:#a0a0a0;
    --link:#008888;
    --input-radius:12px;
    --button-radius:12px;
    --input-border:#c8c8ca;
    --input-focus:#008888;
    --input-focus-shadow:#00888833;
    --outline-offset:1px;
    --outline-offset-btn:3px;
    --focus-outline:2px;
    --bb-account-button-bg:#008888;
    --bb-account-button-bg-hover:#008888;
    --bb-account-button-text:#ffffff;
    --bb-account-input-focus:#008888;
    color:var(--text-primary);
    -webkit-tap-highlight-color:transparent;
}
.theme-dark body.bb-account-unified-route,
body.bb-account-unified-route.theme-dark,
.theme-dark #bb-account-root,
.theme-dark .bb-account-module {
    --white:#000000;
    --input-bg:#1d1d1f;
    --input-border:#3a3a3c;
    --input-focus:#008888;
    --input-focus-shadow:#00888840;
    --input-text:#f5f5f7;
    --error-red:#F56;
    --button-bg:#008888;
    --button-bg-hover:#008888;
    --button-text:#ffffff;
    --link:#008888;
    --text-primary:#f2f2f5;
    --text-secondary:#a1a1a6;
    --error-bg:#3b0000;
    --button-disabled-bg:#2c2c2e;
    --button-disabled-text:#666666;
    --bb-account-button-bg:#008888;
    --bb-account-button-bg-hover:#008888;
    --bb-account-button-text:#ffffff;
    --bb-account-input-focus:#008888;
}

/* Shared component contract: buttons, timestamps, common states and sign-in form alignment. */
.bb-account-primary-button,
.bb-account-module .bb-account-primary-button,
#bb-account-root .bb-account-primary-button {
    box-sizing:border-box;
    min-height:44px;
    border:0;
    border-radius:12px;
}

/* Continue: when inactive, transparency belongs to the background only. */
.bb-account-continue-button.disabled:not(.loading),
.bb-account-continue-button.btn-inactive:not(.loading),
.bb-account-continue-button:disabled:not(.loading),
.bb-account-module .bb-account-continue-button.disabled:not(.loading),
.bb-account-module .bb-account-continue-button.btn-inactive:not(.loading),
.bb-account-module .bb-account-continue-button:disabled:not(.loading),
#bb-account-root .bb-account-continue-button.disabled:not(.loading),
#bb-account-root .bb-account-continue-button.btn-inactive:not(.loading),
#bb-account-root .bb-account-continue-button:disabled:not(.loading) {
    background:rgba(0,136,136,.20);
    color:var(--button-text,#fff);
    opacity:1;
    cursor:default;
    pointer-events:none;
}
.theme-dark .bb-account-continue-button.disabled:not(.loading),
.theme-dark .bb-account-continue-button.btn-inactive:not(.loading),
.theme-dark .bb-account-continue-button:disabled:not(.loading),
.theme-dark .bb-account-module .bb-account-continue-button.disabled:not(.loading),
.theme-dark .bb-account-module .bb-account-continue-button.btn-inactive:not(.loading),
.theme-dark .bb-account-module .bb-account-continue-button:disabled:not(.loading),
.theme-dark #bb-account-root .bb-account-continue-button.disabled:not(.loading),
.theme-dark #bb-account-root .bb-account-continue-button.btn-inactive:not(.loading),
.theme-dark #bb-account-root .bb-account-continue-button:disabled:not(.loading) {
    background:rgba(0,149,149,.25);
}
.bb-account-continue-button:not(.loading) .bb-account-button-text,
.bb-account-continue-button:not(.loading) .signin-btn-text,
.bb-account-continue-button:not(.loading) .btn-text {
    opacity:1;
    color:var(--button-text,#fff);
}

/* The generic disabled contract uses the same background-only treatment. */
.bb-account-primary-button.disabled:not(.loading),
.bb-account-primary-button.btn-inactive:not(.loading),
.bb-account-primary-button:disabled:not(.loading) {
    background:rgba(0,136,136,.20);
    color:var(--button-text,#fff);
    opacity:1;
}
.theme-dark .bb-account-primary-button.disabled:not(.loading),
.theme-dark .bb-account-primary-button.btn-inactive:not(.loading),
.theme-dark .bb-account-primary-button:disabled:not(.loading) {
    background:rgba(0,149,149,.25);
}

/* One timestamp style everywhere. Natural width/height: identical to the original shared lockout timer. */
.bb-account-timestamp,
.bb-account-module .bb-account-timestamp,
#bb-account-root .bb-account-timestamp {
    display:block;
    position:static;
    left:auto;
    transform:none;
    width:auto;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:0;
    max-height:none;
    margin:20px 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--button-bg,var(--theme,#008888));
    font-family:"BB Display",sans-serif;
    font-weight:600;
    font-size:40px;
    line-height:1.1;
    letter-spacing:-.005em;
    text-align:center;
    white-space:nowrap;
    font-feature-settings:"tnum";
    font-variant-numeric:tabular-nums;
}

@media (max-width:767px) {
    .bb-account-timestamp,
    .bb-account-module .bb-account-timestamp,
    #bb-account-root .bb-account-timestamp {
        width:auto;
        max-width:none;
        height:auto;
        min-height:0;
        max-height:none;
        margin:16px 0;
        font-size:36px;
        line-height:1.1;
        letter-spacing:-.005em;
    }
}


/* v2.5.9 shared sign-in contract: block form with the action anchored at the bottom. */
#bb-account-root #signin-form-container > form#loginform.bb-account-form {
    position:relative;
    display:block;
    height:300px;
    min-height:300px;
}
#bb-account-root #signin-form-container > form#loginform .bb-account-continue-button {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    margin:0;
}
#bb-account-root .bb-account-subtitle.bb-account-after-form-link {
    padding:40px 0;
}

/* Shared form validation contract: identical on every account route.
   Valid = green border/background; invalid = red border/background.
   Focus halo follows the current validation state. */
body.bb-account-unified-route,
#bb-account-root,
.bb-account-module {
    --bb-valid-green:#00bb00;
    --bb-valid-bg:rgba(0,187,0,.067);
    --bb-valid-focus:rgba(0,187,0,.16);
    --bb-error-focus:rgba(255,68,85,.20);
}
.theme-dark body.bb-account-unified-route,
body.bb-account-unified-route.theme-dark,
.theme-dark #bb-account-root,
.theme-dark .bb-account-module {
    --bb-valid-bg:rgba(0,187,0,.133);
    --bb-valid-focus:rgba(0,187,0,.22);
    --bb-error-focus:rgba(255,85,102,.24);
}

#bb-account-root input.field-success,
#bb-account-root textarea.field-success,
#bb-account-root select.field-success,
#bb-account-root input.valid-input,
#bb-account-root textarea.valid-input,
#bb-account-root select.valid-input,
.bb-account-module input.field-success,
.bb-account-module textarea.field-success,
.bb-account-module select.field-success,
.bb-account-module input.valid-input,
.bb-account-module textarea.valid-input,
.bb-account-module select.valid-input {
    border-color:var(--bb-valid-green,#00bb00) !important;
    background:var(--bb-valid-bg,rgba(0,187,0,.067)) !important;
}

#bb-account-root input.field-success:focus,
#bb-account-root input.field-success:focus-visible,
#bb-account-root textarea.field-success:focus,
#bb-account-root textarea.field-success:focus-visible,
#bb-account-root select.field-success:focus,
#bb-account-root select.field-success:focus-visible,
#bb-account-root input.valid-input:focus,
#bb-account-root input.valid-input:focus-visible,
#bb-account-root textarea.valid-input:focus,
#bb-account-root textarea.valid-input:focus-visible,
#bb-account-root select.valid-input:focus,
#bb-account-root select.valid-input:focus-visible,
.bb-account-module input.field-success:focus,
.bb-account-module input.field-success:focus-visible,
.bb-account-module textarea.field-success:focus,
.bb-account-module textarea.field-success:focus-visible,
.bb-account-module select.field-success:focus,
.bb-account-module select.field-success:focus-visible,
.bb-account-module input.valid-input:focus,
.bb-account-module input.valid-input:focus-visible,
.bb-account-module textarea.valid-input:focus,
.bb-account-module textarea.valid-input:focus-visible,
.bb-account-module select.valid-input:focus,
.bb-account-module select.valid-input:focus-visible {
    border-color:var(--bb-valid-green,#00bb00) !important;
    outline:none;
    box-shadow:0 0 0 4px var(--bb-valid-focus,rgba(0,187,0,.16)) !important;
    background:var(--bb-valid-bg,rgba(0,187,0,.067)) !important;
}

#bb-account-root input.field-error,
#bb-account-root textarea.field-error,
#bb-account-root select.field-error,
#bb-account-root input[aria-invalid="true"],
#bb-account-root textarea[aria-invalid="true"],
#bb-account-root select[aria-invalid="true"],
.bb-account-module input.field-error,
.bb-account-module textarea.field-error,
.bb-account-module select.field-error,
.bb-account-module input[aria-invalid="true"],
.bb-account-module textarea[aria-invalid="true"],
.bb-account-module select[aria-invalid="true"] {
    border-color:var(--error-red,#f45) !important;
    background:var(--error-bg,#F451) !important;
}

#bb-account-root input.field-error:focus,
#bb-account-root input.field-error:focus-visible,
#bb-account-root textarea.field-error:focus,
#bb-account-root textarea.field-error:focus-visible,
#bb-account-root select.field-error:focus,
#bb-account-root select.field-error:focus-visible,
#bb-account-root input[aria-invalid="true"]:focus,
#bb-account-root input[aria-invalid="true"]:focus-visible,
#bb-account-root textarea[aria-invalid="true"]:focus,
#bb-account-root textarea[aria-invalid="true"]:focus-visible,
#bb-account-root select[aria-invalid="true"]:focus,
#bb-account-root select[aria-invalid="true"]:focus-visible,
.bb-account-module input.field-error:focus,
.bb-account-module input.field-error:focus-visible,
.bb-account-module textarea.field-error:focus,
.bb-account-module textarea.field-error:focus-visible,
.bb-account-module select.field-error:focus,
.bb-account-module select.field-error:focus-visible,
.bb-account-module input[aria-invalid="true"]:focus,
.bb-account-module input[aria-invalid="true"]:focus-visible,
.bb-account-module textarea[aria-invalid="true"]:focus,
.bb-account-module textarea[aria-invalid="true"]:focus-visible,
.bb-account-module select[aria-invalid="true"]:focus,
.bb-account-module select[aria-invalid="true"]:focus-visible {
    border-color:var(--input-focus,#008888) !important;
    outline:none;
    box-shadow:0 0 0 4px var(--bb-error-focus,rgba(255,68,85,.20)) !important;
    background:var(--error-bg,#F451) !important;
}

/* Keep password field geometry stable when the eye toggles type=password/text. */
#bb-account-root .password-wrapper input,
.bb-account-module .password-wrapper input {
    border-radius:var(--input-radius,12px);
}
#bb-account-root #signin-form-container .password-wrapper input#pwd,
#bb-account-root #signin-form-container .password-wrapper input[name="pwd"] {
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:var(--input-radius,12px);
    border-bottom-right-radius:var(--input-radius,12px);
}

/* Primary action links use the exact same visual box as primary buttons. */
a.bb-account-primary-button,
.bb-account-module a.bb-account-primary-button,
#bb-account-root a.bb-account-primary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    line-height:1.17648;
    color:var(--bb-account-button-text,#fff);
}
a.bb-account-primary-button:hover,
.bb-account-module a.bb-account-primary-button:hover,
#bb-account-root a.bb-account-primary-button:hover {
    text-decoration:none;
    color:var(--bb-account-button-text,#fff);
}
