/**
 * @file plugins/themes/lumina/styles/components/forms.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Form primitives and layout styling for authentication pages.
 */

/* ==========================================================================
   1. Auth Presentation Layout
   ========================================================================== */
/* Page-level overrides for authentication pages to fix double background wrapper */
body.pkp_page_login,
body.pkp_page_user {
    background-color: var(--lm-surface-page, #f8fafc) !important;
}

body.pkp_page_login .lumina_layout_wrapper.lumina_auth_layout,
body.pkp_page_user .lumina_layout_wrapper.lumina_auth_layout {
    background-color: transparent !important;
}

.lumina_auth_section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl) 0;
    width: 100%;
    box-sizing: border-box;
}

.lumina_auth_container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lumina_auth_layout {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.lumina_auth_title {
    font-family: var(--lm-font-sans);
    color: var(--lm-text-primary);
    font-weight: var(--lm-weight-extrabold);
    font-size: var(--lm-font-size-3xl);
    letter-spacing: -0.02em;
    margin: 0;
    text-align: center;
}

.lumina_auth_desc {
    font-family: var(--lm-font-sans);
    color: var(--lm-text-secondary);
    font-size: var(--lm-font-size-sm);
    line-height: var(--lm-lh-relaxed);
    margin: 0;
    text-align: center;
}

.lumina_auth_card {
    background-color: var(--lm-portal-surface);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-xl);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--space-xl);
    box-sizing: border-box;
}

/* ==========================================================================
   2. Registration Pages Layout (CSS-Based / No Overrides)
   ========================================================================== */
.page_register {

    width:100%;

    padding:
        var(--space-xl)
        var(--space-lg);

    box-sizing:border-box;

}

.page_register_complete {
    width: 100%;
    padding: var(--space-xl) var(--space-lg);
    box-sizing: border-box;
}

/* Editorial column */

.page_register,
body.pkp_page_user .page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.page_register .cmp_breadcrumbs,
.page_register > h1,
.page_register > p,
.page_register form.register {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page_register_complete .cmp_breadcrumbs,
.page_register_complete > h1,
.page_register_complete .registration_complete_actions {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   REGISTRATION COMPLETE LAYOUT
   ========================================== */

.page_register_complete {

    width:100%;

    padding:
        var(--space-xl)
        var(--space-lg);

    box-sizing:border-box;

}

/* editorial column */

.page_register_complete .cmp_breadcrumbs,
.page_register_complete > h1,
.page_register_complete > p,
.page_register_complete .registration_complete_actions {

    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

}



/* title */

.page_register_complete > h1{

    margin:

        0
        auto
        var(--space-md);

}

.page_register > h1,
.page_register_complete > h1 {
    font-size: var(--lm-font-size-4xl);
    font-family: var(--lm-font-sans);
    color: var(--lm-text-primary);
    font-weight: var(--lm-weight-extrabold);
    letter-spacing: -0.02em;
}

/* description */

.page_register_complete > p{

    color:
        var(--lm-portal-text-secondary);

    line-height:

        1.6;

    margin:

        0
        auto
        var(--space-lg);

}

.page_register > p {
    margin-bottom:
        var(--space-lg);

    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-secondary);
}

/* actions card */

.registration_complete_actions{

    background:
        var(--lm-portal-surface);

    border:

        1px solid
        var(--lm-portal-border);

    border-radius:

        var(--lm-radius-xl);

    box-shadow:

        var(--lm-portal-shadow-md);

    padding:

        var(--space-xl);

}

/* action spacing */

.registration_complete_actions li{

    margin-bottom:

        var(--space-sm);

}

.registration_complete_actions ul{

    padding:0;

    margin:0;

    list-style:none;

}

.registration_complete_actions li a {
    display: inline-flex;
    align-items: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-medium);
    color: var(--lm-link);
    text-decoration: none;
}

.registration_complete_actions li a:hover {
    color: var(--lm-link-hover);
    text-decoration: underline;
}

/* Registration card */

.page_register form.register {
    background: var(--lm-portal-surface);
    border: 1px solid var(--lm-portal-border);
    border-radius: var(--lm-radius-xl);
    box-shadow: var(--lm-shadow-lg);
    padding: var(--space-xl);
}

/* ==========================================================================
   3. Scoped Form Controls
   ========================================================================== */
.lumina_auth_card input[type="text"],
.lumina_auth_card input[type="email"],
.lumina_auth_card input[type="password"],
.lumina_auth_card select,
.page_register form.register input[type="text"],
.page_register form.register input[type="email"],
.page_register form.register input[type="password"],
.page_register form.register select,
.page_lost_password form.lost_password input[type="text"],
.page_lost_password form.lost_password input[type="email"],
.page_lost_password form.lost_password input[type="password"],
.page_lost_password form.lost_password select,
.page_reset_password form.reset_password input[type="text"],
.page_reset_password form.reset_password input[type="email"],
.page_reset_password form.reset_password input[type="password"],
.page_reset_password form.reset_password select {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--lm-font-sans) !important;
    font-size: var(--lm-font-size-sm) !important;
    color: var(--lm-text-primary) !important;
    background-color: var(--lm-portal-surface) !important;
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-portal-radius) !important;
    box-sizing: border-box !important;
    transition: border-color var(--lm-motion-fast), box-shadow var(--lm-motion-fast);
}

.lumina_auth_card textarea,
.page_register form.register textarea,
.page_lost_password form.lost_password textarea,
.page_reset_password form.reset_password textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--lm-font-sans) !important;
    font-size: var(--lm-font-size-sm) !important;
    color: var(--lm-text-primary) !important;
    background-color: var(--lm-portal-surface) !important;
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-portal-radius) !important;
    box-sizing: border-box !important;
    transition: border-color var(--lm-motion-fast), box-shadow var(--lm-motion-fast);
}

.lumina_auth_card input[type="text"]:focus,
.lumina_auth_card input[type="email"]:focus,
.lumina_auth_card input[type="password"]:focus,
.lumina_auth_card textarea:focus,
.lumina_auth_card select:focus,
.page_register form.register input[type="text"]:focus,
.page_register form.register input[type="email"]:focus,
.page_register form.register input[type="password"]:focus,
.page_register form.register textarea:focus,
.page_register form.register select:focus,
.page_lost_password form.lost_password input[type="text"]:focus,
.page_lost_password form.lost_password input[type="email"]:focus,
.page_lost_password form.lost_password input[type="password"]:focus,
.page_lost_password form.lost_password textarea:focus,
.page_lost_password form.lost_password select:focus,
.page_reset_password form.reset_password input[type="text"]:focus,
.page_reset_password form.reset_password input[type="email"]:focus,
.page_reset_password form.lost_password input[type="password"]:focus,
.page_reset_password form.reset_password input[type="password"]:focus,
.page_reset_password form.reset_password textarea:focus,
.page_reset_password form.reset_password select:focus {
    border-color: var(--lm-focus-ring);
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-focus-ring) 15%, transparent);
}

/* Checkbox alignment */
.lumina_auth_card input[type="checkbox"],
.page_register form.register input[type="checkbox"],
.page_lost_password form.lost_password input[type="checkbox"],
.page_reset_password form.reset_password input[type="checkbox"] {
    width: auto;
    margin-right: var(--space-xs);
    cursor: pointer;
    vertical-align: middle;
}

/* Labels and Groupings */
.lumina_auth_card label,
.page_register form.register label,
.page_lost_password form.lost_password label,
.page_reset_password form.reset_password label {
    display: block;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-medium);
    color: var(--lm-text-primary);
    margin-bottom: var(--space-sm);
}

.lumina_auth_card .label,
.page_register form.register .label,
.page_lost_password form.lost_password .label,
.page_reset_password form.reset_password .label {
    display: block;
    margin-bottom: var(--space-xs);
}

.lumina_auth_card .required,
.page_register form.register .required,
.page_lost_password form.lost_password .required,
.page_reset_password form.reset_password .required {
    color: var(--lm-focus-ring);
}

/* Spacings */
.lumina_auth_card .fields,
.page_register form.register .fields,
.page_lost_password form.lost_password .fields,
.page_reset_password form.reset_password .fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lumina_auth_card .username,
.lumina_auth_card .password,
.lumina_auth_card .email,
.page_register form.register .fields > div,
.page_lost_password form.lost_password .fields > div,
.page_reset_password form.reset_password .fields > div {
    margin-bottom: var(--space-md);
}

/* Fieldset and Legend customization */
.page_register form.register fieldset,
.lumina_auth_card fieldset,
.page_lost_password form.lost_password fieldset,
.page_reset_password form.reset_password fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
}

.page_register form.register fieldset legend,
.lumina_auth_card fieldset legend,
.page_lost_password form.lost_password fieldset legend,
.page_reset_password form.reset_password fieldset legend {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-md);
    font-weight: var(--lm-weight-bold);
    color: var(--lm-text-primary);
    margin-bottom: var(--space-sm);
    padding: 0;
    border-bottom: 1px solid var(--lm-border);
    width: 100%;
    padding-bottom: var(--space-xs);
}

/* ReCaptcha & Altcha wrappers */
.lumina_auth_card .altcha_wrapper,
.lumina_auth_card .recaptcha_wrapper,
.page_register form.register .altcha_wrapper,
.page_register form.register .recaptcha_wrapper,
.page_lost_password form.lost_password .altcha_wrapper,
.page_lost_password form.lost_password .recaptcha_wrapper,
.page_reset_password form.reset_password .altcha_wrapper,
.page_reset_password form.reset_password .recaptcha_wrapper {
    margin: var(--space-md) 0;
    border: none;
    padding: 0;
}

/* Scoped Multi-journal Opt-in listings */
.page_register form.register ul.contexts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.page_register form.register li.context {
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-portal-radius);
    padding: var(--space-md);
    background-color: var(--lm-neutral-50);
}

.page_register form.register li.context .name {
    font-weight: var(--lm-weight-semibold);
    font-size: var(--lm-font-size-md);
    margin-bottom: var(--space-sm);
    color: var(--lm-text-primary);
}

.page_register form.register li.context fieldset.roles {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-sm) 0;
}

.page_register form.register li.context fieldset.roles legend {
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lm-text-muted);
    border-bottom: none;
    margin-bottom: var(--space-xs);
    padding-bottom: 0;
}

/* Inline Password Forget links */
.lumina_auth_card .password a,
.page_register form.register .password a,
.page_lost_password form.lost_password .password a,
.page_reset_password form.reset_password .password a {
    float: right;
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-weight-normal);
    color: var(--lm-link);
    text-decoration: none;
}

.lumina_auth_card .password a:hover,
.page_register form.register .password a:hover,
.page_lost_password form.lost_password .password a:hover,
.page_reset_password form.reset_password .password a:hover {
    color: var(--lm-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   4. Form Validation Errors
   ========================================================================== */
:root {
    --lm-error-bg: #fef2f2;
    --lm-error-border: #fee2e2;
    --lm-error-text: #991b1b;
    --lm-error-link-hover: #b91c1c;
}

[data-theme="dark"] {
    --lm-error-bg: #451a1a;
    --lm-error-border: #7f1d1d;
    --lm-error-text: #fca5a5;
    --lm-error-link-hover: #fcd3d3;
}

#formErrors,
.lumina_auth_card .pkp_form_error,
.page_register form.register .pkp_form_error,
.page_lost_password form.lost_password .pkp_form_error,
.page_reset_password form.reset_password .pkp_form_error {
    background-color: var(--lm-error-bg);
    border: 1px solid var(--lm-error-border);
    border-radius: var(--lm-portal-radius);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    box-sizing: border-box;
    display: block;
}

#formErrors .pkp_form_error,
.lumina_auth_card .pkp_form_error > span,
.page_register form.register .pkp_form_error > span,
.page_lost_password form.lost_password .pkp_form_error > span,
.page_reset_password form.reset_password .pkp_form_error > span {
    display: block;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-bold);
    color: var(--lm-error-text);
    margin-bottom: var(--space-xs);
}

#formErrors .pkp_form_error_list,
.lumina_auth_card .pkp_form_error_list,
.page_register form.register .pkp_form_error_list,
.page_lost_password form.lost_password .pkp_form_error_list,
.page_reset_password form.reset_password .pkp_form_error_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

#formErrors .pkp_form_error_list li,
.lumina_auth_card .pkp_form_error_list li,
.page_register form.register .pkp_form_error_list li,
.page_lost_password form.lost_password .pkp_form_error_list li,
.page_reset_password form.reset_password .pkp_form_error_list li {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    line-height: var(--lm-lh-relaxed);
    margin: 0;
}

#formErrors .pkp_form_error_list li a,
.lumina_auth_card .pkp_form_error_list li a,
.page_register form.register .pkp_form_error_list li a,
.page_lost_password form.lost_password .pkp_form_error_list li a,
.page_reset_password form.reset_password .pkp_form_error_list li a {
    color: var(--lm-error-text);
    text-decoration: none;
    transition: var(--lm-portal-transition);
    font-weight: var(--lm-weight-semibold);
    display: inline-flex;
    align-items: center;
}

#formErrors .pkp_form_error_list li a::before,
.lumina_auth_card .pkp_form_error_list li a::before,
.page_register form.register .pkp_form_error_list li a::before,
.page_lost_password form.lost_password .pkp_form_error_list li a::before,
.page_reset_password form.reset_password .pkp_form_error_list li a::before {
    content: "•";
    margin-right: var(--space-xs);
    color: var(--lm-error-text);
    font-weight: bold;
}

#formErrors .pkp_form_error_list li a:hover,
.lumina_auth_card .pkp_form_error_list li a:hover,
.page_register form.register .pkp_form_error_list li a:hover,
.page_lost_password form.lost_password .pkp_form_error_list li a:hover,
.page_reset_password form.reset_password .pkp_form_error_list li a:hover {
    color: var(--lm-error-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   5. Button Primitives Aliases (Scoped to OJS Selectors)
   ========================================================================== */
.lumina_auth_card .buttons button.submit,
.lumina_auth_card .buttons button[type="submit"],
.page_register form.register .buttons button.submit,
.page_register form.register button[type="submit"],
.lumina_auth_card button.submit,
.page_register form.register button.submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-semibold);
    line-height: var(--lm-lh-tight);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--lm-portal-radius);
    cursor: pointer;
    transition: var(--lm-portal-transition);
    text-decoration: none;
    box-sizing: border-box;
    background-color: var(--lm-button-primary);
    color: var(--lm-button-text);
    border-color: var(--lm-button-primary);
}

.lumina_auth_card .buttons button.submit:hover,
.lumina_auth_card .buttons button[type="submit"]:hover,
.page_register form.register .buttons button.submit:hover,
.page_register form.register button[type="submit"]:hover,
.lumina_auth_card button.submit:hover,
.page_register form.register button.submit:hover {
    background-color: var(--lm-button-primary-hover);
    border-color: var(--lm-button-primary-hover);
    color: var(--lm-button-text);
    text-decoration: none;
}

.lumina_auth_card .buttons a.register,
.lumina_auth_card .buttons a.login,
.page_register form.register .buttons a.login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-semibold);
    line-height: var(--lm-lh-tight);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--lm-portal-radius);
    cursor: pointer;
    transition: var(--lm-portal-transition);
    text-decoration: none;
    box-sizing: border-box;
    background-color: var(--lm-button-secondary);
    color: var(--lm-button-text-secondary);
    border-color: var(--lm-button-secondary);
    margin-left: var(--space-sm);
}

.lumina_auth_card .buttons a.register:hover,
.lumina_auth_card .buttons a.login:hover,
.page_register form.register .buttons a.login:hover {
    background-color: var(--lm-button-secondary-hover);
    border-color: var(--lm-button-secondary-hover);
    color: var(--lm-button-text-secondary);
    text-decoration: none;
}

/* ==========================================================================
   6. RESET PASSWORD / AUTH CONFIRMATION
   ========================================================================== */

/* Editorial wrapper layout */
.page_lost_password,
.page_reset_password,
.page_message,
.pkp_page_login .page_error {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-xl) var(--space-lg);
    box-sizing: border-box;
}



/* Scoped Headings normalization with underline decoration */
.page_lost_password h1,
.page_reset_password h1,
.page_message h1,
.pkp_page_login .page_error h1 {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-4xl);
    color: var(--lm-text-primary);
    font-weight: var(--lm-weight-extrabold);
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: var(--space-md);
    text-align: left;
    position: relative;
    padding-bottom: var(--space-sm);
}

.page_lost_password h1::after,
.page_reset_password h1::after,
.page_message h1::after,
.pkp_page_login .page_error h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--lm-button-primary);
    border-radius: var(--radius-xl);
}

/* Paragraph/Instruction spacing */
.page_lost_password > p,
.page_reset_password > p,
.page_lost_password .instruct,
.page_reset_password .instruct {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-secondary);
    line-height: var(--lm-lh-relaxed);
    margin-top: 0;
    margin-bottom: var(--space-lg);
}

/* Compact width constraints for confirmation cards and error screens */
.lumina_message_card,
.page_message .description,
.page_error .description,
.pkp_page_login .page_error .description {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Card surfaces for forms, error, and confirmation descriptions */
.page_lost_password form.lost_password,
.page_reset_password form.reset_password,
.pkp_page_login .page_error .description {
    background-color: var(--lm-portal-surface);
    border: 1px solid var(--lm-portal-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--lm-portal-shadow-md);
    padding: var(--space-xl);
    margin-top: 0;
    margin-bottom: var(--space-lg);
    box-sizing: border-box;
}

.lumina_message_card {
    background-color: var(--lm-portal-surface);
    border: 1px solid var(--lm-portal-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--lm-portal-shadow-md);
    padding: calc(var(--space-xl) * 1.2) var(--space-xl);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    box-sizing: border-box;
}

/* Custom envelope and shield checkmark icons */
.message_icon_wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.message_icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ecfdf5; /* Light emerald green */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669; /* Emerald green */
}

[data-theme="dark"] .message_icon {
    background-color: #064e3b; /* Dark emerald background for dark theme */
    color: #34d399; /* Mint checkmark/outline */
}

.message_icon svg {
    width: 32px;
    height: 32px;
}

/* Confirmation message typography alignment */
.confirmation_message {
    text-align: center;
}

.confirmation_message .main_msg {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-weight-extrabold);
    color: var(--lm-text-primary);
    margin-top: 0;
    margin-bottom: var(--space-xxs);
    text-align: center;
    line-height: var(--lm-lh-tight);
}

.confirmation_message .sub_msg {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-secondary);
    margin-top: 0;
    margin-bottom: var(--space-md);
    text-align: center;
}

.confirmation_message .divider {
    border: none;
    border-top: 1px solid var(--lm-border);
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.confirmation_message .inst_msg {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-secondary);
    margin-top: 0;
    margin-bottom: var(--space-md);
    text-align: center;
}

/* Support paragraphs inside the description card surface */
.page_message .description p,
.pkp_page_login .page_error .description p {
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-secondary);
    line-height: var(--lm-lh-relaxed);
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

.page_message .description p:last-child,
.pkp_page_login .page_error .description p:last-child {
    margin-bottom: 0;
}

/* CTA Return and Action Buttons */
.pkp_page_login .page_error .cmp_back_link {
    margin-top: var(--space-lg);
}

.lumina_message_card .cmp_back_link {
    margin-top: var(--space-md);
    width: 100%;
    display: flex;
    justify-content: center;
}

.lumina_message_card .cmp_back_link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-semibold);
    line-height: var(--lm-lh-tight);
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: 2px solid var(--lm-button-primary);
    border-radius: 9999px; /* Pill radius */
    cursor: pointer;
    transition: var(--lm-portal-transition);
    text-decoration: none;
    box-sizing: border-box;
    background-color: transparent;
    color: var(--lm-button-primary);
}

.lumina_message_card .cmp_back_link a:hover {
    background-color: var(--lm-button-primary);
    color: var(--lm-button-text);
    transform: translateY(-1px);
}

.pkp_page_login .page_error .cmp_back_link a,
.page_lost_password .buttons a.register,
.page_lost_password .buttons a.login,
.page_reset_password .buttons a.login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-semibold);
    line-height: var(--lm-lh-tight);
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: 1px solid transparent;
    border-radius: 9999px; /* Pill radius */
    cursor: pointer;
    transition: var(--lm-portal-transition);
    text-decoration: none;
    box-sizing: border-box;
    background-color: var(--lm-button-secondary);
    color: var(--lm-button-text-secondary);
    border-color: var(--lm-button-secondary);
}

.pkp_page_login .page_error .cmp_back_link a:hover,
.page_lost_password .buttons a.register:hover,
.page_lost_password .buttons a.login:hover,
.page_reset_password .buttons a.login:hover {
    background-color: var(--lm-button-secondary-hover);
    border-color: var(--lm-button-secondary-hover);
    color: var(--lm-button-text-secondary);
    text-decoration: none;
}

/* Submit primary buttons override inside reset/lost password forms to follow pill and min-height 48px rules */
.page_lost_password form.lost_password button.submit,
.page_lost_password form.lost_password button[type="submit"],
.page_reset_password form.reset_password button.submit,
.page_reset_password form.reset_password button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-weight-semibold);
    line-height: var(--lm-lh-tight);
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: 1px solid transparent;
    border-radius: 9999px; /* Pill radius */
    cursor: pointer;
    transition: var(--lm-portal-transition);
    text-decoration: none;
    box-sizing: border-box;
    background-color: var(--lm-button-primary);
    color: var(--lm-button-text);
    border-color: var(--lm-button-primary);
}

.page_lost_password form.lost_password button.submit:hover,
.page_lost_password form.lost_password button[type="submit"]:hover,
.page_reset_password form.reset_password button.submit:hover,
.page_reset_password form.reset_password button[type="submit"]:hover {
    background-color: var(--lm-button-primary-hover);
    border-color: var(--lm-button-primary-hover);
    color: var(--lm-button-text);
    text-decoration: none;
}

/* ==========================================================================
   7. Modernized Form Overrides & Visual Polish
   ========================================================================== */

/* Fix input field widths by overriding core OJS limits */
.lumina_auth_card input[type="text"],
.lumina_auth_card input[type="email"],
.lumina_auth_card input[type="password"],
.lumina_auth_card textarea,
.lumina_auth_card select,
.page_lost_password form.lost_password input[type="text"],
.page_lost_password form.lost_password input[type="email"],
.page_lost_password form.lost_password input[type="password"],
.page_reset_password form.reset_password input[type="text"],
.page_reset_password form.reset_password input[type="email"],
.page_reset_password form.reset_password input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Limit registration inputs to a highly readable width */
.page_register form.register input[type="text"],
.page_register form.register input[type="email"],
.page_register form.register input[type="password"],
.page_register form.register textarea,
.page_register form.register select {
    width: 100% !important;
    max-width: 540px !important;
    box-sizing: border-box;
}

/* Clean up vertical spacing inside cards and forms */
.lumina_auth_card .fields > div,
.page_register form.register .fields > div,
.page_lost_password form.lost_password .fields > div,
.page_reset_password form.reset_password .fields > div {
    padding-bottom: 0 !important;
    margin-bottom: var(--space-md) !important;
}

/* Align label text and password reset link elegantly */
.lumina_auth_card .password label,
.page_register form.register .password label,
.page_lost_password form.lost_password .password label,
.page_reset_password form.reset_password .password label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lumina_auth_card .password label .label,
.page_register form.register .password label .label {
    margin-bottom: 0 !important;
}

.lumina_auth_card .password a,
.page_register form.register .password a,
.page_lost_password form.lost_password .password a,
.page_reset_password form.reset_password .password a {
    position: absolute;
    top: 0;
    right: 0;
    float: none !important;
    font-size: var(--lm-font-size-xs);
    font-weight: var(--lm-weight-medium);
    color: var(--lm-link);
    text-decoration: none;
}

/* Modernize remember/checkbox listing */
.lumina_auth_card .remember,
.page_register form.register .remember {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg) !important;
    padding-bottom: 0 !important;
}

.lumina_auth_card .remember label,
.page_register form.register .remember label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: var(--lm-weight-normal);
}

.lumina_auth_card .remember input[type="checkbox"],
.page_register form.register .remember input[type="checkbox"] {
    margin: 0 var(--space-sm) 0 0 !important;
    vertical-align: middle;
}

/* Layout spacing for action buttons */
.lumina_auth_card .buttons,
.page_register form.register .buttons {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-bottom: 0 !important;
}

.lumina_auth_card .buttons button.submit,
.page_register form.register .buttons button.submit {
    margin: 0 !important;
}

.lumina_auth_card .buttons a.register,
.lumina_auth_card .buttons a.login,
.page_register form.register .buttons a.login {
    margin: 0 !important;
}

/* ==========================================================================
   8. Grid and Responsive Visual Adjustments
   ========================================================================== */

/* Opt-in and Checkbox alignment and text wrapping */
.optin,
.remember.checkbox,
.consent .fields > div {
    margin-bottom: var(--space-sm) !important;
    padding-bottom: 0 !important;
}

.optin label,
.remember.checkbox label,
.consent .fields label {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-sm) !important;
    font-weight: var(--lm-weight-normal) !important;
    cursor: pointer !important;
    line-height: var(--lm-lh-normal) !important;
}

.optin label input[type="checkbox"],
.remember.checkbox label input[type="checkbox"],
.consent .fields label input[type="checkbox"] {
    margin: 4px 0 0 0 !important;
    flex-shrink: 0 !important;
    vertical-align: top !important;
}

/* Registration Field Grid Layout */
@media (min-width: 640px) {
    .page_register form.register fieldset.identity .fields,
    .page_register form.register fieldset.login .fields {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-md) !important;
    }
    
    .page_register form.register fieldset.identity .fields > div,
    .page_register form.register fieldset.login .fields > div {
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .page_register form.register fieldset.identity .fields > div input,
    .page_register form.register fieldset.identity .fields > div select,
    .page_register form.register fieldset.login .fields > div input {
        max-width: 100% !important;
    }
    
    /* Fields spanning 2 columns */
    .page_register form.register fieldset.identity .fields .affiliation {
        grid-column: span 2 !important;
    }
    
    .page_register form.register fieldset.login .fields .email,
    .page_register form.register fieldset.login .fields .username {
        grid-column: span 2 !important;
    }
}

/* Responsive Button Layout and Stacking */
@media (max-width: 480px) {
    .lumina_auth_card .buttons,
    .page_register form.register .buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-sm) !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .lumina_auth_card .buttons button.submit,
    .lumina_auth_card .buttons button[type="submit"],
    .page_register form.register .buttons button.submit,
    .page_register form.register button[type="submit"],
    .lumina_auth_card .buttons a.register,
    .lumina_auth_card .buttons a.login,
    .page_register form.register .buttons a.login {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
}