/*
 * Registration page styles — its own stylesheet, the same way style_login.css
 * is its own for the sign-in page: register.php is a standalone document, not
 * part of the authenticated app shell.
 *
 * A dedicated file rather than an extension of style_login.css on purpose:
 * this page's layout (a full-viewport two-column split, a feature list, a
 * security panel) is visually a different shape from Sign in and Activate,
 * which share style_login.css's single centred card. Keeping this separate
 * means nothing here can change how those two pages look, and nothing there
 * can leak into this one.
 *
 * Colour tokens are the portal's own, redeclared here exactly as
 * style_login.css redeclares them independently of app.css — every value
 * below is one already approved and used elsewhere (--accent from
 * app/common/brand.php; the pale blue tint is .avbtn-i's own background in
 * app.css; the info/danger tones match style_login.css's own). Nothing here
 * is a new colour.
 */

:root {
    --ink: #1C2433;
    --ink-2: #414D5F;
    --ink-3: #5A6675;
    --ink-4: #7B8794;
    /* Sampled from the illustration asset's own baked-in background
       (registration_image.png corners are #F4FAFE–#F5FBFE, the same tone as
       the sign-in asset). Using that exact tone as the page ground is what
       makes the artwork sit directly on the page with no visible rectangle
       around it — the "blend" is a colour match, not an image edit. Change
       one and you must change the other. */
    --page: #F5FAFE;
    --surface: #FFFFFF;
    --border: #D8DDE4;
    --border-input: #C2C9D4;
    --border-soft: #EDF0F4;
    --navy: #16233A;
    --danger: #B42318;
    --danger-bg: #FAE9E7;
    --danger-border: #ECC8C3;
    --accent-tint: #E8EDF8;
    --info-bg: #EDF2FA;
    --info-border: #C6D6EE;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #16337F; text-decoration: underline; }

.reg-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Logo alone — the sign-in prompt now lives at the bottom of the card,
   matching style_signin.css's own header. */
.reg-header { padding: 18px 44px 0; }
.reg-logo { height: 24px; width: auto; display: block; }

.reg-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 44px 14px;
}

.reg-grid {
    display: flex;
    align-items: flex-start;
    gap: 84px;
    max-width: 1300px;
    width: 100%;
}

/* --------------------------------------------------------------- left column */

.reg-left { flex: 1 1 532px; max-width: 570px; }

/* The only heading on this side — the logo above already carries the Myka
   brand mark, so there is no separate "Myka Practice" line here. Matches
   style_signin.css's own .si-heading exactly, so Register and Sign in read
   as the same product. */
.reg-heading {
    font-size: 30px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--navy); margin: 0; line-height: 1.2;
    /* Breaks the line after "Compliance", matching Sign in. */
    max-width: 475px;
}
.reg-lead {
    font-size: 13px; color: var(--ink-3); margin: 11px 0 0; line-height: 1.6;
    max-width: 440px;
}

/* The artwork's baked-in background is the page background (see --page), so
   this frame has no visible edge — it exists only to size the picture.
   This asset's content nearly fills the source (measured: x 3-91%, y 6-88%),
   unlike Sign in's, so only a light oversize-plus-negative-margin zoom trims
   the thin baked margins; the height cap is what lets the whole page fit a
   1536×864 viewport. The artwork itself is untouched. */
.reg-illustration-frame {
    width: min(100%, 475px);
    aspect-ratio: 1.5 / 1;
    overflow: hidden;
    margin: 13px auto 2px;
}
.reg-illustration {
    display: block;
    width: 110%;
    height: auto;
    margin: -3.5% 0 0 -2%;
}

.reg-security {
    display: flex; align-items: flex-start; gap: 14px;
    margin-top: 11px; padding: 13px 15px;
    background: var(--info-bg); border: 1px solid var(--info-border);
    border-radius: 8px;
}
.reg-security-icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.reg-security-title { font-size: 13px; font-weight: 600; color: var(--navy); }
.reg-security-text {
    font-size: 12px; color: var(--ink-3); margin: 3px 0 0; line-height: 1.55;
}

/* ----------------------------------------------------------------- the card */

.reg-card {
    flex: 1 1 608px; max-width: 646px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
    padding: 34px 38px;
}

.reg-card-title {
    font-size: 25px; font-weight: 700; color: var(--navy); margin: 0;
    letter-spacing: -0.01em;
}
.reg-card-subtitle {
    font-size: 13px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.55;
}

.reg-form { margin-top: 19px; }

.reg-row { display: flex; gap: 19px; }
.reg-row > .reg-field { flex: 1; min-width: 0; }
/* PIN code is a fixed 6 digits — keep it compact next to State rather than
   stretching to match its flex:1 sibling. */
.reg-row > .reg-field.reg-field-pin { flex: 0 0 130px; }

/* Tightened from the original 17px now that the form holds three sections
   worth of fields instead of six flat ones — still a clearly readable gap,
   just not as roomy as a six-field form could afford. */
.reg-field { margin-top: 13px; }
.reg-form > .reg-row:first-of-type > .reg-field,
.reg-form > .reg-field:first-of-type,
.reg-form > .reg-section-title:first-child { margin-top: 0; }

/* Plain heading treatment for the form's three groups (Practice details,
   Practice address, Primary contact) — the same values as app.css's own
   .section-title, redeclared here because this standalone page does not
   load app.css (see this file's own docblock for why). No border, no
   background: "section" is conveyed by the heading alone, so the form
   stays compact. */
.reg-section-title {
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    /* Tighter than app.css's 20px/8px .section-title — this card already has
       three of these, and the address section adds several fields, so a
       leaner gap keeps the page inside a 1536×864 viewport. */
    margin: 15px 0 6px;
}

/* The one-line note under a section title (the practice-vs-client note, and
   the primary-contact clarification) — same small, muted treatment as
   .reg-help, used here outside a .reg-field. */
.reg-form-note { margin-top: 4px; }

.reg-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    margin-bottom: 6px;
}
.reg-req { color: var(--danger); }

.reg-input {
    height: 44px;
    width: 100%;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}
.reg-input::placeholder { color: #97A1AD; }
.reg-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.reg-help { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

.reg-error {
    display: none;
    margin-top: 13px;
    padding: 10px 12px;
    border: 1px solid var(--danger-border);
    background: var(--danger-bg);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--danger);
}

.reg-btn {
    height: 46px;
    width: 100%;
    margin-top: 16px;
    background: var(--accent);
    color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.reg-btn:hover { background: #16337F; }
.reg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-btn[disabled] { background: #93A5DE; cursor: default; }
.reg-btn svg { flex: none; }

.reg-btn-note {
    margin: 10px 0 0; text-align: center; font-size: 11.5px;
    color: var(--ink-3); line-height: 1.6;
}

.reg-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    animation: reg-spin 0.7s linear infinite;
}
@keyframes reg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .reg-spinner { animation: none; }
}

/* --------------------------------------------------------- check-your-email */

.reg-sent-info {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 20px; padding: 12px 14px;
    background: var(--info-bg); border: 1px solid var(--info-border);
    border-radius: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}

.reg-back {
    margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border-soft);
    font-size: 12.5px; color: var(--ink-3); text-align: center;
}
.reg-back a { font-weight: 600; }

/* ------------------------------------------------------------------- footer */

/* Mirrors style_signin.css's .si-footer exactly, so Register and Sign in
   close on the same line. */
.reg-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 20px; flex-wrap: wrap;
    padding: 10px 44px 14px;
    font-size: 12px; color: var(--ink-4);
}
.reg-footer-links { display: flex; align-items: center; gap: 10px; }
.reg-footer-links a { color: var(--ink-3); }
.reg-footer-sep { color: var(--border-input); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
    .reg-grid { gap: 48px; }
    .reg-card { padding: 28px 32px; }
    .reg-heading { font-size: 28px; }
    .reg-illustration-frame { width: min(100%, 400px); }
}

/* Columns collapse: the left column's story moves above the form instead of
   beside it, in the same reading order, rather than being dropped. */
@media (max-width: 960px) {
    .reg-main { padding: 20px 32px 32px; align-items: flex-start; }
    .reg-grid { flex-direction: column; gap: 32px; }
    /* In a column flex container the desktop flex-basis would become a
       HEIGHT basis and pad both boxes with empty space — reset it. */
    .reg-left, .reg-card { flex: 0 0 auto; }
    .reg-left { max-width: 620px; }
    .reg-card { max-width: 620px; width: 100%; }
    .reg-footer { padding: 11px 32px 14px; }
}

@media (max-width: 640px) {
    .reg-header { padding: 20px 20px 0; }
    .reg-main { padding: 16px 20px 28px; }
    .reg-card { padding: 24px 20px; border-radius: 8px; }
    .reg-heading { font-size: 26px; }
    .reg-card-title { font-size: 21px; }
    .reg-illustration-frame { width: 100%; }
    .reg-footer { padding: 10px 20px 16px; justify-content: center; text-align: center; }
    .reg-row { flex-direction: column; gap: 0; }
    /* The first row's two fields both have their top margin zeroed for the
       desktop side-by-side layout — restore it on the second one so the
       stacked mobile layout still has a gap between them. */
    .reg-form > .reg-row:first-of-type > .reg-field:nth-child(2) { margin-top: 13px; }
    /* Same HEIGHT-basis trap as .reg-left/.reg-card above: in a column
       .reg-row, PIN Code's fixed flex-basis would cap its height, not its
       width — reset it so it goes full width like every other stacked field. */
    .reg-row > .reg-field.reg-field-pin { flex: 0 0 auto; }
}

@media (pointer: coarse) {
    .reg-btn { height: 48px; }
    .reg-input { height: 46px; }
}

/*
 * Without JavaScript the form cannot submit, so hide it rather than let a
 * native POST return raw JSON to the browser — the same reasoning
 * style_login.css's .no-js rule states.
 */
.no-js .reg-form { display: none; }

.reg-nojs {
    margin-top: 18px;
    padding: 9px 11px;
    border: 1px solid var(--danger-border);
    background: var(--danger-bg);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--danger);
}
.js .reg-nojs { display: none; }