/* Shared design tokens for all non-master account modules.
   The master BB Account page keeps its original inline CSS untouched. */
.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: #009595;
    --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;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}
.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: #009595;
    --button-bg-hover: #009595;
    --link: #009595;
    --text-primary: #f2f2f5;
    --text-secondary: #a1a1a6;
    --error-bg: #3b0000;
    --button-disabled-bg: #2c2c2e;
    --button-disabled-text: #666666;
}
.bb-account-module .account-wrapper { width: calc(100% - 32px); max-width: 460px; margin-left: auto; margin-right: auto; color: var(--text-primary); box-sizing: border-box; }
.bb-account-module input, .bb-account-module button { font-family: "BB Text", sans-serif; }
.bb-account-module a { color: var(--link); }
@media (max-width: 767px) { .bb-account-module .account-wrapper { width: calc(100% - 32px); } }


/* Unified page spacing for the master Account routes as well. */
#bb-account-root {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 767px) {
    #bb-account-root {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Unified page spacing for direct-rendered account modules. */
.bb-account-module[data-bb-account-route] {
    box-sizing: border-box;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 767px) {
    .bb-account-module[data-bb-account-route] {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@keyframes bbAccountSharedDotLoader {
    8.333% { opacity: 1; }
    100% { opacity: 0; }
}

/* Shared BB Account logo/rings component. Uses the exact master animation engine. */
.bb-account-module .bb-account-shared-logo {
    --bb-logo-size: 300px;
    --bb-logo-scale: 1;
    --bb-logo-margin-bottom: 56px;
    position: relative;
    z-index: 1;
    isolation: isolate;
    width: var(--bb-logo-size);
    height: var(--bb-logo-size);
    margin: 0 auto var(--bb-logo-margin-bottom);
    overflow: visible;
    transform: scale(var(--bb-logo-scale));
    transform-origin: center center;
    will-change: transform;
}
.bb-account-module .bb-account-shared-logo.is-small {
    --bb-logo-scale: .6;
    transform: scale(.6) translateY(-35%);
    margin-bottom: -78px;
}
.bb-account-module .bb-account-shared-logo.is-transitioning {
    transition: transform 2s ease-in-out;
}
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
    color: #111;
    pointer-events: none;
    transform-origin: center center;
}
.theme-dark .bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark { color: #fff; }
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark svg path { fill: currentColor; }
.bb-account-module .bb-account-shared-logo #bbAppleAccountRings {
    position: absolute;
    z-index: 1;
    top: -53%;
    left: 50%;
    width: 460%;
    height: 539.3333333333%;
    margin: 0;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: visible;
    transform: translateX(-50%);
    transform-origin: center center;
    backface-visibility: hidden;
}
.bb-account-module .bb-account-shared-logo #bbAppleAccountRings > svg,
.bb-account-module .bb-account-shared-logo #bbAppleAccountRings svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: translateZ(0);
}
.theme-dark .bb-account-module .bb-account-shared-logo #bbAppleAccountRings {
    -webkit-filter: saturate(1) contrast(.8) brightness(1.2);
    filter: saturate(1) contrast(.8) brightness(1.2);
}
@media (max-width: 767px) {
    .bb-account-module .bb-account-shared-logo { --bb-logo-size: 275px; --bb-logo-margin-bottom: 48px; }
    .bb-account-module .bb-account-shared-logo.is-small { margin-bottom: -80px; }
}

/* Every BB Account route uses the same viewport-safe horizontal overflow protection.
   Keep the oversized rings visible inside the page while preventing them from creating page-level sideways scroll. */
body.bb-account-unified-route {
    overflow-x: clip;
}
#bb-account-root,
.bb-account-module[data-bb-account-route] {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

/* Keep every Manage Account route sized to its own content instead of stretching
   as a full-height flex/grid item. The route wrapper itself is transparent to
   pointer hit-testing; the actual Manage UI remains fully interactive. */
.bb-account-module[data-bb-account-route^="manage-account"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    overflow-y: visible !important;
    pointer-events: none;
}

.bb-account-module[data-bb-account-route^="manage-account"] > .bb-manage-account {
    pointer-events: auto;
}

.bb-account-module[data-bb-account-route^="manage-account"] > .bb-account-shared-logo {
    pointer-events: none !important;
}

/* Forgot Password keeps its original 300px master rings. */
.bb-account-module--forgot-password {
    max-width: 100%;
}
.bb-account-module--forgot-password .bb-account-shared-logo {
    --bb-logo-size: 300px;
    width: 300px;
    height: 300px;
}
@media (max-width: 767px) {
    .bb-account-module--forgot-password .bb-account-shared-logo {
        --bb-logo-size: 300px;
        width: 300px;
        height: 300px;
    }
}


/* Global interaction lock used by timeout overlays and success preloaders. */
html.bb-account-ui-locked,
html.bb-account-ui-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

/* Success overlay: viewport-safe, scrollbar-safe, and interaction-blocking. */
#bb-account-root #preloader-ss-irss,
.bb-account-module #preloader-ss-irss {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    pointer-events: auto !important;
}

/* Timeout overlay must be the only interactive surface while visible. */
#bb-account-root #timeout-overlay.show,
.bb-account-module #timeout-overlay.show {
    pointer-events: auto;
    touch-action: none;
}

/* Logged-in profile image replaces the generic mark inside the shared rings.
   Keep the complete saved avatar visible: do not let theme image rules or
   object-fit:cover crop/zoom it again inside the rings. */
/* The mark and the Lottie rings share the same logo reference box.
   Center the avatar with layout, not translated percentages, so its geometric
   center is exactly the same as the dot-animation anchor at every logo size. */
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark {
    display: grid !important;
    place-items: center !important;
}
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark > img.bb-account-shared-profile-image {
    --bb-shared-avatar-size: 56%;
    position: relative;
    inset: auto;
    width: var(--bb-shared-avatar-size);
    height: var(--bb-shared-avatar-size);
    max-width: var(--bb-shared-avatar-size);
    max-height: var(--bb-shared-avatar-size);
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    transform: translate(1px, 1px);
    transform-origin: center center;
    border-radius: 50%;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    justify-self: center;
    align-self: center;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.theme-dark .bb-account-module .bb-account-shared-logo .bb-account-shared-profile-image {
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* Keep the main /account/ orbit at the original master size. */

/* =========================================================
   Decorative account orbit/rings must always stay behind UI
   ========================================================= */
.bb-account-module .profile-orbit.scale-dots,
.bb-account-module .bb-account-shared-logo,
#bb-account-root .profile-orbit.scale-dots {
    position: relative;
    z-index: 0 !important;
    pointer-events: none;
}

.bb-account-module .profile-orbit.scale-dots .profile-dots,
.bb-account-module .profile-orbit.scale-dots #bbAppleAccountRings,
.bb-account-module .bb-account-shared-logo #bbAppleAccountRings,
#bb-account-root .profile-orbit.scale-dots .profile-dots,
#bb-account-root .profile-orbit.scale-dots #bbAppleAccountRings {
    z-index: 0 !important;
    pointer-events: none;
}

.bb-account-module .profile-orbit.scale-dots .profile-photo,
.bb-account-module .bb-account-shared-logo .bb-account-shared-logo-mark,
#bb-account-root .profile-orbit.scale-dots .profile-photo {
    z-index: 1 !important;
    pointer-events: none;
}

/* All readable / interactive account UI always paints above the orbit. */
.bb-account-module .acc-title,
.bb-account-module .af-subtitle,
.bb-account-module .account-wrapper,
.bb-account-module form,
.bb-account-module .bb-manage-account,
.bb-account-module .bb-account-options,
.bb-account-module button,
.bb-account-module a,
#bb-account-root .account-options-header,
#bb-account-root .account-wrapper,
#bb-account-root .acc-title,
#bb-account-root .af-subtitle,
#bb-account-root form,
#bb-account-root button,
#bb-account-root a {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BB ACCOUNT SHARED UI CONTRACT
   Common account presentation belongs here. Route files may only
   describe real route-specific differences.
   ========================================================= */
.bb-account-module,
#bb-account-root {
    --bb-account-title-size: 32px;
    --bb-account-title-line-height: 1.1251;
    --bb-account-title-letter-spacing: .01em;
    --bb-account-subtitle-size: 17px;
    --bb-account-subtitle-line-height: 1.294118;
    --bb-account-subtitle-letter-spacing: -.022em;
    --bb-account-subtitle-padding-top: 8px;
    --bb-account-subtitle-padding-bottom: 36px;
    --bb-account-action-height: 44px;
    --bb-account-action-radius: 12px;
    --bb-account-timeout-width: 416px;
}

.bb-account-header {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    -webkit-user-select: text;
    user-select: text;
}
.bb-account-header a,
.bb-account-header button,
.bb-account-header input,
.bb-account-header textarea,
.bb-account-header select {
    -webkit-user-select: auto;
    user-select: auto;
}

.bb-account-title,
#bb-account-root .bb-account-title,
.bb-account-module .bb-account-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: "BB Display", sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--bb-account-title-size) !important;
    line-height: var(--bb-account-title-line-height) !important;
    letter-spacing: var(--bb-account-title-letter-spacing) !important;
    color: var(--text-primary, var(--account-text, #444448)) !important;
}

.bb-account-subtitle,
#bb-account-root .bb-account-subtitle,
.bb-account-module .bb-account-subtitle {
    display: block;
    margin: 0 !important;
    padding: var(--bb-account-subtitle-padding-top) 0 var(--bb-account-subtitle-padding-bottom) !important;
    text-align: center !important;
    font-family: "BB Text", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--bb-account-subtitle-size) !important;
    line-height: var(--bb-account-subtitle-line-height) !important;
    letter-spacing: var(--bb-account-subtitle-letter-spacing) !important;
    color: var(--text-secondary, var(--account-muted, #6e6e73)) !important;
}

/* Primary buttons use one design source. Per-route IDs only control behavior/state. */
.bb-account-primary-button,
.bb-account-module .bb-account-primary-button,
#bb-account-root .bb-account-primary-button {
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    min-height: var(--bb-account-action-height) !important;
    border: 0 !important;
    border-radius: var(--bb-account-action-radius) !important;
    padding: 12px 16px !important;
    margin: 0;
    font-family: "BB Text", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.17648;
    letter-spacing: -.022em;
    text-align: center;
    background: var(--button-bg, #008888) !important;
    color: var(--button-text, #fff) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bb-account-primary-button:hover:not(.disabled):not(:disabled) { background: var(--button-bg-hover, #009595); }
.bb-account-primary-button.disabled,
.bb-account-primary-button:disabled {
    background: var(--button-disabled-bg, #e0e0e0);
    color: var(--button-disabled-text, #a0a0a0);
    cursor: default;
}
.bb-account-primary-button:focus-visible {
    outline: var(--focus-outline, 2px) solid var(--input-focus, #008888);
    outline-offset: var(--outline-offset-btn, 3px);
}


.bb-account-primary-button--compact,
.bb-account-module .bb-account-primary-button--compact,
#bb-account-root .bb-account-primary-button--compact {
    width: auto !important;
    min-height: 0 !important;
    padding: 12px 24px !important;
    border-radius: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.bb-manage-account .bb-account-primary-button--compact {
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}
.bb-account-module .account-wrapper a,
#bb-account-root .account-wrapper a { color: var(--link, #008888); }
.bb-account-module .account-wrapper a:hover,
#bb-account-root .account-wrapper a:hover { text-decoration: underline; }
.bb-account-module .account-wrapper a:active,
#bb-account-root .account-wrapper a:active { text-decoration: none; }


.bb-account-primary-button.loading {
    background: var(--input-focus-shadow, rgba(0,136,136,.2)) !important;
    pointer-events: none !important;
}
.bb-account-primary-button.loading .signin-btn-text,
.bb-account-primary-button.loading .btn-text { opacity: 0 !important; }
.bb-account-primary-button.success {
    background: #2fb344 !important;
    pointer-events: none !important;
}
.bb-account-primary-button--success-compact {
    width: auto !important;
    min-height: 0 !important;
    padding: 10px 30px !important;
    border-radius: 8px !important;
    display: inline-block !important;
}

/* One button-spinner implementation. */
.bb-account-button-loader,
.bb-account-module #preloader-btn,
#bb-account-root #preloader-btn {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.loading > .bb-account-button-loader,
.loading > #preloader-btn,
.bb-account-primary-button.loading .bb-account-button-loader,
.bb-account-primary-button.loading #preloader-btn { display: flex; }
.bb-account-button-loader span,
.bb-account-module #preloader-btn span,
#bb-account-root #preloader-btn span {
    position: absolute;
    width: 2px;
    height: 6px;
    border-radius: 8px;
    background: currentColor;
    transform: rotate(calc(var(--i) * -30deg - 120deg)) translateY(9px);
    animation: bbAccountSharedDotLoader .9s linear infinite;
    animation-delay: calc(-.075s * var(--i));
}

/* Single timeout component used by every modular route. */
#timeout-overlay.bb-account-timeout-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999909;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: opacity .5s ease, visibility 0s linear .5s;
}
.theme-dark #timeout-overlay.bb-account-timeout-overlay {
    background: rgba(0,0,0,.22);
}
#timeout-overlay.bb-account-timeout-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
#timeout-dialog.bb-account-timeout-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 416px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 32px 40px;
    border-radius: 12px;
    background: var(--white, #fff);
    color: var(--text-primary, #444448);
    box-shadow: 0 10px 100px rgba(0,0,0,.2);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,-50%) scale(.9);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s;
}
#timeout-dialog.bb-account-timeout-dialog.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,-50%) scale(1);
    transition-delay: 0s;
}
.theme-dark #timeout-dialog.bb-account-timeout-dialog {
    background: #242426;
    color: #f2f2f5;
    box-shadow: 0 10px 100px rgba(0,0,0,.3);
}
.bb-account-timeout-logo { height: 72px; color: #000; }
.bb-account-timeout-logo svg { width: 64px; height: 64px; fill: currentColor; }
.bb-account-timeout-logo svg path,
.bb-account-timeout-logo svg circle,
.bb-account-timeout-logo svg g { fill: currentColor; }
.theme-dark .bb-account-timeout-logo { color: #fff; }
#timeout-dialog h3 { margin: 4px 0 12px; font: 600 24px/1.16667 "BB Display", sans-serif; letter-spacing: .01em; }
#timeout-dialog p { margin: 0 0 24px; font: 400 14px/1.428572 "BB Text", sans-serif; color: var(--text-secondary, #6e6e73); }
.theme-dark #timeout-dialog p { color: #a1a1a6; }
#timeout-continue-btn.bb-account-primary-button { width: 100%; }

@media (max-width: 767px) {
    #timeout-dialog.bb-account-timeout-dialog {
        width:310px;
        max-width:calc(100vw - 32px);
        padding:30px;
    }
}

/* =========================================================
   v2.4 shared typography and structural contract
   These are the only BB Account font utility families.
   ========================================================= */
.f12r { font-family:"BB Text"; font-weight:400; font-size:12px; letter-spacing:-.01em; line-height:1.3333334; }
.f14r { font-family:"BB Text"; font-weight:400; font-size:14px; letter-spacing:-.016em; line-height:1.42857144; }
.f17r,.f17r-m { font-family:"BB Text"; font-weight:400; font-size:17px; letter-spacing:-.022em; line-height:1.1764706; }
.f17b { font-family:"BB Text"; font-weight:400; font-size:17px; letter-spacing:-.022em; line-height:1.52941177; }
.f19r { font-family:"BB Text"; font-weight:400; font-size:19px; letter-spacing:-.024em; line-height:1.2631579; }
.f21s,.f21s-m { font-family:"BB Display"; font-weight:600; font-size:21px; letter-spacing:.024em; line-height:1.14285715; }
.f22s { font-family:"BB Display"; font-weight:600; font-size:22px; letter-spacing:.024em; line-height:1.0909091; }
.f24s { font-family:"BB Display"; font-weight:600; font-size:24px; letter-spacing:.02em; line-height:1.166667; }
.f28s,.f28s-m { font-family:"BB Display"; font-weight:600; font-size:28px; letter-spacing:.016em; line-height:1.14285715; }
.f30s { font-family:"BB Display"; font-weight:600; font-size:30px; letter-spacing:.01em; line-height:1.133334; }
.f32s,.f32s-m { font-family:"BB Display"; font-weight:600; font-size:32px; letter-spacing:.01em; line-height:1.1251; }
.f36s { font-family:"BB Display"; font-weight:600; font-size:36px; letter-spacing:.024em; line-height:1.14285715; }
.f40s { font-family:"BB Display"; font-weight:600; font-size:40px; letter-spacing:-.005em; line-height:1.101; }
.f48s,.f48s-m { font-family:"BB Display"; font-weight:600; font-size:48px; letter-spacing:-.0012em; line-height:1.0833334; }
.f56s,.f56s-m { font-family:"BB Display"; font-weight:600; font-size:56px; letter-spacing:-.016em; line-height:1.14285715; }
.f64s,.f64s-t-m { font-family:"BB Display"; font-weight:600; font-size:64px; letter-spacing:-.016em; line-height:1.06251; }
.f72s { font-family:"BB Display"; font-weight:600; font-size:72px; letter-spacing:-.022em; line-height:1.055556; }
.f80s { font-family:"BB Display"; font-weight:600; font-size:80px; letter-spacing:-.024em; line-height:1.05; }
.f80b,.f80b-t-m,.f80b-l-t-m { font-family:"BB Display"; font-weight:700; font-size:80px; letter-spacing:-.024em; line-height:1.05; }

@media only screen and (max-width:1024px) {
    .f32s-m { font-size:28px; letter-spacing:.016em; line-height:1.14285715; }
    .f48s-m { font-size:40px; letter-spacing:-.005em; line-height:1.101; }
    .f56s-m { font-size:48px; letter-spacing:-.0012em; line-height:1.0833334; }
    .f64s-t-m { font-size:56px; letter-spacing:-.016em; line-height:1.14285715; }
    .f80b-t-m { font-size:64px; letter-spacing:-.016em; line-height:1.06251; }
    .f80b-l-t-m { font-size:72px; letter-spacing:-.022em; line-height:1.055556; }
}
@media only screen and (max-width:767px) {
    .f17r-m { font-size:14px; letter-spacing:-.016em; line-height:1.42857144; }
    .f21s-m { font-family:"BB Text"; font-size:19px; letter-spacing:-.024em; line-height:1.2631579; }
    .f28s-m,.f32s-m { font-size:24px; letter-spacing:.02em; line-height:1.166667; }
    .f48s-m { font-size:36px; letter-spacing:.024em; line-height:1.14285715; }
    .f56s-m { font-size:40px; letter-spacing:-.005em; line-height:1.101; }
    .f64s-t-m { font-size:48px; letter-spacing:-.0012em; line-height:1.0833334; }
    .f80b-t-m,.f80b-l-t-m { font-size:56px; letter-spacing:-.016em; line-height:1.14285715; }
}

/* One wrapper geometry across all account forms. */
#bb-account-root .account-wrapper,
.bb-account-module .account-wrapper {
    width:calc(100% - 32px);
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:24px;
    box-sizing:border-box;
}

/* One header structure across every account route. */
.bb-account-header.account-options-header,
#bb-account-root .bb-account-header.account-options-header,
.bb-account-module .bb-account-header.account-options-header {
    width:100%;
    padding:0;
    margin:0;
    touch-action:pan-y;
    -webkit-user-select:text;
    user-select:text;
    pointer-events:auto;
}
.bb-account-header .bb-account-title,
.bb-account-header .bb-account-subtitle { touch-action:pan-y; pointer-events:auto; }
.bb-account-header-action { display:flex; justify-content:center; padding:0 0 24px; }

/* Supporting title text now uses the shared subtitle class instead of a separate linkline design. */
.bb-account-subtitle a { color:var(--link,#008888); text-decoration:none; }
.bb-account-subtitle a:hover { text-decoration:underline; }
.bb-account-subtitle a:active { text-decoration:none; }

/* Shared privacy copy is normal document flow; never absolute-positioned. */
#bb-account-root .privacy-policy-acc,
.bb-account-module .privacy-policy-acc {
    position:relative;
    inset:auto;
    top:auto;
    width:100%;
    box-sizing:border-box;
    color:var(--text-secondary,#6e6e73);
    text-align:center;
    margin:20px 0 0;
    padding:20px 0 32px;
}

/* Sign-in form height follows its contents. */
#bb-account-root #loginform { position:relative; height:auto; min-height:0; }

/* Links that visually act as actions use the same primary-button contract. */
a.bb-account-primary-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
a.bb-account-primary-button:hover { text-decoration:none; }

/* Manage actions align left unless a specific component opts into centering. */
.bb-manage-account .bb-account-primary-button--compact {
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left;
}

/* Related inline external/public links. */
.bb-account-related-link {
    color:var(--link,#008888);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.bb-account-related-link::after { content:"􀽻"; display:inline-block; text-decoration:none; }
.bb-account-related-link:hover .bb-account-related-link__text { text-decoration:underline; }
.bb-account-related-link:active .bb-account-related-link__text { text-decoration:none; }

/* Native vertical page scrolling must remain available over any account title/subtitle on iOS Safari. */
body.bb-account-unified-route,
body.bb-account-unified-route #bb-account-root,
body.bb-account-unified-route .bb-account-module,
body.bb-account-unified-route .bb-account-header,
body.bb-account-unified-route .bb-account-title,
body.bb-account-unified-route .bb-account-subtitle {
    touch-action:pan-y;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
}
html.bb-account-ui-locked body.bb-account-unified-route,
html.bb-account-preloader-active body.bb-account-unified-route { touch-action:none; }

/* =========================================================
   Shared form controls and success-preloader primitives
   ========================================================= */
#bb-account-root .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#bb-account-root .account-wrapper form textarea,
#bb-account-root .account-wrapper form select,
.bb-account-module .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.bb-account-module .account-wrapper form textarea,
.bb-account-module .account-wrapper form select {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    border:1px solid var(--input-border,#c8c8ca);
    border-radius:var(--input-radius,12px);
    outline:0;
    padding:15px 16px;
    background:var(--input-bg,#f5f5f7);
    color:var(--input-text,#1d1d1f);
    font-family:"BB Text";
    font-weight:400;
    font-size:17px;
    line-height:1.1764706;
    letter-spacing:-.022em;
}
#bb-account-root .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
#bb-account-root .account-wrapper form textarea:focus,
#bb-account-root .account-wrapper form select:focus,
.bb-account-module .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.bb-account-module .account-wrapper form textarea:focus,
.bb-account-module .account-wrapper form select:focus {
    border-color:var(--input-focus,#008888);
    box-shadow:0 0 0 4px var(--input-focus-shadow,#00888833);
}
#bb-account-root .field-inline-error,
.bb-account-module .field-inline-error {
    display:none;
    margin:-6px 0 12px;
    padding-left:4px;
    color:var(--error-red,#f45);
    text-align:left;
    font-family:"BB Text";
    font-weight:400;
    font-size:12px;
    line-height:1.3333334;
    letter-spacing:-.01em;
}
#bb-account-root .field-error,
.bb-account-module .field-error {
    border-color:var(--error-red,#f45)!important;
    background:var(--error-bg,#F451)!important;
}
#bb-account-root .privacy-policy-acc,
.bb-account-module .privacy-policy-acc { border:0!important; }

#preloader-prep.bb-account-success-preloader,
#bb-account-root #preloader-prep,
.bb-account-module #preloader-prep {
    position:fixed;
    inset:0;
    z-index:99999;
    box-sizing:border-box;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:transparent;
    transition:opacity .5s ease .5s,background-color .5s ease .5s;
}
#preloader-prep.bb-account-success-preloader.success,
#bb-account-root #preloader-prep.success,
.bb-account-module #preloader-prep.success {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:rgba(255,255,255,.90);
}
.theme-dark #preloader-prep.bb-account-success-preloader.success,
.theme-dark #bb-account-root #preloader-prep.success,
.theme-dark .bb-account-module #preloader-prep.success { background:rgba(0,0,0,.90); }
#preloader-ss-irss.bb-account-success-loader,
#bb-account-root #preloader-ss-irss,
.bb-account-module #preloader-ss-irss {
    position:fixed!important;
    inset:0!important;
    display:none;
    width:100%!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    align-items:center;
    justify-content:center;
    overflow:hidden!important;
    pointer-events:auto!important;
    touch-action:none!important;
}
#preloader-prep #preloader-ss-irss.bb-account-success-loader,
#preloader-prep #preloader-ss-irss,
#preloader-ss-irss.bb-account-success-loader.active,
#bb-account-root #preloader-ss-irss.active,
.bb-account-module #preloader-ss-irss.active { display:flex; }
#preloader-ss-irss.bb-account-success-loader span,
#bb-account-root #preloader-ss-irss span,
.bb-account-module #preloader-ss-irss span {
    position:absolute;
    width:3px;
    height:9px;
    border-radius:3px;
    background:#000;
    transform:rotate(calc(var(--i) * -30deg - 120deg)) translateY(12px);
    animation:bbAccountSharedSuccessLoader .9s linear infinite;
    animation-delay:calc(-.075s * var(--i));
}
.theme-dark #preloader-ss-irss.bb-account-success-loader span,
.theme-dark #bb-account-root #preloader-ss-irss span,
.theme-dark .bb-account-module #preloader-ss-irss span { background:#fff; }
@keyframes bbAccountSharedSuccessLoader { 0%{opacity:1} 100%{opacity:0} }

/* v2.4 shared form contract: route IDs are behavior hooks only. */
.bb-account-form-container {
    width:100%;
    min-width:0;
    box-sizing:border-box;
}
.bb-account-form {
    position:relative;
    width:100%;
    min-width:0;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"BB Text";
    font-weight:400;
    font-size:14px;
    line-height:1.42857144;
    letter-spacing:-.016em;
}
.bb-account-primary-button:hover:not(.disabled):not(:disabled) {
    background:var(--button-bg-hover,#009595)!important;
    color:var(--button-text,#fff)!important;
}
/* Disabled form actions: keep text/content at full opacity; fade only the theme background.
   Light = 20% theme color, dark = 25% theme color. */
.bb-account-primary-button.disabled:not(.loading),
.bb-account-primary-button:disabled:not(.loading),
.bb-account-primary-button.btn-inactive:not(.loading) {
    background:rgba(0, 136, 136, 0.20)!important;
    color:var(--button-text,#fff)!important;
    opacity:1!important;
    cursor:default!important;
    pointer-events:none!important;
}
.theme-dark .bb-account-primary-button.disabled:not(.loading),
.theme-dark .bb-account-primary-button:disabled:not(.loading),
.theme-dark .bb-account-primary-button.btn-inactive:not(.loading) {
    background:rgba(0, 149, 149, 0.25)!important;
}
.bb-account-primary-button.disabled:not(.loading) .bb-account-button-text,
.bb-account-primary-button.disabled:not(.loading) .signin-btn-text,
.bb-account-primary-button.disabled:not(.loading) .btn-text,
.bb-account-primary-button:disabled:not(.loading) .bb-account-button-text,
.bb-account-primary-button:disabled:not(.loading) .signin-btn-text,
.bb-account-primary-button:disabled:not(.loading) .btn-text,
.bb-account-primary-button.btn-inactive:not(.loading) .bb-account-button-text,
.bb-account-primary-button.btn-inactive:not(.loading) .signin-btn-text,
.bb-account-primary-button.btn-inactive:not(.loading) .btn-text {
    opacity:1!important;
    color:inherit!important;
}
.bb-account-primary-button.loading {
    background:var(--input-focus-shadow,rgba(0,136,136,.2))!important;
    color:var(--button-text,#fff)!important;
}
.bb-account-primary-button .bb-account-button-text,
.bb-account-primary-button .signin-btn-text,
.bb-account-primary-button .btn-text {
    position:relative;
    z-index:2;
}
#bb-account-root .field-error:focus,
.bb-account-module .field-error:focus {
    border-color:var(--input-focus,#008888)!important;
    box-shadow:0 0 0 4px var(--input-focus-shadow,#00888833)!important;
    background:var(--white,#fff)!important;
}
#bb-account-root .inline-error,
.bb-account-module .inline-error {
    color:var(--error-red,#f45);
    text-align:left;
    font-family:"BB Text";
    font-weight:400;
    font-size:14px;
    line-height:1.42857144;
    letter-spacing:-.016em;
}
.form-success .dots-opacity,
.form-success .account-wrapper,
.bb-account-form-success .dots-opacity,
.bb-account-form-success .account-wrapper {
    transition:opacity .2s ease;
}

/* Shared completion fade used by form routes while the success layer takes over. */
.form-success .bb-account-title,
.form-success .bb-account-subtitle,
.form-success .bb-account-form,
.form-success .privacy-policy-acc,
.bb-account-form-success .bb-account-title,
.bb-account-form-success .bb-account-subtitle,
.bb-account-form-success .bb-account-form,
.bb-account-form-success .privacy-policy-acc {
    opacity:.5!important;
}

/* Shared field rhythm. Sign-in intentionally uses a stacked two-field control. */
#bb-account-root .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#bb-account-root .account-wrapper form textarea,
#bb-account-root .account-wrapper form select,
.bb-account-module .account-wrapper form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.bb-account-module .account-wrapper form textarea,
.bb-account-module .account-wrapper form select {
    margin:0 0 14px;
}
#bb-account-root #signin-form-container .bb-account-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    margin-bottom:0;
}

/* One timestamp/timer component for every account route. */
#bb-account-root .bb-account-timestamp,
.bb-account-module .bb-account-timestamp,
.bb-account-timestamp {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:460px!important;
    min-width:0!important;
    max-width:calc(100vw - 32px)!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:20px 0!important;
    padding:0!important;
    box-sizing:border-box!important;
    color:var(--error-red, #f45)!important;
    text-align:center!important;
    font-family:"BB Display"!important;
    font-weight:600!important;
    font-size:40px!important;
    letter-spacing:-0.005em!important;
    line-height:44px!important;
    white-space:nowrap!important;
    font-feature-settings:"tnum"!important;
    font-variant-numeric:tabular-nums!important;
}
@media only screen and (max-width: 767px) {
    #bb-account-root .bb-account-timestamp,
    .bb-account-module .bb-account-timestamp,
    .bb-account-timestamp {
        width:460px!important;
        max-width:calc(100vw - 32px)!important;
        height:42px!important;
        min-height:42px!important;
        max-height:42px!important;
        margin:16px 0!important;
        font-size:36px!important;
        letter-spacing:.024em!important;
        line-height:42px!important;
    }
}

/* v2.5.3 interaction-state contract: normal/active = normal theme color; hover/focus = focus color. */
.bb-account-module a:hover,
#bb-account-root a:hover {
    color:var(--input-focus, var(--link, #008888));
}
.bb-account-module a:active,
#bb-account-root a:active {
    color:var(--link, #008888);
}
.bb-account-primary-button:hover:not(.disabled):not(:disabled) {
    background:var(--input-focus, var(--button-bg-hover, #009595))!important;
}
.bb-account-primary-button:active:not(.disabled):not(:disabled) {
    background:var(--button-bg, #008888)!important;
}

/* Sign-in state: before username/email input the shared disabled background rule applies.
   After username/email is present, the same button remains enabled through the password step. */
#bb-account-root #login-submit.btn-active:not(:disabled) {
    background:var(--button-bg, #008888)!important;
    color:var(--button-text, #fff)!important;
    opacity:1!important;
    cursor:pointer!important;
    pointer-events:auto!important;
}
#bb-account-root #login-submit.btn-active:not(:disabled):hover {
    background:var(--input-focus, var(--button-bg-hover, #009595))!important;
}
#bb-account-root #login-submit.btn-active:not(:disabled):active {
    background:var(--button-bg, #008888)!important;
}