/* ============================================================================
   Account registration layout — "im" design system.

   Ported from the approved mock-ups (directions 2a / 2c and their responsive
   renders 2d / 2e). Every colour comes from the RegistrationTheme CSS
   variables emitted on the .signup-layout / .im root by
   RegistrationTheme.ToCssVariables() — no new tokens are introduced here, so
   the theme designer keeps full control of the palette.

   Icons are rendered with RadzenIcon (Material Symbols) in the markup, so the
   mock-up's standalone ".ms" font helper is intentionally not reproduced.
   ============================================================================ */

/* ---- shared primitives -------------------------------------------------- */
.im {
    container-type: inline-size;
    container-name: im;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(to bottom right, var(--bg-start, #095c65), var(--bg-end, #1a2c57));
    color: var(--header-text, #ebf1f0);
    font-family: var(--rz-text-font-family, Roboto, sans-serif);
    overflow: hidden;
}

.im-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1rem, 3cqi, 2.5rem);
    min-height: 0;
    overflow: auto;
}

.im-shell {
    width: 100%;
    max-width: 1060px;
    max-height: 100%;
    min-height: 0;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---- brand ------------------------------------------------------------- */
.im-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.im-mark {
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .18);
    font: 700 .8125rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .06em;
    color: var(--header-text, #ebf1f0);
    overflow: hidden;
}

.im-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.im-wordmark {
    font: 700 1rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .22em;
    margin: 0;
    color: var(--header-text, #ebf1f0);
}

.im-tagline {
    font: 400 .75rem/1.4 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--card-text, #c9d5da);
    margin: .28rem 0 0;
    letter-spacing: .02em;
}

/* ---- language selector: globe icon button + popup list (top-right) ------ */
.im-lang {
    position: absolute;
    top: .75rem;
    inset-inline-end: 1rem;
    z-index: 20;
}

.im-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    background: rgba(0, 0, 0, .18);
    color: var(--header-text, #ebf1f0);
    cursor: pointer;
    padding: 0;
}

.im-lang-btn:hover {
    background: rgba(255, 255, 255, .08);
}

.im-lang-btn:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 2px;
}

.im-lang-icon {
    font-size: 1.35rem !important;
    color: var(--header-text, #ebf1f0);
}

/* Full-viewport click-catcher that closes the menu on an outside click. */
.im-lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.im-lang-menu {
    position: absolute;
    top: calc(100% + .35rem);
    inset-inline-end: 0;
    z-index: 2;
    min-width: 210px;
    max-height: 60vh;
    overflow: hidden auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--popup-bg, #1a2c57);
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.im-lang-item {
    padding: .5rem .75rem;
    color: var(--popup-text, #c9d5da);
    font: 400 .875rem/1.3 var(--rz-text-font-family, Roboto, sans-serif);
    cursor: pointer;
    white-space: nowrap;
}

.im-lang-item:hover {
    background: var(--popup-hover-bg, rgba(255,255,255,0.08));
    color: var(--popup-hover-text, #ebf1f0);
}

.im-lang-item.active {
    background: var(--popup-selected-bg, #3b82f6);
    color: var(--popup-selected-text, #fff);
}

/* ---- plate (card that holds the form) ---------------------------------- */
.im-plate {
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    border-radius: .75rem;
    background-color: var(--card-bg, transparent);
    color: var(--card-text, #c9d5da);
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.im-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.im-main {
    padding: clamp(1.25rem, 2.6cqi, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    container-type: inline-size;
    container-name: form;
}

/* ---- hero (step heading) ----------------------------------------------- */
.im-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.im-heroicon {
    font-size: 2.5rem !important;
    color: var(--header-text, #ebf1f0);
    flex: none;
}

.im-h {
    font: 400 clamp(1.375rem, 2.2cqi, 1.875rem)/1.15 var(--rz-text-font-family, Roboto, sans-serif);
    margin: 0;
    color: var(--header-text, #ebf1f0);
    letter-spacing: -.01em;
}

.im-sub {
    font: 400 .875rem/1.5 var(--rz-text-font-family, Roboto, sans-serif);
    margin: .3rem 0 0;
    color: var(--card-text, #c9d5da);
}

/* ---- field grid -------------------------------------------------------- */
.im-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem 1.25rem;
}

.im-span2 {
    grid-column: span 2;
}

.im-spanall {
    grid-column: 1 / -1;
}

.im-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: 1px;
}

.im-lab {
    font: 400 .75rem/1.2 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--card-text, #c9d5da);
    opacity: .85;
    /* Reserve room for up to two lines and pin the text to the bottom, so a
       label that wraps (e.g. long localized captions) still leaves every input
       in a grid row starting on the same baseline. */
    min-height: 2.4em;
    display: flex;
    align-items: flex-end;
}

/* Radzen inputs inside an .im-field adopt the mock-up's input shape. The
   colours already come from the themed .rz-textbox / .rz-dropdown rules in
   the layout, so only geometry is set here. */
.im-field .rz-textbox,
.im-field .rz-dropdown,
.im-field .rz-datepicker,
.im-field .rz-textarea,
.im-field .im-in {
    width: 100%;
    box-sizing: border-box;
}

.im-field .rz-textbox,
.im-field .rz-dropdown,
.im-field .rz-dropdown .rz-dropdown-trigger,
.im-field .rz-datepicker .rz-inputtext,
.im-field .im-in {
    min-height: 2.5rem;
}

/* Keep the dropdown's selected label vertically centred within that height. */
.im-field .rz-dropdown .rz-dropdown-label {
    display: flex;
    align-items: center;
}

.im-in {
    width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    padding: .5rem .75rem;
    font: 400 .875rem/1.25 var(--rz-text-font-family, Roboto, sans-serif);
    border-radius: 4px;
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
    outline: none;
}

.im-in::placeholder {
    color: var(--placeholder-text, #c9d5da);
    opacity: .7;
}

.im-in:hover {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
}

.im-in:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
}

.im-static {
    font: 400 .875rem/2.5 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--header-text, #ebf1f0);
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
}

/* ---- actions bar ------------------------------------------------------- */
.im-actions {
    flex: none;
    border-top: 1px solid var(--card-border, rgba(170,177,189,0.2));
    padding: .9rem clamp(1.25rem, 2.6cqi, 2.25rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 0, 0, .08);
}

.im-hint {
    font: 400 .75rem/1.4 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--card-text, #c9d5da);
    opacity: .8;
    min-width: 0;
}

.im-btns {
    display: flex;
    gap: .6rem;
    flex: none;
}

/* ---- code inputs (email confirmation, 2f) ------------------------------ */
.im-code {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.im-code input {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font: 400 1.5rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    border-radius: 4px;
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
    outline: none;
}

.im-code input:hover,
.im-code input:focus,
.im-code input.selected {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
}

.im-code input:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
}

/* ---- picture drop zone (step 4) ---------------------------------------- */
.im-drop {
    border: 1px dashed var(--input-border, rgba(170,177,189,0.2));
    border-radius: 6px;
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    padding: 2.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--card-text, #c9d5da);
    text-align: center;
}

/* ---- special-needs examples list --------------------------------------- */
.im-ul {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    font: 400 .75rem/1.7 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--card-text, #c9d5da);
    columns: 2;
    column-gap: 1.5rem;
}

/* ---- review accordion (step 5) ----------------------------------------- */
.im-acc {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.im-accitem {
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    border-radius: 6px;
    background: rgba(0, 0, 0, .12);
}

.im-acchead {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    font: 400 .9375rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--card-text, #c9d5da);
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}

.im-acchead .im-accchevron {
    margin-left: auto;
    display: inline-flex;
}

.im-accbody {
    padding: 0 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem 1.25rem;
}

.im-kv {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.im-k {
    font: 400 .6875rem/1.2 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

.im-v {
    font: 400 .875rem/1.4 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--header-text, #ebf1f0);
    overflow-wrap: anywhere;
}

.im-v-picture {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
}

/* ---- side rail (2c workspace) ------------------------------------------ */
.im-c {
    flex-direction: row;
    /* The workspace scrolls at the page level, so nothing here needs to clip;
       keeping it visible lets pop-ups (country selector, dropdowns) escape. */
    overflow: visible;
}

.im-side {
    flex: 0 0 288px;
    border-right: 1px solid var(--card-border, rgba(170,177,189,0.2));
    padding: 1.75rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: auto;
}

.im-c .im-body {
    padding: clamp(1.25rem, 3cqi, 3rem);
    overflow: visible;
}

.im-c .im-shell {
    max-width: 860px;
}

.im-c .im-plate {
    border: none;
    background: none;
    border-radius: 0;
    overflow: visible;
}

.im-c .im-main {
    padding: 0 0 1.5rem;
    overflow: visible;
}

.im-c .im-actions {
    border: none;
    background: none;
    border-top: 1px solid var(--card-border, rgba(170,177,189,0.2));
    padding: 1rem 0 0;
}

.im-railcap {
    font: 600 .6875rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--step-inactive-text, rgba(170,177,189,0.4));
    margin: 0 .5rem 1rem;
}

.im-rail {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.im-step {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem;
    border: none;
    background: none;
    color: var(--step-inactive-text, rgba(170,177,189,0.4));
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font: 400 .875rem/1.2 var(--rz-text-font-family, Roboto, sans-serif);
    width: 100%;
}

.im-step:hover {
    background: rgba(255, 255, 255, .05);
}

.im-step:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 2px;
}

.im-step.current {
    background: rgba(255, 255, 255, .07);
    color: var(--header-text, #ebf1f0);
}

.im-step.done {
    color: var(--card-text, #c9d5da);
}

.im-dot {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 500 .75rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    box-sizing: border-box;
    border: 1px solid var(--step-inactive-border, rgba(170,177,189,0.4));
    color: var(--step-inactive-text, rgba(170,177,189,0.4));
}

.im-step.current .im-dot {
    background: var(--accent, #3b82f6);
    border: 1px solid var(--accent, #3b82f6);
    color: var(--accent-text, #fff);
}

.im-step.done .im-dot {
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    color: var(--card-text, #c9d5da);
}

.im-sidefoot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--card-border, rgba(170,177,189,0.2));
}

.im-sidefoot p {
    margin: 0;
    font: 400 .8125rem/1.55 var(--rz-text-font-family, Roboto, sans-serif);
    color: var(--card-text, #c9d5da);
}

/* Contact links sit among the rail's body text, so they take that same
   (contrast-matched) colour instead of the page link colour; underline on
   hover is the affordance so contrast is never traded away. */
.im-sidefoot a {
    color: var(--card-text, #c9d5da);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.im-sidefoot a:hover {
    color: var(--card-text, #c9d5da);
    text-decoration: underline;
}

.im-sidecopy {
    margin: 0;
    font-size: .65rem;
    line-height: 1.5;
    opacity: .7;
    color: var(--card-text, #c9d5da);
}

/* ---- footer ------------------------------------------------------------ */
.im-footer {
    color: var(--footer-text, #ebf1f0);
    background-color: var(--footer-bg, rgba(0,0,0,0.12));
    border-top: 1px solid var(--footer-border, rgba(170,177,189,0.2));
    flex: none;
}

.im-fhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem clamp(1rem, 3cqi, 2.5rem);
}

.im-fbrand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font: 600 .9375rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .14em;
}

.im-fgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem 2rem;
    padding: 0 clamp(1rem, 3cqi, 2.5rem) 1.1rem;
    font: 400 .8125rem/1.6 var(--rz-text-font-family, Roboto, sans-serif);
}

.im-fgrid.open {
    padding-top: 1.35rem;
    align-items: start;
}

.im-fgrid.open > div:first-child {
    grid-column: span 2;
}

.im-fh {
    font: 600 .6875rem/1 var(--rz-text-font-family, Roboto, sans-serif);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .65;
    margin: 0 0 .5rem;
}

/* Footer contact links match the footer's own (contrast-matched) text colour
   rather than the page link colour, which would wash out on a light footer;
   underline on hover keeps the affordance without changing colour. */
.im-footer a {
    color: var(--footer-text, #ebf1f0);
    text-decoration: none;
}

.im-footer a:hover {
    color: var(--footer-text, #ebf1f0);
    text-decoration: underline;
}

.im-fcopy {
    text-align: center;
    font-size: .65rem;
    padding: .4rem 0 .6rem;
    opacity: .7;
    border-top: 1px solid var(--footer-border, rgba(170,177,189,0.2));
}

.im-iconbtn {
    background: none;
    border: none;
    color: var(--footer-text, #ebf1f0);
    cursor: pointer;
    padding: .25rem;
    display: inline-flex;
    border-radius: 50%;
}

.im-iconbtn:hover {
    background: rgba(255, 255, 255, .08);
}

/* ---- responsiveness: form grid keys off the FORM's width --------------- */
@container form (min-width: 700px) {
    .im-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .im-acc {
        gap: .4rem;
    }

    .im-acchead {
        padding: .6rem 1rem;
    }

    .im-accbody {
        gap: .55rem 1.25rem;
    }
}

/* ---- responsiveness: layout keys off the whole page (2d / 2e) ---------- */
/* The .im-c workspace sets its row direction on the same element that is the
   query container, and a container query cannot restyle its own container, so
   the stacking is done with a media query. The workspace .im spans the viewport,
   so viewport width and container width coincide and this fires together with
   the container rules below. */
/* The registration workspace's bottom footer only exists on the narrow layout;
   on desktop that content lives in the side rail. (Base rule first so the
   media-query override below wins when it applies.) */
.im-formfoot {
    display: none;
}

@media (max-width: 900px) {
    .im-c {
        flex-direction: column;
    }

    /* Sidebar becomes a top strip and hides its office/contact block, so the
       registration form shows that information in a bottom footer instead. */
    .im-formfoot {
        display: block;
    }
}

@container im (max-width: 900px) {
    /* 2c workspace: sidebar collapses into a horizontal step strip */
    .im-side {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--card-border, rgba(170,177,189,0.2));
        flex-direction: column;
        gap: 1rem;
        padding: .9rem 1rem;
    }

    .im-rail {
        flex-direction: row;
        overflow-x: auto;
        gap: .35rem;
    }

    .im-railcap {
        display: none;
    }

    .im-step {
        width: auto;
        flex: none;
        padding: .35rem .55rem;
    }

    .im-steplabel {
        display: none;
    }

    .im-sidefoot {
        display: none;
    }
}

@container im (max-width: 620px) {
    .im-shell {
        gap: .9rem;
    }

    .im-main {
        gap: 1.25rem;
    }

    .im-heroicon {
        font-size: 2rem !important;
    }

    .im-grid {
        grid-template-columns: 1fr;
    }

    .im-span2,
    .im-spanall {
        grid-column: span 1;
    }

    .im-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .im-btns {
        flex-direction: column-reverse;
    }

    .im-btns .rz-button,
    .im-btns .signup-btn {
        width: 100%;
    }

    .im-hint {
        text-align: center;
    }

    .im-code input {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .im-fgrid {
        grid-template-columns: 1fr;
    }

    .im-fgrid.open > div:first-child {
        grid-column: span 1;
    }
}

/* ============================================================================
   Radzen component theming — scoped to the registration surfaces so the rest
   of the app is untouched. Colours come from the RegistrationTheme variables.
   Shared by both registration layouts (each carries the .signup-layout class).
   ============================================================================ */

/* Radzen dialogs, notifications and pop-ups (dropdown / autocomplete / date
   panels) render outside the .signup-layout root (via <RadzenComponents> in the
   main layout), so their plain text would otherwise fall back to the browser's
   serif default. Give those overlay surfaces the theme font so their copy
   matches the rest of the app. */
.rz-dialog,
.rz-dialog-content,
.rz-notification,
.rz-popup,
.rz-dropdown-panel,
.iti__country-list {
    font-family: var(--rz-text-font-family, Roboto, sans-serif);
}

/* Radzen doesn't drive the base dropdown-item text colour from a variable, so
   the item colour must be set on the panel itself. Gated by --popup-text: it is
   only defined at :root on the registration pages, so on any other page the
   variable is undefined, the declaration is invalid-at-computed-value, and the
   app's default text colour is kept untouched. */
.rz-dropdown-panel,
.rz-datepicker-popup-container {
    color: var(--popup-text);
}

/* On phones/tablets, dock notifications to the bottom as a full-width fixed
   footer instead of floating top-right — keeps them (and their "go to step"
   button) within thumb reach and off the form content. */
@media (max-width: 900px) {
    /* !important: the Radzen theme stylesheet loads after this file and sets the
       default top-right position, so the override must win the cascade. */
    .rz-notification {
        position: fixed !important;
        inset-block-start: auto !important;
        inset-block-end: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;
    }

    /* Stretch each notification to the full width of the bottom bar (Radzen's
       fixed 250px / 20rem min-width loads later, so !important is required).
       Zero the per-item margin so the stack sits flush at the bottom; spacing
       between stacked toasts comes from the container's gap. */
    .rz-notification-item-wrapper {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/* Focus ring for every Radzen input (text box, text area, dropdown, date picker,
   numeric, …). Radzen drives them all from these variables, so setting them here
   gives the same accent ring the international phone field shows, instead of the
   theme's default blue inset border. */
.signup-layout {
    --rz-input-focus-shadow: none;
    --rz-input-focus-border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    --rz-input-focus-outline: 2px solid var(--accent, #3b82f6);
    --rz-input-focus-outline-offset: 1px;
    --rz-input-focus-background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
}

/* Primary action button (email pages) */
.signup-layout .signup-btn {
    background-color: var(--button-end, #194d9e);
    background-image: linear-gradient(to right, var(--button-start, #397ff1), var(--button-end, #194d9e));
    border: none;
    color: var(--button-text, #fff) !important;
    transition: none;
}

.signup-layout .signup-btn .rzi {
    color: var(--button-text, #fff) !important;
}

.signup-layout .signup-btn:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .signup-btn:not(:disabled):not(.rz-state-disabled):focus {
    background-color: var(--button-hover, #16438a);
    background-image: none;
    color: var(--button-hover-text, #fff) !important;
}

.signup-layout .signup-btn:not(:disabled):not(.rz-state-disabled):hover .rzi,
.signup-layout .signup-btn:not(:disabled):not(.rz-state-disabled):focus .rzi {
    color: var(--button-hover-text, #fff) !important;
}

/* Text inputs */
.signup-layout .rz-textbox {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-textbox::placeholder {
    color: var(--placeholder-text, #c9d5da);
}

.signup-layout .rz-textbox:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

/* Dropdowns */
.signup-layout .rz-dropdown {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

/* Text areas */
.signup-layout .rz-textarea {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-textarea::placeholder {
    color: var(--placeholder-text, #c9d5da);
}

.signup-layout .rz-textarea:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .rz-textarea:not(:disabled):not(.rz-state-disabled):focus {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

/* Date picker */
.signup-layout .rz-datepicker > .rz-inputtext {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-datepicker-trigger {
    color: var(--datepicker-icon, #c9d5da);
}

/* Numeric */
.signup-layout .rz-numeric {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout .rz-numeric:not(:disabled):not(.rz-state-disabled):focus,
.signup-layout .rz-numeric:not(:disabled):not(.rz-state-disabled):hover,
.signup-layout .rz-numeric:focus-within:not(.rz-state-disabled) {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
}

.signup-layout input.rz-numeric-input.rz-inputtext {
    color: var(--input-text, #c9d5da);
}

.signup-layout button.rz-numeric-button.rz-button {
    color: var(--numeric-button, #c9d5da);
}

/* File upload */
.signup-layout .rz-fileupload-choose:not(.rz-state-disabled) {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--fileupload-text, #c9d5da);
}

.signup-layout .rz-fileupload-choose:not(.rz-state-disabled):hover:not(:active),
.signup-layout .rz-fileupload-choose:not(.rz-state-disabled):focus {
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--fileupload-text, #c9d5da);
}

.signup-layout .rz-fileupload-buttonbar,
.signup-layout .rz-fileupload-files {
    background-color: transparent;
}

.signup-layout .rz-fileupload-row {
    color: var(--fileupload-text, #c9d5da);
}

.signup-layout div[class='rz-fileupload-row'] div:nth-child(3) {
    display: none !important;
}

/* The upload control's own thumbnail is the only picture preview, so it carries
   the rounded corners the rest of the form uses. */
.signup-layout .rz-fileupload-row img {
    border-radius: 8px;
    object-fit: cover;
}

/* Validation messages */
.signup-layout .rz-messages-error {
    color: var(--error-text, #fed5d3);
}

.signup-layout .valid.modified:not([type=checkbox]) {
    outline: none;
}

/* Review accordion */
.signup-layout .rz-accordion .rz-accordion-header {
    background-color: var(--accordion-header-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--accordion-header-text, #c9d5da);
}

.signup-layout .rz-accordion .rz-accordion-header > a {
    color: var(--accordion-header-text, #c9d5da);
}

.signup-layout .rz-accordion .rz-accordion-header > a:hover {
    color: var(--accordion-header-hover, rgba(201, 213, 218, 0.5));
}

.signup-layout .rz-accordion-content,
.signup-layout .rz-accordion > .rz-expander {
    background-color: transparent;
}

/* International phone input. The intl-tel-input control is used directly as the
   field. It doesn't forward a class onto its <input>, so the input is themed by
   element selector to match every other input (font, colours, height, radius).
   The left padding for the flag + separate dial code is left to the library. */
.signup-layout .im-field .iti {
    display: block;
    width: 100%;
}

.signup-layout .im-field .iti input {
    width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    padding-block: .5rem;
    padding-right: .75rem;
    border-radius: 4px;
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
    font: 400 .875rem/1.25 var(--rz-text-font-family, Roboto, sans-serif);
    outline: none;
}

.signup-layout .im-field .iti input::placeholder {
    color: var(--placeholder-text, #c9d5da);
    opacity: .7;
}

.signup-layout .im-field .iti input:hover,
.signup-layout .im-field .iti input:focus {
    background-color: var(--input-bg-hover, rgba(0,0,0,0.12));
}

.signup-layout .im-field .iti input:focus-visible {
    outline: 2px solid var(--accent, #3b82f6);
    outline-offset: 1px;
}

/* Separate dial code sits in the flag container; keep it on the themed surface
   and legible against the dark input. */
.signup-layout .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
}

.signup-layout .iti__selected-dial-code {
    color: var(--input-text, #c9d5da);
}

/* Country selector list — same look as the language menu / Radzen pop-ups:
   dark panel, 8px radius, subtle hover, accent-highlighted selection. The list
   is registration-only (and moves to the document body on mobile), so it is
   styled unscoped with !important to override the intl-tel-input base sheet. */
.iti__country-list {
    max-height: 280px;
    padding: 0 !important;
    overflow: hidden auto;
    background: var(--popup-bg, #1a2c57) !important;
    border: 1px solid var(--card-border, rgba(170,177,189,0.2)) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}

.iti__country {
    padding: .5rem .75rem !important;
    color: var(--popup-text, #c9d5da);
}

.iti__country .iti__dial-code {
    color: var(--popup-text, #c9d5da);
    opacity: .6;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: var(--popup-hover-bg, rgba(255,255,255,0.08)) !important;
    color: var(--popup-hover-text, #ebf1f0) !important;
}

.iti__country.iti__active {
    background-color: var(--popup-selected-bg, #3b82f6) !important;
    color: var(--popup-selected-text, #fff) !important;
}

.iti__divider {
    border-color: var(--card-border, rgba(170,177,189,0.2)) !important;
}

/* Blocks input between choosing a language and the page reloading. Transparent
   on purpose: the step placeholder underneath is the waiting state, so nothing
   should dim or cover it. */
.im-switching {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
    cursor: progress;
}

/* ---- step placeholders (shown while a reloaded step is restored) -------
   RadzenSkeleton defaults to light-theme greys, which disappear on the dark
   registration surface, so it is tinted from the theme's own input colours. */
.signup-layout {
    --rz-skeleton-background-color: var(--input-bg, rgba(0,0,0,0.24));
    --rz-skeleton-animation-color: rgba(255, 255, 255, .08);
    --rz-skeleton-border-radius: 4px;
}

/* Text placeholder that keeps the real text's own box. The element still lays
   out its text — same font, same line height, same wrapping — but the glyphs are
   made invisible and the shimmer is painted over exactly the area they occupy.
   Revealing the text is then a pure class removal: nothing moves by a pixel.
   width:fit-content shrinks the box to the text instead of the full column,
   without changing the element's display (so a label hidden on mobile stays
   hidden). */
.im-sk {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

/* Same treatment for a button's label. The class goes on the button (the only
   element addressable from markup), the shimmer on the text span inside it, so
   the button keeps its own size and its icon stays visible. */
.im-sk-btn .rz-button-text {
    position: relative;
}

.im-sk,
.im-sk *,
.im-sk-btn .rz-button-text {
    color: transparent !important;
}

.im-sk::after,
.im-sk-btn .rz-button-text::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--input-bg, rgba(0,0,0,0.24)) 25%,
        rgba(255, 255, 255, .08) 50%,
        var(--input-bg, rgba(0,0,0,0.24)) 75%);
    background-size: 200% 100%;
    animation: im-sk-wave 1.6s linear infinite;
}

@keyframes im-sk-wave {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Placeholders stand in for block-level text, so they stack like the real
   content instead of flowing side by side as inline-block would. */
.im-field .rz-skeleton,
.im-railcap .rz-skeleton,
.im-steplabel .rz-skeleton,
.im-sidefoot .rz-skeleton,
.im-formfoot .rz-skeleton,
.im-fcopy .rz-skeleton {
    display: block;
}

/* The rail keeps its numbers while the titles are placeholders, so the label
   slot still takes the remaining width. */
.im-side .im-steplabel .rz-skeleton {
    width: 100%;
}

/* A placeholder standing in for a line of text is laid out as a block at that
   element's own line height. Left inline it would sit on the text baseline and
   add the descender gap underneath, making the heading a few pixels taller than
   the heading it stands in for — which is exactly the jump to avoid. */
.im-h > .rz-skeleton {
    display: block;
    height: 1.15em;
}

.im-sub > .rz-skeleton {
    display: block;
    height: 1.5em;
}

.im-lab > .rz-skeleton {
    display: block;
    height: 1.2em;
}

.im-sk-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .35rem 1.5rem;
    margin-top: .35rem;
}

/* ---- theme designer: open-dropdown replica -----------------------------
   Lets the theme editor preview the --popup-* colours live (real Radzen /
   intl-tel pop-ups render at the document body, so they can't appear inside
   the in-page preview). Mirrors the shape of the real pop-ups. */
.te-dd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: 4px;
    background-color: var(--input-bg, rgba(0,0,0,0.24));
    border: 1px solid var(--input-border, rgba(170,177,189,0.2));
    color: var(--input-text, #c9d5da);
    font: 400 .875rem/1.25 var(--rz-text-font-family, Roboto, sans-serif);
}

/* Wrapper so the "?" can sit on the panel's corner without being clipped by
   the panel's own overflow, and so it precedes the panel in DOM order (the
   hover-highlight below is a plain sibling selector). */
.te-dd-panelwrap {
    position: relative;
    margin-top: .35rem;
}

.te-dd-panel {
    background: var(--popup-bg, #1a2c57);
    border: 1px solid var(--card-border, rgba(170,177,189,0.2));
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.te-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    color: var(--popup-text, #c9d5da);
    font: 400 .875rem/1.3 var(--rz-text-font-family, Roboto, sans-serif);
}

/* State tag naming which editor field the row previews. This is editor chrome,
   not themed content, so it uses a fixed dark pill with light text: readable on
   any colour the operator picks (including light-on-light combinations) instead
   of inheriting the row's colours. */
.te-dd-tag {
    flex: none;
    padding: .1rem .35rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* "?" on the panel's top-right corner, explaining that the state tags are an
   editing aid only. */
.te-dd-help {
    position: absolute;
    top: -.5rem;
    inset-inline-end: -.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

/* Hovering the "?" lights up the state tags it refers to, so the association
   between the badge and the labels is obvious. */
.te-dd-help:hover ~ .te-dd-panel .te-dd-tag {
    background: #f5b301;
    color: #1a1a1a;
    box-shadow: 0 0 0 2px rgba(245, 179, 1, .35);
}

.te-dd-hover {
    background: var(--popup-hover-bg, rgba(255,255,255,0.08));
    color: var(--popup-hover-text, #ebf1f0);
}

.te-dd-selected {
    background: var(--popup-selected-bg, #3b82f6);
    color: var(--popup-selected-text, #fff);
}

/* Calendar month/year dropdown labels stay legible on their light popup */
.signup-layout div[class='rz-dropdown rz-calendar-month-dropdown'] span[class='rz-dropdown-label rz-inputtext'],
.signup-layout div[class='rz-dropdown rz-calendar-year-dropdown'] span[class='rz-dropdown-label rz-inputtext'] {
    color: black;
}