/* JFST Portal Theme v6
   Compact masthead, premium footer, and polished auth pages. */

:root {
    --jfst-navy: #0d1d4d;
    --jfst-deep: #13235d;
    --jfst-teal: #08758a;
    --jfst-cyan: #74e5ef;
    --jfst-cyan-soft: #9af1f5;
    --jfst-gold: #e7b85a;
    --jfst-text: #16324a;
    --jfst-border: #e4eaf0;
}

/* ===== Overall page structure ===== */
html,
body {
    min-height: 100%;
}

.pkp_structure_page {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}

.pkp_structure_content {
    flex: 1 0 auto !important;
    border-left-color: var(--jfst-border) !important;
    border-right-color: var(--jfst-border) !important;
    background: #fff !important;
}

/* ===== Compact premium masthead ===== */
#headerNavigationContainer.jfst_portal_header {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background-color: var(--jfst-navy) !important;
    background-image:
        radial-gradient(circle at 7% 26%, rgba(0, 217, 236, .22) 0, rgba(0, 217, 236, 0) 29%),
        radial-gradient(circle at 91% 8%, rgba(232, 184, 90, .08) 0, rgba(232, 184, 90, 0) 25%),
        linear-gradient(112deg, #076a7e 0%, #10245b 35%, #1a2d70 66%, #353550 100%) !important;
    box-shadow: 0 10px 28px rgba(9, 24, 61, .16) !important;
}

#headerNavigationContainer.jfst_portal_header::before,
#headerNavigationContainer.jfst_portal_header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#headerNavigationContainer.jfst_portal_header::before {
    opacity: .11;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 58px 58px;
}

#headerNavigationContainer.jfst_portal_header::after {
    opacity: .22;
    background-image:
        radial-gradient(circle at 8% 20%, rgba(134,239,247,.78) 0 1.5px, transparent 2px),
        radial-gradient(circle at 31% 72%, rgba(134,239,247,.72) 0 1.5px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(134,239,247,.72) 0 1.5px, transparent 2px),
        radial-gradient(circle at 89% 76%, rgba(231,184,90,.55) 0 1.5px, transparent 2px),
        linear-gradient(16deg, transparent 49%, rgba(120,232,241,.20) 50%, transparent 51%),
        linear-gradient(164deg, transparent 49%, rgba(255,255,255,.14) 50%, transparent 51%);
    background-size: auto, auto, auto, auto, 255px 145px, 330px 190px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}

#headerNavigationContainer .pkp_site_nav_toggle,
#headerNavigationContainer .pkp_navigation_primary_row {
    display: none !important;
}

#headerNavigationContainer .jfst_portal_inner {
    position: relative !important;
    z-index: 2 !important;
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 26px 0 28px !important;
    box-sizing: border-box !important;
}

#headerNavigationContainer .jfst_masthead_grid {
    display: grid !important;
    grid-template-columns: 146px minmax(0, 1fr) 205px !important;
    gap: 34px !important;
    align-items: center !important;
}

#headerNavigationContainer .jfst_cover_column,
#headerNavigationContainer .jfst_content_column,
#headerNavigationContainer .jfst_actions_column {
    min-width: 0 !important;
}

#headerNavigationContainer .jfst_cover_link,
#headerNavigationContainer .jfst_cover_link:link,
#headerNavigationContainer .jfst_cover_link:visited,
#headerNavigationContainer .jfst_title_link,
#headerNavigationContainer .jfst_title_link:link,
#headerNavigationContainer .jfst_title_link:visited {
    color: inherit !important;
    text-decoration: none !important;
}

#headerNavigationContainer .jfst_cover_shell {
    position: relative !important;
    width: 100% !important;
    max-width: 132px !important;
    margin: 0 auto !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(89,104,166,.48), rgba(52,68,124,.40)) !important;
    box-shadow: 0 13px 28px rgba(6,15,47,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#headerNavigationContainer .jfst_cover_shell::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 15px;
    border: 1px solid rgba(125,234,243,.14);
    pointer-events: none;
}

#headerNavigationContainer .jfst_cover_image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 607 / 852 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

#headerNavigationContainer .jfst_content_column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
}

#headerNavigationContainer .jfst_title_link {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 8px 0 30px !important;
}

#headerNavigationContainer .jfst_title {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    letter-spacing: -.026em !important;
    white-space: nowrap !important;
    text-shadow: 0 7px 18px rgba(0,0,0,.14) !important;
    transition: color .18s ease !important;
}

#headerNavigationContainer .jfst_title_link:hover .jfst_title,
#headerNavigationContainer .jfst_title_link:focus .jfst_title {
    color: var(--jfst-cyan-soft) !important;
}

#headerNavigationContainer .jfst_subtitle {
    display: block !important;
    margin: 14px 0 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

#headerNavigationContainer .jfst_info_grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

#headerNavigationContainer .jfst_info_card {
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 13px 15px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(91,100,157,.70), rgba(67,77,132,.66)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#headerNavigationContainer .jfst_card_label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #7ce9f1 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

#headerNavigationContainer .jfst_card_value {
    display: block !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

/* ===== Integrated Login / Register area ===== */
#headerNavigationContainer .jfst_actions_column {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    padding-left: 24px !important;
}

#headerNavigationContainer .jfst_site_nav,
#headerNavigationContainer .jfst_user_nav {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    list-style: none !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:link,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:visited {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:hover,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:focus {
    transform: translateY(-1px) !important;
    border-color: #82edf3 !important;
    background: rgba(130,237,243,.14) !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:last-child > a {
    border-color: #78e7ef !important;
    background: linear-gradient(180deg, #8ef0f4, #70e4ed) !important;
    color: #0a3147 !important;
    box-shadow: 0 9px 19px rgba(49,203,219,.18) !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user ul {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
    overflow: hidden !important;
    border: 1px solid rgba(15,29,77,.13) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(15,29,77,.19) !important;
    z-index: 100 !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user ul a {
    color: #17344f !important;
    background: #fff !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user ul a:hover,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user ul a:focus {
    background: #f0f7fa !important;
    color: #0d6077 !important;
}

/* ===== Premium compact footer ===== */
.jfst_footer_wrapper {
    position: relative !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(0, 211, 230, .14) 0, rgba(0,211,230,0) 25%),
        linear-gradient(108deg, #081f39 0%, #0f2d58 48%, #1b3567 100%) !important;
}

.jfst_footer_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .075;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 50px 50px;
}

.jfst_footer {
    position: relative !important;
    z-index: 2 !important;
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 22px 0 !important;
    box-sizing: border-box !important;
    color: #fff !important;
}

.jfst_footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(112,229,239,.58), transparent);
}

.jfst_footer_optional {
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.82) !important;
}

.jfst_footer_inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: center !important;
}

.jfst_footer_identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.jfst_footer_title,
.jfst_footer_title:link,
.jfst_footer_title:visited {
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}

.jfst_footer_title:hover,
.jfst_footer_title:focus {
    color: var(--jfst-cyan-soft) !important;
}

.jfst_footer_university {
    margin-top: 5px !important;
    color: rgba(255,255,255,.66) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.jfst_footer_divider {
    width: 1px !important;
    height: 42px !important;
    background: linear-gradient(180deg, transparent, rgba(117,231,240,.55), transparent) !important;
}

.jfst_footer_powered {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.jfst_powered_label {
    color: rgba(255,255,255,.58) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.jfst_powered_name {
    margin-top: 5px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* ===== Remove auth breadcrumbs ===== */
.page_login .cmp_breadcrumbs,
.page_register .cmp_breadcrumbs,
.page_lost_password .cmp_breadcrumbs {
    display: none !important;
}

/* Auth forms/pages intentionally retain the native OJS Default Theme styling. */

/* ===== Responsive ===== */
@media (max-width: 1040px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 36px) !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 130px minmax(0, 1fr) 175px !important;
        gap: 20px !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        max-width: 116px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 39px !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        font-size: 12px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        padding: 10px 11px !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 15px !important;
    }

    #headerNavigationContainer .jfst_actions_column {
        padding-left: 17px !important;
    }
}

@media (max-width: 820px) {
    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        gap: 17px !important;
    }

    #headerNavigationContainer .jfst_actions_column {
        grid-column: 1 / -1 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.10) !important;
        padding: 12px 0 0 !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li {
        width: auto !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a {
        width: auto !important;
        min-width: 105px !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .jfst_footer_inner {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .jfst_footer_identity,
    .jfst_footer_powered {
        align-items: center !important;
        text-align: center !important;
    }

    .jfst_footer_divider {
        width: 64px !important;
        height: 1px !important;
        margin: 0 auto !important;
        background: linear-gradient(90deg, transparent, rgba(117,231,240,.55), transparent) !important;
    }
}

@media (max-width: 620px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 24px) !important;
        padding: 15px 0 17px !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        max-width: 78px !important;
        padding: 5px !important;
        border-radius: 13px !important;
    }

    #headerNavigationContainer .jfst_cover_image {
        border-radius: 9px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 30px !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_title_link {
        margin-bottom: 10px !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        min-height: 0 !important;
        padding: 9px 10px !important;
    }

    #headerNavigationContainer .jfst_card_label {
        margin-bottom: 4px !important;
        font-size: 8px !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 14px !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a {
        width: 100% !important;
        min-width: 0 !important;
    }

    .jfst_footer {
        width: calc(100% - 28px) !important;
        padding: 18px 0 !important;
    }

    .jfst_footer_title {
        font-size: 20px !important;
    }

    .jfst_powered_name {
        font-size: 12px !important;
    }
}

/* ======================================================================
   v14 AUTH LAYOUT — balanced desktop + tablet + mobile
   Built cleanly on the stable v8 masthead/footer, not on cumulative fixes.
   ====================================================================== */

/* Remove inherited OJS side rails only on auth screens and give the auth
   surface the full content width. */
body.pkp_page_login,
body.pkp_page_user.pkp_op_register {
    background: #f3f7fa !important;
}

body.pkp_page_login .pkp_structure_content,
body.pkp_page_user.pkp_op_register .pkp_structure_content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 1 0 auto !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(24, 174, 194, .075) 0, transparent 29%),
        radial-gradient(circle at 87% 82%, rgba(31, 56, 119, .06) 0, transparent 30%),
        linear-gradient(180deg, #f8fbfd 0%, #f1f6fa 100%) !important;
}

body.pkp_page_login .pkp_structure_main,
body.pkp_page_user.pkp_op_register .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.pkp_page_login .pkp_structure_content::before,
body.pkp_page_login .pkp_structure_content::after,
body.pkp_page_login .pkp_structure_main::before,
body.pkp_page_login .pkp_structure_main::after,
body.pkp_page_user.pkp_op_register .pkp_structure_content::before,
body.pkp_page_user.pkp_op_register .pkp_structure_content::after,
body.pkp_page_user.pkp_op_register .pkp_structure_main::before,
body.pkp_page_user.pkp_op_register .pkp_structure_main::after {
    display: none !important;
    content: none !important;
}

.page_login .cmp_breadcrumbs,
.page_register .cmp_breadcrumbs,
.page_lost_password .cmp_breadcrumbs {
    display: none !important;
}

/* ---------- Shared login / reset surface ---------- */
.jfst_auth_page {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 24px 38px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Key desktop decision: genuinely centred, moderately wider than v13, and
   expanded equally left/right from the centre. */
.jfst_auth_card {
    width: min(100%, 780px) !important;
    margin: 0 auto !important;
    padding: 30px 36px 28px !important;
    box-sizing: border-box !important;
    border: 1px solid #dce6ee !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 18px 48px rgba(20, 45, 77, .085) !important;
}

.jfst_auth_heading {
    position: relative !important;
    margin: 0 0 22px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #eaf0f4 !important;
}

.jfst_auth_heading::before,
.jfst_register_heading::before {
    content: "";
    display: block !important;
    width: 46px !important;
    height: 3px !important;
    margin: 0 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #1599aa 0%, #55d8e2 100%) !important;
}

.jfst_auth_heading h1,
.jfst_register_heading h1 {
    margin: 0 !important;
    color: #10285a !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
}

.jfst_auth_heading p,
.jfst_register_heading p {
    margin: 8px 0 0 !important;
    color: #617486 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
}

.jfst_auth_form,
.jfst_auth_form fieldset,
.jfst_auth_form .fields {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.jfst_auth_fields {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
}

.jfst_field,
.jfst_auth_fields > .username,
.jfst_auth_fields > .password,
.jfst_auth_fields > .email,
.jfst_auth_fields > .remember {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.jfst_field > label,
.jfst_field_label_row label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jfst_field .label,
.jfst_field_label_row .label {
    display: inline-block !important;
    margin: 0 0 7px !important;
    color: #17354f !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.jfst_password_control {
    position: relative !important;
    width: 100% !important;
}

.jfst_field input[type="text"],
.jfst_field input[type="email"],
.jfst_field input[type="password"],
.jfst_field select,
.jfst_field textarea,
#login #username,
#login #password,
#lostPasswordForm #email {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd9e4 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    color: #17354f !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(16,48,77,.025) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.jfst_password_control input[type="password"],
.jfst_password_control input[type="text"] {
    padding-right: 48px !important;
}

.jfst_field input:focus,
.jfst_field select:focus,
.jfst_field textarea:focus,
#login #username:focus,
#login #password:focus,
#lostPasswordForm #email:focus {
    border-color: #34b7c5 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(52,183,197,.105) !important;
}

.jfst_password_toggle {
    position: absolute !important;
    top: 50% !important;
    right: 11px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #648299 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.jfst_password_toggle:hover,
.jfst_password_toggle:focus {
    background: #eef8fa !important;
    color: #117f90 !important;
}

.jfst_password_toggle svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.jfst_password_toggle .jfst_eye_closed {
    display: none !important;
}

.jfst_password_toggle[aria-pressed="true"] .jfst_eye_open {
    display: none !important;
}

.jfst_password_toggle[aria-pressed="true"] .jfst_eye_closed {
    display: block !important;
}

.jfst_forgot_link {
    display: inline-block !important;
    margin-top: 7px !important;
    color: #087f91 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.jfst_forgot_link:hover,
.jfst_forgot_link:focus {
    color: #0c6070 !important;
    text-decoration: underline !important;
}

.jfst_remember {
    margin-top: -1px !important;
}

.jfst_remember label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    color: #40566b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
}

.jfst_remember input[type="checkbox"],
.jfst_choice input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    flex: 0 0 17px !important;
    accent-color: #1596a8 !important;
}

/* Moderate, deliberate separation from the checkbox — neither detached nor cramped. */
.jfst_auth_actions {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    border: 0 !important;
}

.jfst_primary_button,
.jfst_primary_button:link,
.jfst_primary_button:visited,
.jfst_secondary_button,
.jfst_secondary_button:link,
.jfst_secondary_button:visited {
    min-width: 132px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.jfst_primary_button {
    border: 1px solid #11899b !important;
    background: linear-gradient(180deg, #1ba2b3 0%, #128b9d 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 17px rgba(18,139,157,.16) !important;
}

.jfst_primary_button:hover,
.jfst_primary_button:focus {
    transform: translateY(-1px) !important;
    background: linear-gradient(180deg, #22afbf 0%, #1597a8 100%) !important;
    color: #fff !important;
}

.jfst_secondary_button,
.jfst_secondary_button:link,
.jfst_secondary_button:visited {
    border: 1px solid #cddae5 !important;
    background: #fff !important;
    color: #173f5c !important;
    box-shadow: none !important;
}

.jfst_secondary_button:hover,
.jfst_secondary_button:focus {
    transform: translateY(-1px) !important;
    border-color: #85cbd4 !important;
    background: #f5fbfc !important;
    color: #0f6d7b !important;
}

.jfst_auth_notice,
.jfst_auth_error,
.jfst_register_form .pkp_form_error,
.jfst_register_form .pkp_form_errors {
    margin: 0 0 16px !important;
    padding: 10px 12px !important;
    border: 1px solid #e7d3d3 !important;
    border-radius: 9px !important;
    background: #fff7f7 !important;
    color: #7a2f34 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* Reset form shares the exact same centred geometry. */
.jfst_reset_page .jfst_auth_card {
    width: min(100%, 780px) !important;
}

/* ---------- Registration: retain the successful wide two-panel composition ---------- */
.jfst_register_page {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 24px 44px !important;
    box-sizing: border-box !important;
}

.jfst_register_shell {
    width: min(100%, 1160px) !important;
    margin: 0 auto !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    border: 1px solid #dce6ee !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 20px 50px rgba(20,45,77,.08) !important;
}

.jfst_register_heading {
    margin: 0 0 24px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid #eaf0f4 !important;
}

.jfst_register_form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jfst_register_grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: start !important;
}

.jfst_register_section,
.jfst_preferences_section,
.jfst_register_captcha,
.jfst_register_form fieldset[name="contexts"] {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border: 1px solid #dce6ee !important;
    border-radius: 15px !important;
    background: #fbfdff !important;
}

.jfst_register_section > legend,
.jfst_preferences_section > legend,
.jfst_register_form fieldset[name="contexts"] > legend {
    padding: 0 8px !important;
    color: #17345b !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.jfst_register_fields {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jfst_register_fields > .jfst_field,
.jfst_register_fields > div {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.jfst_field_full {
    grid-column: 1 / -1 !important;
}

.jfst_register_shell input[type="text"],
.jfst_register_shell input[type="email"],
.jfst_register_shell input[type="password"],
.jfst_register_shell select,
.jfst_register_shell textarea {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.jfst_preferences_section {
    margin-top: 20px !important;
}

.jfst_preferences_list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.jfst_choice,
.jfst_reviewer_choices .jfst_choice {
    margin: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e8eef3 !important;
}

.jfst_choice:last-child,
.jfst_reviewer_choices:last-child .jfst_choice:last-child {
    border-bottom: 0 !important;
}

.jfst_choice label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin: 0 !important;
    color: #40576c !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.jfst_choice a {
    color: #087f91 !important;
    font-weight: 700 !important;
}

.jfst_preferences_interests {
    margin-top: 14px !important;
}

.jfst_register_form .context_optin,
.jfst_register_form ul.contexts,
.jfst_register_form li.context,
.jfst_register_form fieldset.roles {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

.jfst_register_form li.context + li.context {
    margin-top: 14px !important;
}

.jfst_register_form .context .name {
    margin-bottom: 8px !important;
    color: #17345b !important;
    font-weight: 700 !important;
}

.jfst_register_form fieldset.roles label,
.jfst_register_form .context_privacy label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 8px 0 !important;
}

.jfst_register_actions {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 18px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 11px !important;
    border-top: 1px solid #eaf0f4 !important;
}

.jfst_register_captcha {
    margin-top: 18px !important;
}

.jfst_auth_page .required,
.jfst_register_page .required {
    margin-left: 3px !important;
    color: #c24b58 !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .jfst_auth_page {
        padding: 30px 20px 34px !important;
    }

    .jfst_auth_card,
    .jfst_reset_page .jfst_auth_card {
        width: min(100%, 700px) !important;
        padding: 28px 30px 26px !important;
    }

    .jfst_register_page {
        padding: 30px 18px 38px !important;
    }

    .jfst_register_shell {
        width: min(100%, 760px) !important;
        padding: 26px !important;
    }

    .jfst_register_grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
    /* Keep masthead informative but much shorter on phones. */
    #headerNavigationContainer .jfst_info_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        padding: 8px 7px !important;
        border-radius: 10px !important;
    }

    #headerNavigationContainer .jfst_card_label {
        min-height: 18px !important;
        margin-bottom: 4px !important;
        font-size: 6.8px !important;
        line-height: 1.2 !important;
        letter-spacing: .06em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }

    .jfst_auth_page,
    .jfst_register_page {
        padding: 20px 14px 26px !important;
    }

    .jfst_auth_card,
    .jfst_reset_page .jfst_auth_card,
    .jfst_register_shell {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 32px rgba(20,45,77,.075) !important;
    }

    .jfst_auth_heading,
    .jfst_register_heading {
        margin-bottom: 19px !important;
        padding-bottom: 16px !important;
    }

    .jfst_auth_heading::before,
    .jfst_register_heading::before {
        width: 38px !important;
        margin-bottom: 12px !important;
    }

    .jfst_auth_heading h1,
    .jfst_register_heading h1 {
        font-size: 29px !important;
    }

    .jfst_auth_heading p,
    .jfst_register_heading p {
        font-size: 12.5px !important;
    }

    .jfst_auth_fields {
        gap: 16px !important;
    }

    .jfst_field input[type="text"],
    .jfst_field input[type="email"],
    .jfst_field input[type="password"],
    .jfst_field select,
    #login #username,
    #login #password,
    #lostPasswordForm #email {
        height: 46px !important;
        font-size: 16px !important; /* avoids iOS input zoom */
    }

    .jfst_auth_actions,
    .jfst_register_actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .jfst_primary_button,
    .jfst_secondary_button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
    }

    .jfst_register_grid,
    .jfst_register_fields {
        grid-template-columns: 1fr !important;
    }

    .jfst_field_full {
        grid-column: auto !important;
    }

    .jfst_register_section,
    .jfst_preferences_section,
    .jfst_register_captcha,
    .jfst_register_form fieldset[name="contexts"] {
        padding: 16px !important;
        border-radius: 13px !important;
    }

    .jfst_register_section > legend,
    .jfst_preferences_section > legend,
    .jfst_register_form fieldset[name="contexts"] > legend {
        font-size: 17px !important;
    }

    .jfst_preferences_section {
        margin-top: 16px !important;
    }

    .jfst_register_actions {
        margin-top: 17px !important;
        padding-top: 16px !important;
    }
}

@media (max-width: 420px) {
    .jfst_auth_page,
    .jfst_register_page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .jfst_auth_card,
    .jfst_reset_page .jfst_auth_card,
    .jfst_register_shell {
        padding: 20px 14px !important;
    }

    .jfst_auth_actions,
    .jfst_register_actions {
        grid-template-columns: 1fr !important;
    }

    .jfst_primary_button,
    .jfst_secondary_button {
        width: 100% !important;
    }
}

/* ======================================================================
   v16 FINAL LAYOUT REFINEMENTS
   - Login/Forgot Password are centred within the *available* space between
     masthead and footer, not positioned with arbitrary top margins.
   - Footer contains only the approved powered-by text, centred.
   - Registration remains naturally scrollable.
   ====================================================================== */

/* Let the login route's content participate in the parent flex column so the
   card can be mathematically centred between the header and footer. */
body.pkp_page_login .pkp_structure_content {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
}

body.pkp_page_login .pkp_structure_main {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
}

body.pkp_page_login .jfst_auth_page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 22px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Preserve the balanced width from v15 for both login and password reset. */
body.pkp_page_login .jfst_auth_card,
body.pkp_page_login .jfst_reset_page .jfst_auth_card {
    width: min(calc(100% - 48px), 780px) !important;
    margin: 0 auto !important;
}

/* One centred footer identity only. */
.jfst_footer_inner.jfst_footer_inner_single {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
}

.jfst_footer_inner_single .jfst_footer_powered {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.jfst_footer_inner_single .jfst_powered_label,
.jfst_footer_inner_single .jfst_powered_name {
    text-align: center !important;
}

/* A short viewport should scroll naturally instead of clipping a centred card. */
@media (max-height: 720px) and (min-width: 621px) {
    body.pkp_page_login .jfst_auth_page {
        align-items: flex-start !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

/* Mobile: centre horizontally, but avoid forced vertical centring because the
   browser chrome/keyboard can drastically reduce the usable height. */
@media (max-width: 620px) {
    body.pkp_page_login .pkp_structure_content,
    body.pkp_page_login .pkp_structure_main {
        display: block !important;
    }

    body.pkp_page_login .jfst_auth_page {
        min-height: 0 !important;
        padding: 20px 12px 24px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    body.pkp_page_login .jfst_auth_card,
    body.pkp_page_login .jfst_reset_page .jfst_auth_card {
        width: 100% !important;
    }

    .jfst_footer_inner.jfst_footer_inner_single {
        min-height: 48px !important;
    }
}

/* ======================================================================
   v17 FINAL UX POLISH
   - polished logged-in account menu
   - registration-complete + reset-confirmation success states
   - reliable mobile masthead/actions and navigation taps
   - compact premium mobile composition
   ====================================================================== */

/* Allow the authenticated dropdown to leave the masthead without being clipped. */
#headerNavigationContainer.jfst_portal_header {
    overflow: visible !important;
    z-index: 200 !important;
}

#headerNavigationContainer .jfst_portal_inner,
#headerNavigationContainer .jfst_cover_link,
#headerNavigationContainer .jfst_title_link,
#headerNavigationContainer .jfst_actions_column,
#headerNavigationContainer .jfst_site_nav,
#headerNavigationContainer .jfst_user_nav {
    position: relative !important;
    pointer-events: auto !important;
}

#headerNavigationContainer .jfst_actions_column,
#headerNavigationContainer .jfst_site_nav,
#headerNavigationContainer .jfst_user_nav {
    z-index: 30 !important;
    display: block !important;
    visibility: visible !important;
}

/* Logged-in profile trigger: hide OJS task-count badge from the masthead and
   present the username as a clean account control. Counts remain available in
   the dropdown items where OJS normally exposes them. */
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a .task_count {
    display: none !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a:link,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a:visited {
    min-height: 44px !important;
    padding: 11px 18px !important;
    border-color: rgba(129,235,243,.46) !important;
    background: linear-gradient(180deg, rgba(113,229,239,.16), rgba(255,255,255,.08)) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(8,23,61,.16) !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a:hover,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a:focus,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child.jfst-account-open > a {
    transform: translateY(-1px) !important;
    border-color: #8cecf3 !important;
    background: rgba(118,231,240,.20) !important;
    color: #fff !important;
}

/* Override Default Theme/Popper hover geometry with a stable anchored menu. */
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:hover > ul {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 224px !important;
    min-width: 224px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 1px solid rgba(17,43,78,.12) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 18px 42px rgba(13,32,70,.22) !important;
    z-index: 500 !important;
}

/* Keep the dropdown closed unless focused/hovered on desktop or explicitly
   toggled by the v17 JavaScript (important for touch/mobile). */
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:hover > ul,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:focus-within > ul {
        display: block !important;
    }
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li.jfst-account-open > ul {
    display: block !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul a,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul a:link,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul a:visited {
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #203d58 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul a:hover,
#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul a:focus {
    background: #eef8fa !important;
    color: #08758a !important;
}

#headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul .task_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 23px !important;
    height: 23px !important;
    margin-left: 10px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #e7f5f7 !important;
    color: #08758a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

/* ===== Registration-complete + password-reset confirmation ===== */
.page_register_complete .cmp_breadcrumbs,
.jfst_reset_confirmation_page .cmp_breadcrumbs {
    display: none !important;
}

.jfst_status_page {
    width: 100% !important;
    min-height: 410px !important;
    margin: 0 !important;
    padding: 34px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 18% 28%, rgba(86,211,224,.08), transparent 29%),
        radial-gradient(circle at 84% 72%, rgba(65,95,174,.06), transparent 30%),
        linear-gradient(180deg, #f8fbfd 0%, #f2f7fb 100%) !important;
}

.jfst_status_card {
    width: min(100%, 820px) !important;
    margin: 0 auto !important;
    padding: 32px 34px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    border: 1px solid #dce7ee !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 22px 54px rgba(18,45,79,.10) !important;
}

.jfst_status_icon {
    width: 66px !important;
    height: 66px !important;
    margin-top: 2px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(21,169,186,.20) !important;
    background: linear-gradient(145deg, #e7fbfd 0%, #f3fbfc 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.jfst_status_icon_success span {
    width: 28px !important;
    height: 15px !important;
    display: block !important;
    border-left: 4px solid #1298aa !important;
    border-bottom: 4px solid #1298aa !important;
    transform: translateY(-3px) rotate(-45deg) !important;
}

.jfst_status_icon_mail span {
    position: relative !important;
    width: 31px !important;
    height: 22px !important;
    display: block !important;
    border: 2px solid #1298aa !important;
    border-radius: 5px !important;
}

.jfst_status_icon_mail span::before,
.jfst_status_icon_mail span::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 19px;
    height: 2px;
    background: #1298aa;
}

.jfst_status_icon_mail span::before {
    left: -1px;
    transform: rotate(33deg);
    transform-origin: left center;
}

.jfst_status_icon_mail span::after {
    right: -1px;
    transform: rotate(-33deg);
    transform-origin: right center;
}

.jfst_status_content h1 {
    margin: 0 0 9px !important;
    color: #102a55 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 31px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.jfst_status_content > p,
.jfst_status_description {
    margin: 0 !important;
    color: #516779 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

.jfst_status_description p {
    margin: 0 !important;
}

.jfst_status_actions {
    margin-top: 24px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.jfst_status_button,
.jfst_status_button:link,
.jfst_status_button:visited {
    min-height: 43px !important;
    padding: 11px 18px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid #cddce6 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.jfst_status_button_primary,
.jfst_status_button_primary:link,
.jfst_status_button_primary:visited {
    border-color: #149bad !important;
    background: linear-gradient(180deg, #1eacbd 0%, #118da0 100%) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgba(17,141,160,.16) !important;
}

.jfst_status_button_secondary,
.jfst_status_button_secondary:link,
.jfst_status_button_secondary:visited {
    background: #fff !important;
    color: #163754 !important;
}

.jfst_status_button:hover,
.jfst_status_button:focus {
    transform: translateY(-1px) !important;
}

.jfst_status_button_primary:hover,
.jfst_status_button_primary:focus {
    background: linear-gradient(180deg, #23b4c5 0%, #118da0 100%) !important;
    color: #fff !important;
}

.jfst_status_button_secondary:hover,
.jfst_status_button_secondary:focus {
    border-color: #8acfd8 !important;
    background: #f3fbfc !important;
    color: #08758a !important;
}

/* ===== Mobile masthead ===== */
@media (max-width: 620px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 20px) !important;
        padding: 13px 0 12px !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        max-width: 60px !important;
        margin: 1px 0 0 !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    #headerNavigationContainer .jfst_content_column {
        padding: 0 !important;
    }

    #headerNavigationContainer .jfst_title_link {
        width: 100% !important;
        margin: 0 0 9px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 25px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        margin-top: 6px !important;
        font-size: 9.2px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        min-height: 45px !important;
        padding: 7px 6px !important;
        border-radius: 9px !important;
    }

    #headerNavigationContainer .jfst_card_label {
        min-height: 16px !important;
        margin-bottom: 3px !important;
        font-size: 6.1px !important;
        line-height: 1.15 !important;
        letter-spacing: .045em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 10.2px !important;
        white-space: nowrap !important;
    }

    #headerNavigationContainer .jfst_actions_column {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 2px !important;
        padding: 9px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.11) !important;
    }

    #headerNavigationContainer .jfst_site_nav,
    #headerNavigationContainer .jfst_user_nav,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a {
        width: 100% !important;
        min-width: 0 !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a {
        min-height: 38px !important;
        padding: 9px 11px !important;
        font-size: 11px !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child {
        grid-column: 1 / -1 !important;
        width: auto !important;
        justify-self: end !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a {
        width: auto !important;
        min-width: 150px !important;
        max-width: calc(100vw - 30px) !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:hover > ul {
        top: calc(100% + 7px) !important;
        right: 0 !important;
        width: min(232px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
    }

    .jfst_status_page {
        min-height: 340px !important;
        padding: 22px 12px !important;
    }

    .jfst_status_card {
        width: 100% !important;
        padding: 23px 18px !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        border-radius: 16px !important;
    }

    .jfst_status_icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 15px !important;
    }

    .jfst_status_content h1 {
        font-size: 26px !important;
    }

    .jfst_status_content > p,
    .jfst_status_description {
        font-size: 13px !important;
    }

    .jfst_status_actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .jfst_status_button {
        width: 100% !important;
    }
}


/* ======================================================================
   v18 FINAL RESPONSIVE + WORKFLOW POLISH
   These rules intentionally come last and override earlier responsive rules.
   ====================================================================== */

/* Generic OJS result/error/message pages */
.jfst_generic_message_page,
.jfst_registration_complete_page {
    width: 100% !important;
    min-height: clamp(340px, 48vh, 520px) !important;
    padding: 34px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 16% 22%, rgba(35,184,199,.075), transparent 30%),
        radial-gradient(circle at 84% 76%, rgba(40,75,155,.055), transparent 31%),
        linear-gradient(180deg, #f8fbfd 0%, #f2f7fb 100%) !important;
}

.jfst_message_card,
.jfst_registration_success_card {
    width: min(100%, 780px) !important;
}

.jfst_status_lead {
    margin: 0 !important;
    color: #52697b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

.jfst_status_icon_info span {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    display: block !important;
}

.jfst_status_icon_info span::before {
    content: "i";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 2px solid #1298aa;
    border-radius: 50%;
    color: #1298aa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* Stop OJS constrained-side-rail styling on pages rendered with our message card.
   auth.js adds jfst-has-message-page to body as soon as DOM is ready. */
body.jfst-has-message-page .pkp_structure_content,
body.jfst-has-message-page .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.jfst-has-message-page .pkp_structure_content::before,
body.jfst-has-message-page .pkp_structure_content::after,
body.jfst-has-message-page .pkp_structure_main::before,
body.jfst-has-message-page .pkp_structure_main::after {
    display: none !important;
    content: none !important;
}

/* Link/touch reliability in the masthead */
#headerNavigationContainer .jfst_cover_link,
#headerNavigationContainer .jfst_title_link,
#headerNavigationContainer .jfst_actions_column,
#headerNavigationContainer .jfst_site_nav,
#headerNavigationContainer .jfst_user_nav,
#headerNavigationContainer #navigationUser,
#headerNavigationContainer #navigationUser a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#headerNavigationContainer .jfst_actions_column {
    isolation: isolate !important;
}

#headerNavigationContainer .jfst_site_nav,
#headerNavigationContainer .jfst_user_nav,
#headerNavigationContainer #navigationUser {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Tablet/F12 widths: remove awkward intermediate breakage */
@media (min-width: 621px) and (max-width: 900px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 28px) !important;
        padding: 20px 0 21px !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 104px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: center !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        max-width: 96px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: clamp(31px, 5vw, 39px) !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #headerNavigationContainer .jfst_actions_column {
        grid-column: 1 / -1 !important;
        margin-top: 2px !important;
        padding: 11px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.11) !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        width: 100% !important;
    }
}

/* Mobile masthead: identity row -> full-width metrics -> full-width auth row */
@media (max-width: 620px) {
    html,
    body,
    .pkp_structure_page,
    .pkp_structure_content,
    .pkp_structure_main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #headerNavigationContainer.jfst_portal_header {
        overflow: visible !important;
    }

    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        padding: 13px 0 12px !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #headerNavigationContainer .jfst_cover_column {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        width: 58px !important;
        max-width: 58px !important;
        margin: 0 !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    /* display:contents lets the info cards span beneath BOTH cover and title */
    #headerNavigationContainer .jfst_content_column {
        display: contents !important;
    }

    #headerNavigationContainer .jfst_title_link {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        align-self: start !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: clamp(22px, 7.2vw, 28px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.025em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        margin-top: 5px !important;
        font-size: 8.7px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin-top: 9px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        min-height: 48px !important;
        padding: 7px 7px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .jfst_card_label {
        min-height: 16px !important;
        margin-bottom: 3px !important;
        font-size: 6px !important;
        line-height: 1.12 !important;
        letter-spacing: .05em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: clamp(9.6px, 3vw, 11px) !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    #headerNavigationContainer .jfst_actions_column {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.12) !important;
    }

    #headerNavigationContainer .jfst_site_nav,
    #headerNavigationContainer .jfst_user_nav,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 9px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
        text-align: center !important;
        border-radius: 999px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:hover > ul {
        top: calc(100% + 7px) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Never let auth/register/status content disappear after a responsive navigation */
    .jfst_auth_page,
    .jfst_register_page,
    .jfst_status_page {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 10px 24px !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .jfst_auth_card,
    .jfst_reset_page .jfst_auth_card,
    .jfst_register_shell,
    .jfst_status_card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 16px !important;
    }

    .jfst_register_grid,
    .jfst_register_fields {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .jfst_auth_heading h1,
    .jfst_register_heading h1,
    .jfst_status_content h1 {
        font-size: 26px !important;
        line-height: 1.1 !important;
    }

    .jfst_auth_actions,
    .jfst_register_actions,
    .jfst_status_actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .jfst_primary_button,
    .jfst_secondary_button,
    .jfst_status_button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    .jfst_status_icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 14px !important;
    }
}

/* Tiny phones */
@media (max-width: 380px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 14px) !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        width: 52px !important;
        max-width: 52px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 21px !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        font-size: 8.1px !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        gap: 4px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 9.2px !important;
    }
}



/* ======================================================================
   v19 FINAL POLISH
   - redesigned Privacy Statement
   - desktop auth controls vertically centered in masthead
   ====================================================================== */

/* Privacy Statement: remove the old narrow OJS rails and present a premium card */
body.pkp_page_about.pkp_op_privacy .pkp_structure_content,
body.pkp_page_about.pkp_op_privacy .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body.pkp_page_about.pkp_op_privacy .pkp_structure_content::before,
body.pkp_page_about.pkp_op_privacy .pkp_structure_content::after,
body.pkp_page_about.pkp_op_privacy .pkp_structure_main::before,
body.pkp_page_about.pkp_op_privacy .pkp_structure_main::after {
    display: none !important;
    content: none !important;
}

.jfst_privacy_page {
    width: 100% !important;
    min-height: clamp(390px, 50vh, 560px) !important;
    margin: 0 !important;
    padding: 38px 24px 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 13% 22%, rgba(31,184,200,.075), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(35,61,139,.055), transparent 31%),
        linear-gradient(180deg, #f9fcfd 0%, #f2f7fb 100%) !important;
}

.jfst_privacy_card {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
    padding: 34px 38px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
    border: 1px solid #dce7ee !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 18px 48px rgba(20,45,77,.085) !important;
}

.jfst_privacy_icon {
    width: 64px !important;
    height: 64px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(23,154,171,.18) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #eefbfc 0%, #e8f4fb 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.jfst_privacy_icon span {
    position: relative !important;
    width: 27px !important;
    height: 31px !important;
    display: block !important;
    border: 2px solid #128fa1 !important;
    border-radius: 9px 9px 11px 11px !important;
}

.jfst_privacy_icon span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 15px;
    height: 13px;
    transform: translateX(-50%);
    border: 2px solid #128fa1;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
}

.jfst_privacy_icon span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 11px;
    width: 5px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #128fa1;
}

.jfst_privacy_content {
    min-width: 0 !important;
}

.jfst_privacy_accent {
    width: 48px !important;
    height: 3px !important;
    margin: 2px 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #1599aa 0%, #63dfe7 100%) !important;
}

.jfst_privacy_content h1 {
    margin: 0 0 16px !important;
    color: #10285a !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
}

.jfst_privacy_statement,
.jfst_privacy_statement p {
    margin: 0 !important;
    color: #4b6173 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

.jfst_privacy_statement p + p {
    margin-top: 12px !important;
}

.jfst_privacy_statement a {
    color: #087f91 !important;
    font-weight: 700 !important;
}

/* Desktop masthead: keep auth actions visually centered against the full identity block */
@media (min-width: 901px) {
    #headerNavigationContainer .jfst_actions_column {
        align-self: center !important;
        min-height: 138px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #headerNavigationContainer .jfst_site_nav,
    #headerNavigationContainer .jfst_user_nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100% !important;
    }
}

/* Privacy mobile */
@media (max-width: 620px) {
    .jfst_privacy_page {
        min-height: 0 !important;
        padding: 18px 10px 24px !important;
        display: block !important;
    }

    .jfst_privacy_card {
        width: 100% !important;
        padding: 22px 16px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        border-radius: 16px !important;
    }

    .jfst_privacy_icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
    }

    .jfst_privacy_icon span {
        transform: scale(.86);
    }

    .jfst_privacy_content h1 {
        font-size: 27px !important;
        margin-bottom: 13px !important;
    }

    .jfst_privacy_statement,
    .jfst_privacy_statement p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }
}



/* ======================================================================
   v20 MOBILE MASTHEAD REBALANCE
   Compact identity + metrics + equal auth controls.
   ====================================================================== */

@media (max-width: 620px) {
    #headerNavigationContainer.jfst_portal_header {
        min-height: 0 !important;
        overflow: visible !important;
    }

    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 10px 0 10px !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        display: grid !important;
        grid-template-columns: 50px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 9px !important;
        row-gap: 0 !important;
        align-items: start !important;
    }

    /* Top identity row */
    #headerNavigationContainer .jfst_cover_column {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        width: 50px !important;
        max-width: 50px !important;
        margin: 0 !important;
        padding: 3px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .jfst_cover_image {
        border-radius: 7px !important;
    }

    #headerNavigationContainer .jfst_content_column {
        display: contents !important;
    }

    #headerNavigationContainer .jfst_title_link {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }

    #headerNavigationContainer .jfst_title {
        margin: 0 !important;
        font-size: clamp(21px, 6.9vw, 25px) !important;
        line-height: 1.02 !important;
        letter-spacing: -.025em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        margin: 5px 0 0 !important;
        font-size: 8.2px !important;
        line-height: 1.22 !important;
        white-space: normal !important;
    }

    /* Metrics row spans full header width */
    #headerNavigationContainer .jfst_info_grid {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;
        padding: 6px 6px !important;
        box-sizing: border-box !important;
        border-radius: 9px !important;
    }

    #headerNavigationContainer .jfst_card_label {
        min-height: 14px !important;
        margin: 0 0 2px !important;
        font-size: 5.7px !important;
        line-height: 1.08 !important;
        letter-spacing: .045em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_card_value {
        margin: 0 !important;
        font-size: clamp(9.2px, 2.8vw, 10.6px) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    /* Auth/account row: always one clean horizontal row */
    #headerNavigationContainer .jfst_actions_column {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 7px 0 0 !important;
        padding: 8px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,.12) !important;
        display: block !important;
        align-self: auto !important;
        justify-self: stretch !important;
    }

    #headerNavigationContainer .jfst_site_nav,
    #headerNavigationContainer .jfst_user_nav {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 7px !important;
        list-style: none !important;
        overflow: visible !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li {
        position: relative !important;
        float: none !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
        justify-self: stretch !important;
        transform: none !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:link,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > a:visited {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 37px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: 10.8px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Login remains the cyan primary action; Register stays outlined */
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:last-child > a {
        background: linear-gradient(180deg, #8ef0f4, #70e4ed) !important;
        border-color: #78e7ef !important;
        color: #0a3147 !important;
        box-shadow: 0 7px 15px rgba(49,203,219,.15) !important;
    }

    /* Logged-in state has only one account item: use the whole row */
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:only-child > a {
        width: 100% !important;
        min-width: 0 !important;
        background: rgba(255,255,255,.08) !important;
        border-color: rgba(255,255,255,.34) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul,
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li:hover > ul {
        top: calc(100% + 7px) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 12px) !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 46px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    #headerNavigationContainer .jfst_cover_column,
    #headerNavigationContainer .jfst_cover_shell {
        width: 46px !important;
        max-width: 46px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 20px !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        font-size: 7.8px !important;
    }

    #headerNavigationContainer .jfst_info_grid {
        gap: 4px !important;
    }

    #headerNavigationContainer .jfst_info_card {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #headerNavigationContainer .jfst_card_value {
        font-size: 8.8px !important;
    }
}



/* ======================================================================
   v21 MOBILE-ONLY PORTAL HEADER
   Desktop/tablet desktop layout above 620px is intentionally unchanged.
   ====================================================================== */

.jfst_mobile_menu_toggle {
    display: none !important;
}

@media (max-width: 620px) {

    /*
     * Collapsed mobile header:
     * Cover | Journal identity | Hamburger
     * Metrics and authentication are inside the expandable menu.
     */
    #headerNavigationContainer.jfst_portal_header {
        min-height: 0 !important;
        overflow: visible !important;
    }

    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 18px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 11px 0 !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 42px !important;
        grid-template-rows: auto auto auto !important;
        column-gap: 9px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }

    #headerNavigationContainer .jfst_cover_column {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 48px !important;
        max-width: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
    }

    #headerNavigationContainer .jfst_cover_shell {
        width: 48px !important;
        max-width: 48px !important;
        margin: 0 !important;
        padding: 3px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .jfst_cover_image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 7px !important;
    }

    #headerNavigationContainer .jfst_content_column {
        display: contents !important;
    }

    #headerNavigationContainer .jfst_title_link {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
    }

    #headerNavigationContainer .jfst_title {
        margin: 0 !important;
        color: #fff !important;
        font-size: clamp(20px, 6.3vw, 25px) !important;
        line-height: 1.02 !important;
        letter-spacing: -.025em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        margin: 5px 0 0 !important;
        color: rgba(255,255,255,.92) !important;
        font-size: 7.9px !important;
        line-height: 1.22 !important;
        white-space: normal !important;
    }

    /* Hamburger */
    #headerNavigationContainer .jfst_mobile_menu_toggle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        align-self: center !important;
        justify-self: end !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.08) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    #headerNavigationContainer .jfst_mobile_menu_icon {
        width: 18px !important;
        height: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    #headerNavigationContainer .jfst_mobile_menu_icon > span {
        width: 18px !important;
        height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #fff !important;
        transform-origin: center !important;
        transition: transform .18s ease, opacity .18s ease !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_mobile_menu_toggle {
        border-color: rgba(126,235,243,.64) !important;
        background: rgba(108,226,236,.13) !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_mobile_menu_icon > span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_mobile_menu_icon > span:nth-child(2) {
        opacity: 0 !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_mobile_menu_icon > span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    /*
     * Hide the metric/auth panel until hamburger is opened.
     * This is the key simplification requested for mobile.
     */
    #headerNavigationContainer .jfst_info_grid,
    #headerNavigationContainer .jfst_actions_column {
        display: none !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_info_grid {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 11px 0 0 !important;
        padding: 10px 0 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        border-top: 1px solid rgba(255,255,255,.11) !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_info_card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 45px !important;
        padding: 7px 6px !important;
        box-sizing: border-box !important;
        border-radius: 9px !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_card_label {
        min-height: 14px !important;
        margin: 0 0 2px !important;
        font-size: 5.7px !important;
        line-height: 1.08 !important;
        letter-spacing: .04em !important;
        white-space: normal !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_card_value {
        margin: 0 !important;
        font-size: clamp(9px, 2.75vw, 10.4px) !important;
        line-height: 1.06 !important;
        white-space: nowrap !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_actions_column {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        align-self: auto !important;
        justify-self: stretch !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_site_nav,
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Logged out: Register + Login side-by-side in the menu */
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 7px !important;
        list-style: none !important;
        overflow: visible !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li {
        position: relative !important;
        float: none !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li > a,
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li > a:link,
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li > a:visited {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 39px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Logged in: the account item becomes the full menu width */
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li:only-child {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li:only-child > a {
        width: 100% !important;
        min-width: 0 !important;
        color: #fff !important;
        border-color: rgba(129,235,243,.42) !important;
        background: rgba(255,255,255,.08) !important;
        box-shadow: none !important;
    }

    /*
     * Logged-in account submenu becomes an in-flow panel instead of a floating
     * dropdown, which is much easier to use on a phone.
     */
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li > ul,
    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li:hover > ul {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 7px 0 0 !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        transform: none !important;
        border-radius: 11px !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li.jfst-account-open > ul {
        display: block !important;
    }

    #headerNavigationContainer.jfst-mobile-menu-open .jfst_user_nav .pkp_navigation_user > li > ul a {
        min-height: 39px !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
    }
}

/* tiny phones */
@media (max-width: 360px) {
    #headerNavigationContainer .jfst_portal_inner {
        width: calc(100% - 12px) !important;
    }

    #headerNavigationContainer .jfst_masthead_grid {
        grid-template-columns: 44px minmax(0, 1fr) 38px !important;
        column-gap: 7px !important;
    }

    #headerNavigationContainer .jfst_cover_column,
    #headerNavigationContainer .jfst_cover_shell {
        width: 44px !important;
        max-width: 44px !important;
    }

    #headerNavigationContainer .jfst_mobile_menu_toggle {
        width: 38px !important;
        height: 38px !important;
    }

    #headerNavigationContainer .jfst_title {
        font-size: 19px !important;
    }

    #headerNavigationContainer .jfst_subtitle {
        font-size: 7.4px !important;
    }
}



/* ======================================================================
   v22 REGISTRATION VALIDATION
   Real-time feedback while preserving the existing registration layout.
   ====================================================================== */

.jfst_validation_field {
    position: relative !important;
}

.jfst_field_feedback {
    position: relative !important;
    min-height: 19px !important;
    margin: 7px 0 0 !important;
    padding-left: 21px !important;
    box-sizing: border-box !important;
    color: #6c7f8f !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    transition: color .15s ease !important;
}

.jfst_field_feedback:empty {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
}

.jfst_field_feedback:not(:empty)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1.7px solid currentColor;
    border-radius: 50%;
}

.jfst_feedback_valid {
    color: #18825d !important;
}

.jfst_feedback_valid::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 5px;
    height: 3px;
    border-left: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(-45deg);
}

.jfst_feedback_invalid {
    color: #b6424c !important;
}

.jfst_feedback_invalid::before {
    background:
        linear-gradient(currentColor, currentColor) center / 1.5px 7px no-repeat;
}

.jfst_feedback_invalid::after {
    content: "";
    position: absolute;
    left: 5.7px;
    top: 11px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
}

.jfst_feedback_checking {
    color: #167e9b !important;
}

.jfst_feedback_checking::before {
    border-right-color: transparent !important;
    animation: jfstValidationSpin .75s linear infinite;
}

.jfst_feedback_neutral {
    color: #6c7f8f !important;
}

@keyframes jfstValidationSpin {
    to {
        transform: rotate(360deg);
    }
}

.jfst_validation_valid input,
.jfst_validation_valid select {
    border-color: #73bca2 !important;
    background: #fbfffd !important;
}

.jfst_validation_invalid input,
.jfst_validation_invalid select {
    border-color: #d99198 !important;
    background: #fffdfd !important;
}

.jfst_validation_checking input {
    border-color: #8dc9d6 !important;
}

.jfst_password_rules {
    margin-top: 9px !important;
    padding: 10px 11px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 12px !important;
    border: 1px solid #e2ebf1 !important;
    border-radius: 10px !important;
    background: #f7fafc !important;
}

.jfst_password_rules > span {
    position: relative !important;
    min-width: 0 !important;
    padding-left: 17px !important;
    color: #768a9a !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    transition: color .15s ease !important;
}

.jfst_password_rules > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 1.5px solid #b5c5d0;
    border-radius: 50%;
}

.jfst_password_rules > span.jfst_rule_met {
    color: #18825d !important;
}

.jfst_password_rules > span.jfst_rule_met::before {
    border-color: #18825d;
    background: #18825d;
}

.jfst_password_rules > span.jfst_rule_met::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 4px;
    height: 2px;
    border-left: 1.4px solid #fff;
    border-bottom: 1.4px solid #fff;
    transform: rotate(-45deg);
}

/* Keep the two Account Details columns visually balanced even with feedback. */
.jfst_register_section.login .jfst_register_fields {
    align-items: start !important;
}

/* Mobile validation feedback stays compact and readable. */
@media (max-width: 620px) {
    .jfst_field_feedback {
        font-size: 11px !important;
    }

    .jfst_password_rules {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}



/* ======================================================================
   v23 FINAL POLISH
   - Reviewer interests reveal only after reviewer opt-in.
   - Desktop account dropdown remains reachable by hover.
   ====================================================================== */

.jfst_reviewer_interests {
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px);
    transition:
        max-height .25s ease,
        opacity .2s ease,
        transform .2s ease,
        padding .2s ease,
        margin .2s ease !important;
}

.jfst_reviewer_interests.is_visible {
    max-height: 190px !important;
    margin: 2px 0 0 !important;
    padding: 14px 0 4px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
    border-top: 1px solid #e8eef3 !important;
}

.jfst_reviewer_interests > label {
    display: block !important;
    margin: 0 0 7px !important;
}

.jfst_reviewer_interests > label .label {
    color: #17345b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.jfst_reviewer_interests input[type="text"] {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

.jfst_reviewer_interests_hint {
    margin: 6px 0 0 !important;
    color: #718395 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.8px !important;
    line-height: 1.4 !important;
}

/* The floating desktop submenu has a deliberate visual gap below the
   username button. Extend the submenu's interactive area into that gap so
   normal mouse hover does not collapse while the pointer moves downward. */
@media (min-width: 621px) and (hover: hover) and (pointer: fine) {
    #headerNavigationContainer .jfst_user_nav .pkp_navigation_user > li > ul::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: -12px !important;
        height: 12px !important;
        background: transparent !important;
        pointer-events: auto !important;
    }
}