/*
 * Registration: one page, light, numbered sections.
 *
 * The form is not run through jQuery Steps here - the blade marks it
 * data-wizard="false", so login.js skips the step machinery and keeps only the
 * validation. That means the `h3` / `fieldset` pairs are no longer a wizard
 * contract; they are just section headings and the fields under them.
 *
 * The palette is greys plus one accent. Nothing else carries colour.
 */

:root {
    --rg-ink: #111827;
    --rg-ink-soft: #374151;
    --rg-muted: #6b7280;
    --rg-faint: #9ca3af;
    --rg-line: #e5e7eb;
    --rg-line-soft: #f3f4f6;
    --rg-bg: #f8fafc;
    --rg-accent: #2563eb;
    --rg-accent-dark: #1d4ed8;
    --rg-accent-soft: #eff6ff;
    --rg-ok: #059669;
}

/*
 * The auth layout paints html with a gradient and pads its content column. This
 * page is plain and light, so the padding goes and body repaints the background -
 * body covers the viewport, which is what hides the gradient underneath.
 *
 * The container's own 15px padding is left alone: it is what the row inside it
 * hangs its negative margins on, and taking it away pushes the page sideways.
 */
body.reg-page {
    background: var(--rg-bg) !important;
}

.reg-flush {
    padding: 0 !important;
}

.reg-flush > .row { margin: 0; }

/*
 * The layout pins the logo to the top-left corner of the viewport and the
 * sign-in / language links to the top-right, both in white. Beside a centred
 * column that leaves them stranded at the far edges, and white is invisible on a
 * light page. The blade lays the same pieces out itself, so these are hidden.
 */
.reg-flush > .row > .tw-absolute { display: none; }

/* ------------------------------------------------------------------ the page */

.reg-page-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 24px 88px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--rg-ink);
}

/* ---------------------------------------------------------------- top bar */

.reg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 52px;
}

.reg-logo img {
    display: block;
    height: 34px;
    width: auto;
}

.reg-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}

.reg-topbar-right > a {
    font-weight: 550;
    color: var(--rg-muted);
    text-decoration: none;
}

.reg-topbar-right > a:hover { color: var(--rg-ink); }

/* The language picker is the layout's own partial, and its trigger is white. */
.reg-topbar details { margin: 0 !important; }

.reg-topbar summary {
    font-size: 14px !important;
    font-weight: 500;
    color: var(--rg-muted) !important;
    cursor: pointer;
}

.reg-topbar summary:hover { color: var(--rg-ink) !important; }

.reg-masthead {
    padding: 0 0 40px;
}

.reg-masthead h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.7px;
    line-height: 1.2;
    color: var(--rg-ink);
}

.reg-masthead p {
    margin: 10px 0 0;
    max-width: 560px;
    font-size: 15px;
    color: var(--rg-muted);
}

.reg-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rg-faint);
}

/* --------------------------------------------------------------- a section */

.reg-section {
    padding: 34px 0 6px;
    border-top: 1px solid var(--rg-line);
}

.reg-section:first-of-type { border-top: 0; padding-top: 0; }

.reg-section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
}

.reg-section-num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rg-faint);
}

.reg-section-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.2px;
    color: var(--rg-ink);
}

.reg-section-head p {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--rg-muted);
}

/* ------------------------------------------------------------------ fields */

.reg-page-inner .row { margin-left: -8px; margin-right: -8px; }

.reg-page-inner .row > [class^="col-"],
.reg-page-inner .row > [class*=" col-"] { padding-left: 8px; padding-right: 8px; }

.reg-page-inner .form-group { margin-bottom: 18px; }

.reg-page-inner .form-group > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--rg-ink-soft);
}

/*
 * Bootstrap welds input-group-addon to the field as a bordered box. The markup
 * stays - the validator's errorPlacement looks for `.input-group` - but the
 * addon is dropped, because a plain bordered field reads cleaner than an
 * icon in every single one.
 */
.reg-page-inner .input-group {
    display: block;
    position: relative;
    width: 100%;
}

.reg-page-inner .input-group > .input-group-addon { display: none; }

/*
 * The border needs !important: vendor.css carries bootstrap, whose .form-control
 * border wins here whatever the specificity, and whose
 * `.input-group .form-control:last-child` squares off the left corners.
 */
.reg-page-inner .form-control,
.reg-page-inner .input-group > .form-control:first-child,
.reg-page-inner .input-group > .form-control:last-child {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    font-size: 15px;
    color: var(--rg-ink);
    background: #fff;
    border: 1px solid var(--rg-line) !important;
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .13s ease, box-shadow .13s ease;
}

.reg-page-inner .form-control:hover { border-color: #d3d8e0 !important; }

.reg-page-inner .form-control:focus {
    border-color: var(--rg-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.reg-page-inner .form-control::placeholder { color: var(--rg-faint); }

/* select2 swaps the select for its own box, which needs the same treatment. */
.reg-page-inner .select2-container { width: 100% !important; }

.reg-page-inner .select2-container--default .select2-selection--single {
    height: 44px;
    background: #fff;
    border: 1px solid var(--rg-line) !important;
    border-radius: 8px;
}

.reg-page-inner .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 42px;
    padding-left: 13px;
    line-height: 42px;
    font-size: 15px;
    color: var(--rg-ink);
}

.reg-page-inner .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

.reg-page-inner input[type="file"] {
    width: 100%;
    padding: 11px 13px;
    font-size: 14px;
    color: var(--rg-muted);
    background: #fff;
    border: 1px dashed var(--rg-line);
    border-radius: 8px;
}

.reg-page-inner label.error {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #dc2626;
}

.reg-page-inner .form-control.error { border-color: #dc2626 !important; }

/* ------------------------------------------------------------ nature picker */

.reg-nature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reg-nature-card {
    position: relative;
    display: block;
    margin: 0;
    padding: 16px 44px 16px 17px;
    font-weight: 400;
    background: #fff;
    border: 1px solid var(--rg-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .13s ease, box-shadow .13s ease;
}

.reg-nature-card:hover { border-color: #cbd5e1; }

.reg-nature-card.is-on {
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 1px var(--rg-accent);
}

.reg-nature-card:focus-within {
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* The radio still carries the value and the required rule; it is just not drawn. */
.reg-nature-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.reg-nature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 9px;
    font-size: 13px;
    color: var(--rg-faint);
    vertical-align: baseline;
    transition: color .13s ease;
}

.reg-nature-card.is-on .reg-nature-ico { color: var(--rg-accent); }

.reg-nature-text { display: block; }

.reg-nature-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--rg-ink);
}

.reg-nature-blurb {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--rg-muted);
}

/* An outline circle that fills in when the card is chosen. */
.reg-nature-tick {
    position: absolute;
    top: 17px;
    right: 16px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: transparent;
    background: transparent;
    border: 1.5px solid var(--rg-line);
    border-radius: 50%;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}

.reg-nature-card.is-on .reg-nature-tick {
    color: #fff;
    background: var(--rg-accent);
    border-color: var(--rg-accent);
}

/* ---------------------------------------------- what the choice switches on */

.reg-nature-side {
    margin-top: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--rg-line);
    border-radius: 10px;
}

.reg-nature-side h5 {
    margin: 0 0 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--rg-faint);
}

.reg-nature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reg-nature-list.is-hidden { display: none; }

.reg-nature-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rg-ink-soft);
}

.reg-nature-list li i {
    flex: 0 0 12px;
    margin-top: 4px;
    font-size: 9px;
    color: var(--rg-ok);
}

.reg-nature-note {
    margin: 13px 0 0;
    padding-top: 12px;
    font-size: 13px;
    color: var(--rg-muted);
    border-top: 1px solid var(--rg-line-soft);
}

.reg-page-inner .terms_condition { color: var(--rg-accent); }

/* ------------------------------------------------------------------- submit */

.reg-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--rg-line);
}

.reg-submit-note {
    font-size: 14px;
    color: var(--rg-muted);
}

.reg-submit-note a {
    font-weight: 550;
    color: var(--rg-accent);
}

.reg-submit button {
    height: 46px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--rg-accent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .13s ease, transform .1s ease;
}

.reg-submit button:hover { background: var(--rg-accent-dark); }

.reg-submit button:active { transform: translateY(1px); }

/* ------------------------------------------------------------ small screens */

@media (max-width: 767px) {
    .reg-page-inner { padding: 20px 18px 56px; }

    .reg-topbar { padding-bottom: 34px; }

    .reg-logo img { height: 28px; }

    .reg-masthead { padding-bottom: 30px; }

    .reg-masthead h1 { font-size: 25px; }

    .reg-section { padding-top: 28px; }

    .reg-section-head { gap: 12px; margin-bottom: 18px; }

    .reg-section-head h2 { font-size: 17px; }

    .reg-nature-grid { grid-template-columns: minmax(0, 1fr); }

    .reg-submit { display: block; }

    .reg-submit button { width: 100%; margin-bottom: 14px; }

    .reg-submit-note { text-align: center; }
}