/*
    The join step after a social login.

    Same design language as /sell/ (controllers/sell/sell.css): one column,
    phone-sized touch targets, tiles rather than a <select> where the choice
    is short and consequential, and colours taken from the template's own
    custom properties so a theme change reaches here too.

    Scoped under .sj because this renders inside flModal, which puts it in a
    container shared with every other modal on the site.

    LOCAL ONLY - see plugins/hybridAuthLogin/view/footer.tpl.
*/

/*
    THESE MUST BE THE THEME'S OWN PROPERTIES, AND THERE IS NO DARK CLASS.

    This file first used --text-color, --text-muted, --primary-color and
    --body-bg. None of those exists in this theme, so every one fell through to
    its light-mode fallback and the form could never go dark - and the
    `body.dark .sj` block that was meant to rescue it could never match either,
    because the theme has no dark class and no dark attribute: lib.js swaps the
    light.css and dark.css <link> elements and sets data-theme on the switcher
    BUTTON.

    All of that was already written down at the top of custom.css, in this
    repo, before I started. I did not read it, tested dark mode by adding
    body.dark by hand, and proved only that my own override worked.

    The properties below are the ones light.css and dark.css both define, so
    they are swapped wholesale with the stylesheet and need no second rule:

        --content-background-color  #ffffff  /  #161616
        --body-font-color           #111111  /  #DADADA
        --highlight-border-color    #d4d4d4  /  #4D4D4D
        --cat-link-color            #777777  /  #989898   (muted text)

    --highlight-border-color rather than --border-color for the field outline:
    --border-color is #F5F5F5 in light, the hairline Alex could not see.

    The accent stays a literal. It is a brand colour and does not flip.
*/
.sj {
    --sj-ink:    var(--body-font-color, #1c1c1c);
    --sj-muted:  var(--cat-link-color, #6c7075);
    --sj-line:   var(--highlight-border-color, #d6d3ce);
    --sj-accent: #f2762f;
    --sj-card:   var(--content-background-color, #ffffff);
    --sj-ok:     #1e8e5a;

    color: var(--sj-ink);
    text-align: left;
}

/*
    `hidden` only works because the UA stylesheet says display:none, and any
    author rule with a display beats it. Every step here is toggled by that
    attribute, so it is settled once rather than from script - the same fix
    sell.css needed for the same reason.
*/
.sj [hidden] { display: none !important; }

.sj-sub {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sj-muted);
}

.sj-notice {
    margin: 0 0 18px;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    background: rgba(242, 118, 47, .09);
    color: var(--sj-ink);
}

/* The box this renders in ------------------------------------------------ */

/*
    flModal PLACES ITS BOX ABSOLUTELY AND RE-PLACES IT ON EVERY SCROLL.

        var setTop = ($(window).height()/2) - base.objHeight + $(window).scrollTop();
        $('#modal_block').stop().animate({marginTop: margin});

    That works for the 230px box it was written for. This form is ~790px in a
    ~680px viewport, so half the viewport minus half the modal is negative, the
    top is placed off-screen, and every scroll animates the box after the page -
    you scroll down and it follows you down. Reported exactly that way.

    Scoped with :has(.sj) so no other modal on the site is touched. The margins
    flModal writes are inline and animated, so they need !important to lose.

    The box is a column: the caption and close stay put and the content scrolls
    inside it, rather than the whole modal scrolling and taking the close button
    off the top.
*/
#modal_block:has(.sj) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
}

#modal_block:has(.sj) > .inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

#modal_block:has(.sj) .modal_content {
    overflow-y: auto;

    /* Stop the page behind from taking over once this bottoms out. */
    overscroll-behavior: contain;
    min-height: 0;
}

/* The registration page ---------------------------------------------------

   In the modal the width is flModal's. On the page there is nothing holding
   it in, and a form of short fields stretched across a desktop is unreadable -
   the eye has to travel the width of the screen between a label and the field
   under it. Same column as /sell/, for the same reason. */

.sj-page {
    max-width: 560px;
    margin: 0 auto;
}

/* Steps ------------------------------------------------------------------ */

.sj-step {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.sj-legend {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sj-muted);
}

.sj-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.sj-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sj-muted);
}

/* An error that belongs to one field, shown under that field. */
.sj-field-err {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #c0392b;
}

.sj-err {
    margin: 4px 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #c0392b;
}

/* The account-type tiles ------------------------------------------------- */

.sj-kinds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sj-kinds label {
    display: block;
    position: relative;
    padding: 15px 16px 15px 46px;
    border: 1.5px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-card);
    cursor: pointer;
    box-sizing: border-box;
}

.sj-kinds input {
    position: absolute;
    top: 17px;
    left: 16px;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--sj-accent);
}

/*
    Belt and braces for the theme's custom-radio rule. The radios carry
    .default so `input[type=radio]:not(.default) + label > span` cannot match
    them, but that rule sizes and borders ANY direct span child of a label, and
    these two are exactly that - so they say plainly what they are.
*/
.sj-kinds label > span {
    width: auto;
    min-width: 0;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    vertical-align: baseline;
}

.sj-kind-t {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.sj-kind-d {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sj-muted);
}

/*
    :has() carries the selected state so the whole tile is the target, not
    just the radio. Browsers without it still show the checked radio, which is
    why the border is the only thing that depends on it.
*/
.sj-kinds label:has(input:checked) {
    border-color: var(--sj-accent);
    background: rgba(242, 118, 47, .07);
}

.sj-kinds label:focus-within {
    outline: 2px solid var(--sj-accent);
    outline-offset: 2px;
}

/* Inputs ----------------------------------------------------------------- */

/*
    SCOPED WITH .sj TO WIN THE CASCADE, NOT FOR TIDINESS.

    style.css styles form fields as

        input[type="text"], input[type="search"], input[type="password"],
        input[type="number"], textarea, select { ... }

    and an attribute selector counts as a class, so those are (0,1,1) and beat
    a bare .sj-input at (0,1,0). The effect was that every field took the
    theme's grey fill, transparent border and 40px height - except the e-mail
    one, because input[type="email"] is not in that list and so kept mine. Half
    the form looked like one design and half like another.

    .sj .sj-input is (0,2,0) and wins outright. The :hover and :focus rules
    below are scoped for the same reason: the theme's are (0,2,1).
*/
.sj .sj-input {
    width: 100%;
    box-sizing: border-box;

    /*
        style.css sets `input[...], textarea, select { height: 40px }`. With
        26px of padding on a border-box that leaves ~11px for 16px text, so
        every field in this modal was clipped through the middle - the country
        select showed the top half of "Greece". Height comes from the content
        here, as it should.
    */
    height: auto;
    font: inherit;
    font-size: 16px;
    padding: 13px 14px;
    border: 1.5px solid var(--sj-line);
    border-radius: 10px;
    background: var(--sj-card);
    color: var(--sj-ink);
}

.sj .sj-input:hover {
    border-color: var(--sj-ink);
}

.sj .sj-input:focus,
.sj .sj-input:focus-visible {
    border-color: var(--sj-accent);
    outline: none;
}

/*
    Chrome paints its own yellow on an autofilled field and ignores
    background-color. The inset shadow is the standard way to repaint it, and
    the long transition keeps it from flashing back.
*/
.sj .sj-input:-webkit-autofill,
.sj .sj-input:-webkit-autofill:hover,
.sj .sj-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sj-ink);
    box-shadow: 0 0 0 1000px var(--sj-card) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/*
    THE THEME SETS appearance:none ON SELECTS.

    That removes the native chevron along with the native styling, so a select
    with no arrow reads as a disabled text box. It is drawn back here as an
    inline SVG background - the same fix the /sell/ selects needed.
*/
.sj .sj-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c7075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.sj-label-2 { margin-top: 14px; }

/*
    Air between fields. A label sat directly under the box above it, so the
    two read as one block and the eye had to work out which label belonged to
    which field. Spacing between siblings rather than a margin on every field,
    so the first one still sits tight under its legend.
*/
.sj .sj-f + .sj-f { margin-top: 15px; }

/* The page heading, centred over the column it belongs to. */
.sj-title {
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/*
    The company block used its own grid gap while the fields elsewhere were
    spaced by .sj-f + .sj-f, so the same markup sat at two different rhythms
    depending on which fieldset it landed in - and a field drawn into the
    address block got both. One mechanism now, the sibling rule above.
*/

.sj-opt {
    font-weight: 400;
    color: var(--sj-muted);
}

/* The company logo ------------------------------------------------------- */

.sj-logo {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sj-logo-box {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    padding: 6px;
    border: 1.5px dashed var(--sj-line);
    border-radius: 12px;
    background: var(--sj-card);
    overflow: hidden;
    text-align: center;
}

.sj-logo-box img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 6px;
}

.sj-logo-empty {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--sj-muted);
}

.sj-logo-side {
    flex: 1 1 auto;
    min-width: 0;
}

/*
    Visually hidden, not display:none - the label is the visible control, and
    a display:none input is unreachable by keyboard and ignored by some
    screen readers.
*/
.sj-logo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sj-logo-btn {
    display: inline-block;
}

.sj-logo-input:focus-visible + .sj-logo-btn {
    outline: 2px solid var(--sj-accent);
    outline-offset: 2px;
}

.sj-logo-side .sj-hint { margin-top: 9px; }

.sj .sj-code {
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

/*
    A field and the button that acts on it, side by side - the phone and its
    "send me a code", the code and its "verify". stretch so the button matches
    the field's height rather than sitting a few pixels short of it.
*/
.sj-line {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.sj-line .sj-input { flex: 1 1 0; min-width: 0; }

/* Inside .iti the input fills the wrapper, which is the flex item. */
.sj-line .iti .sj-input { flex: none; width: 100%; }
.sj-line .sj-secondary { flex: 0 0 auto; }

/*
    The widget fills its container when it stands alone - the profile page and
    the code row both rely on this.
*/
.sj .iti { display: block; width: 100%; }

/*
    ORDER MATTERS HERE AND IT WAS ONLY WORKING BY LUCK.

    This and `.sj .iti` above are both (0,2,0), so whichever comes last wins.
    The general rule used to sit BELOW this one, meaning its width:100% beat
    the width:auto here - and the only reason the field did not overflow is
    that flex-basis takes precedence over width for a flex item, so the
    `flex: 1 1 0` masked it. Remove the flex shorthand one day and the bug
    reappears with no clue why. The general rule now comes first, so the
    contextual one wins on its own merits.

    intlTel wraps the input in .iti, so the flex child is the wrapper, not the
    field.

    width:auto matters as much as the flex: .sj .iti sets width:100% for the
    case where the widget stands alone, and a flex item asking for 100% of the
    line leaves nothing for the button - it pushed it clean off the right edge.
    Basis 0 instead, so the field takes what is left after the button rather
    than claiming the row and overflowing it.
*/
.sj-line .iti {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/*
    intlTel sets the input's left padding inline, so the flag never overlaps
    the digits; nothing here may set padding-left on .phone-field or it will
    fight that. The widget also needs the field to fill its row.
*/


/*
    These were #sj-phone-row and #sj-code-row until the ids gained a mode
    prefix, after which they matched nothing at all. Attribute selectors on
    data-sj, which is what the script hooks on too, so the two cannot drift
    apart again.
*/
.sj [data-sj="sj-code-row"] { margin-top: 12px; }

/* Buttons ---------------------------------------------------------------- */

.sj-go {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 15px 20px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--sj-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.sj-go[disabled] {
    opacity: .38;
    cursor: default;
}

.sj-secondary {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 18px;
    color: var(--sj-ink);
    background: transparent;
    border: 1.5px solid var(--sj-line);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.sj-secondary:hover:not([disabled]) { border-color: var(--sj-accent); }
.sj-secondary[disabled] { opacity: .45; cursor: default; }

.sj-verified {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sj-ok);
}

.sj-verified::before {
    content: '✓';
    margin-right: 7px;
    font-weight: 700;
}

/* Consent checkboxes ------------------------------------------------------ */

.sj-consent { margin: 0 0 14px; }

.sj-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

/*
    class="default" on the input keeps flynaxTpl.customInput() away from it -
    the same opt-out the account-type radios needed. Without it the input is
    moved out of the label and the theme styles every span inside as a radio
    graphic.
*/
.sj-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--sj-accent);
}

/* Agreements, which arrive as the plugin's own markup -------------------- */

.sj .ag_fields { margin: 0 0 10px; }

.sj .ag_fields label {
    font-size: 14px;
    line-height: 1.5;
}

/*
    There was a `body.dark .sj` block here overriding the four tokens. It never
    matched anything: this theme carries no dark class. The tokens at the top
    do the work now, in both themes, with no second rule - which is what the
    note in custom.css says is the only way that works here.
*/

@media (max-width: 480px) {
    /* Side by side needs room the phone does not have. */
    .sj-line { flex-direction: column; }
    .sj-line .sj-secondary { width: 100%; }
}