/**
 * VXProfiles Signup Form Styles
 * 
 * Multisite-Safe Scoped Styles
 * =============================
 * All styles are scoped with .vxprofiles-signup-form to prevent conflicts
 * with other themes/plugins in multisite installations.
 * 
 * The wrapper is automatically added via JavaScript when signup shortcodes
 * are detected on the page.
 * 
 * Customization Filters:
 * ----------------------
 * 1. Change wrapper class name:
 *    add_filter('vxprofiles_signup_form_wrapper_class', function() {
 *        return 'my-custom-wrapper-class';
 *    });
 * 
 * 2. Add custom CSS per site:
 *    add_filter('vxprofiles_signup_form_custom_css', function() {
 *        return '.vxprofiles-signup-form .input__name { border-color: #custom-color; }';
 *    });
 * 
 * 3. Control when assets load:
 *    add_filter('vxprofiles_should_load_signup_assets', function($should_load) {
 *        // Custom logic here
 *        return $should_load;
 *    });
 * 
 * 4. Change asset version for cache busting:
 *    add_filter('vxprofiles_signup_assets_version', function() {
 *        return '2.0.0';
 *    });
 */

/* INPUT */
/* styles work with or without wrapper */
/* Consolidated selectors for better performance */
.input__name,
.input__email {
    width: 100%;
    color: black;
    border: none;
    border-bottom: 2px solid #ABB8C3;
    padding: 10px 5px;
    padding-bottom: 9px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    display: block;
    font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.24), 16px);
    box-sizing: border-box;
    height: calc(1em + 20px);
    line-height: 1.5;
}

.vxprofiles-signup-form .input__name,
.vxprofiles-signup-form .input__email {
    margin-left: auto;
    margin-right: auto;
    height: calc(1em + 20px);
    line-height: 1.5;
}

.input__name:is(:active, :focus),
.input__email:is(:active, :focus) {
    outline: none;
    border-bottom: 2px solid #5c5c5c;
    padding-bottom: 9px;
    margin-bottom: 0;
    height: calc(1em + 20px);
    line-height: 1.5;
}

.vxprofiles-signup-form .input__name:is(:active, :focus),
.vxprofiles-signup-form .input__email:is(:active, :focus) {
    outline: none;
    border-bottom: 2px solid #5c5c5c;
    padding-bottom: 9px;
    margin-bottom: 0;
    height: calc(1em + 20px);
    line-height: 1.5;
}

/* Fix for block form inputs - maintain height on focus */
.wp-block-vxprofiles-signup-form .input__name,
.wp-block-vxprofiles-signup-form .input__email {
    border-bottom: 2px solid var(--input-border-color, #3a3a3a);
    box-sizing: border-box;
    margin-bottom: 0;
}

.wp-block-vxprofiles-signup-form .input__name:is(:active, :focus),
.wp-block-vxprofiles-signup-form .input__email:is(:active, :focus) {
    padding-bottom: 14px;
    border-bottom: 2px solid #1f93e9;
    margin-bottom: 0;
}

.input__name::placeholder,
.input__email::placeholder {
    color: #C6CED4;
}

.vxprofiles-signup-form .input__name::placeholder,
.vxprofiles-signup-form .input__email::placeholder {
    color: #C6CED4;
}

.input__name.invalid,
.input__email.invalid {
    border-color: crimson;
    color: crimson;
}

.vxprofiles-signup-form .input__name.invalid,
.vxprofiles-signup-form .input__email.invalid {
    border-color: crimson;
    color: crimson;
}

.input__name.invalid:is(:active, :focus),
.input__email.invalid:is(:active, :focus) {
    border-bottom-width: 2px;
}

.vxprofiles-signup-form .input__name.invalid:is(:active, :focus),
.vxprofiles-signup-form .input__email.invalid:is(:active, :focus) {
    border-bottom-width: 2px;
}

.invalid__message,
.vxprofiles-signup-form .invalid__message {
    color: crimson;
    padding: 5px 3px;
}


/* LOADING */
/* Consolidated selectors */
#signup-step-2.loading :is(p, .input__checkbox, .input__submit),
.vxprofiles-signup-form #signup-step-2.loading :is(p, .input__checkbox, .input__submit) {
    opacity: .5;
}


/* SUBMIT */

.input__submit.disabled,
.vxprofiles-signup-form .input__submit.disabled {
    opacity: .4;
    pointer-events: none;
}