/* =========================================================
   UIX modernization layer — COMPONENTS
   Scope: .uix-app
   Reusable, opt-in components. A control gets these styles only
   when its CssClass is set to a uix-* class — legacy markup is
   untouched until migrated. Build order mirrors the plan (A2).
   ========================================================= */

/* ---------- Buttons ---------- */
.uix-app .uix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uix-space-1);
    /* 8px (Figma) */
    /* Library size 200 renders 40px tall. Its declared 12px vertical padding plus
     a 20px line box would be 44px, so the padding is set to the value that
     actually reproduces the measured buttons (Upload Documents 169x40) while
     still letting a wrapped label grow. */
    min-height: 40px;
    padding: var(--uix-space-1) var(--uix-space-3);
    /* 8px 16px */
    border: 1px solid transparent;
    border-radius: var(--uix-radius-btn);
    /* 6px */
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    font-weight: 700;
    /* Roboto:Bold (Figma) */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.uix-app .uix-btn--primary {
    background: var(--uix-color-primary);
    color: var(--uix-color-on-primary);
}

.uix-app .uix-btn--primary:hover {
    background: var(--uix-color-primary-hover);
    color: var(--uix-color-on-primary);
}

/* Figma Buttons/Secondary: a FILLED grey button with no border (this is also
   what "Skip" is — it is not a transparent text link). */
.uix-app .uix-btn--secondary {
    background: var(--uix-color-btn-secondary);
    border-color: transparent;
    color: var(--uix-color-text-secondary);
}

.uix-app .uix-btn--secondary:hover {
    background: var(--uix-color-btn-secondary-hover);
    color: var(--uix-color-text-secondary);
}

.uix-app .uix-btn--secondary:active {
    background: var(--uix-color-btn-secondary-active);
}

/* Figma Buttons/Tertiary on Surface — used for "Browse Files" inside a drop zone. */
.uix-app .uix-btn--tertiary {
    background: var(--uix-color-btn-tertiary);
    border-color: transparent;
    color: var(--uix-color-text);
    font-size: var(--uix-body-sm-size);
    padding: var(--uix-space-1);
    min-height: 36px;
}

.uix-app .uix-btn--tertiary:hover {
    background: var(--uix-color-btn-tertiary-hover);
    color: var(--uix-color-text);
}

/* Large size — the 56px button row on the upload/close screens.
   Figma: 56px tall, padding 16/24, label Body/LG Bold 18/24. */
.uix-app .uix-btn--lg {
    min-height: 56px;
    /* measured 292x56 */
    padding: var(--uix-space-2) var(--uix-space-4);
    /* 12px 24px */
    font-size: var(--uix-body-lg-size);
    line-height: var(--uix-body-lg-line);
}

.uix-app .uix-btn--link {
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--uix-color-brand-text);
    font-weight: 500;
}

/* Disabled. Figma does NOT dim the button — it stacks a 60% white fill over the
   primary colour and keeps the label pure white, so the label stays readable.
   The token is that blend pre-computed from --uix-color-primary. */
.uix-app .uix-btn[disabled],
.uix-app .uix-btn.aspNetDisabled,
.uix-app .uix-btn--pending {
    cursor: not-allowed;
}

.uix-app .uix-btn--primary[disabled],
.uix-app .uix-btn--primary.aspNetDisabled,
.uix-app .uix-btn--primary.uix-btn--pending {
    background: var(--uix-color-primary-disabled);
    color: var(--uix-color-on-primary);
}

.uix-app .uix-btn--secondary[disabled],
.uix-app .uix-btn--secondary.aspNetDisabled {
    color: var(--uix-color-text-disabled);
}

/* ---------- Form field ---------- */
.uix-app .uix-field {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-1);
    margin-bottom: var(--uix-space-3);
}

.uix-app .uix-field__label {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    line-height: var(--uix-body-sm-line);
    font-weight: 500;
    color: var(--uix-color-text);
}

.uix-app .uix-input,
.uix-app .uix-select,
.uix-app .uix-textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--uix-color-border);
    border-radius: var(--uix-radius-md);
    background: var(--uix-color-surface);
    color: var(--uix-color-text);
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    padding: 10px 12px;
}

.uix-app .uix-input:focus,
.uix-app .uix-select:focus,
.uix-app .uix-textarea:focus {
    border-color: var(--uix-color-primary);
    outline: none;
    box-shadow: var(--uix-focus-ring);
}

.uix-app .uix-field__error {
    font-family: var(--uix-font-family);
    font-size: 13px;
    line-height: 18px;
    color: var(--uix-color-danger);
}

/* Helper text under a field (hints, constraints). */
.uix-app .uix-field__hint {
    font-family: var(--uix-font-family);
    font-size: 13px;
    line-height: 18px;
    color: var(--uix-color-text-tertiary);
}

/* Input with a leading icon — replaces the legacy Bootstrap
   .input-group + .input-group-prepend pattern used across the wizard. */
.uix-app .uix-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.uix-app .uix-input-group__icon {
    position: absolute;
    left: var(--uix-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--uix-color-text-tertiary);
    pointer-events: none;
}

.uix-app .uix-input-group .uix-input,
.uix-app .uix-input-group .uix-select {
    padding-left: calc(var(--uix-space-2) + 20px + var(--uix-space-2));
}

/* ---------- Card / help panel ---------- */
.uix-app .uix-card {
    background: var(--uix-color-surface);
    border: 1px solid var(--uix-color-border);
    border-radius: var(--uix-radius-lg);
    box-shadow: var(--uix-shadow-sm);
}

.uix-app .uix-card__header {
    padding: var(--uix-space-4);
    border-bottom: 1px solid var(--uix-color-border);
}

.uix-app .uix-card__body {
    padding: var(--uix-space-4);
}

/* ---------- Alert / validation summary ---------- */
.uix-app .uix-alert {
    padding: var(--uix-space-3);
    border-radius: var(--uix-radius-md);
    border: 1px solid var(--uix-color-border);
    background: var(--uix-color-surface-muted);
}

.uix-app .uix-alert--danger {
    border-color: rgba(220, 38, 38, 0.30);
    background: rgba(220, 38, 38, 0.08);
    color: var(--uix-color-danger);
}

.uix-app .uix-alert--info {
    border-color: var(--uix-color-border);
    background: var(--uix-color-surface-muted);
    color: var(--uix-color-text-secondary);
}

.uix-app .uix-alert--success {
    border-color: rgba(62, 178, 66, 0.35);
    background: rgba(62, 178, 66, 0.08);
    color: var(--uix-color-brand-text);
}

.uix-app .uix-alert--warning {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.08);
    color: var(--uix-color-warning-text);
}

.uix-app .uix-alert__title {
    margin: 0 0 var(--uix-space-2);
    font-size: var(--uix-body-size);
    font-weight: 700;
    color: var(--uix-color-text);
}

.uix-app .uix-alert__text {
    margin: 0 0 var(--uix-space-2);
    font-size: var(--uix-body-sm-size);
    line-height: 20px;
}

.uix-app .uix-alert__text:last-child {
    margin-bottom: 0;
}

/* ---------- Status badge (OK / INFO / WARN / FAIL) ----------
   Text colours are the AA-safe variants of each family, not the fill tokens. */
.uix-app .uix-status {
    display: inline-block;
    min-width: 48px;
    padding: 2px 8px;
    border-radius: var(--uix-radius-sm);
    font-size: var(--uix-caption-size);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.uix-app .uix-status--ok {
    background: rgba(62, 178, 66, 0.14);
    color: var(--uix-color-brand-text);
}

.uix-app .uix-status--info {
    background: var(--uix-color-surface-muted);
    color: var(--uix-color-text-secondary);
}

.uix-app .uix-status--warn {
    background: rgba(217, 119, 6, 0.14);
    color: var(--uix-color-warning-text);
}

.uix-app .uix-status--fail {
    background: rgba(220, 38, 38, 0.12);
    color: var(--uix-color-danger);
}

/* ---------- Method card ("Selector", deposit-method list) ----------
   Figma "Select Deposit Method" (104:2008): borderless rows on a 5% black wash,
   16px radius, 16px padding, a 40px circular icon chip on a 10% black wash, and
   a de-emphasised subtitle. Figma defines no hover/selected/focus states, so
   those are added here (the rows are links and must show focus).
   NB: in Figma this list lives in a modal over the "approved" screen; the app
   keeps it as its own page, so only the content design is adopted. */
.uix-app .uix-method-list {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-1);
}

.uix-app .uix-method-card {
    display: flex;
    align-items: center;
    gap: var(--uix-space-3);
    padding: var(--uix-space-3);
    border: 1px solid transparent;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--uix-color-text);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

/* A method that is not available yet - today only the bank deposit, which waits for the
   application to be accepted. Kept on the page rather than hidden so the customer can see
   the option exists; the title attribute carries the reason. */
.uix-app .uix-method-card--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.uix-app .uix-method-card:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--uix-color-text);
    text-decoration: none;
}

.uix-app .uix-method-card:focus-visible {
    outline: none;
    border-color: var(--uix-color-primary);
    box-shadow: var(--uix-focus-ring);
}

.uix-app .uix-method-card__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--uix-radius-pill);
    background: rgba(0, 0, 0, 0.10);
    color: var(--uix-color-text);
    font-size: 16px;
}

.uix-app .uix-method-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uix-app .uix-method-card__title {
    font-weight: 500;
    font-size: var(--uix-body-sm-size);
    /* 14 */
    line-height: var(--uix-body-sm-line);
    /* 20 */
    color: var(--uix-color-text);
}

.uix-app .uix-method-card__desc {
    font-size: var(--uix-caption-size);
    /* 12 */
    line-height: var(--uix-caption-line);
    /* 16 */
    color: var(--uix-color-text);
    opacity: 0.7;
}

.uix-app .uix-method-card__chevron {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--uix-color-text);
    opacity: 0.6;
}

/* ---------- Page layout (content column + optional side panel) ----------
   ONE layout shared by every migrated screen (funding, upload, applications,
   identity…). Pages only override the two widths via custom properties, e.g.
     .uix-page-applications .uix-layout { --uix-layout-main: 972px; }
   so no screen needs its own __layout/__main/__help rules. */
.uix-app .uix-layout {
    --uix-layout-main: 600px;
    --uix-layout-aside: 300px;
    display: flex;
    align-items: flex-start;
    gap: var(--uix-space-6);
    max-width: var(--uix-page-max);
    margin: 0 auto;
    padding: var(--uix-layout-top, 64px) var(--uix-gutter) var(--uix-space-6);
}

/* Desktop: the column sits ON the gutter (Figma x=96), it does not grow to fill
   the artboard. Below 992px the whole column centers instead — that is what the
   tablet artboard does (834 wide, 600 column at x=117). */
.uix-app .uix-layout__main {
    flex: 0 1 var(--uix-layout-main);
    width: 100%;
    max-width: var(--uix-layout-main);
    min-width: 0;
}

/* No Figma frame places a side panel (the design fills the right half with the
   hero illustration instead), so it simply follows the content column and reads
   as one group with it. */
.uix-app .uix-layout__aside {
    flex: 0 0 var(--uix-layout-aside);
    max-width: var(--uix-layout-aside);
}

/* Narrow artboards stack and CENTER the column (tablet 834: 600px column at
   x=117; mobile 402: 370px column at x=16) and sit closer to the header
   (content top y=96 tablet / y=88 mobile, vs 128 on web). The top inset is set
   as padding rather than via --uix-layout-top so page-level overrides of that
   token (upload 93, applications 104) do not win over the breakpoint. */
@media (max-width: 992px) {
    .uix-app .uix-layout {
        flex-direction: column;
        align-items: center;
        padding-top: var(--uix-space-5);
        /* 32px */
    }

    .uix-app .uix-layout__main,
    .uix-app .uix-layout__aside {
        flex-basis: auto;
        width: 100%;
    }

    .uix-app .uix-layout__aside {
        max-width: var(--uix-layout-main);
    }
}

@media (max-width: 576px) {
    .uix-app .uix-layout {
        padding-top: var(--uix-space-4);
        /* 24px */
    }
}

/* ---------- Hero illustration (shared: submitted.aspx, uploadFiles.aspx) ----------
   Figma paints a #f6f6f6 panel 400px wide pinned to the right of the 1440
   artboard (x 1040 -> 1440), running the full height under the header, with a
   489x584 group of three trading-platform cards that BLEEDS 140px to the LEFT of
   the panel, over the white content area.

   Two traps this encodes, both verified by pixel-scanning the rendered frame:
     * the 720x960 "Rectangle 1" inside the hero frame has NO fill and renders
       nothing — reading it as the panel gives a 720px panel, which is wrong;
     * Figma groups do not create a coordinate space, so the three cards are
       positioned against the FRAME, not the group. The percentages below are
       re-based onto the group's own 489x584 box. */
.uix-app .uix-layout--hero {
    gap: 0;
    /* The panel is flush with the header (Figma paints it from y=0, with the
     header on top), so the column's top inset moves onto __main — otherwise the
     grey band starts one gutter too low and the card stack with it. */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    align-items: stretch;
    min-height: calc(100vh - var(--uix-header-height));
}

.uix-app .uix-layout--hero .uix-layout__main {
    flex: 0 0 var(--uix-layout-main);
    padding-top: var(--uix-layout-top, 64px);
    padding-bottom: var(--uix-space-6);
}

.uix-app .uix-hero {
    position: relative;
    flex: 0 0 400px;
    align-self: stretch;
    /* 344px of dead white between the column and the panel (Figma), then the panel
     is allowed to run out to the viewport edge on screens wider than the 1440
     artboard so the band never stops short of the corner. */
    margin-left: auto;
    margin-right: calc(-1 * (50vw - min(50vw, var(--uix-page-max) / 2)));
}

.uix-app .uix-hero__panel {
    position: absolute;
    inset: 0;
    /* The literal is the fallback on purpose. A browser holding an older copy of
       uix-tokens.css - which it may for up to four hours, Cache-Control: max-age=14400 -
       would not know --uix-color-surface-hero, and the panel would paint transparent:
       a white band where the illustration should be, which is exactly what the client
       reported on 2026-10-19. The stamped ?v= on the stylesheets stops that happening
       again; this makes the panel survive it regardless. */
    background: var(--uix-color-surface-hero, #f6f6f6);
    overflow: visible;
    /* the card stack must be free to bleed left */
}

.uix-app .uix-hero__image-stack {
    position: absolute;
    top: 115px;
    /* Figma y=179, minus the 64px header */
    left: -35%;
    /* -140px of the 400px panel */
    width: 122.25%;
    /* 489 / 400 */
    aspect-ratio: 489 / 584;
    pointer-events: none;
    /* purely decorative — must never eat a CTA click */
}

/* Cards as % of the 489x584 group. DOM order = z-order: --1 (back) -> --3 (top). */
.uix-app .uix-hero__img {
    position: absolute;
    opacity: 0.8;
}

.uix-app .uix-hero__img--1 {
    /* image 533 — chart card (back, no shadow) */
    left: 7.79%;
    top: 11.82%;
    width: 57.69%;
    height: 47.24%;
}

.uix-app .uix-hero__img--2 {
    /* image 161 — tall order book (mid) */
    left: 67.48%;
    top: 0;
    width: 32.52%;
    height: 100%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: var(--uix-shadow-illustration);
}

.uix-app .uix-hero__img--3 {
    /* image 160 — wide quotes card (top) */
    left: 0;
    top: 61.01%;
    width: 93.44%;
    height: 29.85%;
    box-shadow: var(--uix-shadow-illustration);
}

/* Below 1250px the illustration is dropped and the screen becomes the tablet
   layout: one centred column carrying the layout's own padding.
   The threshold is the client's (EF-9, 2026-09-17): "anything smaller than 1250
   -> consider tablet". At 1024px the 600px column plus the 400px panel plus the
   gutters do not fit, and the illustration ran over the text on an iPad Pro.
   flex-direction is restated here because the generic .uix-layout only switches
   to a column at 992px, which would leave 993-1249px as a row with the column
   pinned to the left gutter. */
@media (max-width: 1249px) {
    .uix-app .uix-hero {
        display: none;
    }

    .uix-app .uix-layout--hero {
        flex-direction: column;
        /* The base --hero rule is declared AFTER the generic breakpoint block, so its
       align-items:stretch would win here by source order and leave the column
       stuck on the left gutter. Restate the centering. */
        align-items: center;
        padding-top: var(--uix-space-5);
        /* 32px */
        padding-right: var(--uix-gutter);
        padding-bottom: var(--uix-space-6);
        min-height: 0;
    }

    .uix-app .uix-layout--hero .uix-layout__main {
        flex-basis: auto;
        padding-top: 0;
    }
}

@media (max-width: 576px) {
    .uix-app .uix-layout--hero {
        padding-top: var(--uix-space-4);
        /* 24px */
    }
}

/* Intro block (title + subtitle) — same on every screen. */
.uix-app .uix-intro {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-2);
    margin-bottom: var(--uix-space-6);
    /* 40px (Figma column gap) */
}

/* Page titles are plain text in every Figma frame — no leading icon. The <a>
   here is a server-populated anchor, not a link, so it must not look like one. */
.uix-app .uix-intro .uix-title a {
    color: inherit;
    text-decoration: none;
}

/* Two-column responsive field grid (funding forms, wizard steps). */
.uix-app .uix-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--uix-space-4);
}

@media (max-width: 576px) {
    .uix-app .uix-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Stacked form actions (primary + secondary underneath), Figma funding forms. */
.uix-app .uix-form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-3);
    margin-top: var(--uix-space-5);
    max-width: 360px;
}

@media (max-width: 768px) {
    .uix-app .uix-form-actions {
        max-width: 100%;
    }
}

/* ---------- Checkbox / radio ----------
   Token-true skin for NATIVE inputs via accent-color (no markup change needed
   beyond the wrapper class). Bootstrap custom-control/form-check variants are
   recolored in uix-overrides.css (they are vendor-drawn pseudo-elements). */
.uix-app .uix-check,
.uix-app .uix-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--uix-space-2);
}

.uix-app .uix-check input[type="checkbox"],
.uix-app .uix-radio input[type="radio"],
.uix-app .uix-check__input,
.uix-app .uix-radio__input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
    accent-color: var(--uix-color-primary);
    cursor: pointer;
}

/* ---------- Question block (legend + answer row) ----------
   Figma: bold 20/26 question, 24px above the answers, 32px above the block. */
.uix-app .uix-question {
    margin: var(--uix-space-5) 0 0;
    /* 32px */
    padding: 0;
    border: 0;
}

.uix-app .uix-question__legend {
    float: none;
    /* Bootstrap reboot makes <legend> full-width block; keep it inline-normal */
    width: auto;
    margin: 0 0 var(--uix-space-4);
    /* 24px */
    padding: 0;
    font-family: var(--uix-font-family);
    font-size: var(--uix-h6-size);
    /* 20 */
    line-height: var(--uix-h6-line);
    /* 26 */
    font-weight: 700;
    color: var(--uix-color-text);
}

/* Progressive disclosure driven by a radio answer. The JS layer sets
   .is-revealed; :has() makes it work without JS on modern browsers.
   The [data-uix-reveal-when] attribute is part of every selector on purpose:
   it lifts the specificity above the component rules of whatever is being
   revealed (e.g. .uix-doc-section's own `display: flex`), which are declared
   later in this file. */
.uix-app .uix-reveal[data-uix-reveal-when] {
    display: none;
}

.uix-app .uix-reveal[data-uix-reveal-when].is-revealed {
    display: flex;
}

.uix-app .uix-question:has(.uix-radio-card__input[value="No"]:checked)~.uix-reveal[data-uix-reveal-when] {
    display: flex;
}

.uix-app .uix-reveal[data-uix-reveal-when] {
    margin-top: var(--uix-space-5);
}

/* ---------- Radio card ("Radio / Item") ----------
   Figma 129:8019 / 129:8033: a bordered, full-width selectable card, two per
   row. 45px tall, 1px #d9dade border, 10px radius, 12px padding, 12px gap,
   16px control, label 14/20. Selected swaps to a 2px brand border.
   Shared by uploadFiles.aspx and validateIdentity.aspx. */
.uix-app .uix-radio-group {
    display: flex;
    gap: var(--uix-space-3);
    /* 16px */
}

.uix-app .uix-radio-group>* {
    flex: 1 0 0;
    min-width: 0;
}

.uix-app .uix-radio-card {
    display: flex;
    align-items: center;
    gap: var(--uix-space-2);
    /* 12px */
    min-height: 45px;
    margin: 0;
    padding: var(--uix-space-2);
    border: 1px solid var(--uix-color-card-border);
    border-radius: var(--uix-radius-card);
    background: var(--uix-color-surface);
    cursor: pointer;
}

.uix-app .uix-radio-card__input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--uix-color-primary);
    cursor: pointer;
}

.uix-app .uix-radio-card__label {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    line-height: var(--uix-body-sm-line);
    color: var(--uix-color-text);
    cursor: pointer;
}

/* Selected. :has() covers modern browsers; .is-checked is set by
   uix-modernization.js so the state also works without it. */
.uix-app .uix-radio-card:has(.uix-radio-card__input:checked),
.uix-app .uix-radio-card.is-checked {
    border: 2px solid var(--uix-color-primary);
}

.uix-app .uix-radio-card:focus-within {
    box-shadow: var(--uix-focus-ring);
}

@media (max-width: 576px) {
    .uix-app .uix-radio-group {
        gap: 10px;
    }
}

.uix-app .uix-check__label,
.uix-app .uix-radio__label {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    color: var(--uix-color-text);
    cursor: pointer;
}

/* ---------- Document section (title + description + drop zone) ----------
   Figma groups every requested document as: bold 20/26 title (with an optional
   red required marker), a 16/20 description, then the drop zone 16px below.
   Shared by uploadFiles.aspx and validateIdentity.aspx. */
.uix-app .uix-doc-section {
    display: flex;
    flex-direction: column;
}

.uix-app .uix-doc-section+.uix-doc-section {
    margin-top: var(--uix-space-5);
    /* 32px */
}

.uix-app .uix-doc-section__title {
    margin: 0;
    font-family: var(--uix-font-family);
    font-size: var(--uix-h6-size);
    /* 20 */
    line-height: var(--uix-h6-line);
    /* 26 */
    font-weight: 700;
    color: var(--uix-color-text);
}

.uix-app .uix-doc-section__required {
    color: var(--uix-color-danger-accent);
}

.uix-app .uix-doc-section__desc {
    margin: var(--uix-space-1) 0 0;
    /* Figma gap is 4px; 8px is the nearest token step */
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    color: var(--uix-color-text-tertiary);
}

.uix-app .uix-doc-section__desc+.uix-upload,
.uix-app .uix-doc-section__title+.uix-upload {
    margin-top: var(--uix-space-3);
    /* 16px */
}

/* ---------- Upload (drag & drop zone) ----------
   Figma "Drag&Drop" (117:3293), 600x176: translucent input-field fill, 1px
   DASHED #a9a9a9, radius 5, centred column with 8px gaps. The native file input
   is stretched invisibly across the whole panel so the entire zone is clickable
   and still uses the browser's own file picker — no JS is needed to open it. */
.uix-app .uix-upload {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-3);
}

.uix-app .uix-upload__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uix-space-1);
    /* 8px */
    height: 176px;
    padding: var(--uix-space-3) 80px;
    /* Spacing/spacing12 = 80px horizontal */
    border: 1px dashed var(--uix-color-input-border);
    border-radius: var(--uix-radius-input);
    background: var(--uix-color-input-bg);
    text-align: center;
}

.uix-app .uix-upload__drop.is-dragover {
    border-color: var(--uix-color-primary);
    background: rgba(62, 178, 66, 0.08);
    /* --uix-color-primary at 8% */
}

/* The invisible native input covers the panel. Everything else is decorative,
   so clicks fall through to it. */
.uix-app .uix-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.uix-app .uix-upload__drop>*:not(.uix-upload__input) {
    pointer-events: none;
}

.uix-app .uix-upload__icon {
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    color: var(--uix-color-text);
}

.uix-app .uix-upload__drop-title {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-lg-size);
    /* 18 */
    line-height: var(--uix-body-lg-line);
    /* 24 */
    color: #000;
}

.uix-app .uix-upload__drop-or,
.uix-app .uix-upload__hint {
    font-family: var(--uix-font-family);
    font-size: var(--uix-caption-size);
    /* 12 */
    line-height: var(--uix-caption-line);
    /* 16 */
    color: rgba(0, 0, 0, 0.8);
}

/* Chosen-file readout (Figma's "file attached" state, text half). */
.uix-app .uix-upload__selection {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    line-height: var(--uix-body-sm-line);
    font-weight: 700;
    color: var(--uix-color-brand-text);
    word-break: break-all;
}

.uix-app .uix-upload__drop:not(.is-filled) .uix-upload__selection {
    display: none;
}

/* ---------- Action row (two equal buttons) ----------
   Figma 147:44028: 600x56, gap 16, each child flex:1 0 0 -> 292px. */
/* Grid, not flex: the two buttons must be EXACTLY equal halves. With flex the
   children are a <div> wrapper (server-toggled) and a <button>, whose different
   intrinsic sizes leak through and produce unequal widths; `grid-auto-columns:
   1fr` is size-independent. display:none children are not grid items, so the
   row still collapses to one full-width button when Back is hidden. */
.uix-app .uix-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: var(--uix-space-3);
    margin-top: var(--uix-space-6);
    /* 40px (Figma renders 48 on an absolute layer) */
}

.uix-app .uix-actions>* {
    min-width: 0;
}

.uix-app .uix-actions .uix-btn {
    width: 100%;
}

/* Natural-width variant. The base rule above is the wizard's CTA row, where the
   buttons share the column edge to edge; a standalone action (a single "Back" on
   the EF-14 placeholder pages) must keep its own width instead of stretching. */
.uix-app .uix-actions--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.uix-app .uix-actions--inline .uix-btn {
    width: auto;
}

@media (max-width: 576px) {
    .uix-app .uix-actions {
        gap: 10px;
        /* mobile artboard */
    }
}

/* ---------- Contact line ----------
   The Figma frames carry no "Need Help?" card. Where the design fills the right
   side with the hero instead, the firm's contact details (which code-behind
   still populates) are kept as a compact line so the information is not lost. */
.uix-app .uix-contact-line {
    margin-top: var(--uix-space-5);
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    line-height: var(--uix-body-sm-line);
    color: var(--uix-color-text-tertiary);
}

.uix-app .uix-contact-line a {
    color: var(--uix-color-brand-text);
}

.uix-app .uix-upload__message {
    margin: var(--uix-space-3) 0 0;
    font-size: var(--uix-h6-size);
    /* Inherit so the server-set state class on the wrapper (text-success /
     text-danger, applied by uploadFiles.aspx.cs) still drives the color. */
    color: inherit;
}

.uix-app .uix-upload__status {
    display: flex;
    align-items: center;
    gap: var(--uix-space-3);
    margin-top: var(--uix-space-3);
}

/* ---------- Vertical stepper (Step 13 reference) ----------
   Marker 24px; vertical connector line #e0e0e0; three marker states.
   Layout: [24px indicator] gap 12px [content]. */
.uix-app .uix-stepper {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-3);
    /* 16px between items — this is also the break in the
                              connector line (Spacing/400) */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.uix-app .uix-stepper__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--uix-space-2);
    /* 12px → step text starts at x=36 */
}

.uix-app .uix-stepper__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uix-space-1);
    /* 8px */
    align-self: stretch;
}

.uix-app .uix-stepper__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--uix-radius-pill);
    border: 1px solid var(--uix-color-border);
    background: var(--uix-color-surface);
    color: var(--uix-color-text-tertiary);
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    line-height: 1;
}

.uix-app .uix-stepper__marker--done {
    background: var(--uix-color-brand);
    border-color: var(--uix-color-brand);
    color: var(--uix-color-on-primary);
}

/* Brand mark, not a button: Icon/Brand primary stays #00a504 in the newer
   library (only Buttons/Primary moved to #3eb242). */
.uix-app .uix-stepper__marker--current {
    background: var(--uix-color-surface);
    border: 1.5px solid var(--uix-color-brand);
    color: var(--uix-color-brand);
}

.uix-app .uix-stepper__marker--pending {
    background: var(--uix-color-surface);
    border-color: var(--uix-color-border);
    color: var(--uix-color-text-tertiary);
}

.uix-app .uix-stepper__marker svg {
    display: block;
}

.uix-app .uix-stepper__line {
    flex: 1 0 0;
    width: 1px;
    min-height: var(--uix-space-1);
    background: var(--uix-color-border);
    border-radius: 3px;
}

.uix-app .uix-stepper__item:last-child .uix-stepper__line {
    display: none;
}

.uix-app .uix-stepper__content {
    display: flex;
    flex-direction: column;
    gap: var(--uix-space-1);
    /* 8px */
    padding-bottom: var(--uix-space-3);
    /* 16px */
    min-width: 0;
}

.uix-app .uix-stepper__title {
    font-family: var(--uix-font-family);
    font-size: var(--uix-h6-size);
    line-height: var(--uix-h6-line);
    font-weight: var(--uix-h6-weight);
    color: var(--uix-color-text);
}

.uix-app .uix-stepper__description {
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    color: var(--uix-color-text-secondary);
}

/* Per-state text colours (Figma §5.4). The CURRENT step darkens its description
   to primary text; a PENDING step greys BOTH lines out. */
.uix-app .uix-stepper__title--current {
    color: var(--uix-color-brand-text);
}

.uix-app .uix-stepper__item--current .uix-stepper__description {
    color: var(--uix-color-text);
}

.uix-app .uix-stepper__item--pending .uix-stepper__title,
.uix-app .uix-stepper__item--pending .uix-stepper__description {
    color: var(--uix-color-text-tertiary);
}

/* CTA row: 16px below the description, 16px between buttons. */
.uix-app .uix-stepper__actions {
    margin-top: var(--uix-space-3);
    /* 16px */
    display: flex;
    align-items: center;
    gap: var(--uix-space-3);
    flex-wrap: wrap;
}

/* Ghost / text button — used for the "Skip" action next to a primary CTA. */
.uix-app .uix-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--uix-color-text-secondary);
    padding-left: var(--uix-space-2);
    padding-right: var(--uix-space-2);
}

.uix-app .uix-btn--ghost:hover {
    background: var(--uix-color-surface-muted);
    color: var(--uix-color-text);
}

.uix-app .uix-btn--block {
    width: 100%;
}

/* "Need Help?" side card (shared across funding/upload screens). */
.uix-app .uix-help-card__title {
    margin: 0 0 var(--uix-space-2);
    color: var(--uix-color-brand-text);
    font-size: var(--uix-h6-size);
    font-weight: var(--uix-h6-weight);
}

.uix-app .uix-help-card__body {
    margin: 0 0 var(--uix-space-2);
    color: var(--uix-color-text-secondary);
    line-height: 22px;
    font-style: normal;
}

.uix-app .uix-help-card a {
    color: var(--uix-color-brand-text);
    text-decoration: none;
}

.uix-app .uix-help-card a:hover {
    text-decoration: underline;
}

.uix-app .uix-help-card__email i {
    margin-right: var(--uix-space-1);
}

/* ---------- Table skin (GridView + HTML tables) ---------- */
.uix-app .uix-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.uix-app .uix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--uix-color-surface);
    border: 1px solid var(--uix-color-border);
    border-radius: var(--uix-radius-lg);
    overflow: hidden;
    /* Bootstrap's .table sets color/font on the element itself (beats
     inheritance from .uix-page) — pin the tokens here. */
    font-family: var(--uix-font-family);
    color: var(--uix-color-text);
}

.uix-app .uix-table th,
.uix-app .uix-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--uix-color-border);
    text-align: left;
    vertical-align: middle;
}

.uix-app .uix-table th {
    background: var(--uix-color-surface-muted);
    color: var(--uix-color-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.uix-app .uix-table tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   Modal dialog
   Built by uix-modernization.js, not present in any page's markup. Today it
   carries the deposit page; the component itself knows nothing about deposits.
   ========================================================= */

/* The page behind must not scroll while a dialog is open, or a touch scroll
   moves the page instead of the frame. */
.uix-modal-open,
.uix-modal-open body {
    overflow: hidden;
}

.uix-app .uix-modal,
.uix-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    /* centred vertically */
    justify-content: center;
    /* centred horizontally */
    padding: var(--uix-space-4, 16px);
}

.uix-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
}

.uix-modal__window {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    height: min(900px, 100%);
    background: var(--uix-color-surface, #ffffff);
    border-radius: var(--uix-radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
    overflow: hidden;
}

.uix-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uix-space-3, 12px);
    padding: var(--uix-space-3, 12px) var(--uix-space-4, 16px);
    border-bottom: 1px solid var(--uix-color-border, #e0e0e0);
    flex: 0 0 auto;
}

.uix-modal__title {
    margin: 0;
    font-family: var(--uix-font-family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--uix-color-text, #172033);
}

.uix-modal__close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    padding: 0 var(--uix-space-1, 8px);
    cursor: pointer;
    color: var(--uix-color-text-muted, #667085);
}

.uix-modal__close:hover {
    color: var(--uix-color-text, #172033);
}

.uix-modal__close:focus-visible {
    outline: none;
    box-shadow: var(--uix-focus-ring);
    border-radius: var(--uix-radius-sm, 4px);
}

/* The optional way out along the bottom edge. */
.uix-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--uix-space-2) var(--uix-space-3);
    border-top: 1px solid var(--uix-color-border);
    background: var(--uix-color-surface, #ffffff);
    flex: 0 0 auto;
}

/* The frame takes everything the header leaves. */
.uix-modal__frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
}

/* On a phone the dialog is the screen: a 16px gutter around a payment form that
   is already cramped buys nothing. */
@media (max-width: 576px) {

    .uix-app .uix-modal,
    .uix-modal {
        padding: 0;
    }

    .uix-modal__window {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* =========================================================
   Account-number note - Figma 143:37548
   "Inform client to log in with account number", shown under the Start Trading
   actions once the brokerage account exists and its number is known.
   ========================================================= */

.uix-app .uix-account-note {
    display: flex;
    align-items: flex-start;
    gap: var(--uix-space-1);
    /* 8px */
    padding: var(--uix-space-2) var(--uix-space-3);
    background: var(--uix-color-surface-info, #f0f9ff);
    border-radius: var(--uix-radius-lg);
    margin-top: var(--uix-space-3);
}

.uix-app .uix-account-note__icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 2px;
    /* optical alignment with the title's cap height */
    color: var(--uix-color-icon-info, #0da4ea);
}

.uix-app .uix-account-note__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uix-app .uix-account-note__title {
    margin: 0;
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    /* Body/MG/Bold 16/20 */
    line-height: var(--uix-body-line);
    font-weight: 700;
    color: var(--uix-color-text);
}

.uix-app .uix-account-note__text,
.uix-app .uix-account-note__label {
    margin: 0;
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-sm-size);
    /* Body/SM/Regular 14/20 */
    line-height: var(--uix-body-sm-line);
    font-weight: 400;
    color: var(--uix-color-text-secondary);
}

.uix-app .uix-account-note__label {
    margin-top: var(--uix-space-1);
}

/* The number and its copy control sit on one line, the number first. */
.uix-app .uix-account-note__value {
    display: flex;
    align-items: center;
    gap: var(--uix-space-1);
    margin: 0;
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    line-height: var(--uix-body-line);
    font-weight: 700;
    color: var(--uix-color-text);
    /* The number is the one thing on this screen somebody retypes by hand. */
    user-select: all;
    word-break: break-all;
}

.uix-app .uix-account-note__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 2px;
    border: 0;
    background: transparent;
    border-radius: var(--uix-radius-sm);
    color: var(--uix-color-text-tertiary);
    cursor: pointer;
}

.uix-app .uix-account-note__copy:hover {
    color: var(--uix-color-text);
}

.uix-app .uix-account-note__copy:focus-visible {
    outline: none;
    box-shadow: var(--uix-focus-ring);
}

/* Confirmation after a copy - the control is an icon, so without a word nothing
   tells the customer it worked. */
.uix-app .uix-account-note__copied {
    font-size: var(--uix-body-sm-size);
    line-height: var(--uix-body-sm-line);
    font-weight: 400;
    color: var(--uix-color-brand-text, #207c2d);
}