/*
    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.
*/

.sj {
    --sj-ink:    var(--text-color, #1c1c1c);
    --sj-muted:  var(--text-muted, #6c7075);
    --sj-line:   var(--border-color, #e2e2e0);
    --sj-accent: var(--primary-color, #f2762f);
    --sj-card:   var(--body-bg, #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;
}

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

.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 ----------------------------------------------------------------- */

.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-input:focus {
    border-color: var(--sj-accent);
    outline: none;
}

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

/* One company field per row, spaced by the layout rather than by margins on
   each input - the block is built from a list whose length varies. */
#sj-company-fields { display: grid; gap: 13px; }

.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-code {
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

.sj-code-line {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

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

/*
    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.
*/
.sj .iti { display: block; width: 100%; }

#sj-phone-row .sj-secondary,
#sj-code-row .sj-secondary { margin-top: 10px; }

#sj-code-row .sj-code-line .sj-secondary { margin-top: 0; }

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

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

/*
    This theme's dark mode is a class on <body>, not prefers-color-scheme -
    a media query here would fire off the OS while the page stayed light and
    paint dark text on a light card.
*/
body.dark .sj {
    --sj-ink:   #f2f2f2;
    --sj-muted: #a4a9ae;
    --sj-line:  #3a3d41;
    --sj-card:  #202225;
}

body.dark .sj-kinds label:has(input:checked) {
    background: rgba(242, 118, 47, .14);
}

@media (max-width: 480px) {
    .sj-code-line { flex-direction: column; }
    .sj-code-line .sj-secondary { width: 100%; }
}