/*
 * REA public registration page reference.
 * Strictly scoped to html.ows-register-reference so no other OJS page changes.
 * The native OJS form/action/validation remain intact; only presentation is changed.
 */
html.ows-register-reference,
html.ows-register-reference body {
    background: #f8faf9 !important;
}

html.ows-register-reference body {
    overflow-x: hidden;
}

/*
 * The native register page normally lives inside the public theme's narrow
 * .pkp_structure_main column. The script moves the native form into a shell
 * directly below the header; hide only the now-empty original content region.
 */
html.ows-register-reference .ows_register_original_content {
    display: none !important;
}

html.ows-register-reference .pkp_structure_sidebar,
html.ows-register-reference .pkp_structure_footer_wrapper {
    display: none !important;
}

html.ows-register-reference .ows_register_page_root {
    overflow: visible !important;
}

html.ows-register-reference .page_register {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.ows-register-reference .page_register > :not(.ows_register_shell) {
    display: none !important;
}

html.ows-register-reference .ows_register_shell {
    position: relative;
    left: 50%;
    display: grid;
    grid-template-columns: 45.7% 54.3%;
    width: 100vw;
    max-width: 100vw;
    min-height: 668px;
    margin-left: -50vw;
    box-sizing: border-box;
    background: #f8faf9;
}

/* Exact left-side visual cropped from the supplied reference screenshot. */
html.ows-register-reference .ows_register_story {
    position: relative;
    min-height: 668px;
    overflow: hidden;
    background-image: url('../images/registerReferenceStory.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

html.ows-register-reference .ows_register_story_accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html.ows-register-reference .ows_register_stage {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    min-height: 668px;
    padding: 15px 24px 12px 0;
    box-sizing: border-box;
    overflow: hidden;
    background:
        linear-gradient(142deg, rgba(255,255,255,.86) 0%, rgba(248,251,250,.96) 58%, rgba(246,250,249,.92) 100%);
}

/* Very pale right-side line/feather texture from the same visual language. */
html.ows-register-reference .ows_register_stage::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image: url('../images/loginPageWaveRight.png');
    background-repeat: no-repeat;
    background-size: 760px 560px;
    background-position: right bottom;
}

html.ows-register-reference .ows_register_stage::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -35px;
    bottom: 16px;
    width: 240px;
    height: 430px;
    pointer-events: none;
    opacity: .18;
    transform: rotate(8deg);
    background: url('../images/loginPageLeafLeft.png') no-repeat center / contain;
}

html.ows-register-reference .ows_register_card {
    position: relative;
    z-index: 2;
    width: 504px;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    margin: 0;
    padding: 16px 56px 14px;
    overflow: hidden;
    background: rgba(255,255,255,.985);
    border: 1px solid #e3e8e7;
    border-radius: 8px !important;
    box-shadow: 0 9px 24px rgba(32, 55, 61, .11);
}

html.ows-register-reference .ows_register_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #06666d;
}

html.ows-register-reference .ows_register_intro {
    margin: 0 0 12px;
    text-align: center;
}

html.ows-register-reference .ows_register_logo {
    display: block;
    width: 62px;
    height: auto;
    margin: 0 auto 4px;
}

html.ows-register-reference .ows_register_intro h1 {
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: #07575d !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    border: 0 !important;
}

html.ows-register-reference .ows_register_intro p {
    margin: 0 !important;
    color: #67777d !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

html.ows-register-reference #register,
html.ows-register-reference form.cmp_form.register {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Roboto, Arial, sans-serif !important;
}

html.ows-register-reference #register fieldset,
html.ows-register-reference #register fieldset.fields,
html.ows-register-reference #register .fields {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.ows-register-reference #register fieldset > legend {
    display: none !important;
}

html.ows-register-reference #register .identity .fields > div,
html.ows-register-reference #register fieldset.login .fields > div,
html.ows-register-reference #register .reviewer_interests,
html.ows-register-reference #register .reviewer_nocontext_interests {
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
}

html.ows-register-reference #register .identity .fields > div > label,
html.ows-register-reference #register fieldset.login .fields > div > label,
html.ows-register-reference #register .reviewer_interests > label,
html.ows-register-reference #register .reviewer_nocontext_interests > label {
    display: grid !important;
    grid-template-columns: 95px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.ows-register-reference #register .label {
    margin: 0 !important;
    color: #46545a !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

html.ows-register-reference #register .required {
    color: #bc4e4e !important;
    font-weight: 500 !important;
}

html.ows-register-reference #register input[type='text'],
html.ows-register-reference #register input[type='email'],
html.ows-register-reference #register input[type='password'],
html.ows-register-reference #register select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 29px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: #37474d !important;
    background: #fff !important;
    border: 1px solid #d9e0e1 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 9.6px !important;
    font-weight: 400 !important;
    line-height: 29px !important;
}

html.ows-register-reference #register select {
    padding-right: 28px !important;
}

html.ows-register-reference #register input::placeholder {
    color: #a0aaae !important;
    opacity: 1 !important;
}

html.ows-register-reference #register input[type='text']:focus,
html.ows-register-reference #register input[type='email']:focus,
html.ows-register-reference #register input[type='password']:focus,
html.ows-register-reference #register select:focus {
    border-color: #4d8f91 !important;
    box-shadow: 0 0 0 1px rgba(6, 102, 109, .08) !important;
}

html.ows-register-reference .ows_register_password_wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

html.ows-register-reference .ows_register_password_wrap input {
    padding-right: 34px !important;
}

html.ows-register-reference .ows_register_password_toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    padding: 3px !important;
    transform: translateY(-50%);
    color: #6a787d !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    cursor: pointer;
}

html.ows-register-reference .ows_register_password_toggle svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

html.ows-register-reference #register fieldset.consent,
html.ows-register-reference #register fieldset.reviewer {
    margin: 2px 0 0 !important;
}

html.ows-register-reference #register fieldset.consent .fields,
html.ows-register-reference #register fieldset.reviewer .fields {
    margin: 0 !important;
}

html.ows-register-reference #register .optin,
html.ows-register-reference #register .context_privacy {
    margin: 0 0 5px !important;
    padding: 0 !important;
}

html.ows-register-reference #register .optin > label,
html.ows-register-reference #register .context_privacy > label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #47565b !important;
    font-size: 9.2px !important;
    font-weight: 400 !important;
    line-height: 1.34 !important;
}

html.ows-register-reference #register input[type='checkbox'] {
    flex: 0 0 auto;
    width: 12px !important;
    height: 12px !important;
    margin: 1px 0 0 !important;
    accent-color: #07676d;
}

html.ows-register-reference #register .optin a,
html.ows-register-reference #register .context_privacy a {
    color: #086b70 !important;
    text-decoration: none !important;
}

html.ows-register-reference #register .reviewer_interests {
    display: block !important;
    margin-top: 7px !important;
}

html.ows-register-reference #register .reviewer_interests .label,
html.ows-register-reference #register .reviewer_nocontext_interests .label {
    color: #46545a !important;
}

/* Multi-context registration is kept functional, but compact if present. */
html.ows-register-reference #register fieldset[name='contexts'] {
    margin: 4px 0 7px !important;
}

html.ows-register-reference #register fieldset[name='contexts'] > legend {
    display: block !important;
    margin: 0 0 4px !important;
    color: #46545a !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
}

html.ows-register-reference #register ul.contexts {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html.ows-register-reference #register ul.contexts > li.context {
    margin: 0 0 5px !important;
    padding: 6px 8px !important;
    border: 1px solid #e1e6e6 !important;
    border-radius: 2px !important;
}

html.ows-register-reference #register .recaptcha_wrapper,
html.ows-register-reference #register .altcha_wrapper {
    margin: 7px 0 7px 107px !important;
    width: calc(100% - 107px) !important;
}

html.ows-register-reference #register .recaptcha,
html.ows-register-reference #register .g-recaptcha {
    width: 100% !important;
    min-height: 49px !important;
    overflow: visible !important;
}

html.ows-register-reference #register .g-recaptcha > div {
    transform: scale(.62);
    transform-origin: left top;
}

html.ows-register-reference #register .pkp_form_error,
html.ows-register-reference #register .cmp_notification,
html.ows-register-reference #register .pkp_notification,
html.ows-register-reference #register .error,
html.ows-register-reference #register .alert {
    margin: 0 0 8px !important;
    padding: 7px 9px !important;
    color: #8a3f3f !important;
    background: #fff7f6 !important;
    border: 1px solid #efd0cd !important;
    border-radius: 3px !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

html.ows-register-reference #register .buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

html.ows-register-reference #register .buttons .submit,
html.ows-register-reference #register .buttons a.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    cursor: pointer;
}

html.ows-register-reference #register .buttons .submit {
    color: #fff !important;
    background: #086b70 !important;
    border: 1px solid #086b70 !important;
}

html.ows-register-reference #register .buttons a.login {
    color: #086b70 !important;
    background: #fff !important;
    border: 1px solid #a8c8ca !important;
}

html.ows-register-reference #register .buttons .submit:hover,
html.ows-register-reference #register .buttons .submit:focus-visible {
    background: #075e63 !important;
    border-color: #075e63 !important;
}

html.ows-register-reference #register .buttons a.login:hover,
html.ows-register-reference #register .buttons a.login:focus-visible {
    background: #f5fbfb !important;
}

html.ows-register-reference .ows_register_account_note {
    margin: 10px 0 0 !important;
    color: #69787d !important;
    font-size: 9.4px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

html.ows-register-reference .ows_register_account_note a {
    color: #086b70 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* ORCID/extra native registration controls remain usable if enabled. */
html.ows-register-reference #register .orcidProfile,
html.ows-register-reference #register [class*='orcid'] {
    font-size: 9.5px !important;
}

@media (max-width: 1100px) {
    html.ows-register-reference .ows_register_shell {
        grid-template-columns: 40% 60%;
    }

    html.ows-register-reference .ows_register_card {
        width: min(504px, calc(60vw - 28px));
        padding-left: 42px;
        padding-right: 42px;
    }
}

@media (max-width: 860px) {
    html.ows-register-reference .ows_register_shell {
        display: block;
        min-height: calc(100vh - 54px);
    }

    html.ows-register-reference .ows_register_story {
        display: none;
    }

    html.ows-register-reference .ows_register_stage {
        min-height: calc(100vh - 54px);
        justify-content: center;
        padding: 18px 16px 30px;
    }

    html.ows-register-reference .ows_register_card {
        width: min(504px, 100%);
        max-width: 100%;
        padding: 20px 34px 18px;
    }
}

@media (max-width: 560px) {
    html.ows-register-reference .ows_register_card {
        padding-left: 20px;
        padding-right: 20px;
    }

    html.ows-register-reference #register .identity .fields > div > label,
    html.ows-register-reference #register fieldset.login .fields > div > label,
    html.ows-register-reference #register .reviewer_interests > label,
    html.ows-register-reference #register .reviewer_nocontext_interests > label {
        grid-template-columns: 1fr !important;
        row-gap: 4px !important;
    }

    html.ows-register-reference #register .recaptcha_wrapper,
    html.ows-register-reference #register .altcha_wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/*
 * OWS Dashboard 3.10.603.0 - registration-only fullscreen shell.
 * The user requested the public masthead to be removed on Register and the
 * registration composition to occupy the full browser viewport. These rules
 * remain strictly scoped to html.ows-register-reference, so every other
 * frontend route keeps the existing public header and layout unchanged.
 */
html.ows-register-reference,
html.ows-register-reference body {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.ows-register-reference .pkp_structure_head {
    display: none !important;
}

html.ows-register-reference .pkp_structure_page {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.ows-register-reference .ows_register_shell {
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
}

html.ows-register-reference .ows_register_story,
html.ows-register-reference .ows_register_stage {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

@media (max-width: 860px) {
    html.ows-register-reference .ows_register_shell,
    html.ows-register-reference .ows_register_stage {
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
}

/*
 * OWS Dashboard 3.10.604.0 - expand Register across the complete right pane.
 * Keep the left visual at its existing width, but remove the unused pale area
 * to the right by letting the registration card itself fill the whole second
 * grid column. This remains scoped only to the Register route.
 */
html.ows-register-reference .ows_register_stage {
    padding: 0 !important;
    background: #fff !important;
}

html.ows-register-reference .ows_register_stage::before,
html.ows-register-reference .ows_register_stage::after {
    display: none !important;
}

html.ows-register-reference .ows_register_card {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding-left: clamp(56px, 7vw, 118px) !important;
    padding-right: clamp(56px, 7vw, 118px) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 1100px) {
    html.ows-register-reference .ows_register_card {
        width: 100% !important;
        max-width: none !important;
        padding-left: 42px !important;
        padding-right: 42px !important;
    }
}

@media (max-width: 860px) {
    html.ows-register-reference .ows_register_stage {
        padding: 0 !important;
    }

    html.ows-register-reference .ows_register_card {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 20px 34px 18px !important;
    }
}

@media (max-width: 560px) {
    html.ows-register-reference .ows_register_card {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/*
 * OWS Dashboard 3.10.605.0 - widen the native Register form itself.
 * The right pane already fills all remaining viewport width.  This revision
 * expands the actual field area within that pane and uses the reference's
 * desktop label/input row composition.  No visual blue outline is added; the
 * user's blue markup only indicated the desired form footprint.
 */
@media (min-width: 861px) {
    html.ows-register-reference .ows_register_card {
        padding-left: clamp(34px, 3.4vw, 58px) !important;
        padding-right: clamp(34px, 3.4vw, 58px) !important;
    }

    html.ows-register-reference #register,
    html.ows-register-reference form.cmp_form.register {
        width: min(100%, 900px) !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * OJS themes differ slightly here: some put the input inside <label>,
     * others render the input beside <label>.  Grid the field container and
     * flatten the label so both structures produce the same two-column row.
     */
    html.ows-register-reference #register .identity .fields > div,
    html.ows-register-reference #register fieldset.login .fields > div,
    html.ows-register-reference #register .reviewer_interests,
    html.ows-register-reference #register .reviewer_nocontext_interests {
        display: grid !important;
        grid-template-columns: 150px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 18px !important;
        width: 100% !important;
        max-width: none !important;
    }

    html.ows-register-reference #register .identity .fields > div > label,
    html.ows-register-reference #register fieldset.login .fields > div > label,
    html.ows-register-reference #register .reviewer_interests > label,
    html.ows-register-reference #register .reviewer_nocontext_interests > label {
        display: contents !important;
    }

    html.ows-register-reference #register .identity .fields > div .label,
    html.ows-register-reference #register fieldset.login .fields > div .label,
    html.ows-register-reference #register .reviewer_interests .label,
    html.ows-register-reference #register .reviewer_nocontext_interests .label {
        grid-column: 1 !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html.ows-register-reference #register .identity .fields > div > input,
    html.ows-register-reference #register .identity .fields > div > select,
    html.ows-register-reference #register fieldset.login .fields > div > input,
    html.ows-register-reference #register fieldset.login .fields > div > select,
    html.ows-register-reference #register .identity .fields > div .ows_register_password_wrap,
    html.ows-register-reference #register fieldset.login .fields > div .ows_register_password_wrap,
    html.ows-register-reference #register .reviewer_interests > input,
    html.ows-register-reference #register .reviewer_nocontext_interests > input,
    html.ows-register-reference #register .reviewer_interests .ows_register_password_wrap,
    html.ows-register-reference #register .reviewer_nocontext_interests .ows_register_password_wrap {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html.ows-register-reference #register .identity .fields > div .description,
    html.ows-register-reference #register fieldset.login .fields > div .description,
    html.ows-register-reference #register .identity .fields > div .error,
    html.ows-register-reference #register fieldset.login .fields > div .error {
        grid-column: 2 !important;
    }

    html.ows-register-reference #register .recaptcha_wrapper,
    html.ows-register-reference #register .altcha_wrapper {
        margin-left: 168px !important;
        width: calc(100% - 168px) !important;
    }
}

/* The reference has one Register heading only; suppress a native duplicate
 * if a theme injects one directly inside the native form. */
html.ows-register-reference .ows_register_card #register > h1,
html.ows-register-reference .ows_register_card #register > .page_title {
    display: none !important;
}


/*
 * OWS Dashboard 3.10.606.0 - compact the desktop Register form and let the
 * white registration pane overlap the left story image slightly.  The shell
 * stays fullscreen; only the Register route is affected.
 */
@media (min-width: 861px) {
    /* Pull the whole right pane 64px over the image while keeping its right
     * edge flush with the viewport. */
    html.ows-register-reference .ows_register_stage {
        position: relative !important;
        z-index: 3 !important;
        width: calc(100% + 64px) !important;
        margin-left: -64px !important;
    }

    /* Slightly tighten the form vertically without changing OJS behavior. */
    html.ows-register-reference .ows_register_intro {
        margin-bottom: 8px !important;
    }

    html.ows-register-reference .ows_register_logo {
        width: 56px !important;
        margin-bottom: 2px !important;
    }

    html.ows-register-reference .ows_register_intro h1 {
        margin-bottom: 2px !important;
        font-size: 22px !important;
    }

    html.ows-register-reference #register .identity .fields > div,
    html.ows-register-reference #register fieldset.login .fields > div,
    html.ows-register-reference #register .reviewer_interests,
    html.ows-register-reference #register .reviewer_nocontext_interests {
        margin-bottom: 5px !important;
    }

    html.ows-register-reference #register input[type='text'],
    html.ows-register-reference #register input[type='email'],
    html.ows-register-reference #register input[type='password'],
    html.ows-register-reference #register select {
        height: 27px !important;
        line-height: 27px !important;
    }

    html.ows-register-reference #register .optin,
    html.ows-register-reference #register .context_privacy {
        margin-bottom: 3px !important;
    }

    html.ows-register-reference #register .reviewer_interests {
        margin-top: 4px !important;
    }

    html.ows-register-reference #register .recaptcha_wrapper,
    html.ows-register-reference #register .altcha_wrapper {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    html.ows-register-reference #register .buttons {
        margin-top: 6px !important;
    }

    html.ows-register-reference #register .buttons .submit,
    html.ows-register-reference #register .buttons a.login {
        height: 28px !important;
        line-height: 28px !important;
    }

    html.ows-register-reference .ows_register_account_note {
        margin-top: 7px !important;
    }
}


/*
 * OWS Dashboard 3.10.609.0 - set the desktop Register card width to 70% while keeping the 20px image overlap.
 * overlap the story image.  Previous 3.10.606.0 shifted the stage itself,
 * while the full-height card still painted the complete right viewport, so
 * the visual result was effectively unchanged.  This revision moves the
 * actual card, removes its 100vh minimum, and gives it a compact card height.
 */
@media (min-width: 861px) {
    html.ows-register-reference .ows_register_stage {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 22px 0 !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    html.ows-register-reference .ows_register_card {
        width: 70% !important;
        max-width: none !important;
        min-height: clamp(620px, 76vh, 710px) !important;
        height: auto !important;
        margin: 0 0 0 -20px !important;
        padding: 24px 54px 22px !important;
        overflow: visible !important;
        background: #fff !important;
        border: 1px solid #dfe7e6 !important;
        border-radius: 8px !important;
        box-shadow: 0 14px 34px rgba(28, 58, 61, .13) !important;
    }

    html.ows-register-reference .ows_register_card::before {
        display: block !important;
        height: 4px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    html.ows-register-reference .ows_register_intro {
        margin-bottom: 12px !important;
    }

    html.ows-register-reference .ows_register_logo {
        width: 52px !important;
        margin-bottom: 1px !important;
    }

    html.ows-register-reference .ows_register_intro h1 {
        margin-bottom: 2px !important;
        font-size: 21px !important;
    }

    html.ows-register-reference #register,
    html.ows-register-reference form.cmp_form.register {
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        margin: 0 auto !important;
    }

    /* Theme-independent field-row hooks added by the Register JS. */
    html.ows-register-reference #register .ows_register_field_row {
        display: grid !important;
        grid-template-columns: 150px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 18px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    html.ows-register-reference #register .ows_register_field_row > label.ows_register_field_label.ows_register_label_contains_control {
        display: contents !important;
    }

    html.ows-register-reference #register .ows_register_field_row > label.ows_register_field_label:not(.ows_register_label_contains_control) {
        grid-column: 1 !important;
        width: auto !important;
        margin: 0 !important;
    }

    html.ows-register-reference #register .ows_register_field_row .label {
        grid-column: 1 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    html.ows-register-reference #register .ows_register_field_row > input,
    html.ows-register-reference #register .ows_register_field_row > select,
    html.ows-register-reference #register .ows_register_field_row > .ows_register_password_wrap,
    html.ows-register-reference #register .ows_register_field_row > label.ows_register_field_label > input,
    html.ows-register-reference #register .ows_register_field_row > label.ows_register_field_label > select,
    html.ows-register-reference #register .ows_register_field_row > label.ows_register_field_label > .ows_register_password_wrap {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html.ows-register-reference #register input[type='text'],
    html.ows-register-reference #register input[type='email'],
    html.ows-register-reference #register input[type='password'],
    html.ows-register-reference #register select {
        height: 29px !important;
        line-height: 29px !important;
    }

    html.ows-register-reference #register fieldset.consent,
    html.ows-register-reference #register fieldset.reviewer {
        margin-top: 5px !important;
    }

    html.ows-register-reference #register .optin,
    html.ows-register-reference #register .context_privacy {
        margin-bottom: 3px !important;
    }

    html.ows-register-reference #register .recaptcha_wrapper,
    html.ows-register-reference #register .altcha_wrapper {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    html.ows-register-reference #register .buttons {
        margin-top: 8px !important;
    }

    html.ows-register-reference .ows_register_account_note {
        margin-top: 7px !important;
    }
}

/*
 * OWS Dashboard 3.10.610.0
 * Register form typography/control sizing aligned with the public-site scale.
 * Layout/width/20px overlap from 3.10.609.0 is intentionally unchanged.
 */
@media (min-width: 861px) {
    html.ows-register-reference .ows_register_intro h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    html.ows-register-reference .ows_register_intro p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    html.ows-register-reference #register .ows_register_field_row {
        margin-bottom: 9px !important;
    }

    html.ows-register-reference #register .label,
    html.ows-register-reference #register .ows_register_field_row .label,
    html.ows-register-reference #register .ows_register_field_label {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    html.ows-register-reference #register input[type='text'],
    html.ows-register-reference #register input[type='email'],
    html.ows-register-reference #register input[type='password'],
    html.ows-register-reference #register select {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        line-height: 38px !important;
    }

    html.ows-register-reference #register select {
        padding-right: 32px !important;
    }

    html.ows-register-reference .ows_register_password_wrap input {
        padding-right: 40px !important;
    }

    html.ows-register-reference .ows_register_password_toggle {
        right: 7px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        border-radius: 4px !important;
    }

    html.ows-register-reference .ows_register_password_toggle svg {
        width: 17px !important;
        height: 17px !important;
    }

    html.ows-register-reference #register fieldset.consent,
    html.ows-register-reference #register fieldset.reviewer {
        margin-top: 7px !important;
    }

    html.ows-register-reference #register .optin,
    html.ows-register-reference #register .context_privacy {
        margin-bottom: 5px !important;
    }

    html.ows-register-reference #register .optin > label,
    html.ows-register-reference #register .context_privacy > label {
        gap: 8px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    html.ows-register-reference #register input[type='checkbox'] {
        width: 15px !important;
        height: 15px !important;
        margin-top: 1px !important;
    }

    html.ows-register-reference #register .reviewer_interests,
    html.ows-register-reference #register .reviewer_nocontext_interests {
        margin-top: 9px !important;
        margin-bottom: 9px !important;
    }

    html.ows-register-reference #register .recaptcha_wrapper,
    html.ows-register-reference #register .altcha_wrapper {
        min-height: 62px !important;
        margin-top: 8px !important;
        margin-bottom: 9px !important;
    }

    html.ows-register-reference #register .g-recaptcha > div {
        transform: scale(.78) !important;
        transform-origin: left top !important;
    }

    html.ows-register-reference #register .buttons {
        gap: 14px !important;
        margin-top: 12px !important;
    }

    html.ows-register-reference #register .buttons .submit,
    html.ows-register-reference #register .buttons a.login {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        line-height: 40px !important;
    }

    html.ows-register-reference .ows_register_account_note,
    html.ows-register-reference .ows_register_account_note a {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}

/*
 * OWS Dashboard 3.10.611.0
 * Tighten the vertical gap below reCAPTCHA and keep a single Register action.
 * Scoped to the public Register page only.
 */
@media (min-width: 861px) {
    html.ows-register-reference #register .recaptcha_wrapper {
        height: 62px !important;
        min-height: 62px !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    html.ows-register-reference #register .g-recaptcha {
        height: 62px !important;
        min-height: 62px !important;
        overflow: visible !important;
    }

    html.ows-register-reference #register .altcha_wrapper {
        margin-bottom: 0 !important;
    }

    html.ows-register-reference #register .buttons {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        clear: none !important;
        margin-top: 4px !important;
        padding-top: 0 !important;
    }

    html.ows-register-reference #register .buttons a.login,
    html.ows-register-reference #register .buttons a[href*='login'] {
        display: none !important;
    }

    html.ows-register-reference #register .buttons .submit {
        width: 100% !important;
        max-width: none !important;
    }

    html.ows-register-reference .ows_register_account_note {
        margin-top: 8px !important;
    }
}


/* Fallback for narrower breakpoints: the account Login link remains below the form. */
html.ows-register-reference #register .buttons a.login,
html.ows-register-reference #register .buttons a[href*='login'] {
    display: none !important;
}

/*
 * OWS Dashboard 3.10.612.0
 * Hard-remove every secondary action from the Register button row.
 * Keep only the real submit control; the small account Login link below remains.
 */
html.ows-register-reference #register .buttons > :not(.submit) {
    display: none !important;
}

html.ows-register-reference #register .buttons {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

html.ows-register-reference #register .buttons > .submit {
    width: 100% !important;
    max-width: none !important;
}



/*
 * OWS Dashboard 3.10.613.0
 * Definitively keep only the Register submit control in the action row.
 * OJS renders Register first; hiding every following direct child also covers
 * themes that restyle the Login action without the native .login class.
 */
html.ows-register-reference #register .buttons > :nth-child(n+2) {
    display: none !important;
}

html.ows-register-reference #register .buttons.ows_register_single_action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

html.ows-register-reference #register .buttons.ows_register_single_action > :first-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}


/*
 * OWS Dashboard 3.10.614.0
 * Final Register-only Login-button removal. The JS now removes Login controls
 * regardless of theme markup; these rules provide a no-flash CSS fallback.
 * The small "Already have an account? Login" link is explicitly restored.
 */
html.ows-register-reference #register .buttons a.login,
html.ows-register-reference #register .buttons a[href*="/login"],
html.ows-register-reference #register .buttons button.login,
html.ows-register-reference #register .buttons input.login,
html.ows-register-reference #register .buttons [role="button"].login {
    display: none !important;
}

html.ows-register-reference #register .buttons.ows_register_single_action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

html.ows-register-reference #register .buttons.ows_register_single_action > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

html.ows-register-reference .ows_register_account_note a[data-ows-register-account-login="1"] {
    display: inline !important;
}


/*
 * OWS Dashboard 3.10.615.0
 * Center the single Register button and enlarge it, while softening the hard
 * boundary between the left story image and the right register pane with a
 * fade-out at the image edge.
 */
html.ows-register-reference .ows_register_story::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(72px, 9vw, 132px);
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(248,250,249,0) 0%, rgba(248,250,249,.72) 62%, rgba(248,250,249,.98) 100%);
}

@media (min-width: 861px) {
    html.ows-register-reference #register .buttons,
    html.ows-register-reference #register .buttons.ows_register_single_action {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
        margin-top: 10px !important;
    }

    html.ows-register-reference #register .buttons > :not(.submit),
    html.ows-register-reference #register .buttons.ows_register_single_action > :not(.submit) {
        display: none !important;
    }

    html.ows-register-reference #register .buttons .submit,
    html.ows-register-reference #register .buttons.ows_register_single_action > .submit,
    html.ows-register-reference #register .buttons.ows_register_single_action > :first-child {
        flex: 0 1 auto !important;
        grid-column: auto !important;
        width: clamp(280px, 46%, 380px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/*
 * OWS Dashboard 3.10.616.0
 * واقعی‌سازی دو تغییر خواسته‌شده:
 * 1) دکمه Register در مرکز ردیف قرار بگیرد و عرضش بیشتر شود.
 * 2) انتهای سمت راست تصویرِ پنل چپ با فید نرم به زمینه سفید محو شود.
 */
html.ows-register-reference .ows_register_story {
    isolation: isolate;
}

html.ows-register-reference .ows_register_story::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: clamp(110px, 11vw, 180px) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(
        90deg,
        rgba(248, 250, 249, 0) 0%,
        rgba(248, 250, 249, .22) 28%,
        rgba(248, 250, 249, .58) 56%,
        rgba(248, 250, 249, .86) 78%,
        rgba(248, 250, 249, 1) 100%
    ) !important;
}

@media (min-width: 861px) {
    html.ows-register-reference #register .buttons,
    html.ows-register-reference #register .buttons.ows_register_single_action {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        gap: 0 !important;
        text-align: center !important;
    }

    html.ows-register-reference #register .buttons > :not(.submit),
    html.ows-register-reference #register .buttons.ows_register_single_action > :not(.submit) {
        display: none !important;
    }

    html.ows-register-reference #register .buttons .submit,
    html.ows-register-reference #register .buttons.ows_register_single_action > .submit,
    html.ows-register-reference #register .buttons.ows_register_single_action > :first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 1 auto !important;
        width: clamp(320px, 54%, 430px) !important;
        min-width: 320px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}