/*
    Register — the standalone split-screen registration routes.
    Shared verbatim by /register/individual and /register/organisation: the two pages differ
    only in their field content, so every rule here serves both. A rule that would apply to
    one and not the other does not belong in this file.

    Imports the shared chrome from components/auth-shell.css (grid, image panel, font vars,
    field recipe, button recipe, links, banner, motion). This file holds ONLY what is unique
    to the register routes: the scrolling form panel, the sections, the two-column rows, the
    selects + Iconsax chevron, the textareas, the unified phone control, and the footer.

    Off-theme by design: no Metronic bundles, no Bootstrap, no jQuery. intlTelInput.css is
    linked by the pages for its flag sprite ONLY (no plugin JS).
*/

/* ---- Form panel: scrolls on its own so the image never scrolls away under it ---- */
/*
    This form is 12 fields tall and will not fit a viewport. The panel owns the scroll, so the
    document itself never scrolls and the sticky image beside it stays put. A decorative image
    sliding away under a long form is worse than no image.
*/
/*
    Flex + auto margins on the column, NOT align-content:center. Centring a scroll container's
    content splits the overflow across BOTH ends, and the top half is unreachable — scrollTop
    cannot go negative — so the logo and heading get clipped away for good on a short viewport.
    Auto margins absorb only POSITIVE free space: they centre a short form and collapse to 0
    the moment it overflows, which keeps the top of the column reachable at every height.
*/
.reg-page__panel--form {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100dvh;
    overflow-y: auto;
    padding: 48px 64px;

    /* A thin thumb on a transparent track: enough to show the panel is scrollable without
       drawing a hard line down the seam between the form and the image. */
    scrollbar-width: thin;
    scrollbar-color: var(--text-5) transparent;
}

.reg-page__panel--form::-webkit-scrollbar {
    width: 6px;
}

.reg-page__panel--form::-webkit-scrollbar-track {
    background: transparent;
}

.reg-page__panel--form::-webkit-scrollbar-thumb {
    background-color: var(--text-5);
    border-radius: 3px;
}

/* Wider than login's 360px: this form has two-column rows and needs the room. Same left-margin
   discipline though — the column is capped, never stretched to the panel. */
.reg-page__form-col {
    width: 100%;
    max-width: 520px;
    /* Centres a short form, collapses to 0 when it overflows — see the panel note above. */
    margin-block: auto;
    /* The column keeps its natural height; the panel scrolls. Without this the flex item
       would be compressed to fit instead of overflowing into the scroller. */
    flex-shrink: 0;
}

/* ---- Image panel: pinned while the form panel scrolls beside it (both register routes) ---- */
.reg-page__panel--image {
    position: sticky;
    top: 0;
    height: 100dvh;
}

/*
    Split-screen brand-panel treatment, shared by BOTH register routes (individual + organisation).
    Each route carries its own body modifier (`.reg-page--individual` / `.reg-page--organisation`)
    and every rule below lists both, so the two screens read as one family. The duplicated modifier
    lists are the consolidation flag: merge them into a single `.reg-page--split` modifier + a shared
    _AuthBrandPanel partial in a later pass.
*/

/* Brand panel LEFT, form RIGHT (matches /login). Form stays first in DOM for tab order. */
.reg-page--individual .reg-page__panel--image,
.reg-page--organisation .reg-page__panel--image { grid-column: 1; grid-row: 1; }
.reg-page--individual .reg-page__panel--form,
.reg-page--organisation .reg-page__panel--form { grid-column: 2; grid-row: 1; }

/* Shared skew favours the first column; with the brand panel first, give the form (col 2) the room. */
@media (max-width: 1023px) {
    .reg-page--individual .auth-page__grid,
    .reg-page--organisation .auth-page__grid { grid-template-columns: 0.7fr 1fr; }
}

/* Base image for a .reg-page panel carrying no split modifier (none today); both routes override
   the artwork below. Kept as the shell's no-scrim base. */
.reg-page .auth-page__panel--image.reg-page__panel--image {
    background-color: var(--purple-background);
}
.reg-page .auth-page__panel--image.reg-page__panel--image::after { content: none; }

/*
    ⚑ REPLICATED FROM /login (login-page.css .login-page__brand-*): same image, layout, and type,
    values kept 1:1 so the two auth screens don't drift. Consolidate both into a shared
    _AuthBrandPanel partial + shared CSS in a later pass.

    Brand panel: NO scrim. --button-pressed is the base behind it, so a slow/failed image never
    flashes white; background-size:cover / center / no-repeat are inherited from the shell. White
    text sits directly on the image (contrast flag). The layout is shared by both routes; the artwork
    is per-route (individual vs organisation) in the two rules that follow.
*/
.reg-page--individual .auth-page__panel--image.reg-page__panel--image,
.reg-page--organisation .auth-page__panel--image.reg-page__panel--image {
    background-color: var(--button-pressed);
    display: flex;
    flex-direction: column;
    padding: 44px 52px;
    color: var(--white);
}

.reg-page--individual .auth-page__panel--image.reg-page__panel--image {
    background-image: url('/images/register-as-an-individual.png');
}

.reg-page--organisation .auth-page__panel--image.reg-page__panel--image {
    background-image: url('/images/register-as-an-organisation.png');
}

/* Headline block pinned to the bottom; the footer row sits under it. */
.reg-page__brand-body { margin-top: auto; }

.reg-page__brand-headline {
    font-family: var(--page-font-heading);
    font-weight: 600;
    font-size: 46px;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 20px;
}

.reg-page__brand-lede {
    font-family: var(--page-font-body);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82); /* --white @ 82% */
    margin: 0 0 28px;
}

.reg-page__brand-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.reg-page__brand-points li {
    position: relative;
    padding-left: 20px;
    font-family: var(--page-font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9); /* --white @ 90% */
}

.reg-page__brand-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-30);
}

/* Footer: one horizontal row — copyright + legal, each hugging its content. */
.reg-page__brand-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16); /* --white @ 16% */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.reg-page__brand-copy {
    width: fit-content;
    font-family: var(--page-font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6); /* --white @ 60% */
    margin: 0;
}

.reg-page__brand-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: fit-content;
}

.reg-page__brand-legal a {
    font-family: var(--page-font-body-strong);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72); /* --white @ 72% */
    transition: color 150ms ease;
}

.reg-page__brand-legal a:hover { color: var(--white); }

.reg-page__brand-legal a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); /* --white @ 40% */
    border-radius: var(--page-radius-link);
}

/* ---- Top-right helper; scrolls with the form (not pinned) ---- */
.reg-page__help {
    align-self: flex-end;
    margin: 0 0 -8px;
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
}

.reg-page__help-link {
    font-size: 14px;
    font-weight: var(--fw-600);
    margin-left: 5px;
}

/*
    ---- Header rhythm ----
    The logo gap is scoped to this route, not changed in the shell: auth-shell.css sets 40px
    and login relies on that. Overriding it here keeps the two pages independent.
*/
.reg-page__form-col .auth-page__logo {
    margin-bottom: 28px;
}

/*
    Type is matched to /login field-for-field so the two routes read as one family — same face,
    same sizes, same weights. Scoped to .reg-page__form-col (this route has no page-level class
    on <body>), which also keeps /login independent of anything changed here.

    The accent span keeps --primary: it carries its own colour rule, so the heading's colour
    here never reaches it.
*/
.reg-page__form-col .auth-page__title {
    font-family: var(--Times-italic);
    font-style: italic;
    font-size: 24px;
    /* 500, not 600: this face ships a single 400 weight, so 600 smears a faux-bold out of it. */
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--heading);
    margin-bottom: 8px;
}

/* One uniform colour, 32px down to the first section. */
.reg-page__subtitle {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-3);
    max-width: 380px;
    margin-bottom: 32px;
}

/* ---- Field type: identical recipe to /login ---- */
.reg-page__form-col .auth-field__label {
    font-size: 14px;
    font-weight: var(--fw-600);
    color: var(--text-2);
}

/* The input recipe itself now comes from the shared components/auth-shell.css default —
   nothing left here differs from it. */

/* Textareas take their height from rows="", so the 46px above must not pin them. */
.reg-page__form-col .reg-textarea {
    height: auto;
}
/* ---- Sections ---- */
/*
    No divider rules between sections. The eyebrow plus this gap does the separating; a
    hairline on top of that is a belt with suspenders.

    40px, and it is load-bearing: it must stay clearly larger than the 20px row-to-row gap
    below, or the sections stop reading as sections. The moment the two meet, the eyebrows
    become decoration and this collapses into one undifferentiated column of twelve inputs.
    The 2:1 against the row gap is the whole mechanism — tighten rows before touching this.
*/
.reg-section {
    border: 0;
    padding: 0;
    margin: 0 0 40px;
    min-width: 0; /* a fieldset defaults to min-content and would blow out the grid rows */
}

.reg-section:last-of-type {
    margin-bottom: 0;
}

/*
    --Josefin-bold, not --page-font-body-strong with font-weight:700. Josefin is loaded as ONE
    FAMILY PER WEIGHT (see the @font-face block in core/utilities.css), so the SemiBold family
    has no 700 face to reach — font-weight alone would make the browser synthesize a faux-bold
    and smear the letterforms at the exact size where the tracking needs them crisp. The Bold
    family is a real woff2; the numeric weight then just matches the face.

    text-3, not text-4: this is a section header a reader is meant to read. text-4 is for
    placeholders and decoration.
*/

/*
    ---- "(optional)" marker ----
    The mirror of .auth-field__req. Required is the rule on these forms and optional is the
    exception, so the exception is what gets marked — quietly. A token rather than inline muted
    text, so it can't drift from the asterisk it sits opposite.
    text-4 is legitimate here: this is a field-state marker, not meaningful copy.
*/

/* ---- Rows ---- */
/*
    row-gap is the field-to-field gap for the two fields inside a row once they stack (below
    768px, where the row collapses to one column). Declared on the base rather than in the
    media query so the stacked and side-by-side cases can't drift apart.
*/
.reg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 18px;
    margin-bottom: 20px;
}

.reg-row:last-child {
    margin-bottom: 0;
}

.reg-row--single {
    grid-template-columns: 1fr;
}

/* ---- Selects: bootstrap-select, straight from the theme ----
    This route now loads the Metronic bundle (see _AuthLayout), and plugins.bundle.css already
    contains bootstrap-select. Everything that used to sit here was a hand-written copy of that
    plugin's own stylesheet: the toggle box, the menu, its position and z-index, the item padding
    and hover, the search box, the empty-results row, even a replacement chevron drawn as an SVG
    mask. All of it was written because this route deliberately loaded no theme. It does now, so
    the picker on this form is the same picker the internal portal renders, from one stylesheet.

    Two rules survive, both below: the wrapper width, which the plugin sets inline and the theme
    cannot know, and the invalid state, which the theme has no rule for. */

/* The plugin generates this wrapper in place of the native <select> and gives it an inline auto
   width; the field cell wants it full-width. */
.reg-page__form-col .bootstrap-select { width: 100% !important; }

/* A failed picker has to look failed. The theme styles the toggle as a button and has no invalid
   state for it, so without this a validation error here would be invisible. The colour is the
   theme's own danger, the value it uses on .form-control.is-invalid. */
.auth-field--invalid .bootstrap-select > .dropdown-toggle { border-color: #F64E60; }

/* container:'body' wraps the menu in .bs-container appended to <body>; keep it above the page. */
.bs-container {
    z-index: 1060;
}

/*
    ---- Field errors: no reserved space ----
    The shell's .auth-field__error reserves ~18px under every field so validation can't shift
    the form. That trade is right for login's two fields; across twelve it is ~216px of dead
    air and the real reason the rows read apart. So this route reserves nothing: the slot has
    zero height until it has something to say.

    Removing the reservation is only safe because validation runs on BLUR (see the page's
    script) — errors arrive one at a time as the user leaves each field, never mid-word. The
    one moment several open at once is submit, which is exactly when the page should react.

    0fr -> 1fr is the height transition that works on auto-height content: it animates over
    180ms so the eye tracks the push instead of losing its place. display:none would snap.
*/
.reg-field-error {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 180ms var(--page-ease);
}

/* Clips the message while collapsed, so it is neither shown nor read at rest. */
.reg-field-error > * {
    overflow: hidden;
    min-height: 0;
}

.reg-field-error.is-visible {
    grid-template-rows: 1fr;
}

/*
    No-JS / server-rendered safety net: asp-validation-for fills the message on a failed post,
    and without this it would open no slot and be invisible. Kept as its OWN rule — folded into
    the selector list above, an engine without :has() would drop .is-visible along with it.
*/
.reg-field-error:has(.reg-field-error__text:not(:empty)) {
    grid-template-rows: 1fr;
}

/* The only gap that exists, and only while the slot is open. */
.reg-field-error__text {
    display: block;
    padding-top: 6px;
    font-family: var(--page-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 18px;
    color: var(--error-active);
}

/* ---- Textareas ---- */
/* Height comes from rows="" / min-height; only vertical resize, so the two-column grid can't be broken. */
.reg-page__form-col .reg-form .reg-textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

/* ---- Phone: intl-tel-input, the same control as the Contacts Add/Edit form ---- */
/*
    The widget wraps the input in .iti — let it fill the field so the flag + dial code + number
    read as one box. The input keeps its .form-control styling (border, radius, 46px, focus).
    The country dropdown (list + search) is styled entirely by intlTelInput.css.
*/
.reg-page__form-col .iti {
    display: block;
    width: 100%;
}

.reg-page__form-col .iti .form-control {
    width: 100%;
}

/*
    Filled flag/dial-code segment, matching the internal Contacts/Leads phone control
    (partner.css's own .iti--show-selected-dial-code .iti__selected-flag rule) instead of this
    route's default plain-white look. --input-bg is this page's own token for a filled, borderless
    field (same role Metronic's form-control-solid plays internally) — reused here rather than
    the vendor's own rgba(0,0,0,.05) fill so it stays on this page's palette.

    height:100% is load-bearing, not decoration: the vendor CSS's own .iti__selected-flag carries
    no height rule, so without it the segment sizes to its ~24px of padding and pins to the TOP of
    the 44px control, leaving bare space below it instead of a full-height box (same defect
    partner.css's own comment documents for the internal control).

    Selector specificity (.reg-page__form-col + .iti--show-selected-dial-code + .iti__selected-flag,
    3 classes) is deliberately higher than the vendor rule it overrides (2 classes) — intlTelInput.css
    loads AFTER this file, so load order alone would let the vendor's rgba fill win a tied rule.
*/
.reg-page__form-col .iti--show-selected-dial-code .iti__selected-flag {
    height: 100%;
    background-color: var(--input-bg);
    border-radius: 8px 0 0 8px;
}

/* ---- Footer ---- */
.reg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
}

.reg-footer__note {
    margin: 0;
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
}

.reg-footer__note .auth-link {
    font-size: 14px;
    font-weight: var(--fw-600);
    margin-left: 4px;
}

/* ---- Success: the post-registration confirmation — a plain, centred, full-page state ---- */
.reg-success {
    text-align: center;
}

/* Success.svg is a self-contained composed badge (its own tinted rings + tick), so it renders on
   its own at 88px — no tinted tile, or the circles would double up. */
.reg-success__badge {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
}

.reg-success__title {
    font-family: var(--page-font-heading);
    font-size: 28px;
    font-weight: var(--fw-700);
    letter-spacing: -0.01em;
    color: var(--heading);
    margin: 0 0 12px;
}

.reg-success__text {
    font-family: var(--page-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-3);
    margin: 0 0 28px;
}

/*
    Submitted state: drop the split screen for a plain, centred confirmation. Hides the brand panel,
    collapses the grid, centres the form column + its logo, and hides the help link. Only restyles
    what the existing @Model.Submitted branch renders — the route/handler + TempData are unchanged.
*/
/* !important: this state modifier must beat the brand-panel rules, which sit at higher
   specificity (`.reg-page--individual .auth-page__panel--image.reg-page__panel--image`). */
.reg-page--success .auth-page__panel--image { display: none !important; }
.reg-page--success .auth-page__grid { grid-template-columns: 1fr !important; }
.reg-page--success .reg-page__panel--form { grid-column: 1 !important; }
.reg-page--success .reg-page__help { display: none; }
.reg-page--success .reg-page__form-col { text-align: center; max-width: 460px; }
.reg-page--success .reg-page__form-col .auth-page__logo { margin-bottom: 64px; }

/* ---- Motion: per section, not per field ---- */
/*
    Twelve staggered fields is a wave, not a reveal — so the stagger steps by section and the
    fields inside each one arrive together.
*/
.auth-page__logo,
.auth-page__title,
.reg-page__subtitle,
.auth-page__banner,
.reg-section,
.reg-footer {
    animation: auth-rise 300ms var(--page-ease) backwards;
}

.auth-page__logo                 { animation-delay: 0ms; }
.auth-page__title                { animation-delay: 30ms; }
.reg-page__subtitle              { animation-delay: 60ms; }
.auth-page__banner               { animation-delay: 90ms; }
.reg-section:nth-of-type(1)      { animation-delay: 90ms; }
.reg-section:nth-of-type(2)      { animation-delay: 120ms; }
.reg-section:nth-of-type(3)      { animation-delay: 150ms; }
.reg-footer                      { animation-delay: 180ms; }

/* ---- Responsive ---- */
/*
    Shared (both register routes): the auth-shell hides the image at ≤767 for organisation, so its
    form panel gives up its own scroll and the document scrolls there. Individual has its own 860
    block below (its brand panel hides at 860).
*/
@media (max-width: 767px) {
    .reg-page__panel--form {
        height: auto;
        min-height: 100dvh;
        overflow-y: visible;
        padding: 40px 24px;
    }

    /* The form starts at the top here rather than floating in a centred column. */
    .reg-page__form-col {
        margin-block: 0;
    }

    /* row-gap (18px) comes from the base rule — the stack just needs the single column. */
    .reg-row {
        grid-template-columns: 1fr;
    }

    /* The action leads on mobile; the secondary journey follows it. */
    .reg-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .reg-footer .btn {
        order: -1;
        width: 100%;
    }

    .reg-footer__note {
        text-align: center;
    }
}

/* Both split routes: brand panel hidden below 860px (not stacked); form takes the whole width. */
@media (max-width: 860px) {
    .reg-page--individual .auth-page__panel--image,
    .reg-page--organisation .auth-page__panel--image { display: none; }
    .reg-page--individual .auth-page__grid,
    .reg-page--organisation .auth-page__grid { grid-template-columns: 1fr; }

    /* Form releases its own scroll (no image to pin), grids collapse, footer stacks. */
    .reg-page--individual .reg-page__panel--form,
    .reg-page--organisation .reg-page__panel--form {
        grid-column: 1;
        height: auto;
        min-height: 100dvh;
        overflow-y: visible;
        padding: 40px 24px;
    }

    .reg-page--individual .reg-page__form-col,
    .reg-page--organisation .reg-page__form-col { margin-block: 0; }
    .reg-page--individual .reg-row,
    .reg-page--individual .reg-row--triple,
    .reg-page--organisation .reg-row,
    .reg-page--organisation .reg-row--triple { grid-template-columns: 1fr; }
    .reg-page--individual .reg-page__help,
    .reg-page--organisation .reg-page__help { right: 24px; }

    .reg-page--individual .reg-footer,
    .reg-page--organisation .reg-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .reg-page--individual .reg-footer .btn,
    .reg-page--organisation .reg-footer .btn { order: -1; width: 100%; }
    .reg-page--individual .reg-footer__note,
    .reg-page--organisation .reg-footer__note { text-align: center; }
}

/* ---- Motion is dropped; the states themselves stay ---- */
@media (prefers-reduced-motion: reduce) {
    .auth-page__logo,
    .auth-page__title,
    .reg-page__subtitle,
    .auth-page__banner,
    .reg-section,
    .reg-footer {
        animation-name: auth-fade;
    }

    /* Instant is the correct answer here: the message still appears, it just doesn't travel. */
    .reg-field-error {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   /register/individual only — Poppins + design-system inputs
   Scoped to the .reg-page body class, which /register/individual carries and
   /register/organisation does NOT, so the sibling route is untouched. Mirrors the
   /login treatment so the two read as one family.
   ═══════════════════════════════════════════════════════════ */
.reg-page {
    --page-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body-strong: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* Wider column so the General Information row can hold three fields across. */
.reg-page .reg-page__form-col {
    max-width: 700px;
}

/* Header matched to /login: Poppins, 40px title, 24px logo gap. The accent span keeps --primary. */
.reg-page .reg-page__form-col .auth-page__logo {
    margin-bottom: 24px;
}

.reg-page .reg-page__form-col .auth-page__title {
    font-family: var(--page-font-heading);
    font-style: normal;
    font-size: 33px;
    /* 600 to match /login's title (its spec'd 700 was dialled to 600); "Individual" keeps --primary. */
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-top: 24px;
    margin-bottom: 6px;
}

/* Country / City / Time Zone across one row. Collapses to a single column on phones (the base
   .reg-row stack rule can't win against this two-class selector, so it is overridden explicitly). */
.reg-page .reg-row--triple {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .reg-page .reg-row--triple {
        grid-template-columns: 1fr;
    }
}


/*
    Section dividers — a hairline above every fieldset, including the first (which sets it off
    from the header block). With the eyebrows removed this is what separates the sections. The
    shared 40px section margin is trimmed here so line + padding don't stack into too tall a band.
*/
.reg-page .reg-section {
    /* Separator hairlines removed — the spacing below alone separates the sections. */
    padding-top: 4px;
    margin-bottom: 28px;
}

.reg-page .reg-section:last-of-type {
    margin-bottom: 0;
}

/* Radius/height/colour/states/underline-reset now come from the shared .btn.btn-primary.btn-lg
   (components/buttons.css). This route keeps its own slightly larger 15px label — !important
   since buttons.css's own font-size is !important too (needed there to beat Metronic reliably). */
.reg-page .btn.btn-lg {
    font-size: 15px !important;
}

/* Return-to-sign-in line, under its own rule below the footer row. Both split routes. */
.reg-page--individual .reg-signin,
.reg-page--organisation .reg-signin {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--dark-border);
    text-align: left;
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
}

.reg-page--individual .reg-signin .auth-link,
.reg-page--organisation .reg-signin .auth-link {
    font-size: 14px;
    font-weight: var(--fw-600);
    margin-left: 5px;
}

/* ═══ Partner Program Agreement modal (Submit-time gate; scroll-to-enable accept) ═══
   Self-contained overlay — this route deliberately loads no Bootstrap/modal-base.css, so the
   modal is styled here on the page's own tokens. The read gate mirrors the /agreement login page. */
.reg-agree-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.reg-agree-modal[hidden] { display: none; }

.reg-agree-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.reg-agree-modal__dialog {
    position: relative;
    width: min(1120px, 96%);
    height: min(92vh, 1040px);
    max-height: 92vh;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reg-agree-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--dark-border);
}
.reg-agree-modal__title {
    font-size: 18px;
    font-weight: var(--fw-600);
    color: var(--heading);
    margin: 0;
}
.reg-agree-modal__close {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: var(--text-3);
    padding: 0 4px;
}
.reg-agree-modal__close:hover { color: var(--heading); }

.reg-agree-modal__progress { height: 3px; background: var(--dark-border); }
.reg-agree-modal__progress-fill {
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width .15s ease;
}

.reg-agree-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}
.reg-agree-modal__body p { margin: 0 0 14px; }
.reg-agree-modal__body .agreement-doc__heading {
    font-size: 15px;
    font-weight: var(--fw-600);
    color: var(--heading);
    margin: 20px 0 8px;
}

.reg-agree-modal__foot {
    border-top: 1px solid var(--dark-border);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reg-agree-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.reg-agree-modal__hint { font-size: 12.5px; color: var(--text-3); }

body.reg-agree-open { overflow: hidden; }