/* =====================================================================
   Sign up / Sign in — styles
   Mobile first. 768px switches to the desktop layout with tighter side
   padding, 1024px is the full desktop treatment.

   All values are taken from the supplied design:
     background #F9FAFD, brand #3755A9, text #262626, muted #666666,
     field border #DBDCDD, disabled button #BCC7E8,
     field height 48, container 600, square corners.
   ===================================================================== */

:root {
    --sa-bg: #F9FAFD;
    --sa-surface: #FFFFFF;
    --sa-brand: #3755A9;
    --sa-brand-dark: #2C4587;
    --sa-text: #262626;
    --sa-muted: #666666;
    --sa-border: #DBDCDD;
    --sa-disabled: #BCC7E8;
    --sa-error: #F44336;

    /* Password rule states: not met yet vs satisfied. Unmet rules share the
       error colour deliberately — an unmet requirement is the same kind of
       signal as a validation error, and two different reds would read as two
       different meanings. */
    --sa-rule-pending: #F44336;
    --sa-rule-done: #3755A9;
    --sa-rule-static: #666666;

    --sa-field-h: 48px;
    --sa-gap: 9px;
    --sa-container: 600px;
    --sa-pad: 16px;

    --sa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */

/* The background must cover the whole page, as in the design, even though
   this block sits inside the site template's narrower content container.

   1. The page itself: html and body take the colour whenever this page is
      present, which also covers areas outside the template's container and
      the rubber-band overscroll on macOS and iOS.

   2. Full-bleed band: a box-shadow 100vmax wide paints the colour out to both
      edges of the viewport, over any white wrapper of the template, and
      clip-path keeps it from spilling above or below this block. A shadow
      creates no scrollable overflow, so no horizontal scrollbar appears —
      which the common 100vw-width trick does cause on Windows. */
html:has(.sa-page),
body:has(.sa-page) {
    background-color: var(--sa-bg);
}

.sa-page {
    background: var(--sa-bg);
    box-shadow: 0 0 0 100vmax var(--sa-bg);
    clip-path: inset(0 -100vmax);
    min-height: 100vh;
    padding: 32px 0 48px;
    font-family: var(--sa-font);
    color: var(--sa-text);
    -webkit-font-smoothing: antialiased;
}

.sa-card {
    width: 100%;
    max-width: var(--sa-container);
    margin: 0 auto;
    padding: 0 var(--sa-pad);
    box-sizing: border-box;
}

.sa-title {
    margin: 0 0 24px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sa-text);
}

/* ------------------------------------------------- social sign-in buttons */

.sa-social {
    display: flex;
    flex-direction: column;
    gap: var(--sa-gap);
}

.sa-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: var(--sa-field-h);
    padding: 0 16px;

    background: var(--sa-surface);
    border: 1px solid var(--sa-brand);
    border-radius: 0;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--sa-brand);

    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.sa-social-btn:hover:not(:disabled) {
    background: #F2F5FC;
}

.sa-social-btn:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

.sa-social-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.sa-social-btn svg {
    flex: none;
    width: 20px;
    height: 20px;
}

/* Spinner shown while the provider popup is open and the token is verified */
.sa-social-btn.is-busy .sa-social-label {
    visibility: hidden;
}

.sa-social-btn.is-busy::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--sa-brand);
    border-top-color: transparent;
    border-radius: 50%;
    animation: sa-spin .7s linear infinite;
}

.sa-social-btn {
    position: relative;
}

@keyframes sa-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-social-btn.is-busy::after { animation-duration: 2s; }
}

/* ---------------------------------------------------------- "or" divider */

.sa-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--sa-muted);
    font-size: 14px;
}

.sa-divider::before,
.sa-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sa-border);
}

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

.sa-field {
    margin-bottom: 20px;
}

.sa-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--sa-muted);
}

.sa-input {
    width: 100%;
    height: var(--sa-field-h);
    padding: 0 14px;
    box-sizing: border-box;

    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: 0;

    font-family: inherit;
    font-size: 15px;
    color: var(--sa-text);
}

.sa-input::placeholder {
    color: #9A9A9A;
}

.sa-input:focus {
    outline: none;
    border-color: var(--sa-brand);
    box-shadow: inset 0 0 0 1px var(--sa-brand);
}

.sa-input[aria-invalid="true"] {
    border-color: var(--sa-error);
}

/* Password field with the reveal control */
.sa-input-wrap {
    position: relative;
}

.sa-input-wrap .sa-input {
    padding-right: 44px;
}

.sa-reveal {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: var(--sa-field-h);

    display: flex;
    align-items: center;
    justify-content: center;

    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--sa-muted);
}

.sa-reveal:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: -2px;
}

/* The button holds both icons; its aria-pressed state decides which shows.
   The script already flips aria-pressed on every click, so the picture can
   never disagree with what the button announces to screen readers:
     password hidden  (aria-pressed="false") -> open eye: "show"
     password visible (aria-pressed="true")  -> crossed-out eye: "hide" */
.sa-reveal .sa-icon-hide {
    display: none;
}

.sa-reveal[aria-pressed="true"] .sa-icon-show {
    display: none;
}

.sa-reveal[aria-pressed="true"] .sa-icon-hide {
    display: block;
}

/* Phone field. The wrapper owns the visible border and the height; the
   plugin lays out everything inside it. */
.sa-phone {
    position: relative;
    height: var(--sa-field-h);
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    box-sizing: border-box;
}

.sa-phone:focus-within {
    border-color: var(--sa-brand);
    box-shadow: inset 0 0 0 1px var(--sa-brand);
}

/* ---------------------------------------------------------------- consents */

.sa-check {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.5;
}

/* Drawn entirely here instead of relying on the browser's checkbox.

   Site-wide stylesheets often hide native checkboxes to paint their own
   (appearance: none, display: none, opacity: 0, an off-screen position...),
   and this page inherits whatever the theme does. So every property that can
   make the box disappear is set explicitly. The !important flags are scoped
   to this one element and exist only to win over a global theme rule we do
   not control.

   The input itself stays real and focusable, so the form still submits it,
   the label still toggles it, and keyboard and screen-reader users still
   reach it.

   Geometry: 18px square, thin #666666 border, square corners. The design has no checked state; the filled brand-blue box
   with a white tick below is a reasonable default — adjust if needed. */
.sa-page .sa-check input[type="checkbox"] {
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;

    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    clip-path: none !important;

    flex: none;
    box-sizing: border-box;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 3px 0 0;
    padding: 0;

    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    border: 1.5px solid #666666;
    border-radius: 0 !important;

    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.sa-page .sa-check input[type="checkbox"]:hover {
    border-color: var(--sa-brand);
}

.sa-page .sa-check input[type="checkbox"]:checked {
    background-color: var(--sa-brand);
    border-color: var(--sa-brand);
    /* White tick. An SVG background rather than ::after, because pseudo-
       elements on form inputs are not supported consistently across browsers. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* No focus ring. Theme focus styles are switched off here too, since a
   site-wide input:focus rule would otherwise bring a ring back.

   Keyboard focus is still visible — as the brand-coloured border, the same
   as hover — so someone moving through the form with Tab can see where they
   are. Delete the second rule if even that is unwanted. */
.sa-page .sa-check input[type="checkbox"]:focus,
.sa-page .sa-check input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sa-page .sa-check input[type="checkbox"]:focus-visible {
    border-color: var(--sa-brand);
}

/* Error state follows the rest of the form */
.sa-page .has-error .sa-check input[type="checkbox"] {
    border-color: var(--sa-error);
}

.sa-check a {
    color: var(--sa-brand);
    text-decoration: underline;
}

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

.sa-submit {
    width: 100%;
    height: var(--sa-field-h);
    margin-top: 8px;

    background: var(--sa-brand);
    border: 0;
    border-radius: 0;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;

    cursor: pointer;
    transition: background-color .15s ease;
}

.sa-submit:hover:not(:disabled) {
    background: var(--sa-brand-dark);
}

.sa-submit:disabled {
    background: var(--sa-disabled);
    cursor: not-allowed;
}

/* Until the form is complete the button looks disabled but still takes a
   click, which then shows every outstanding message (a real `disabled`
   would swallow the click). Listed after the hover rule above, so hovering
   cannot light up an inactive button. */
.sa-submit.is-inactive,
.sa-submit.is-inactive:hover {
    background: var(--sa-disabled);
    cursor: not-allowed;
}

.sa-submit:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

/* While a request is out: the Font Awesome spinner ("fa fa-spinner fa-spin")
   and "Loading" instead of the label. The button is disabled against a
   second click, but keeps the brand colour — it is working, not
   unavailable. Listed after the disabled rule above, so it wins. */
.sa-submit.is-busy,
.sa-submit.is-busy:hover,
.sa-submit.is-busy:disabled {
    background: var(--sa-brand);
    cursor: progress;
}

.sa-submit .fa-spinner {
    margin-right: 8px;
}

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

.sa-alt {
    margin: 0;
    text-align: center;
    font-size: 15px;
    color: var(--sa-text);
}

.sa-alt a {
    color: var(--sa-brand);
    font-weight: 600;
    text-decoration: none;
}

.sa-alt a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- messages */

/* Errors state what happened and what to do next, so they need room to be
   read rather than a single terse line. */
.sa-message {
    display: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid transparent;
}

.sa-message.is-visible {
    display: block;
}

.sa-message.is-error {
    background: #FEF3F2;
    border-left-color: var(--sa-error);
    color: #B3261E;
}

.sa-message.is-info {
    background: #F1F5FE;
    border-left-color: var(--sa-brand);
    color: var(--sa-brand-dark);
}

/* ==================================================================
   768px and up — desktop layout, side padding simply tightens
   ================================================================== */

@media (min-width: 768px) {

    .sa-page {
        padding: 56px 0 64px;
    }

    .sa-card {
        padding: 0 24px;
    }

    .sa-title {
        margin-bottom: 28px;
        font-size: 40px;
        text-align: center;
    }

    /* Two across, as in the design */
    .sa-social {
        flex-direction: row;
    }

    .sa-social-btn {
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }

    .sa-social-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==================================================================
   1024px and up — full desktop
   ================================================================== */

@media (min-width: 1024px) {

    .sa-page {
        padding: 72px 0 80px;
    }

    .sa-card {
        padding: 0;
    }

    .sa-title {
        font-size: 48px;
        margin-bottom: 32px;
    }
}

/* =====================================================================
   Field messages and live validation
   ===================================================================== */

/* Server-side errors and mismatch warnings. Sits directly under its field. */
.sa-error-text {
    display: none;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sa-error);
}

.sa-error-text.is-visible {
    display: block;
}

/* Password requirements. Each condition is its own span so it can switch
   colour independently as the person types. */
.sa-hint {
    display: none;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sa-rule-static);
}

.sa-hint.is-visible {
    display: block;
}

.sa-rule {
    font-weight: 700;
    color: var(--sa-rule-pending);
    transition: color .15s ease;
}

.sa-rule.is-done {
    color: var(--sa-rule-done);
}

/* Before the first keystroke nothing has failed yet, so the requirements are
   stated neutrally rather than shouted in red. */
.sa-hint.is-untouched .sa-rule {
    color: var(--sa-rule-static);
    font-weight: 600;
}

/* Replaces the whole hint when non-Latin characters are entered. */
.sa-hint.is-latin-error {
    color: var(--sa-error);
}

.has-error .sa-input,
.has-error .sa-phone {
    border-color: var(--sa-error);
}

.has-error .sa-input:focus,
.has-error .sa-phone:focus-within {
    box-shadow: inset 0 0 0 1px var(--sa-error);
}

/* The phone input is wrapped by the plugin, so the border lives on .sa-phone
   and the inner input must not draw its own red line on top of it. */
.has-error .sa-phone .sa-input,
.has-error .sa-phone .iti input {
    border-color: transparent;
}

/* Consent block: the checkbox and its message form one unit */
.sa-consent {
    margin-bottom: 16px;
}

.sa-consent .sa-check {
    margin-bottom: 0;
}

.sa-consent .sa-error-text {
    margin-top: 6px;
    /* Line up with the label text rather than the checkbox: 18px box + 14px gap */
    padding-left: 32px;
}

/* =====================================================================
   intl-tel-input v17 — match the plugin to the design

   The plugin ships a grey flag area with rounded corners; the design wants
   one continuous white field with a thin divider and square corners.

   DO NOT override `position` on .iti__flag-container. The plugin positions
   it absolutely and compensates by setting the input's padding-left inline,
   measured from that container's width. Forcing it into normal flow makes it
   occupy space while the padding stays, which pushes the number out of view.
   ===================================================================== */

.sa-phone .iti {
    display: block;
    width: 100%;
    height: 100%;
}

/* Flag area: white instead of grey, with the divider from the design */
.sa-phone .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
    border-right: 1px solid var(--sa-border);
    padding: 0 10px 0 12px;
}

.sa-phone .iti--separate-dial-code .iti__selected-flag:hover,
.sa-phone .iti--separate-dial-code .iti__selected-flag:focus {
    background-color: #F2F5FC;
}

.sa-phone .iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 8px;
    font-size: 15px;
    color: var(--sa-text);
}

/* The plugin draws a solid triangle; the design has a chevron. Rebuilt from
   two borders rather than replaced with an icon, so it keeps inheriting the
   plugin's own open/closed state classes. */
.sa-phone .iti__arrow {
    width: 7px;
    height: 7px;
    margin-left: 10px;
    margin-top: -3px;
    border: 0;
    border-right: 1.5px solid var(--sa-muted);
    border-bottom: 1.5px solid var(--sa-muted);
    transform: rotate(45deg);
}

.sa-phone .iti__arrow--up {
    margin-top: 3px;
    transform: rotate(-135deg);
    border-right-color: var(--sa-muted);
    border-bottom-color: var(--sa-muted);
}

/* The wrapper already draws the border, so the inner input must not. */
.sa-phone .iti input,
.sa-phone .iti input[type="tel"] {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--sa-text);
    box-sizing: border-box;
}

.sa-phone .iti input:focus {
    outline: none;
    box-shadow: none;
}

.sa-phone .iti input::placeholder {
    color: #9A9A9A;
}

.sa-phone .iti__country-list {
    border-radius: 0;
    border: 1px solid var(--sa-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    font-size: 14px;
}

.sa-phone .iti__country.iti__highlight {
    background-color: #F2F5FC;
}

.sa-phone .iti__dial-code {
    color: var(--sa-muted);
}