/*
    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 ---- */
.reg-page__panel--image {
    position: sticky;
    top: 0;
    height: 100dvh;
}

/*
    This route carries its own art; /login keeps the abstract gradient the shell sets.
    Both classes sit on the same element, so the selector is doubled up rather than left to
    tie on specificity and be decided by <link> order alone.

    1600x1800 is the asset's native 0.889 aspect, which is also the panel's aspect at 1366x768,
    1920x1080, 1440p and 4K — so cover crops almost nothing there and the collage stays whole.
*/
.auth-page__panel--image.reg-page__panel--image {
    background-image: url('/images/register-bg.webp');
    /* The artwork's own pale field, not --primary: this art is light, so a solid brand-purple
       fallback would flash a dark block before it paints and mismatch its edges after. */
    background-color: var(--purple-background);
}

/* The shell's scrim darkens the foot of the panel so a photograph stops competing with the form.
   This artwork is already pale and low-contrast; the same gradient just reads as grime on it. */
.auth-page__panel--image.reg-page__panel--image::after {
    content: none;
}

/*
    ---- 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: 34px;
    /* 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 eyebrow. */
.reg-page__subtitle {
    font-size: 14px;
    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: 13px;
    font-weight: var(--fw-600);
    color: var(--text-2);
}

.reg-page__form-col .auth-field__input {
    height: 46px;
    font-family: var(--page-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-1);
}

.reg-page__form-col .auth-field__input::placeholder {
    color: var(--text-4);
}

/* Textareas take their height from rows="", so the 46px above must not pin them. */
.reg-page__form-col .reg-textarea {
    height: auto;
}

/*
    The shell gives inputs no ring — the border swap alone carries focus there. /login adds one,
    so this route does too, or the two would differ on the one state a user looks hardest at.
    Rest states are untouched: no field shows a ring until it is actually focused.
*/
.reg-page__form-col .auth-field__input:focus {
    background-color: var(--white);
    border-color: var(--dark-border);
    box-shadow: var(--page-focus-ring);
}

/* ---- 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.
*/
.reg-eyebrow {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 18px;
    font-family: var(--Josefin-bold);
    font-size: 12px;
    font-weight: var(--fw-700);
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-3);
}

/*
    ---- "(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.
*/
.reg-field-opt {
    margin-left: 4px;
    font-family: var(--page-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-4);
}

/* ---- 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: native chevron suppressed, Iconsax mark laid over the top ---- */
.reg-select-wrap {
    position: relative;
    display: flex;
}

.reg-select {
    /* Every engine's native arrow, gone. background-image:none is the Firefox half. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    /* Clears the chevron so a long option label never runs under it. */
    padding-right: 44px;
    cursor: pointer;
}

/*
    Placeholder vs answer. The empty option is a prompt and reads as one; a chosen value is
    content and reads as content. :has() drives it with no JS; the .reg-select--empty class is
    the fallback the page's script keeps in sync for engines without :has().

    Two rules, not one selector list: an engine that does not understand :has() discards the
    whole rule it appears in, which would take the .reg-select--empty fallback down with it —
    defeating the point of having a fallback.
*/
.reg-select--empty {
    color: var(--text-4);
}

.reg-select:has(option[value=""]:checked) {
    color: var(--text-4);
}

.reg-select option {
    color: var(--text-1);
}

/* pointer-events:none so the mark never eats the click that opens the select. */
.reg-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    color: var(--text-4);
    pointer-events: none;
}

/*
    ---- 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=""; only vertical resize, so the two-column grid can't be broken. */
.reg-textarea {
    height: auto;
    padding: 14px;
    line-height: 1.6;
    resize: vertical;
}

/* ---- Phone: ONE control, not two boxes touching ---- */
/*
    The container owns the border, the radius, and the focus ring. The segments inside own
    nothing — that is the whole point: a code picker and a number that read as one field.
*/
.reg-phone {
    display: flex;
    align-items: stretch;
    height: 46px; /* matches the input height so the phone control sits in the same rhythm */
    background-color: var(--input-bg);
    border: 1px solid transparent;
    border-radius: var(--page-radius-control);
    overflow: hidden;
    transition: border-color 150ms ease;
}

.reg-phone:hover:not(:focus-within) {
    border-color: var(--text-5);
}

/*
    Focus belongs to the whole control, never to one half of it — and it is carried by the
    border alone, matching every other input (see the note on .auth-field__input:focus).
*/
.reg-phone:focus-within {
    background-color: var(--white);
    border-color: var(--dark-border);
    /* The ring belongs to the container, matching the inputs — never to one half of the pair. */
    box-shadow: var(--page-focus-ring);
}

.auth-field--invalid .reg-phone {
    border-color: var(--error-active);
}

.reg-phone__code-wrap {
    position: relative;
    display: flex;
}

/* The divider is a border on the segment, so it spans the full 48px with no extra element. */
.reg-phone__code {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--dark-border);
    border-radius: 0;
    background-color: transparent;
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.reg-phone__code:hover {
    background-color: var(--light-border);
}

.reg-phone__code:focus {
    outline: none;
}

/* The container already shows :focus-within; a second ring inside it would be noise. */
.reg-phone__code:focus-visible {
    background-color: var(--light-border);
}

.reg-phone__code .iti__flag {
    flex: none;
    margin-right: 0;
}

.reg-phone__chevron {
    display: flex;
    color: var(--text-4);
}

.reg-phone__num {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    font-family: var(--page-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-1);
}

.reg-phone__num::placeholder {
    color: var(--text-4);
    font-weight: 500;
}

/* The ring is the container's job. */
.reg-phone__num:focus {
    outline: none;
    box-shadow: none;
}

/* ---- Country-code menu: a real listbox, no Bootstrap ---- */
.reg-phone__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 320px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
    background-color: var(--white);
    border: 1px solid var(--dark-border);
    border-radius: var(--page-radius-control);
    box-shadow: 0 16px 40px -12px rgba(7, 20, 55, 0.24); /* --heading at 24% */

    scrollbar-width: thin;
    scrollbar-color: var(--text-5) transparent;
}

.reg-phone__menu[hidden] {
    display: none;
}

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

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

.reg-phone__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--page-radius-icon);
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    cursor: pointer;
}

/* Hover and keyboard focus land on the same treatment, so both feel like the same control. */
.reg-phone__option:hover,
.reg-phone__option--active {
    background-color: var(--light-border);
}

.reg-phone__option:focus {
    outline: none;
    background-color: var(--light-border);
}

.reg-phone__option[aria-selected="true"] {
    background-color: var(--primary-10);
    color: var(--primary);
}

.reg-phone__option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reg-phone__option-dial {
    flex: none;
    color: var(--text-3);
}

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

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

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

/* ---- Success: the post-submit state, same shell, same type ---- */
.reg-success {
    text-align: center;
}

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

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

.reg-success__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: var(--success-10);
    color: var(--success-active);
}

/* ---- 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 ---- */
@media (max-width: 767px) {
    /*
        The panel gives up its own scroll below 768px. With no image to pin, an internal
        scroller would only nest a second scrollbar and stop the mobile URL bar collapsing —
        the document scrolls instead.
    */
    .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 .auth-submit {
        order: -1;
        width: 100%;
    }

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

    .reg-phone__menu {
        width: min(320px, calc(100vw - 64px));
    }
}

/* ---- 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;
    }
}