/**
 * PMPro Mobile Responsive CSS
 * Extracted from functions.php for better organization
 * Handles mobile layout for login/register forms
 */

@media (max-width: 768px) {
    /* Force viewport */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Main page containers */
    body.pmpro-login #primary,
    body.pmpro-login .ast-container,
    body.pmpro-login .site-content,
    body.pmpro-login .entry-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Center align all text elements */
    body.pmpro-login h1,
    body.pmpro-login h2,
    body.pmpro-login h3,
    body.pmpro-login p,
    body.pmpro-login label {
        text-align: center !important;
    }

    /* PMPro and login form containers */
    .pmpro,
    .pmpro_section,
    #loginform {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .pmpro_card,
    .pmpro_login_wrap {
        margin: 0 auto !important;
        padding: 15px 10px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .pmpro_card_content {
        padding: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Form fields and labels */
    .pmpro_form_field,
    .login-username,
    .login-password,
    .login-remember,
    .login-submit {
        margin-bottom: 15px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Password field wrapper to stack input and toggle */
    .login-password {
        position: relative !important;
    }

    /* Password toggle button */
    .pmpro_form_field-password-toggle {
        width: 100% !important;
        margin-top: 10px !important;
        display: block !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }

    .pmpro_form_field-password-toggle button,
    #pmpro_btn-password-toggle-1 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
        border: 1px solid var(--ast-border-color) !important;
        border-radius: 4px !important;
    }

    .pmpro_form_field label,
    .login-username label,
    .login-password label,
    .login-remember label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        text-align: center !important;
    }

    /* Center the checkbox with label */
    .login-remember {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .login-remember label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .login-remember input[type="checkbox"] {
        margin: 0 !important;
    }

    /* All input fields */
    .pmpro_form_field input[type="text"],
    .pmpro_form_field input[type="email"],
    .pmpro_form_field input[type="password"],
    .pmpro_form_field select,
    .pmpro_form_field textarea,
    #loginform input[type="text"],
    #loginform input[type="password"],
    #loginform .input,
    #user_login,
    #user_pass {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    /* Buttons */
    .pmpro_btn,
    #loginform input[type="submit"],
    #loginform .button,
    #loginform .button-primary,
    .button-primary,
    #wp-submit {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 15px 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        margin: 10px 0 !important;
        display: block !important;
        border-radius: 30px !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    .pmpro_checkout-fields {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Prevent any element from causing horizontal scroll */
    body.pmpro-login *,
    body.pmpro-login *::before,
    body.pmpro-login *::after {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fix any negative margins or position issues */
    body.pmpro-login .ast-container,
    body.pmpro-login .site-content,
    body.pmpro-login .ast-plain-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure no absolute positioning causes cutoff */
    body.pmpro-login .pmpro_card *:not(.pmpro_form_field-password-toggle *) {
        position: relative !important;
    }

    /* Stack card actions (Join now, Lost password) vertically */
    .pmpro_card_actions,
    .pmpro_actions,
    .pmpro_actions_nav,
    #pmpro_login .pmpro_card_actions,
    #pmpro_login .pmpro_actions_nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 15px !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .pmpro_card_actions a,
    .pmpro_actions a,
    .pmpro_actions_nav a,
    #pmpro_login .pmpro_card_actions a,
    #pmpro_login .pmpro_actions_nav a,
    .pmpro_login_wrap .pmpro_card_actions a,
    .pmpro_login_wrap .pmpro_actions_nav a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 5px 0 !important;
        padding: 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        flex: 1 1 100% !important;
    }

    /* Style the links as buttons and hide pipe separator */
    .pmpro_actions_nav {
        font-size: 0 !important;
    }

    .pmpro_actions_nav a {
        font-size: 16px !important;
        background-color: var(--ast-global-color-1) !important;
        color: #ffffff !important;
        border-radius: 30px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        line-height: 1.5em !important;
    }

    .pmpro_actions_nav a:hover {
        background-color: var(--ast-global-color-0) !important;
        color: #ffffff !important;
    }

    /* LinkedIn/Social login buttons */
    .nsl-container,
    #nsl-custom-login-form-1,
    .nsl-container-block-fullwidth {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 !important;
    }

    .nsl-container-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .nsl-container-buttons a,
    .nsl-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 5px 0 !important;
    }

    .nsl-button-label-container {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        flex: 1 !important;
    }

    .nsl-button-svg-container {
        flex-shrink: 0 !important;
    }

    /* If there's a split layout, force full width */
    .pmpro_card_actions::after,
    .pmpro_card_actions::before,
    .pmpro_actions_nav::after,
    .pmpro_actions_nav::before {
        display: none !important;
    }
}