/* ============================================================
   Signup wizard + account verification.
   AccountRegistration mounts the login page's rail + panel shell
   (login.css: .bb-login, .bb-login__brand, .bb-login__panel) and this
   file adds the wizard on top. AccountVerification keeps the centred
   hero layout. Every colour comes from theme.css tokens so light and
   dark follow the app; the --su-* names stay as aliases for the
   verification page and the radio/code controls.
   ============================================================ */

.bb-signup {
    --su-gold: var(--app-accent);
    --su-gold-soft: var(--app-accent-soft);
    --su-title: var(--text-color);
    --su-ink: var(--field-label);
    --su-muted: var(--bb-quiet);
    --su-card: #ffffff;
    --su-line: #e4e9f0;
    position: relative;
}

[data-bs-theme="dark"] .bb-signup {
    --su-card: #1a1a1a;
    --su-line: #2a2d32;
}

/* Verification page only: centred column, no rail. */
.bb-signup:not(.bb-login) {
    max-width: 820px;
    margin: 0 auto;
    padding: 4px 16px 36px;
}

/* ---------- Registration: rail + panel ---------- */
/* The form needs more room than a sign-in card, so the panel takes the larger share. */
.bb-signup.bb-login { grid-template-columns: 0.8fr 1.2fr; }

/* A wizard starts at the top; login's vertical centring would make the steps jump. */
.bb-signup__panel {
    align-items: flex-start;
    padding: 44px 40px 40px;
}

.bb-signup__card {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.bb-signup__card .bb-login__welcome { border-bottom: 0; }

/* ---------- Hero (verification page) ---------- */
.bb-signup__hero {
    text-align: center;
    padding: 26px 20px 22px;
}

.bb-signup__eyebrow {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--su-gold);
    margin: 0 0 10px;
}

.bb-signup__title {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.55rem, 4.2vw, 2.25rem);
    line-height: 1.12;
    color: var(--su-title);
    margin: 0 0 .5rem;
    text-transform: none;
}

.bb-signup__sub {
    color: var(--su-ink);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 660px;
    margin: 0 auto;
}

.bb-signup__sub a {
    color: var(--su-ink);
    font-weight: 600;
    text-decoration: underline;
}

.bb-signup__sub a:hover { opacity: .8; }

.bb-signup__logo {
    display: inline-block;
    width: 250px;
    max-width: 62vw;
    height: auto;
}

/* ---------- Language selector (globe + EN/ES) ---------- */
/* Positioned by login.css's .bb-login__lang wrapper on the registration page. */
.bb-lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
}

/* Match the <svg> Font Awesome's JS swaps in for the <i>, or the glyph renders unstyled. */
.bb-lang > i,
.bb-lang > svg {
    color: var(--su-muted);
    fill: currentColor;
    font-size: .9rem;
}

.bb-lang__opt {
    color: var(--su-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.bb-lang__opt:hover { color: var(--su-ink); }

.bb-lang__opt.is-active {
    color: var(--su-title);
    font-weight: 700;
}

.bb-lang__sep {
    color: var(--su-muted);
    opacity: .5;
}

/* Signup forms are mostly required, so colouring every required label became noise.
   Optional fields are cued by "(Optional)" NullText; required ones still highlight on error. */
.bb-signup .RequiredField {
    color: var(--su-ink) !important;
}

/* ---------- Step rail (gold-filling stepper) ---------- */
.bb-signup #wizHeader {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 4px auto 22px;
    counter-reset: step;
    max-width: 560px;
}

.bb-signup #wizHeader li {
    flex: 1;
    position: relative;
    text-align: center;
}

/* connecting rail to the next node */
.bb-signup #wizHeader li::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--su-line);
    z-index: 0;
}

.bb-signup #wizHeader li:last-child::after { display: none; }

.bb-signup #wizHeader li a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--su-muted);
    cursor: default;
}

/* numbered node */
.bb-signup #wizHeader li a::before {
    counter-increment: step;
    content: counter(step);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--su-card);
    border: 2px solid var(--su-line);
    color: var(--su-muted);
    font-weight: 700;
    transition: all .25s ease;
}

/* current step: navy ink on the gold node reads in both themes */
.bb-signup #wizHeader li a.currentStep { color: var(--su-title); }
.bb-signup #wizHeader li a.currentStep::before {
    background: var(--su-gold);
    border-color: var(--su-gold);
    color: #010f20;
    box-shadow: 0 0 0 4px var(--su-gold-soft);
}

/* completed steps + their trailing rail */
.bb-signup #wizHeader li a.prevStep { color: var(--su-gold); }
.bb-signup #wizHeader li a.prevStep::before {
    background: var(--su-gold);
    border-color: var(--su-gold);
    color: #010f20;
}
.bb-signup #wizHeader li:has(a.prevStep)::after { background: var(--su-gold); }

/* ---------- Form card (same surface as the recovery card in login.css) ---------- */
.bb-signup .boxSemiTransparent {
    background: var(--su-card);
    border: 1px solid var(--su-line);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(16, 32, 56, .09);
    min-height: 0 !important;
    min-width: 0;
}

[data-bs-theme="dark"] .bb-signup .boxSemiTransparent { box-shadow: none; }

/* The wizard and its form layouts fill the card and never push past it. */
.bb-signup table[id$="Wizard1"],
.bb-signup .dxflFormLayout {
    width: 100% !important;
    max-width: 100%;
}

/* form captions + inputs */
.bb-signup .dxflLayoutItemCaptionCell,
.bb-signup .dxflCaptionCell {
    color: var(--su-ink);
    font-weight: 600;
}

/* Gold focus ring on the real DX <input> editors, as on the login card. */
.bb-signup [class*="dxeFocused"],
.bb-signup [class*="dxbeFocused"] {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px var(--app-accent-soft) !important;
}

/* tighten row spacing a touch (fits nav buttons above the fold) */
.bb-signup .boxSemiTransparent .dxflItemRow > td { padding-top: 4px; padding-bottom: 4px; }

/* One quiet line of guidance at the top of a step, in place of a boxed note. */
.bb-signup__hint {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--su-ink);
}

/* ---------- Terms: one sentence, links inline, under a hairline ---------- */
.bb-signup__terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--su-line);
    font-size: 14px;
}

.bb-signup__terms-text {
    cursor: pointer;
    line-height: 1.45;
    color: var(--su-title);
}

.bb-signup__terms a {
    color: var(--su-gold);
    font-weight: 600;
    text-decoration: underline;
}

/* The box has to belong to the same family as the fields above it. Those are square-cornered
   hairline boxes; DX ships this one at 14px with a 3px radius, which is why it read as borrowed
   from another page. Square it, size it to sit with 14px text, and give the checked state a
   filled gold box rather than DX's tick on white. */
.bb-signup .dxichSys,
.bb-signup .dxWeb_edtCheckBoxUnchecked_Office365,
.bb-signup .dxICheckBox_Office365 .dxichCellSys {
    background-color: #ffffff !important;
    border: 1px solid var(--su-gold) !important;
    border-radius: 0 !important;
    width: 17px !important;
    height: 17px !important;
}

/* Checked: fill it, and draw the tick as a CSS mark so it survives the theme swap. DX's own
   sprite is a fixed-colour image and goes invisible on the dark card. */
.bb-signup .dxWeb_edtCheckBoxChecked_Office365,
.bb-signup .dxWeb_edtCheckBoxCheckedDisabled_Office365 {
    background-color: var(--su-gold) !important;
    border-color: var(--su-gold) !important;
    background-image: none !important;
    position: relative;
}

.bb-signup .dxWeb_edtCheckBoxChecked_Office365::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* The sentence is the label, so line it up with the box rather than the top of the row. */
.bb-signup__terms {
    align-items: center;
}

/* ---------- Nav buttons ---------- */
.bb-signup .button-container {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

/* Support line under the wizard */
.bb-signup__foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--su-muted);
}

.bb-signup__foot a {
    color: var(--su-ink);
    font-weight: 600;
}

/* ---------- Friendly "link invalid" state ---------- */
.bb-signup-error {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
    padding: 34px 30px;
    background: var(--su-card, #ffffff);
    border: 1px solid var(--su-line, #e4e9f0);
    border-radius: 10px;
}

/* ---------- Account verification (OTP entry) ---------- */
.bb-verify {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.bb-verify__intro {
    color: var(--su-ink);
    margin-bottom: 16px;
}

.bb-verify__label {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--su-title);
    text-transform: none;
    margin: 0 0 12px;
}

/* channel radios: strip the boxy DX chrome, sit clean on the card */
.bb-verify__devices {
    display: inline-block;
    text-align: left;
    margin-bottom: 12px;
}

.bb-verify__devices table[class*="dxeRadioButtonList"],
.bb-verify__devices table[class*="dxeRadioButtonList"] td {
    border: 0 !important;
    background: transparent !important;
}

/* ---------- Elegant radio (portable): even ring + centred dot. Apply CssClass="bb-radio". ---------- */
.bb-radio td { vertical-align: middle; }

.bb-radio td[class*="dxichTextCell"] { padding-left: 8px; }

.bb-radio .dxichSys {
    background: transparent !important;
    box-sizing: border-box;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--su-muted, #8a97ab) !important;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: border-color .15s ease;
}

.bb-radio span[class*="edtRadioButtonChecked"] {
    border-color: var(--su-gold, #a87c1b) !important;
}

.bb-radio span[class*="edtRadioButtonChecked"]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--su-gold, #a87c1b);
}

/* code input + submit: matched heights, letter-spaced field */
.bb-verify__code {
    display: inline-block;
}

/* collapse DX cell padding so the field's OUTER height matches the button */
.bb-verify__code td.dxic {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bb-verify__code .dxeEditAreaSys {
    height: 44px;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: .35em;
    font-size: 1.25rem;
    font-weight: 700;
}

/* button matches the field's outer height (44 + 2px border) for a clean pair */
.bb-verify__submit.asp-button-sm {
    height: 46px;
    border-radius: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .bb-signup__panel { padding: 36px 24px 32px; }
}

@media (max-width: 880px) {
    /* login.css stacks the rail into a name band here; give the wizard the width back. */
    .bb-signup__panel { padding: 28px 22px 24px; }
}

@media (max-width: 560px) {
    .bb-signup #wizHeader li a { font-size: 0; gap: 0; }   /* labels collapse; numbered nodes remain */
    .bb-signup #wizHeader li a::before { font-size: .85rem; }
    .bb-signup .boxSemiTransparent { padding: 22px 18px; }
}