<?php
namespace LoginPageCustomizor;

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! function_exists( 'wp_powersuite_is_license_valid' ) || ! wp_powersuite_is_license_valid() ) {
	$license_page_url = admin_url( 'admin.php?page=powersuite-license' );
	?>
	<div class="wp-powersuite-module-settings wpps-settings-panel" data-module-id="<?php echo esc_attr( $module_id ?? 'login-page-customizor' ); ?>">
		<div class="notice notice-warning inline" style="margin:0;">
			<p>
				<?php esc_html_e( 'Login Page Customizer requires an active license. Activate your license to brand and customize the login screen.', 'wp-powersuite' ); ?>
				<a href="<?php echo esc_url( $license_page_url ); ?>"><?php esc_html_e( 'Activate license', 'wp-powersuite' ); ?></a>
			</p>
		</div>
	</div>
	<?php
	return;
}

if ( ! isset( $module_id ) ) {
	$module_id = 'login-page-customizor';
}
require_once __DIR__ . '/admin-helpers.php';
require_once __DIR__ . '/layout-presets.php';

$defaults = Module::getDefaultSettings();
$raw      = OptionStoreModuleSettingsRepository::forModule( $module_id )->all( [] );
$settings = is_array( $raw ) ? array_merge( $defaults, $raw ) : $defaults;

$template_options = [
	'classic-centered' => __( 'Classic Centered', 'wp-powersuite' ),
	'split-layout'     => __( 'Split Layout', 'wp-powersuite' ),
];

$layout_presets_catalog  = LayoutPresets::getCatalog();
$current_layout_preset   = isset( $settings['layout_preset'] ) ? (string) $settings['layout_preset'] : 'default';
$valid_layout_preset_ids = array_column( $layout_presets_catalog, 'id' );
if ( ! in_array( $current_layout_preset, $valid_layout_preset_ids, true ) ) {
	$current_layout_preset = 'default';
}
$current_template_type = ( $settings['template_type'] ?? 'classic-centered' ) === 'split-layout' ? 'split-layout' : 'classic-centered';
$form_alignment_raw    = $settings['form_alignment'] ?? 'center';
$form_alignment        = in_array( $form_alignment_raw, [ 'left', 'center', 'right' ], true ) ? $form_alignment_raw : 'center';
$split_ratio_presets   = [ '25' => '25/75', '30' => '30/70', '35' => '35/65', '40' => '40/60', '45' => '45/55', '50' => '50/50' ];
$current_split_ratio   = isset( $settings['split_ratio'] ) && isset( $split_ratio_presets[ (string) $settings['split_ratio'] ] ) ? (string) $settings['split_ratio'] : '50';
$split_column_order_options = [ 'form-first' => __( 'Form column first (left)', 'wp-powersuite' ), 'form-second' => __( 'Form column second (right)', 'wp-powersuite' ) ];
$current_split_column_order = isset( $settings['split_column_order'] ) && isset( $split_column_order_options[ (string) $settings['split_column_order'] ] ) ? (string) $settings['split_column_order'] : 'form-first';

$classic_bg_type_raw = $settings['classic_bg_type'] ?? '';
$classic_bg_type     = in_array( $classic_bg_type_raw, [ 'color', 'gradient', 'image', 'video' ], true ) ? $classic_bg_type_raw : '';
$classic_bg_color    = isset( $settings['classic_bg_color'] ) ? (string) $settings['classic_bg_color'] : '#f0f0f1';
$classic_bg_image    = isset( $settings['classic_bg_image'] ) ? trim( (string) $settings['classic_bg_image'] ) : '';
$classic_bg_image_overlay_color   = isset( $settings['classic_bg_image_overlay_color'] ) ? trim( (string) $settings['classic_bg_image_overlay_color'] ) : '#000000';
$classic_bg_image_overlay_opacity = isset( $settings['classic_bg_image_overlay_opacity'] ) ? trim( (string) $settings['classic_bg_image_overlay_opacity'] ) : '0';
$classic_bg_image_position       = isset( $settings['classic_bg_image_position'] ) ? (string) $settings['classic_bg_image_position'] : 'center center';
$classic_bg_image_size           = isset( $settings['classic_bg_image_size'] ) ? (string) $settings['classic_bg_image_size'] : 'cover';
$classic_bg_image_repeat         = isset( $settings['classic_bg_image_repeat'] ) ? (string) $settings['classic_bg_image_repeat'] : 'no-repeat';
$classic_bg_video   = isset( $settings['classic_bg_video'] ) ? trim( (string) $settings['classic_bg_video'] ) : '';
$classic_bg_video_overlay_color   = isset( $settings['classic_bg_video_overlay_color'] ) ? trim( (string) $settings['classic_bg_video_overlay_color'] ) : '#000000';
$classic_bg_video_overlay_opacity = isset( $settings['classic_bg_video_overlay_opacity'] ) ? trim( (string) $settings['classic_bg_video_overlay_opacity'] ) : '0';
$classic_grad       = AdminHelpers::parseGradient( $settings, 'classic_bg_gradient', [ [ 'color' => '#f0f0f1', 'pos' => 0 ], [ 'color' => '#e0e0e0', 'pos' => 100 ] ] );
$classic_bg_gradient_type   = $classic_grad['type'];
$classic_bg_gradient_angle  = (string) $classic_grad['angle'];
$classic_bg_gradient_color1 = $classic_grad['color1'];
$classic_bg_gradient_pos1   = (string) $classic_grad['pos1'];
$classic_bg_gradient_color2 = $classic_grad['color2'];
$classic_bg_gradient_pos2   = (string) $classic_grad['pos2'];

// Split layout: Column with Form
$split_form_form_alignment_raw = $settings['split_form_form_alignment'] ?? 'center';
$split_form_form_alignment    = in_array( $split_form_form_alignment_raw, [ 'left', 'center', 'right' ], true ) ? $split_form_form_alignment_raw : 'center';
$split_form_bg_type_raw       = $settings['split_form_bg_type'] ?? '';
$split_form_bg_type           = in_array( $split_form_bg_type_raw, [ 'color', 'gradient', 'image', 'video' ], true ) ? $split_form_bg_type_raw : '';
$split_form_bg_color          = isset( $settings['split_form_bg_color'] ) ? (string) $settings['split_form_bg_color'] : '#f0f0f1';
$split_form_bg_image          = isset( $settings['split_form_bg_image'] ) ? trim( (string) $settings['split_form_bg_image'] ) : '';
$split_form_bg_image_overlay_color   = isset( $settings['split_form_bg_image_overlay_color'] ) ? trim( (string) $settings['split_form_bg_image_overlay_color'] ) : '#000000';
$split_form_bg_image_overlay_opacity = isset( $settings['split_form_bg_image_overlay_opacity'] ) ? trim( (string) $settings['split_form_bg_image_overlay_opacity'] ) : '0';
$split_form_bg_image_position       = isset( $settings['split_form_bg_image_position'] ) ? (string) $settings['split_form_bg_image_position'] : 'center center';
$split_form_bg_image_size           = isset( $settings['split_form_bg_image_size'] ) ? (string) $settings['split_form_bg_image_size'] : 'cover';
$split_form_bg_image_repeat         = isset( $settings['split_form_bg_image_repeat'] ) ? (string) $settings['split_form_bg_image_repeat'] : 'no-repeat';
$split_form_bg_video                = isset( $settings['split_form_bg_video'] ) ? trim( (string) $settings['split_form_bg_video'] ) : '';
$split_form_bg_video_overlay_color   = isset( $settings['split_form_bg_video_overlay_color'] ) ? trim( (string) $settings['split_form_bg_video_overlay_color'] ) : '#000000';
$split_form_bg_video_overlay_opacity = isset( $settings['split_form_bg_video_overlay_opacity'] ) ? trim( (string) $settings['split_form_bg_video_overlay_opacity'] ) : '0';
$split_form_grad                    = AdminHelpers::parseGradient( $settings, 'split_form_bg_gradient', [ [ 'color' => '#f0f0f1', 'pos' => 0 ], [ 'color' => '#e0e0e0', 'pos' => 100 ] ] );
$split_form_bg_gradient_type   = $split_form_grad['type'];
$split_form_bg_gradient_angle  = (string) $split_form_grad['angle'];
$split_form_bg_gradient_color1 = $split_form_grad['color1'];
$split_form_bg_gradient_pos1   = (string) $split_form_grad['pos1'];
$split_form_bg_gradient_color2 = $split_form_grad['color2'];
$split_form_bg_gradient_pos2   = (string) $split_form_grad['pos2'];

// Split layout: Column without Form
$split_empty_bg_type_raw = $settings['split_empty_bg_type'] ?? '';
$split_empty_bg_type     = in_array( $split_empty_bg_type_raw, [ 'color', 'gradient', 'image', 'video' ], true ) ? $split_empty_bg_type_raw : '';
$split_empty_bg_color    = isset( $settings['split_empty_bg_color'] ) ? (string) $settings['split_empty_bg_color'] : '#f0f0f1';
$split_empty_bg_image    = isset( $settings['split_empty_bg_image'] ) ? trim( (string) $settings['split_empty_bg_image'] ) : '';
$split_empty_bg_image_overlay_color   = isset( $settings['split_empty_bg_image_overlay_color'] ) ? trim( (string) $settings['split_empty_bg_image_overlay_color'] ) : '#000000';
$split_empty_bg_image_overlay_opacity = isset( $settings['split_empty_bg_image_overlay_opacity'] ) ? trim( (string) $settings['split_empty_bg_image_overlay_opacity'] ) : '0';
$split_empty_bg_image_position       = isset( $settings['split_empty_bg_image_position'] ) ? (string) $settings['split_empty_bg_image_position'] : 'center center';
$split_empty_bg_image_size           = isset( $settings['split_empty_bg_image_size'] ) ? (string) $settings['split_empty_bg_image_size'] : 'cover';
$split_empty_bg_image_repeat         = isset( $settings['split_empty_bg_image_repeat'] ) ? (string) $settings['split_empty_bg_image_repeat'] : 'no-repeat';
$split_empty_bg_video                = isset( $settings['split_empty_bg_video'] ) ? trim( (string) $settings['split_empty_bg_video'] ) : '';
$split_empty_bg_video_overlay_color   = isset( $settings['split_empty_bg_video_overlay_color'] ) ? trim( (string) $settings['split_empty_bg_video_overlay_color'] ) : '#000000';
$split_empty_bg_video_overlay_opacity = isset( $settings['split_empty_bg_video_overlay_opacity'] ) ? trim( (string) $settings['split_empty_bg_video_overlay_opacity'] ) : '0';
$split_empty_grad                    = AdminHelpers::parseGradient( $settings, 'split_empty_bg_gradient', [ [ 'color' => '#f0f0f1', 'pos' => 0 ], [ 'color' => '#e0e0e0', 'pos' => 100 ] ] );
$split_empty_bg_gradient_type   = $split_empty_grad['type'];
$split_empty_bg_gradient_angle  = (string) $split_empty_grad['angle'];
$split_empty_bg_gradient_color1 = $split_empty_grad['color1'];
$split_empty_bg_gradient_pos1   = (string) $split_empty_grad['pos1'];
$split_empty_bg_gradient_color2 = $split_empty_grad['color2'];
$split_empty_bg_gradient_pos2   = (string) $split_empty_grad['pos2'];
$split_empty_add_content = ! empty( $settings['split_empty_add_content'] ) && $settings['split_empty_add_content'] !== '0';
$split_empty_content     = isset( $settings['split_empty_content'] ) ? (string) $settings['split_empty_content'] : '';
if ( $split_empty_content === '' ) {
	$defaults = Module::getDefaultSettings();
	$split_empty_content = isset( $defaults['split_empty_content'] ) ? (string) $defaults['split_empty_content'] : '';
}

$logo_alignment_raw = $settings['logo_alignment'] ?? 'center';
$logo_alignment    = in_array( $logo_alignment_raw, [ 'left', 'center', 'right' ], true ) ? $logo_alignment_raw : 'center';
$logo_source_raw   = $settings['logo_source'] ?? 'upload';
$logo_source       = in_array( $logo_source_raw, [ 'upload', 'site_icon', 'url' ], true ) ? $logo_source_raw : 'upload';
$logo_external_url = isset( $settings['logo_external_url'] ) ? trim( (string) $settings['logo_external_url'] ) : '';
$site_icon_url     = get_site_icon_url( 512 );
$custom_css        = isset( $settings['custom_css'] ) ? (string) $settings['custom_css'] : '';

$box_form_width      = isset( $settings['box_form_width'] ) ? trim( (string) $settings['box_form_width'] ) : '';
$box_form_width_unit = in_array( $settings['box_form_width_unit'] ?? 'px', [ 'px', '%' ], true ) ? ( $settings['box_form_width_unit'] ?? 'px' ) : 'px';
$form_width          = isset( $settings['form_width'] ) ? trim( (string) $settings['form_width'] ) : '';
$form_width_unit     = in_array( $settings['form_width_unit'] ?? 'px', [ 'px', '%' ], true ) ? ( $settings['form_width_unit'] ?? 'px' ) : 'px';
$box_bg_type_raw    = $settings['box_bg_type'] ?? '';
$box_bg_type        = in_array( $box_bg_type_raw, [ 'color', 'image', 'gradient' ], true ) ? $box_bg_type_raw : '';
$box_bg_color       = $settings['box_bg_color'] ?? '#ffffff';
$box_bg_image       = $settings['box_bg_image'] ?? '';
$box_bg_image_overlay_color   = isset( $settings['box_bg_image_overlay_color'] ) ? trim( (string) $settings['box_bg_image_overlay_color'] ) : '#000000';
$box_bg_image_overlay_opacity = isset( $settings['box_bg_image_overlay_opacity'] ) ? trim( (string) $settings['box_bg_image_overlay_opacity'] ) : '0';
$box_bg_gradient_json = isset( $settings['box_bg_gradient'] ) ? (string) $settings['box_bg_gradient'] : '';
$box_bg_gradient_parsed = [];
if ( $box_bg_gradient_json !== '' ) {
	$box_bg_gradient_parsed = json_decode( $box_bg_gradient_json, true );
}
if ( ! is_array( $box_bg_gradient_parsed ) || empty( $box_bg_gradient_parsed['stops'] ) || ! is_array( $box_bg_gradient_parsed['stops'] ) ) {
	$box_bg_gradient_parsed = [ 'type' => 'linear', 'angle' => 135, 'stops' => [ [ 'color' => '#ffffff', 'pos' => 0 ], [ 'color' => '#e8e8e8', 'pos' => 100 ] ] ];
}
$box_bg_gradient_type   = ( isset( $box_bg_gradient_parsed['type'] ) && $box_bg_gradient_parsed['type'] === 'radial' ) ? 'radial' : 'linear';
$box_bg_gradient_angle  = isset( $box_bg_gradient_parsed['angle'] ) ? max( 0, min( 360, (int) $box_bg_gradient_parsed['angle'] ) ) : 135;
$box_bg_gradient_color1 = isset( $box_bg_gradient_parsed['stops'][0]['color'] ) && preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/', (string) $box_bg_gradient_parsed['stops'][0]['color'] ) ? (string) $box_bg_gradient_parsed['stops'][0]['color'] : '#ffffff';
$box_bg_gradient_pos1   = isset( $box_bg_gradient_parsed['stops'][0]['pos'] ) ? max( 0, min( 100, (int) $box_bg_gradient_parsed['stops'][0]['pos'] ) ) : 0;
$box_bg_gradient_color2 = isset( $box_bg_gradient_parsed['stops'][1]['color'] ) && preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', (string) $box_bg_gradient_parsed['stops'][1]['color'] ) ? (string) $box_bg_gradient_parsed['stops'][1]['color'] : '#e8e8e8';
$box_bg_gradient_pos2   = isset( $box_bg_gradient_parsed['stops'][1]['pos'] ) ? max( 0, min( 100, (int) $box_bg_gradient_parsed['stops'][1]['pos'] ) ) : 100;
$box_padding_desktop   = isset( $settings['box_padding_desktop'] ) ? trim( (string) $settings['box_padding_desktop'] ) : ( isset( $settings['box_padding'] ) ? trim( (string) $settings['box_padding'] ) : '' );
$box_padding_tablet    = isset( $settings['box_padding_tablet'] ) ? trim( (string) $settings['box_padding_tablet'] ) : '';
$box_padding_mobile    = isset( $settings['box_padding_mobile'] ) ? trim( (string) $settings['box_padding_mobile'] ) : '';
$box_padding_top              = isset( $settings['box_padding_top'] ) ? trim( (string) $settings['box_padding_top'] ) : '';
$box_padding_right            = isset( $settings['box_padding_right'] ) ? trim( (string) $settings['box_padding_right'] ) : '';
$box_padding_bottom           = isset( $settings['box_padding_bottom'] ) ? trim( (string) $settings['box_padding_bottom'] ) : '';
$box_padding_left             = isset( $settings['box_padding_left'] ) ? trim( (string) $settings['box_padding_left'] ) : '';
$box_padding_top_tablet       = isset( $settings['box_padding_top_tablet'] ) ? trim( (string) $settings['box_padding_top_tablet'] ) : '';
$box_padding_right_tablet     = isset( $settings['box_padding_right_tablet'] ) ? trim( (string) $settings['box_padding_right_tablet'] ) : '';
$box_padding_bottom_tablet    = isset( $settings['box_padding_bottom_tablet'] ) ? trim( (string) $settings['box_padding_bottom_tablet'] ) : '';
$box_padding_left_tablet      = isset( $settings['box_padding_left_tablet'] ) ? trim( (string) $settings['box_padding_left_tablet'] ) : '';
$box_padding_top_mobile       = isset( $settings['box_padding_top_mobile'] ) ? trim( (string) $settings['box_padding_top_mobile'] ) : '';
$box_padding_right_mobile     = isset( $settings['box_padding_right_mobile'] ) ? trim( (string) $settings['box_padding_right_mobile'] ) : '';
$box_padding_bottom_mobile    = isset( $settings['box_padding_bottom_mobile'] ) ? trim( (string) $settings['box_padding_bottom_mobile'] ) : '';
$box_padding_left_mobile      = isset( $settings['box_padding_left_mobile'] ) ? trim( (string) $settings['box_padding_left_mobile'] ) : '';
if ( $box_padding_top === '' && $box_padding_desktop !== '' ) {
	$box_padding_top = $box_padding_right = $box_padding_bottom = $box_padding_left = $box_padding_desktop;
}
if ( $box_padding_top_tablet === '' && $box_padding_tablet !== '' ) {
	$box_padding_top_tablet = $box_padding_right_tablet = $box_padding_bottom_tablet = $box_padding_left_tablet = $box_padding_tablet;
}
if ( $box_padding_top_mobile === '' && $box_padding_mobile !== '' ) {
	$box_padding_top_mobile = $box_padding_right_mobile = $box_padding_bottom_mobile = $box_padding_left_mobile = $box_padding_mobile;
}
// Padding, border width, border radius use px only (no unit selector)
$box_border_type          = in_array( $settings['box_border_type'], [ 'none', 'solid', 'dashed', 'dotted' ], true ) ? $settings['box_border_type'] : 'none';
$box_border_color         = (string) $settings['box_border_color'];
$box_border_width         = trim( (string) $settings['box_border_width'] );
$box_border_radius_desktop = trim( (string) ( $settings['box_border_radius_desktop'] ?? $settings['box_border_radius'] ?? '' ) );
$box_border_radius_tablet  = trim( (string) $settings['box_border_radius_tablet'] );
$box_border_radius_mobile  = trim( (string) $settings['box_border_radius_mobile'] );
$box_shadow_x             = (int) $settings['box_shadow_x'];
$box_shadow_y             = (int) $settings['box_shadow_y'];
$box_shadow_blur          = (int) $settings['box_shadow_blur'];
$box_shadow_spread        = (int) $settings['box_shadow_spread'];
$box_shadow_color         = (string) $settings['box_shadow_color'];
$box_shadow_inset         = ( ! empty( $settings['box_shadow_inset'] ) && $settings['box_shadow_inset'] !== '0' ) ? '1' : '0';

// Form tab (form section) settings.
$form_padding_desktop   = isset( $settings['form_padding_desktop'] ) ? trim( (string) $settings['form_padding_desktop'] ) : '';
$form_padding_tablet    = isset( $settings['form_padding_tablet'] ) ? trim( (string) $settings['form_padding_tablet'] ) : '';
$form_padding_mobile    = isset( $settings['form_padding_mobile'] ) ? trim( (string) $settings['form_padding_mobile'] ) : '';
$form_padding_top              = isset( $settings['form_padding_top'] ) ? trim( (string) $settings['form_padding_top'] ) : '';
$form_padding_right            = isset( $settings['form_padding_right'] ) ? trim( (string) $settings['form_padding_right'] ) : '';
$form_padding_bottom           = isset( $settings['form_padding_bottom'] ) ? trim( (string) $settings['form_padding_bottom'] ) : '';
$form_padding_left             = isset( $settings['form_padding_left'] ) ? trim( (string) $settings['form_padding_left'] ) : '';
$form_padding_top_tablet       = isset( $settings['form_padding_top_tablet'] ) ? trim( (string) $settings['form_padding_top_tablet'] ) : '';
$form_padding_right_tablet     = isset( $settings['form_padding_right_tablet'] ) ? trim( (string) $settings['form_padding_right_tablet'] ) : '';
$form_padding_bottom_tablet    = isset( $settings['form_padding_bottom_tablet'] ) ? trim( (string) $settings['form_padding_bottom_tablet'] ) : '';
$form_padding_left_tablet      = isset( $settings['form_padding_left_tablet'] ) ? trim( (string) $settings['form_padding_left_tablet'] ) : '';
$form_padding_top_mobile       = isset( $settings['form_padding_top_mobile'] ) ? trim( (string) $settings['form_padding_top_mobile'] ) : '';
$form_padding_right_mobile     = isset( $settings['form_padding_right_mobile'] ) ? trim( (string) $settings['form_padding_right_mobile'] ) : '';
$form_padding_bottom_mobile    = isset( $settings['form_padding_bottom_mobile'] ) ? trim( (string) $settings['form_padding_bottom_mobile'] ) : '';
$form_padding_left_mobile      = isset( $settings['form_padding_left_mobile'] ) ? trim( (string) $settings['form_padding_left_mobile'] ) : '';
if ( $form_padding_top === '' && $form_padding_desktop !== '' ) {
	$form_padding_top = $form_padding_right = $form_padding_bottom = $form_padding_left = $form_padding_desktop;
}
if ( $form_padding_top_tablet === '' && $form_padding_tablet !== '' ) {
	$form_padding_top_tablet = $form_padding_right_tablet = $form_padding_bottom_tablet = $form_padding_left_tablet = $form_padding_tablet;
}
if ( $form_padding_top_mobile === '' && $form_padding_mobile !== '' ) {
	$form_padding_top_mobile = $form_padding_right_mobile = $form_padding_bottom_mobile = $form_padding_left_mobile = $form_padding_mobile;
}
$form_border_type       = in_array( $settings['form_border_type'] ?? 'none', [ 'none', 'solid', 'dashed', 'dotted' ], true ) ? ( $settings['form_border_type'] ?? 'none' ) : 'none';
$form_border_color      = (string) ( $settings['form_border_color'] ?? '#cccccc' );
$form_border_width      = trim( (string) ( $settings['form_border_width'] ?? '1' ) );
$form_border_radius_desktop = trim( (string) ( $settings['form_border_radius_desktop'] ?? '' ) );
$form_border_radius_tablet  = trim( (string) ( $settings['form_border_radius_tablet'] ?? '' ) );
$form_border_radius_mobile  = trim( (string) ( $settings['form_border_radius_mobile'] ?? '' ) );
$form_shadow_x      = (int) ( $settings['form_shadow_x'] ?? 0 );
$form_shadow_y      = (int) ( $settings['form_shadow_y'] ?? 0 );
$form_shadow_blur   = (int) ( $settings['form_shadow_blur'] ?? 0 );
$form_shadow_spread = (int) ( $settings['form_shadow_spread'] ?? 0 );
$form_shadow_color  = (string) ( $settings['form_shadow_color'] ?? '#000000' );
$form_shadow_inset  = ( ! empty( $settings['form_shadow_inset'] ) && $settings['form_shadow_inset'] !== '0' ) ? '1' : '0';
$form_bg_type_raw       = $settings['form_bg_type'] ?? '';
$form_bg_type           = in_array( $form_bg_type_raw, [ 'color', 'image', 'gradient' ], true ) ? $form_bg_type_raw : '';
$form_bg_color          = $settings['form_bg_color'] ?? '#ffffff';
$form_bg_image          = $settings['form_bg_image'] ?? '';
$form_bg_image_overlay_color   = isset( $settings['form_bg_image_overlay_color'] ) ? trim( (string) $settings['form_bg_image_overlay_color'] ) : '#000000';
$form_bg_image_overlay_opacity = isset( $settings['form_bg_image_overlay_opacity'] ) ? trim( (string) $settings['form_bg_image_overlay_opacity'] ) : '0';
$form_grad              = AdminHelpers::parseGradient( $settings, 'form_bg_gradient' );
$form_bg_gradient_type   = $form_grad['type'];
$form_bg_gradient_angle  = $form_grad['angle'];
$form_bg_gradient_color1 = $form_grad['color1'];
$form_bg_gradient_pos1   = $form_grad['pos1'];
$form_bg_gradient_color2 = $form_grad['color2'];
$form_bg_gradient_pos2   = $form_grad['pos2'];

// Label tab
$label_font_family    = isset( $settings['label_font_family'] ) ? (string) $settings['label_font_family'] : '';
$label_font_size_desktop = isset( $settings['label_font_size_desktop'] ) ? trim( (string) $settings['label_font_size_desktop'] ) : '';
$label_font_size_tablet  = isset( $settings['label_font_size_tablet'] ) ? trim( (string) $settings['label_font_size_tablet'] ) : '';
$label_font_size_mobile  = isset( $settings['label_font_size_mobile'] ) ? trim( (string) $settings['label_font_size_mobile'] ) : '';
$label_font_weight   = isset( $settings['label_font_weight'] ) ? (string) $settings['label_font_weight'] : '';
$label_line_height_desktop = isset( $settings['label_line_height_desktop'] ) ? trim( (string) $settings['label_line_height_desktop'] ) : '';
$label_line_height_tablet  = isset( $settings['label_line_height_tablet'] ) ? trim( (string) $settings['label_line_height_tablet'] ) : '';
$label_line_height_mobile  = isset( $settings['label_line_height_mobile'] ) ? trim( (string) $settings['label_line_height_mobile'] ) : '';
$label_letter_spacing_desktop = isset( $settings['label_letter_spacing_desktop'] ) ? trim( (string) $settings['label_letter_spacing_desktop'] ) : '';
$label_letter_spacing_tablet  = isset( $settings['label_letter_spacing_tablet'] ) ? trim( (string) $settings['label_letter_spacing_tablet'] ) : '';
$label_letter_spacing_mobile  = isset( $settings['label_letter_spacing_mobile'] ) ? trim( (string) $settings['label_letter_spacing_mobile'] ) : '';
$label_text_transform = isset( $settings['label_text_transform'] ) ? (string) $settings['label_text_transform'] : '';
$label_font_style     = isset( $settings['label_font_style'] ) ? (string) $settings['label_font_style'] : '';
$label_text_color     = isset( $settings['label_text_color'] ) ? (string) $settings['label_text_color'] : '';
$label_spacing_bottom = isset( $settings['label_spacing_bottom'] ) ? trim( (string) $settings['label_spacing_bottom'] ) : '';

// Footer tab
$footer_font_family    = isset( $settings['footer_font_family'] ) ? (string) $settings['footer_font_family'] : '';
$footer_font_size_desktop = isset( $settings['footer_font_size_desktop'] ) ? trim( (string) $settings['footer_font_size_desktop'] ) : '';
$footer_font_size_tablet  = isset( $settings['footer_font_size_tablet'] ) ? trim( (string) $settings['footer_font_size_tablet'] ) : '';
$footer_font_size_mobile  = isset( $settings['footer_font_size_mobile'] ) ? trim( (string) $settings['footer_font_size_mobile'] ) : '';
$footer_font_weight   = isset( $settings['footer_font_weight'] ) ? (string) $settings['footer_font_weight'] : '';
$footer_line_height_desktop = isset( $settings['footer_line_height_desktop'] ) ? trim( (string) $settings['footer_line_height_desktop'] ) : '';
$footer_line_height_tablet  = isset( $settings['footer_line_height_tablet'] ) ? trim( (string) $settings['footer_line_height_tablet'] ) : '';
$footer_line_height_mobile  = isset( $settings['footer_line_height_mobile'] ) ? trim( (string) $settings['footer_line_height_mobile'] ) : '';
$footer_letter_spacing_desktop = isset( $settings['footer_letter_spacing_desktop'] ) ? trim( (string) $settings['footer_letter_spacing_desktop'] ) : '';
$footer_letter_spacing_tablet  = isset( $settings['footer_letter_spacing_tablet'] ) ? trim( (string) $settings['footer_letter_spacing_tablet'] ) : '';
$footer_letter_spacing_mobile  = isset( $settings['footer_letter_spacing_mobile'] ) ? trim( (string) $settings['footer_letter_spacing_mobile'] ) : '';
$footer_text_transform = isset( $settings['footer_text_transform'] ) ? (string) $settings['footer_text_transform'] : '';
$footer_font_style     = isset( $settings['footer_font_style'] ) ? (string) $settings['footer_font_style'] : '';
$footer_normal_text_color = isset( $settings['footer_normal_text_color'] ) ? (string) $settings['footer_normal_text_color'] : '';
$footer_hover_text_color  = isset( $settings['footer_hover_text_color'] ) ? (string) $settings['footer_hover_text_color'] : '';

// Fields tab (input typography).
$field_font_family    = isset( $settings['field_font_family'] ) ? (string) $settings['field_font_family'] : '';
$field_font_size      = isset( $settings['field_font_size'] ) ? trim( (string) $settings['field_font_size'] ) : '';
$field_font_size_desktop = isset( $settings['field_font_size_desktop'] ) ? trim( (string) $settings['field_font_size_desktop'] ) : $field_font_size;
$field_font_size_tablet  = isset( $settings['field_font_size_tablet'] ) ? trim( (string) $settings['field_font_size_tablet'] ) : '';
$field_font_size_mobile   = isset( $settings['field_font_size_mobile'] ) ? trim( (string) $settings['field_font_size_mobile'] ) : '';
$field_font_weight    = isset( $settings['field_font_weight'] ) ? trim( (string) $settings['field_font_weight'] ) : '';
$field_line_height    = isset( $settings['field_line_height'] ) ? trim( (string) $settings['field_line_height'] ) : '';
$field_line_height_desktop = isset( $settings['field_line_height_desktop'] ) ? trim( (string) $settings['field_line_height_desktop'] ) : $field_line_height;
$field_line_height_tablet  = isset( $settings['field_line_height_tablet'] ) ? trim( (string) $settings['field_line_height_tablet'] ) : '';
$field_line_height_mobile   = isset( $settings['field_line_height_mobile'] ) ? trim( (string) $settings['field_line_height_mobile'] ) : '';
$field_letter_spacing = isset( $settings['field_letter_spacing'] ) ? trim( (string) $settings['field_letter_spacing'] ) : '';
$field_letter_spacing_desktop = isset( $settings['field_letter_spacing_desktop'] ) ? trim( (string) $settings['field_letter_spacing_desktop'] ) : $field_letter_spacing;
$field_letter_spacing_tablet  = isset( $settings['field_letter_spacing_tablet'] ) ? trim( (string) $settings['field_letter_spacing_tablet'] ) : '';
$field_letter_spacing_mobile   = isset( $settings['field_letter_spacing_mobile'] ) ? trim( (string) $settings['field_letter_spacing_mobile'] ) : '';
$field_text_transform = isset( $settings['field_text_transform'] ) ? (string) $settings['field_text_transform'] : '';
$field_font_style     = isset( $settings['field_font_style'] ) ? (string) $settings['field_font_style'] : '';
// Normal state (text color + padding + border + shadow; padding applies to both states)
$field_normal_text_color   = isset( $settings['field_normal_text_color'] ) ? (string) $settings['field_normal_text_color'] : '';
$field_normal_padding_top         = isset( $settings['field_normal_padding_top'] ) ? trim( (string) $settings['field_normal_padding_top'] ) : '';
$field_normal_padding_right       = isset( $settings['field_normal_padding_right'] ) ? trim( (string) $settings['field_normal_padding_right'] ) : '';
$field_normal_padding_bottom      = isset( $settings['field_normal_padding_bottom'] ) ? trim( (string) $settings['field_normal_padding_bottom'] ) : '';
$field_normal_padding_left        = isset( $settings['field_normal_padding_left'] ) ? trim( (string) $settings['field_normal_padding_left'] ) : '';
$field_normal_padding_top_tablet  = isset( $settings['field_normal_padding_top_tablet'] ) ? trim( (string) $settings['field_normal_padding_top_tablet'] ) : '';
$field_normal_padding_right_tablet = isset( $settings['field_normal_padding_right_tablet'] ) ? trim( (string) $settings['field_normal_padding_right_tablet'] ) : '';
$field_normal_padding_bottom_tablet = isset( $settings['field_normal_padding_bottom_tablet'] ) ? trim( (string) $settings['field_normal_padding_bottom_tablet'] ) : '';
$field_normal_padding_left_tablet = isset( $settings['field_normal_padding_left_tablet'] ) ? trim( (string) $settings['field_normal_padding_left_tablet'] ) : '';
$field_normal_padding_top_mobile  = isset( $settings['field_normal_padding_top_mobile'] ) ? trim( (string) $settings['field_normal_padding_top_mobile'] ) : '';
$field_normal_padding_right_mobile = isset( $settings['field_normal_padding_right_mobile'] ) ? trim( (string) $settings['field_normal_padding_right_mobile'] ) : '';
$field_normal_padding_bottom_mobile = isset( $settings['field_normal_padding_bottom_mobile'] ) ? trim( (string) $settings['field_normal_padding_bottom_mobile'] ) : '';
$field_normal_padding_left_mobile = isset( $settings['field_normal_padding_left_mobile'] ) ? trim( (string) $settings['field_normal_padding_left_mobile'] ) : '';
$field_normal_border_type    = in_array( $settings['field_normal_border_type'] ?? 'none', [ 'none', 'solid', 'dashed', 'dotted' ], true ) ? ( $settings['field_normal_border_type'] ?? 'none' ) : 'none';
$field_normal_border_color   = isset( $settings['field_normal_border_color'] ) ? (string) $settings['field_normal_border_color'] : '#cccccc';
$field_normal_border_width   = isset( $settings['field_normal_border_width'] ) ? trim( (string) $settings['field_normal_border_width'] ) : '1';
$field_normal_border_radius  = isset( $settings['field_normal_border_radius'] ) ? trim( (string) $settings['field_normal_border_radius'] ) : '';
$field_normal_border_radius_desktop = isset( $settings['field_normal_border_radius_desktop'] ) ? trim( (string) $settings['field_normal_border_radius_desktop'] ) : ( isset( $settings['field_normal_border_radius'] ) ? trim( (string) $settings['field_normal_border_radius'] ) : '' );
$field_normal_border_radius_tablet  = isset( $settings['field_normal_border_radius_tablet'] ) ? trim( (string) $settings['field_normal_border_radius_tablet'] ) : '';
$field_normal_border_radius_mobile  = isset( $settings['field_normal_border_radius_mobile'] ) ? trim( (string) $settings['field_normal_border_radius_mobile'] ) : '';
$field_normal_shadow_x       = (int) ( $settings['field_normal_shadow_x'] ?? 0 );
$field_normal_shadow_y       = (int) ( $settings['field_normal_shadow_y'] ?? 0 );
$field_normal_shadow_blur    = (int) ( $settings['field_normal_shadow_blur'] ?? 0 );
$field_normal_shadow_spread  = (int) ( $settings['field_normal_shadow_spread'] ?? 0 );
$field_normal_shadow_color   = isset( $settings['field_normal_shadow_color'] ) ? (string) $settings['field_normal_shadow_color'] : '#000000';
$field_normal_shadow_inset   = ( ! empty( $settings['field_normal_shadow_inset'] ) && $settings['field_normal_shadow_inset'] !== '0' ) ? '1' : '0';
$field_normal_bg_color         = isset( $settings['field_normal_bg_color'] ) ? trim( (string) $settings['field_normal_bg_color'] ) : '';
$field_normal_bg_overlay_opacity = isset( $settings['field_normal_bg_overlay_opacity'] ) ? trim( (string) $settings['field_normal_bg_overlay_opacity'] ) : '100';
$field_border_shadow_vars = [
	'border_type'  => $field_normal_border_type,
	'border_color'  => $field_normal_border_color,
	'border_width'  => $field_normal_border_width,
	'border_radius' => $field_normal_border_radius,
	'border_radius_responsive' => true,
	'border_radius_desktop' => $field_normal_border_radius_desktop,
	'border_radius_tablet'  => $field_normal_border_radius_tablet,
	'border_radius_mobile'  => $field_normal_border_radius_mobile,
	'shadow_x'      => $field_normal_shadow_x,
	'shadow_y'      => $field_normal_shadow_y,
	'shadow_blur'   => $field_normal_shadow_blur,
	'shadow_spread' => $field_normal_shadow_spread,
	'shadow_color'  => $field_normal_shadow_color,
	'shadow_inset'  => $field_normal_shadow_inset,
];
// Focus state (padding only; border/shadow not shown in UI)
$field_focus_padding_top    = isset( $settings['field_focus_padding_top'] ) ? trim( (string) $settings['field_focus_padding_top'] ) : '';
$field_focus_padding_right  = isset( $settings['field_focus_padding_right'] ) ? trim( (string) $settings['field_focus_padding_right'] ) : '';
$field_focus_padding_bottom = isset( $settings['field_focus_padding_bottom'] ) ? trim( (string) $settings['field_focus_padding_bottom'] ) : '';
$field_focus_padding_left   = isset( $settings['field_focus_padding_left'] ) ? trim( (string) $settings['field_focus_padding_left'] ) : '';

// Button tab: typography
$button_font_family    = isset( $settings['button_font_family'] ) ? (string) $settings['button_font_family'] : '';
$button_font_size_desktop = isset( $settings['button_font_size_desktop'] ) ? trim( (string) $settings['button_font_size_desktop'] ) : '';
$button_font_size_tablet  = isset( $settings['button_font_size_tablet'] ) ? trim( (string) $settings['button_font_size_tablet'] ) : '';
$button_font_size_mobile  = isset( $settings['button_font_size_mobile'] ) ? trim( (string) $settings['button_font_size_mobile'] ) : '';
$button_font_weight   = isset( $settings['button_font_weight'] ) ? (string) $settings['button_font_weight'] : '';
$button_line_height_desktop = isset( $settings['button_line_height_desktop'] ) ? trim( (string) $settings['button_line_height_desktop'] ) : '';
$button_line_height_tablet  = isset( $settings['button_line_height_tablet'] ) ? trim( (string) $settings['button_line_height_tablet'] ) : '';
$button_line_height_mobile  = isset( $settings['button_line_height_mobile'] ) ? trim( (string) $settings['button_line_height_mobile'] ) : '';
$button_letter_spacing_desktop = isset( $settings['button_letter_spacing_desktop'] ) ? trim( (string) $settings['button_letter_spacing_desktop'] ) : '';
$button_letter_spacing_tablet  = isset( $settings['button_letter_spacing_tablet'] ) ? trim( (string) $settings['button_letter_spacing_tablet'] ) : '';
$button_letter_spacing_mobile  = isset( $settings['button_letter_spacing_mobile'] ) ? trim( (string) $settings['button_letter_spacing_mobile'] ) : '';
$button_text_transform = isset( $settings['button_text_transform'] ) ? (string) $settings['button_text_transform'] : '';
$button_font_style     = isset( $settings['button_font_style'] ) ? (string) $settings['button_font_style'] : '';
// Button: padding (4 sides per device: desktop, tablet, mobile)
$button_normal_padding_top         = isset( $settings['button_normal_padding_top'] ) ? trim( (string) $settings['button_normal_padding_top'] ) : '';
$button_normal_padding_right       = isset( $settings['button_normal_padding_right'] ) ? trim( (string) $settings['button_normal_padding_right'] ) : '';
$button_normal_padding_bottom      = isset( $settings['button_normal_padding_bottom'] ) ? trim( (string) $settings['button_normal_padding_bottom'] ) : '';
$button_normal_padding_left        = isset( $settings['button_normal_padding_left'] ) ? trim( (string) $settings['button_normal_padding_left'] ) : '';
$button_normal_padding_top_tablet  = isset( $settings['button_normal_padding_top_tablet'] ) ? trim( (string) $settings['button_normal_padding_top_tablet'] ) : '';
$button_normal_padding_right_tablet = isset( $settings['button_normal_padding_right_tablet'] ) ? trim( (string) $settings['button_normal_padding_right_tablet'] ) : '';
$button_normal_padding_bottom_tablet = isset( $settings['button_normal_padding_bottom_tablet'] ) ? trim( (string) $settings['button_normal_padding_bottom_tablet'] ) : '';
$button_normal_padding_left_tablet = isset( $settings['button_normal_padding_left_tablet'] ) ? trim( (string) $settings['button_normal_padding_left_tablet'] ) : '';
$button_normal_padding_top_mobile  = isset( $settings['button_normal_padding_top_mobile'] ) ? trim( (string) $settings['button_normal_padding_top_mobile'] ) : '';
$button_normal_padding_right_mobile = isset( $settings['button_normal_padding_right_mobile'] ) ? trim( (string) $settings['button_normal_padding_right_mobile'] ) : '';
$button_normal_padding_bottom_mobile = isset( $settings['button_normal_padding_bottom_mobile'] ) ? trim( (string) $settings['button_normal_padding_bottom_mobile'] ) : '';
$button_normal_padding_left_mobile = isset( $settings['button_normal_padding_left_mobile'] ) ? trim( (string) $settings['button_normal_padding_left_mobile'] ) : '';
$button_normal_text_color     = isset( $settings['button_normal_text_color'] ) ? (string) $settings['button_normal_text_color'] : '';
$button_normal_bg_type_raw    = $settings['button_normal_bg_type'] ?? '';
$button_normal_bg_type        = in_array( $button_normal_bg_type_raw, [ 'color', 'gradient' ], true ) ? $button_normal_bg_type_raw : '';
$button_normal_bg_color       = isset( $settings['button_normal_bg_color'] ) ? (string) $settings['button_normal_bg_color'] : '#2271b1';
$button_normal_grad           = AdminHelpers::parseGradient( $settings, 'button_normal_bg_gradient', [ [ 'color' => '#2271b1', 'pos' => 0 ], [ 'color' => '#135e96', 'pos' => 100 ] ] );
$button_normal_border_type    = in_array( $settings['button_normal_border_type'] ?? 'none', [ 'none', 'solid', 'dashed', 'dotted' ], true ) ? ( $settings['button_normal_border_type'] ?? 'none' ) : 'none';
$button_normal_border_color   = isset( $settings['button_normal_border_color'] ) ? (string) $settings['button_normal_border_color'] : '#cccccc';
$button_normal_border_width   = isset( $settings['button_normal_border_width'] ) ? trim( (string) $settings['button_normal_border_width'] ) : '1';
$button_normal_border_radius  = isset( $settings['button_normal_border_radius'] ) ? trim( (string) $settings['button_normal_border_radius'] ) : '';
$button_normal_border_radius_desktop = isset( $settings['button_normal_border_radius_desktop'] ) ? trim( (string) $settings['button_normal_border_radius_desktop'] ) : ( isset( $settings['button_normal_border_radius'] ) ? trim( (string) $settings['button_normal_border_radius'] ) : '' );
$button_normal_border_radius_tablet  = isset( $settings['button_normal_border_radius_tablet'] ) ? trim( (string) $settings['button_normal_border_radius_tablet'] ) : '';
$button_normal_border_radius_mobile  = isset( $settings['button_normal_border_radius_mobile'] ) ? trim( (string) $settings['button_normal_border_radius_mobile'] ) : '';
$button_normal_shadow_x       = (int) ( $settings['button_normal_shadow_x'] ?? 0 );
$button_normal_shadow_y       = (int) ( $settings['button_normal_shadow_y'] ?? 0 );
$button_normal_shadow_blur    = (int) ( $settings['button_normal_shadow_blur'] ?? 0 );
$button_normal_shadow_spread  = (int) ( $settings['button_normal_shadow_spread'] ?? 0 );
$button_normal_shadow_color   = isset( $settings['button_normal_shadow_color'] ) ? (string) $settings['button_normal_shadow_color'] : '#000000';
$button_normal_shadow_inset   = ( ! empty( $settings['button_normal_shadow_inset'] ) && $settings['button_normal_shadow_inset'] !== '0' ) ? '1' : '0';
$button_normal_border_shadow_vars = [
	'border_type'   => $button_normal_border_type,
	'border_color'   => $button_normal_border_color,
	'border_width'   => $button_normal_border_width,
	'border_radius'  => $button_normal_border_radius,
	'border_radius_responsive' => true,
	'border_radius_desktop' => $button_normal_border_radius_desktop,
	'border_radius_tablet'  => $button_normal_border_radius_tablet,
	'border_radius_mobile'  => $button_normal_border_radius_mobile,
	'shadow_x'      => $button_normal_shadow_x,
	'shadow_y'      => $button_normal_shadow_y,
	'shadow_blur'   => $button_normal_shadow_blur,
	'shadow_spread' => $button_normal_shadow_spread,
	'shadow_color'  => $button_normal_shadow_color,
	'shadow_inset'  => $button_normal_shadow_inset,
	'shadow_row_label' => __( 'Button Shadow', 'wp-powersuite' ),
];
$button_hover_text_color     = isset( $settings['button_hover_text_color'] ) ? (string) $settings['button_hover_text_color'] : '';
$button_hover_bg_type_raw    = $settings['button_hover_bg_type'] ?? '';
$button_hover_bg_type        = in_array( $button_hover_bg_type_raw, [ 'color', 'gradient' ], true ) ? $button_hover_bg_type_raw : '';
$button_hover_bg_color       = isset( $settings['button_hover_bg_color'] ) ? (string) $settings['button_hover_bg_color'] : '#135e96';
$button_hover_grad           = AdminHelpers::parseGradient( $settings, 'button_hover_bg_gradient', [ [ 'color' => '#135e96', 'pos' => 0 ], [ 'color' => '#2271b1', 'pos' => 100 ] ] );
$button_hover_border_type    = in_array( $settings['button_hover_border_type'] ?? 'none', [ 'none', 'solid', 'dashed', 'dotted' ], true ) ? ( $settings['button_hover_border_type'] ?? 'none' ) : 'none';
$button_hover_border_color   = isset( $settings['button_hover_border_color'] ) ? (string) $settings['button_hover_border_color'] : '#cccccc';
$button_hover_border_width   = isset( $settings['button_hover_border_width'] ) ? trim( (string) $settings['button_hover_border_width'] ) : '1';
$button_hover_border_radius  = isset( $settings['button_hover_border_radius'] ) ? trim( (string) $settings['button_hover_border_radius'] ) : '';
$button_hover_border_radius_desktop = isset( $settings['button_hover_border_radius_desktop'] ) ? trim( (string) $settings['button_hover_border_radius_desktop'] ) : ( isset( $settings['button_hover_border_radius'] ) ? trim( (string) $settings['button_hover_border_radius'] ) : '' );
$button_hover_border_radius_tablet  = isset( $settings['button_hover_border_radius_tablet'] ) ? trim( (string) $settings['button_hover_border_radius_tablet'] ) : '';
$button_hover_border_radius_mobile  = isset( $settings['button_hover_border_radius_mobile'] ) ? trim( (string) $settings['button_hover_border_radius_mobile'] ) : '';
$button_hover_shadow_x       = (int) ( $settings['button_hover_shadow_x'] ?? 0 );
$button_hover_shadow_y       = (int) ( $settings['button_hover_shadow_y'] ?? 0 );
$button_hover_shadow_blur    = (int) ( $settings['button_hover_shadow_blur'] ?? 0 );
$button_hover_shadow_spread  = (int) ( $settings['button_hover_shadow_spread'] ?? 0 );
$button_hover_shadow_color   = isset( $settings['button_hover_shadow_color'] ) ? (string) $settings['button_hover_shadow_color'] : '#000000';
$button_hover_shadow_inset   = ( ! empty( $settings['button_hover_shadow_inset'] ) && $settings['button_hover_shadow_inset'] !== '0' ) ? '1' : '0';
$button_hover_border_shadow_vars = [
	'border_type'   => $button_hover_border_type,
	'border_color'   => $button_hover_border_color,
	'border_width'   => $button_hover_border_width,
	'border_radius'  => $button_hover_border_radius,
	'border_radius_responsive' => true,
	'border_radius_desktop' => $button_hover_border_radius_desktop,
	'border_radius_tablet'  => $button_hover_border_radius_tablet,
	'border_radius_mobile'  => $button_hover_border_radius_mobile,
	'shadow_x'      => $button_hover_shadow_x,
	'shadow_y'      => $button_hover_shadow_y,
	'shadow_blur'   => $button_hover_shadow_blur,
	'shadow_spread' => $button_hover_shadow_spread,
	'shadow_color'  => $button_hover_shadow_color,
	'shadow_inset'  => $button_hover_shadow_inset,
	'shadow_row_label' => __( 'Button Shadow', 'wp-powersuite' ),
];
$field_has_typography  = ( $field_font_family !== '' || $field_font_size_desktop !== '' || $field_font_size_tablet !== '' || $field_font_size_mobile !== '' || $field_font_weight !== '' || $field_line_height_desktop !== '' || $field_line_height_tablet !== '' || $field_line_height_mobile !== '' || $field_letter_spacing_desktop !== '' || $field_letter_spacing_tablet !== '' || $field_letter_spacing_mobile !== '' || $field_text_transform !== '' || $field_font_style !== '' );
$button_has_typography = ( $button_font_family !== '' || $button_font_size_desktop !== '' || $button_font_size_tablet !== '' || $button_font_size_mobile !== '' || $button_font_weight !== '' || $button_line_height_desktop !== '' || $button_line_height_tablet !== '' || $button_line_height_mobile !== '' || $button_letter_spacing_desktop !== '' || $button_letter_spacing_tablet !== '' || $button_letter_spacing_mobile !== '' || $button_text_transform !== '' || $button_font_style !== '' );
$footer_has_typography = ( $footer_font_family !== '' || $footer_font_size_desktop !== '' || $footer_font_size_tablet !== '' || $footer_font_size_mobile !== '' || $footer_font_weight !== '' || $footer_line_height_desktop !== '' || $footer_line_height_tablet !== '' || $footer_line_height_mobile !== '' || $footer_letter_spacing_desktop !== '' || $footer_letter_spacing_tablet !== '' || $footer_letter_spacing_mobile !== '' || $footer_text_transform !== '' || $footer_font_style !== '' );
$label_has_typography  = ( $label_font_family !== '' || $label_font_size_desktop !== '' || $label_font_size_tablet !== '' || $label_font_size_mobile !== '' || $label_font_weight !== '' || $label_line_height_desktop !== '' || $label_line_height_tablet !== '' || $label_line_height_mobile !== '' || $label_letter_spacing_desktop !== '' || $label_letter_spacing_tablet !== '' || $label_letter_spacing_mobile !== '' || $label_text_transform !== '' || $label_font_style !== '' );
$form_tabs = [
	'logo'       => __( 'Logo', 'wp-powersuite' ),
	'box'        => __( 'Box', 'wp-powersuite' ),
	'form'       => __( 'Form', 'wp-powersuite' ),
	'fields'     => __( 'Fields', 'wp-powersuite' ),
	'button'     => __( 'Button', 'wp-powersuite' ),
	'footer'     => __( 'Footer', 'wp-powersuite' ),
	'label'      => __( 'Label', 'wp-powersuite' ),
];

// Vars for shared Box/Form container-style helper (padding, border, shadow, background).
$box_container_vars = [
	'padding_use_sides'      => true,
	'padding_top'          => $box_padding_top,
	'padding_right'        => $box_padding_right,
	'padding_bottom'       => $box_padding_bottom,
	'padding_left'         => $box_padding_left,
	'padding_top_tablet'   => $box_padding_top_tablet,
	'padding_right_tablet' => $box_padding_right_tablet,
	'padding_bottom_tablet' => $box_padding_bottom_tablet,
	'padding_left_tablet'  => $box_padding_left_tablet,
	'padding_top_mobile'   => $box_padding_top_mobile,
	'padding_right_mobile' => $box_padding_right_mobile,
	'padding_bottom_mobile' => $box_padding_bottom_mobile,
	'padding_left_mobile'  => $box_padding_left_mobile,
	'row_description'      => __( 'Leave empty for default padding. Set per device and per side.', 'wp-powersuite' ),
	'border_type'      => $box_border_type,
	'border_color'     => $box_border_color,
	'border_width'     => $box_border_width,
	'border_radius_desktop' => $box_border_radius_desktop,
	'border_radius_tablet'  => $box_border_radius_tablet,
	'border_radius_mobile'  => $box_border_radius_mobile,
	'shadow_x'     => $box_shadow_x,
	'shadow_y'     => $box_shadow_y,
	'shadow_blur'  => $box_shadow_blur,
	'shadow_spread' => $box_shadow_spread,
	'shadow_color'  => $box_shadow_color,
	'shadow_inset'  => $box_shadow_inset,
	'shadow_row_label' => __( 'Box Shadow', 'wp-powersuite' ),
	'bg_type'   => $box_bg_type,
	'bg_color'  => $box_bg_color,
	'bg_gradient_type'  => $box_bg_gradient_type,
	'bg_gradient_angle' => $box_bg_gradient_angle,
	'bg_gradient_color1' => $box_bg_gradient_color1,
	'bg_gradient_pos1'   => $box_bg_gradient_pos1,
	'bg_gradient_color2' => $box_bg_gradient_color2,
	'bg_gradient_pos2'   => $box_bg_gradient_pos2,
	'bg_image' => $box_bg_image,
	'bg_image_overlay_color'   => $box_bg_image_overlay_color,
	'bg_image_overlay_opacity' => $box_bg_image_overlay_opacity,
];
$form_container_vars = [
	'padding_use_sides'      => true,
	'padding_top'          => $form_padding_top,
	'padding_right'        => $form_padding_right,
	'padding_bottom'       => $form_padding_bottom,
	'padding_left'         => $form_padding_left,
	'padding_top_tablet'   => $form_padding_top_tablet,
	'padding_right_tablet' => $form_padding_right_tablet,
	'padding_bottom_tablet' => $form_padding_bottom_tablet,
	'padding_left_tablet'  => $form_padding_left_tablet,
	'padding_top_mobile'   => $form_padding_top_mobile,
	'padding_right_mobile' => $form_padding_right_mobile,
	'padding_bottom_mobile' => $form_padding_bottom_mobile,
	'padding_left_mobile'  => $form_padding_left_mobile,
	'row_description'      => __( 'Leave empty for default padding. Set per device and per side.', 'wp-powersuite' ),
	'border_type'      => $form_border_type,
	'border_color'     => $form_border_color,
	'border_width'     => $form_border_width,
	'border_radius_desktop' => $form_border_radius_desktop,
	'border_radius_tablet'  => $form_border_radius_tablet,
	'border_radius_mobile'  => $form_border_radius_mobile,
	'shadow_x'     => $form_shadow_x,
	'shadow_y'     => $form_shadow_y,
	'shadow_blur'  => $form_shadow_blur,
	'shadow_spread' => $form_shadow_spread,
	'shadow_color'  => $form_shadow_color,
	'shadow_inset'  => $form_shadow_inset,
	'shadow_row_label' => __( 'Form Shadow', 'wp-powersuite' ),
	'bg_type'   => $form_bg_type,
	'bg_color'  => $form_bg_color,
	'bg_gradient_type'  => $form_bg_gradient_type,
	'bg_gradient_angle' => $form_bg_gradient_angle,
	'bg_gradient_color1' => $form_bg_gradient_color1,
	'bg_gradient_pos1'   => $form_bg_gradient_pos1,
	'bg_gradient_color2' => $form_bg_gradient_color2,
	'bg_gradient_pos2'   => $form_bg_gradient_pos2,
	'bg_image' => $form_bg_image,
	'bg_image_overlay_color'   => $form_bg_image_overlay_color,
	'bg_image_overlay_opacity' => $form_bg_image_overlay_opacity,
];

$hide_logo_checked = ! empty( $settings['hide_logo'] ) && $settings['hide_logo'] !== '0';

$is_full_page         = ! empty( $is_full_page );
$login_preview_url = Module::getPreviewUrl();
$modules_url       = admin_url( 'admin.php?page=powersuite' );

?>
<?php if ( $is_full_page ) : ?>
<div class="wrap wpps-lpc-page">
	<hr class="wp-header-end">
	<?php
	\WP_PowerSuite\Admin\PageHero::render_for_module(
		[
			'icon'      => 'dashicons-admin-customizer',
			'title'     => __( 'Login Page Customizer', 'wp-powersuite' ),
			'tagline'   => __( 'Brand the sign-in screen with layout, logo, colors, visibility, and form styling.', 'wp-powersuite' ),
			'meta_html' => sprintf(
				'<a href="%1$s" class="button button-secondary" target="_blank" rel="noopener noreferrer">%2$s</a>'
				. '<a href="%3$s" class="button button-secondary">%4$s</a>',
				esc_url( $login_preview_url ),
				esc_html__( 'Preview login page', 'wp-powersuite' ),
				esc_url( $modules_url ),
				esc_html__( 'All modules', 'wp-powersuite' )
			),
		]
	);
	?>
<?php endif; ?>
<div class="wp-powersuite-module-settings wp-powersuite-settings<?php echo $is_full_page ? ' wp-powersuite-settings--lpc' : ''; ?> wpps-login-customizor-settings<?php echo $is_full_page ? ' wpps-login-customizor-page' : ''; ?>">
	<?php if ( $is_full_page ) : ?>
	<div class="wpps-lpc-notice" aria-live="polite"></div>
	<?php AdminHelpers::renderLpcPageActionsBar( $module_id ); ?>
	<?php endif; ?>
	<?php if ( ! $is_full_page ) : ?>
	<p class="description">
		<?php esc_html_e( 'Customize the WordPress login page—layout, logo, colors, and visibility. Use the Logo tab for branding; the Footer tab for element toggles and link styling; Box, Form, Fields, and Button tabs for advanced styling.', 'wp-powersuite' ); ?>
	</p>
	<p class="description">
		<?php esc_html_e( 'Compatible with Change Login URL—custom colors, layout, and logo styling apply on your private login address too.', 'wp-powersuite' ); ?>
	</p>
	<?php endif; ?>

	<form class="wp-powersuite-module-settings-form" data-module-id="<?php echo esc_attr( $module_id ); ?>">
		<?php wp_nonce_field( 'wp_powersuite_save_module_settings_' . $module_id, 'wp_powersuite_nonce' ); ?>

		<?php if ( $is_full_page ) : ?>
		<div class="wpps-lpc-accordions">
		<?php
		AdminHelpers::accordionOpen(
			'layout',
			__( 'Layout & Background', 'wp-powersuite' ),
			__( 'Choose the login template, page background, and split-layout columns.', 'wp-powersuite' ),
			true
		);
		else :
		?>
		<div class="wpps-lpc-card wpps-lpc-card-layout">
			<h2 class="wpps-lpc-section-title"><?php esc_html_e( 'Layout & Background', 'wp-powersuite' ); ?></h2>
			<p class="wpps-lpc-section-desc"><?php esc_html_e( 'Choose the login template, page background, and split-layout columns.', 'wp-powersuite' ); ?></p>
		<?php endif; ?>
		<table class="form-table wpps-login-customizor-table <?php echo $current_template_type === 'split-layout' ? 'wpps-template-type-split-layout' : 'wpps-template-type-classic-centered'; ?><?php echo ( $current_template_type === 'classic-centered' && $classic_bg_type ) ? ' wpps-classic-bg-type-' . esc_attr( $classic_bg_type ) : ''; ?>" id="<?php echo esc_attr( $module_id . '_main_table' ); ?>">
			<tbody>
				<tr>
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_template_type' ); ?>">
							<?php esc_html_e( 'Select Template Type', 'wp-powersuite' ); ?>
						</label>
					</th>
					<td>
						<select
							id="<?php echo esc_attr( $module_id . '_template_type' ); ?>"
							name="template_type"
							class="wp-powersuite-advanced-setting"
							data-setting-key="template_type"
						>
							<?php foreach ( $template_options as $value => $label ) : ?>
								<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $settings['template_type'] ?? 'classic-centered', $value ); ?>>
									<?php echo esc_html( $label ); ?>
								</option>
							<?php endforeach; ?>
						</select>
						<p class="description">
							<?php esc_html_e( 'Choose the layout for the login page.', 'wp-powersuite' ); ?>
						</p>
					</td>
				</tr>
				<tr class="wpps-lpc-layout-presets-row">
					<th scope="row">
						<?php esc_html_e( 'Ready-made Layouts', 'wp-powersuite' ); ?>
					</th>
					<td>
						<input type="hidden" name="layout_preset" class="wp-powersuite-advanced-setting" data-setting-key="layout_preset" value="<?php echo esc_attr( $current_layout_preset ); ?>" id="<?php echo esc_attr( $module_id . '_layout_preset' ); ?>" />
						<p class="description wpps-lpc-layout-presets-intro">
							<?php esc_html_e( 'Start from a designer-crafted look, then fine-tune colors and spacing. Click a layout to apply it, then save.', 'wp-powersuite' ); ?>
						</p>
						<div class="wpps-lpc-layout-presets" role="group" aria-label="<?php esc_attr_e( 'Ready-made layouts', 'wp-powersuite' ); ?>">
							<?php foreach ( $layout_presets_catalog as $preset ) : ?>
								<?php
								$preset_id    = (string) $preset['id'];
								$preset_group = (string) $preset['group'];
								$preview      = LayoutPresets::getPreviewSpec( $preset_id );
								$layout_kind  = isset( $preview['layout'] ) ? (string) $preview['layout'] : 'centered';
								$is_active    = $current_layout_preset === $preset_id;
								$is_hidden    = $preset_group !== 'default' && $preset_group !== ( $current_template_type === 'split-layout' ? 'split' : 'classic' );

								$preview_classes = [
									'wpps-lpc-layout-preset__preview',
									'wpps-lpc-layout-preset__preview--' . $layout_kind,
								];
								if ( ! empty( $preview['has_photo'] ) ) {
									$preview_classes[] = 'has-photo';
								}
								if ( $layout_kind === 'centered' && ! empty( $preview['page_image'] ) ) {
									$preview_classes[] = 'has-page-photo';
								}
								if ( $layout_kind === 'split' && ! empty( $preview['form_image'] ) ) {
									$preview_classes[] = 'has-form-photo';
								}
								if ( $layout_kind === 'split' && ! empty( $preview['hero_image'] ) ) {
									$preview_classes[] = 'has-hero-photo';
								}
								if ( ! empty( $preview['show_box_card'] ) ) {
									$preview_classes[] = 'has-box-card';
								}
								if ( ! empty( $preview['hero_content'] ) ) {
									$preview_classes[] = 'has-hero-content';
								}
								if ( $layout_kind === 'split' ) {
									$preview_classes[] = isset( $preview['column_order'] ) ? (string) $preview['column_order'] : 'form-first';
								}
								if ( isset( $preview['field_radius'] ) && (int) $preview['field_radius'] >= 20 ) {
									$preview_classes[] = 'has-pill-fields';
								}

								$preview_style = sprintf(
									'--wpps-lpc-field:%1$s;--wpps-lpc-field-border:%2$s;--wpps-lpc-button:%3$s;--wpps-lpc-accent:%4$s;--wpps-lpc-field-radius:%5$spx;--wpps-lpc-button-radius:%6$spx;--wpps-lpc-box:%7$s;--wpps-lpc-box-radius:%8$spx;',
									$preview['field_fill'] ?? '#eef2f7',
									$preview['field_border'] ?? '#d0d5dd',
									$preview['button_fill'] ?? '#2271b1',
									$preview['accent'] ?? '#2271b1',
									$preview['field_radius'] ?? '6',
									$preview['button_radius'] ?? '6',
									$preview['box_fill'] ?? '#ffffff',
									$preview['box_radius'] ?? '12'
								);
								if ( $layout_kind === 'split' ) {
									$preview_style .= sprintf(
										'--wpps-lpc-form-pct:%1$s%%;--wpps-lpc-hero-pct:%2$s%%;--wpps-lpc-form-fill:%3$s;--wpps-lpc-hero-fill:%4$s;',
										$preview['form_pct'] ?? 50,
										100 - (int) ( $preview['form_pct'] ?? 50 ),
										$preview['form_fill'] ?? '#ffffff',
										$preview['hero_fill'] ?? '#f0f0f1'
									);
									if ( ! empty( $preview['form_image'] ) ) {
										$preview_style .= '--wpps-lpc-form-image:url(' . esc_url( (string) $preview['form_image'] ) . ');';
									}
									if ( ! empty( $preview['form_overlay'] ) ) {
										$preview_style .= '--wpps-lpc-form-overlay:' . esc_attr( (string) $preview['form_overlay'] ) . ';';
									}
									if ( ! empty( $preview['hero_image'] ) ) {
										$preview_style .= '--wpps-lpc-hero-image:url(' . esc_url( (string) $preview['hero_image'] ) . ');';
									}
									if ( ! empty( $preview['hero_overlay'] ) ) {
										$preview_style .= '--wpps-lpc-hero-overlay:' . esc_attr( (string) $preview['hero_overlay'] ) . ';';
									}
								} else {
									$preview_style .= '--wpps-lpc-page-fill:' . esc_attr( (string) ( $preview['page_fill'] ?? '#f0f0f1' ) ) . ';';
									if ( ! empty( $preview['page_image'] ) ) {
										$preview_style .= '--wpps-lpc-page-image:url(' . esc_url( (string) $preview['page_image'] ) . ');';
									}
									if ( ! empty( $preview['page_overlay'] ) ) {
										$preview_style .= '--wpps-lpc-page-overlay:' . esc_attr( (string) $preview['page_overlay'] ) . ';';
									}
								}
								?>
								<button
									type="button"
									class="wpps-lpc-layout-preset<?php echo $is_active ? ' is-active' : ''; ?><?php echo $is_hidden ? ' is-hidden' : ''; ?>"
									data-preset-id="<?php echo esc_attr( $preset_id ); ?>"
									data-preset-group="<?php echo esc_attr( $preset_group ); ?>"
									aria-pressed="<?php echo $is_active ? 'true' : 'false'; ?>"
									title="<?php echo esc_attr( (string) $preset['description'] ); ?>"
								>
									<span class="<?php echo esc_attr( implode( ' ', $preview_classes ) ); ?>" style="<?php echo esc_attr( $preview_style ); ?>">
										<?php if ( $layout_kind === 'split' ) : ?>
											<span class="wpps-lpc-layout-preset__form-col" aria-hidden="true">
												<span class="wpps-lpc-layout-preset__card" aria-hidden="true">
													<span class="wpps-lpc-layout-preset__field" aria-hidden="true"></span>
													<span class="wpps-lpc-layout-preset__field" aria-hidden="true"></span>
													<span class="wpps-lpc-layout-preset__btn" aria-hidden="true"></span>
												</span>
											</span>
											<span class="wpps-lpc-layout-preset__hero-col" aria-hidden="true"></span>
										<?php else : ?>
											<span class="wpps-lpc-layout-preset__canvas" aria-hidden="true"></span>
											<span class="wpps-lpc-layout-preset__card" aria-hidden="true">
												<span class="wpps-lpc-layout-preset__field" aria-hidden="true"></span>
												<span class="wpps-lpc-layout-preset__field" aria-hidden="true"></span>
												<span class="wpps-lpc-layout-preset__btn" aria-hidden="true"></span>
											</span>
										<?php endif; ?>
									</span>
									<span class="wpps-lpc-layout-preset__meta">
										<span class="wpps-lpc-layout-preset__name"><?php echo esc_html( (string) $preset['name'] ); ?></span>
										<?php if ( ! empty( $preview['has_photo'] ) ) : ?>
											<span class="wpps-lpc-layout-preset__badge"><?php esc_html_e( 'Photo', 'wp-powersuite' ); ?></span>
										<?php endif; ?>
									</span>
								</button>
							<?php endforeach; ?>
						</div>
					</td>
				</tr>
				<tr class="wpps-form-alignment-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_form_alignment' ); ?>">
							<?php esc_html_e( 'Form alignment', 'wp-powersuite' ); ?>
						</label>
					</th>
					<td>
						<div class="wpps-alignment-icons" role="group" aria-label="<?php esc_attr_e( 'Form alignment', 'wp-powersuite' ); ?>">
							<input type="hidden" name="form_alignment" class="wp-powersuite-advanced-setting" data-setting-key="form_alignment" value="<?php echo esc_attr( $form_alignment ); ?>" id="<?php echo esc_attr( $module_id . '_form_alignment' ); ?>" />
							<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $form_alignment === 'left' ? 'is-active' : '' ); ?>" data-alignment="left" title="<?php esc_attr_e( 'Left', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignleft" aria-hidden="true"></span></button>
							<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $form_alignment === 'center' ? 'is-active' : '' ); ?>" data-alignment="center" title="<?php esc_attr_e( 'Center', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-aligncenter" aria-hidden="true"></span></button>
							<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $form_alignment === 'right' ? 'is-active' : '' ); ?>" data-alignment="right" title="<?php esc_attr_e( 'Right', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignright" aria-hidden="true"></span></button>
						</div>
						<p class="description">
							<?php esc_html_e( 'Horizontal position of the login form (Classic layout only).', 'wp-powersuite' ); ?>
						</p>
					</td>
				</tr>
				<tr class="wpps-classic-bg-type-row">
					<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
					<td>
						<div class="wpps-bg-type-icons wpps-classic-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
							<input type="hidden" name="classic_bg_type" class="wp-powersuite-advanced-setting" data-setting-key="classic_bg_type" value="<?php echo esc_attr( $classic_bg_type ); ?>" id="<?php echo esc_attr( $module_id . '_classic_bg_type' ); ?>" />
							<button type="button" class="wpps-bg-type-btn <?php echo esc_attr( $classic_bg_type === 'color' ? 'is-active' : '' ); ?>" data-bg-type="color" title="<?php esc_attr_e( 'Color', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span></button>
							<button type="button" class="wpps-bg-type-btn <?php echo esc_attr( $classic_bg_type === 'gradient' ? 'is-active' : '' ); ?>" data-bg-type="gradient" title="<?php esc_attr_e( 'Gradient', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-art" aria-hidden="true"></span></button>
							<button type="button" class="wpps-bg-type-btn <?php echo esc_attr( $classic_bg_type === 'image' ? 'is-active' : '' ); ?>" data-bg-type="image" title="<?php esc_attr_e( 'Image', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-format-gallery" aria-hidden="true"></span></button>
							<button type="button" class="wpps-bg-type-btn <?php echo esc_attr( $classic_bg_type === 'video' ? 'is-active' : '' ); ?>" data-bg-type="video" title="<?php esc_attr_e( 'Video', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-video-alt3" aria-hidden="true"></span></button>
							<button type="button" class="wpps-bg-type-reset<?php echo $classic_bg_type === '' ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Deselect all', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate" aria-hidden="true"></span></button>
						</div>
						<p class="description"><?php esc_html_e( 'Page background for Classic layout (full viewport behind the form).', 'wp-powersuite' ); ?></p>
					</td>
				</tr>
				<tr class="wpps-classic-bg-color-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_color' ); ?>"><?php esc_html_e( 'Background Color', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<div class="wpps-color-field-row">
							<input type="color" id="<?php echo esc_attr( $module_id . '_classic_bg_color' ); ?>" name="classic_bg_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_color ) ? ( strlen( $classic_bg_color ) > 7 ? substr( $classic_bg_color, 0, 7 ) : $classic_bg_color ) : '#f0f0f1' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="classic_bg_color" />
							<div class="wpps-color-code-wrap">
								<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="classic_bg_color" data-color-input="<?php echo esc_attr( $module_id . '_classic_bg_color' ); ?>" data-default-color="#f0f0f1" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_color ) ? $classic_bg_color : '#f0f0f1' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#f0f0f1" maxlength="9" />
								<button type="button" class="wpps-color-reset button-link" data-default-color="#f0f0f1"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
							</div>
						</div>
					</td>
				</tr>
				<tr class="wpps-classic-bg-gradient-row">
					<th scope="row"><?php esc_html_e( 'Gradient', 'wp-powersuite' ); ?></th>
					<td>
						<div class="wpps-gradient-editor" id="<?php echo esc_attr( $module_id . '_classic_gradient_editor' ); ?>">
							<div class="wpps-gradient-type-angle-row">
								<label for="<?php echo esc_attr( $module_id . '_classic_gradient_type' ); ?>"><?php esc_html_e( 'Gradient Type', 'wp-powersuite' ); ?></label>
								<select id="<?php echo esc_attr( $module_id . '_classic_gradient_type' ); ?>" name="classic_bg_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="classic_bg_gradient_type">
									<option value="linear" <?php selected( $classic_bg_gradient_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
									<option value="radial" <?php selected( $classic_bg_gradient_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
								</select>
								<span class="wpps-gradient-angle-inline">
									<label for="<?php echo esc_attr( $module_id . '_classic_gradient_angle' ); ?>"><?php esc_html_e( 'Angle', 'wp-powersuite' ); ?></label>
									<input type="number" name="classic_bg_gradient_angle" id="<?php echo esc_attr( $module_id . '_classic_gradient_angle' ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="classic_bg_gradient_angle" min="0" max="360" value="<?php echo esc_attr( $classic_bg_gradient_angle ); ?>" step="1" />
									<span class="wpps-unit-label">°</span>
								</span>
							</div>
							<div class="wpps-gradient-color-row">
								<label><?php esc_html_e( 'Color 1', 'wp-powersuite' ); ?></label>
								<input type="color" name="classic_bg_gradient_color1" id="<?php echo esc_attr( $module_id . '_classic_gradient_color1' ); ?>" value="<?php echo esc_attr( $classic_bg_gradient_color1 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color1 wpps-color-picker-circle" data-setting-key="classic_bg_gradient_color1" />
								<div class="wpps-gradient-color-wrap">
									<input type="text" name="classic_bg_gradient_color1" class="wpps-gradient-hex1 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="classic_bg_gradient_color1" data-color-input="<?php echo esc_attr( $module_id . '_classic_gradient_color1' ); ?>" data-default-color="#f0f0f1" value="<?php echo esc_attr( $classic_bg_gradient_color1 ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#f0f0f1" maxlength="9" />
									<button type="button" class="wpps-color-reset button-link" data-default-color="#f0f0f1"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
								</div>
								<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
								<input type="number" name="classic_bg_gradient_pos1" class="wp-powersuite-advanced-setting wpps-gradient-pos1 small-text" data-setting-key="classic_bg_gradient_pos1" min="0" max="100" value="<?php echo esc_attr( $classic_bg_gradient_pos1 ); ?>" /> %
							</div>
							<div class="wpps-gradient-color-row">
								<label><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
								<input type="color" name="classic_bg_gradient_color2" id="<?php echo esc_attr( $module_id . '_classic_gradient_color2' ); ?>" value="<?php echo esc_attr( $classic_bg_gradient_color2 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color2 wpps-color-picker-circle" data-setting-key="classic_bg_gradient_color2" />
								<div class="wpps-gradient-color-wrap">
									<input type="text" name="classic_bg_gradient_color2" class="wpps-gradient-hex2 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="classic_bg_gradient_color2" data-color-input="<?php echo esc_attr( $module_id . '_classic_gradient_color2' ); ?>" data-default-color="#e0e0e0" value="<?php echo esc_attr( $classic_bg_gradient_color2 ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#e0e0e0" maxlength="9" />
									<button type="button" class="wpps-color-reset button-link" data-default-color="#e0e0e0"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
								</div>
								<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
								<input type="number" name="classic_bg_gradient_pos2" class="wp-powersuite-advanced-setting wpps-gradient-pos2 small-text" data-setting-key="classic_bg_gradient_pos2" min="0" max="100" value="<?php echo esc_attr( $classic_bg_gradient_pos2 ); ?>" /> %
							</div>
						</div>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image' ); ?>"><?php esc_html_e( 'Background Image', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<input type="url" id="<?php echo esc_attr( $module_id . '_classic_bg_image' ); ?>" name="classic_bg_image" class="wp-powersuite-advanced-setting regular-text" data-setting-key="classic_bg_image" value="<?php echo esc_url( $classic_bg_image ); ?>" placeholder="https://" />
						<button type="button" class="button wpps-classic-bg-image-upload" id="<?php echo esc_attr( $module_id . '_upload_classic_bg_image' ); ?>"><?php esc_html_e( 'Select Image', 'wp-powersuite' ); ?></button>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image_overlay_color' ); ?>"><?php esc_html_e( 'Background Overlay', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<div class="wpps-color-field-row">
							<input type="color" id="<?php echo esc_attr( $module_id . '_classic_bg_image_overlay_color' ); ?>" name="classic_bg_image_overlay_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_image_overlay_color ) ? ( strlen( $classic_bg_image_overlay_color ) > 7 ? substr( $classic_bg_image_overlay_color, 0, 7 ) : $classic_bg_image_overlay_color ) : '#000000' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="classic_bg_image_overlay_color" />
							<div class="wpps-color-code-wrap">
								<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="classic_bg_image_overlay_color" data-color-input="<?php echo esc_attr( $module_id . '_classic_bg_image_overlay_color' ); ?>" data-default-color="#000000" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_image_overlay_color ) ? $classic_bg_image_overlay_color : '#000000' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#000000" maxlength="9" />
								<button type="button" class="wpps-color-reset button-link" data-default-color="#000000"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
							</div>
						</div>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image_overlay_opacity' ); ?>"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<div class="wpps-box-shadow-opacity-row">
							<label class="wpps-overlay-opacity-label"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
							<input type="range" class="wpps-bg-overlay-opacity" min="0" max="100" value="<?php echo esc_attr( $classic_bg_image_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
							<input type="number" id="<?php echo esc_attr( $module_id . '_classic_bg_image_overlay_opacity' ); ?>" name="classic_bg_image_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="classic_bg_image_overlay_opacity" value="<?php echo esc_attr( $classic_bg_image_overlay_opacity ); ?>" min="0" max="100" step="1" aria-label="<?php esc_attr_e( 'Overlay opacity percent', 'wp-powersuite' ); ?>" />
							<span class="wpps-box-shadow-unit">%</span>
						</div>
						<p class="description"><?php esc_html_e( '0 = no overlay, 100 = solid.', 'wp-powersuite' ); ?></p>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image_position' ); ?>"><?php esc_html_e( 'Position', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<select id="<?php echo esc_attr( $module_id . '_classic_bg_image_position' ); ?>" name="classic_bg_image_position" class="wp-powersuite-advanced-setting" data-setting-key="classic_bg_image_position">
							<option value="left top" <?php selected( $classic_bg_image_position, 'left top' ); ?>><?php esc_html_e( 'Left Top', 'wp-powersuite' ); ?></option>
							<option value="center top" <?php selected( $classic_bg_image_position, 'center top' ); ?>><?php esc_html_e( 'Center Top', 'wp-powersuite' ); ?></option>
							<option value="right top" <?php selected( $classic_bg_image_position, 'right top' ); ?>><?php esc_html_e( 'Right Top', 'wp-powersuite' ); ?></option>
							<option value="left center" <?php selected( $classic_bg_image_position, 'left center' ); ?>><?php esc_html_e( 'Left Center', 'wp-powersuite' ); ?></option>
							<option value="center center" <?php selected( $classic_bg_image_position, 'center center' ); ?>><?php esc_html_e( 'Center Center', 'wp-powersuite' ); ?></option>
							<option value="right center" <?php selected( $classic_bg_image_position, 'right center' ); ?>><?php esc_html_e( 'Right Center', 'wp-powersuite' ); ?></option>
							<option value="left bottom" <?php selected( $classic_bg_image_position, 'left bottom' ); ?>><?php esc_html_e( 'Left Bottom', 'wp-powersuite' ); ?></option>
							<option value="center bottom" <?php selected( $classic_bg_image_position, 'center bottom' ); ?>><?php esc_html_e( 'Center Bottom', 'wp-powersuite' ); ?></option>
							<option value="right bottom" <?php selected( $classic_bg_image_position, 'right bottom' ); ?>><?php esc_html_e( 'Right Bottom', 'wp-powersuite' ); ?></option>
						</select>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image_size' ); ?>"><?php esc_html_e( 'Display Size', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<select id="<?php echo esc_attr( $module_id . '_classic_bg_image_size' ); ?>" name="classic_bg_image_size" class="wp-powersuite-advanced-setting" data-setting-key="classic_bg_image_size">
							<option value="auto" <?php selected( $classic_bg_image_size, 'auto' ); ?>><?php esc_html_e( 'Auto', 'wp-powersuite' ); ?></option>
							<option value="cover" <?php selected( $classic_bg_image_size, 'cover' ); ?>><?php esc_html_e( 'Cover', 'wp-powersuite' ); ?></option>
							<option value="contain" <?php selected( $classic_bg_image_size, 'contain' ); ?>><?php esc_html_e( 'Contain', 'wp-powersuite' ); ?></option>
						</select>
					</td>
				</tr>
				<tr class="wpps-classic-bg-image-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_image_repeat' ); ?>"><?php esc_html_e( 'Repeat', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<select id="<?php echo esc_attr( $module_id . '_classic_bg_image_repeat' ); ?>" name="classic_bg_image_repeat" class="wp-powersuite-advanced-setting" data-setting-key="classic_bg_image_repeat">
							<option value="repeat" <?php selected( $classic_bg_image_repeat, 'repeat' ); ?>><?php esc_html_e( 'Repeat', 'wp-powersuite' ); ?></option>
							<option value="no-repeat" <?php selected( $classic_bg_image_repeat, 'no-repeat' ); ?>><?php esc_html_e( 'No Repeat', 'wp-powersuite' ); ?></option>
							<option value="repeat-x" <?php selected( $classic_bg_image_repeat, 'repeat-x' ); ?>><?php esc_html_e( 'Repeat X', 'wp-powersuite' ); ?></option>
							<option value="repeat-y" <?php selected( $classic_bg_image_repeat, 'repeat-y' ); ?>><?php esc_html_e( 'Repeat Y', 'wp-powersuite' ); ?></option>
						</select>
					</td>
				</tr>
				<tr class="wpps-classic-bg-video-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_video' ); ?>"><?php esc_html_e( 'Background Video URL', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<input type="url" id="<?php echo esc_attr( $module_id . '_classic_bg_video' ); ?>" name="classic_bg_video" class="wp-powersuite-advanced-setting regular-text" data-setting-key="classic_bg_video" value="<?php echo esc_url( $classic_bg_video ); ?>" placeholder="https://" />
						<p class="description"><?php esc_html_e( 'URL to an MP4 or WebM video. Loops as full-screen background (muted, no sound).', 'wp-powersuite' ); ?></p>
					</td>
				</tr>
				<tr class="wpps-classic-bg-video-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_video_overlay_color' ); ?>"><?php esc_html_e( 'Background Overlay', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<div class="wpps-color-field-row">
							<input type="color" id="<?php echo esc_attr( $module_id . '_classic_bg_video_overlay_color' ); ?>" name="classic_bg_video_overlay_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_video_overlay_color ) ? ( strlen( $classic_bg_video_overlay_color ) > 7 ? substr( $classic_bg_video_overlay_color, 0, 7 ) : $classic_bg_video_overlay_color ) : '#000000' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="classic_bg_video_overlay_color" />
							<div class="wpps-color-code-wrap">
								<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="classic_bg_video_overlay_color" data-color-input="<?php echo esc_attr( $module_id . '_classic_bg_video_overlay_color' ); ?>" data-default-color="#000000" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $classic_bg_video_overlay_color ) ? $classic_bg_video_overlay_color : '#000000' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#000000" maxlength="9" />
								<button type="button" class="wpps-color-reset button-link" data-default-color="#000000"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
							</div>
						</div>
					</td>
				</tr>
				<tr class="wpps-classic-bg-video-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_classic_bg_video_overlay_opacity' ); ?>"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
					</th>
					<td>
						<div class="wpps-box-shadow-opacity-row">
							<label class="wpps-overlay-opacity-label"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
							<input type="range" class="wpps-bg-overlay-opacity" min="0" max="100" value="<?php echo esc_attr( $classic_bg_video_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
							<input type="number" id="<?php echo esc_attr( $module_id . '_classic_bg_video_overlay_opacity' ); ?>" name="classic_bg_video_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="classic_bg_video_overlay_opacity" value="<?php echo esc_attr( $classic_bg_video_overlay_opacity ); ?>" min="0" max="100" step="1" aria-label="<?php esc_attr_e( 'Overlay opacity percent', 'wp-powersuite' ); ?>" />
							<span class="wpps-box-shadow-unit">%</span>
						</div>
						<p class="description"><?php esc_html_e( '0 = no overlay, 100 = solid.', 'wp-powersuite' ); ?></p>
					</td>
				</tr>
				<tr class="wpps-split-ratio-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_split_ratio' ); ?>">
							<?php esc_html_e( 'Split Ratio', 'wp-powersuite' ); ?>
						</label>
					</th>
					<td>
						<select
							id="<?php echo esc_attr( $module_id . '_split_ratio' ); ?>"
							name="split_ratio"
							class="wp-powersuite-advanced-setting"
							data-setting-key="split_ratio"
						>
							<?php foreach ( $split_ratio_presets as $value => $label ) : ?>
								<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $current_split_ratio, $value ); ?>>
									<?php echo esc_html( $label ); ?>
								</option>
							<?php endforeach; ?>
						</select>
						<p class="description">
							<?php esc_html_e( 'The first number is the width (%) of the column that contains the login form; the second is the width (%) of the empty column. Default: 50/50.', 'wp-powersuite' ); ?>
						</p>
					</td>
				</tr>
				<tr class="wpps-split-column-order-row">
					<th scope="row">
						<label for="<?php echo esc_attr( $module_id . '_split_column_order' ); ?>">
							<?php esc_html_e( 'Column order', 'wp-powersuite' ); ?>
						</label>
					</th>
					<td>
						<select
							id="<?php echo esc_attr( $module_id . '_split_column_order' ); ?>"
							name="split_column_order"
							class="wp-powersuite-advanced-setting"
							data-setting-key="split_column_order"
						>
							<?php foreach ( $split_column_order_options as $value => $label ) : ?>
								<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $current_split_column_order, $value ); ?>>
									<?php echo esc_html( $label ); ?>
								</option>
							<?php endforeach; ?>
						</select>
						<p class="description">
							<?php esc_html_e( 'By default the login side appears first (left). Choose "Form column second" to show the brand panel on the left.', 'wp-powersuite' ); ?>
						</p>
					</td>
				</tr>
				<tr class="wpps-split-panels-row">
					<td colspan="2">
						<div class="wpps-lpc-split-picker">
							<div class="wpps-lpc-segment-bar">
								<div class="wpps-lpc-segment-bar__text">
									<span class="wpps-lpc-segment-bar__label"><?php esc_html_e( 'Which side to style?', 'wp-powersuite' ); ?></span>
									<span class="wpps-lpc-segment-bar__hint"><?php esc_html_e( 'Switch between the form container and the brand panel.', 'wp-powersuite' ); ?></span>
								</div>
								<div class="wpps-lpc-segment-group wpps-split-layout-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Split layout sides', 'wp-powersuite' ); ?>">
									<button type="button" class="wpps-split-layout-tab wpps-button-state-tab is-active" role="tab" aria-selected="true" aria-controls="<?php echo esc_attr( $module_id . '_split_form_column_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_split_tab_btn_form' ); ?>" data-split-column="form"><?php esc_html_e( 'Form Container', 'wp-powersuite' ); ?></button>
									<button type="button" class="wpps-split-layout-tab wpps-button-state-tab" role="tab" aria-selected="false" aria-controls="<?php echo esc_attr( $module_id . '_split_empty_column_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_split_tab_btn_empty' ); ?>" data-split-column="empty"><?php esc_html_e( 'Brand panel', 'wp-powersuite' ); ?></button>
								</div>
							</div>
							<div class="wpps-lpc-panel-card wpps-button-state-panels-cell">
						<div class="wpps-split-layout-panel wpps-button-state-panel <?php echo $split_form_bg_type ? 'wpps-split-form-bg-type-' . esc_attr( $split_form_bg_type ) : ''; ?>" id="<?php echo esc_attr( $module_id . '_split_form_column_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_split_tab_btn_form' ); ?>" data-split-column="form">
							<table class="form-table wpps-split-form-inner-table" role="presentation"><tbody>
								<?php
								AdminHelpers::renderLpcSubsectionHead(
									__( 'Form position', 'wp-powersuite' ),
									__( 'Align the login box within this column.', 'wp-powersuite' )
								);
								?>
								<tr class="wpps-split-form-form-alignment-row">
									<th scope="row"><?php esc_html_e( 'Form alignment', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-alignment-icons" role="group" aria-label="<?php esc_attr_e( 'Form alignment', 'wp-powersuite' ); ?>">
											<input type="hidden" name="split_form_form_alignment" class="wp-powersuite-advanced-setting" data-setting-key="split_form_form_alignment" value="<?php echo esc_attr( $split_form_form_alignment ); ?>" id="<?php echo esc_attr( $module_id . '_split_form_form_alignment' ); ?>" />
											<button type="button" class="wpps-alignment-btn <?php echo $split_form_form_alignment === 'left' ? 'is-active' : ''; ?>" data-alignment="left" title="<?php esc_attr_e( 'Left', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignleft" aria-hidden="true"></span></button>
											<button type="button" class="wpps-alignment-btn <?php echo $split_form_form_alignment === 'center' ? 'is-active' : ''; ?>" data-alignment="center" title="<?php esc_attr_e( 'Center', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-aligncenter" aria-hidden="true"></span></button>
											<button type="button" class="wpps-alignment-btn <?php echo $split_form_form_alignment === 'right' ? 'is-active' : ''; ?>" data-alignment="right" title="<?php esc_attr_e( 'Right', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignright" aria-hidden="true"></span></button>
										</div>
									</td>
								</tr>
								<?php
								AdminHelpers::renderLpcSubsectionHead(
									__( 'Background', 'wp-powersuite' ),
									__( 'Color, gradient, image, or video behind the login form.', 'wp-powersuite' )
								);
								?>
								<tr>
									<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-bg-type-icons wpps-split-form-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
											<input type="hidden" name="split_form_bg_type" class="wp-powersuite-advanced-setting" data-setting-key="split_form_bg_type" value="<?php echo esc_attr( $split_form_bg_type ); ?>" />
											<button type="button" class="wpps-bg-type-btn <?php echo $split_form_bg_type === 'color' ? 'is-active' : ''; ?>" data-bg-type="color" title="<?php esc_attr_e( 'Color', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_form_bg_type === 'gradient' ? 'is-active' : ''; ?>" data-bg-type="gradient" title="<?php esc_attr_e( 'Gradient', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-art" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_form_bg_type === 'image' ? 'is-active' : ''; ?>" data-bg-type="image" title="<?php esc_attr_e( 'Image', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-format-gallery" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_form_bg_type === 'video' ? 'is-active' : ''; ?>" data-bg-type="video" title="<?php esc_attr_e( 'Video', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-video-alt3" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-reset<?php echo $split_form_bg_type === '' ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate" aria-hidden="true"></span></button>
										</div>
									</td>
								</tr>
								<?php
								AdminHelpers::renderSplitColumnBgRows( $module_id, 'split_form_bg', [
									'bg_color' => $split_form_bg_color,
									'bg_image' => $split_form_bg_image,
									'image_overlay_color' => $split_form_bg_image_overlay_color,
									'image_overlay_opacity' => $split_form_bg_image_overlay_opacity,
									'image_position' => $split_form_bg_image_position,
									'image_size' => $split_form_bg_image_size,
									'image_repeat' => $split_form_bg_image_repeat,
									'bg_video' => $split_form_bg_video,
									'video_overlay_color' => $split_form_bg_video_overlay_color,
									'video_overlay_opacity' => $split_form_bg_video_overlay_opacity,
									'gradient_type' => $split_form_bg_gradient_type,
									'gradient_angle' => $split_form_bg_gradient_angle,
									'gradient_color1' => $split_form_bg_gradient_color1,
									'gradient_pos1' => $split_form_bg_gradient_pos1,
									'gradient_color2' => $split_form_bg_gradient_color2,
									'gradient_pos2' => $split_form_bg_gradient_pos2,
								], $split_form_bg_type );
								?>
							</tbody></table>
						</div>
						<div class="wpps-split-layout-panel wpps-button-state-panel <?php echo $split_empty_bg_type ? 'wpps-split-empty-bg-type-' . esc_attr( $split_empty_bg_type ) : ''; ?>" id="<?php echo esc_attr( $module_id . '_split_empty_column_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_split_tab_btn_empty' ); ?>" data-split-column="empty" style="display: none;">
							<table class="form-table wpps-split-empty-inner-table" role="presentation"><tbody>
								<?php
								AdminHelpers::renderLpcSubsectionHead(
									__( 'Background', 'wp-powersuite' ),
									__( 'Style the brand panel behind your headline or artwork.', 'wp-powersuite' )
								);
								?>
								<tr>
									<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-bg-type-icons wpps-split-empty-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
											<input type="hidden" name="split_empty_bg_type" class="wp-powersuite-advanced-setting" data-setting-key="split_empty_bg_type" value="<?php echo esc_attr( $split_empty_bg_type ); ?>" />
											<button type="button" class="wpps-bg-type-btn <?php echo $split_empty_bg_type === 'color' ? 'is-active' : ''; ?>" data-bg-type="color" title="<?php esc_attr_e( 'Color', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_empty_bg_type === 'gradient' ? 'is-active' : ''; ?>" data-bg-type="gradient" title="<?php esc_attr_e( 'Gradient', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-art" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_empty_bg_type === 'image' ? 'is-active' : ''; ?>" data-bg-type="image" title="<?php esc_attr_e( 'Image', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-format-gallery" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-btn <?php echo $split_empty_bg_type === 'video' ? 'is-active' : ''; ?>" data-bg-type="video" title="<?php esc_attr_e( 'Video', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-video-alt3" aria-hidden="true"></span></button>
											<button type="button" class="wpps-bg-type-reset<?php echo $split_empty_bg_type === '' ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate" aria-hidden="true"></span></button>
										</div>
									</td>
								</tr>
								<?php
								AdminHelpers::renderSplitColumnBgRows( $module_id, 'split_empty_bg', [
									'bg_color' => $split_empty_bg_color,
									'bg_image' => $split_empty_bg_image,
									'image_overlay_color' => $split_empty_bg_image_overlay_color,
									'image_overlay_opacity' => $split_empty_bg_image_overlay_opacity,
									'image_position' => $split_empty_bg_image_position,
									'image_size' => $split_empty_bg_image_size,
									'image_repeat' => $split_empty_bg_image_repeat,
									'bg_video' => $split_empty_bg_video,
									'video_overlay_color' => $split_empty_bg_video_overlay_color,
									'video_overlay_opacity' => $split_empty_bg_video_overlay_opacity,
									'gradient_type' => $split_empty_bg_gradient_type,
									'gradient_angle' => $split_empty_bg_gradient_angle,
									'gradient_color1' => $split_empty_bg_gradient_color1,
									'gradient_pos1' => $split_empty_bg_gradient_pos1,
									'gradient_color2' => $split_empty_bg_gradient_color2,
									'gradient_pos2' => $split_empty_bg_gradient_pos2,
								], $split_empty_bg_type );
								?>
								<?php
								AdminHelpers::renderLpcSubsectionHead(
									__( 'Headline & text', 'wp-powersuite' ),
									__( 'Optional copy shown centered on the brand panel.', 'wp-powersuite' )
								);
								?>
								<tr>
									<th scope="row"><?php esc_html_e( 'Show content', 'wp-powersuite' ); ?></th>
									<td>
										<label for="<?php echo esc_attr( $module_id . '_split_empty_add_content' ); ?>">
											<input type="checkbox" id="<?php echo esc_attr( $module_id . '_split_empty_add_content' ); ?>" name="split_empty_add_content" class="wp-powersuite-advanced-setting wpps-split-empty-add-content-toggle" data-setting-key="split_empty_add_content" value="1" <?php checked( $split_empty_add_content ); ?> />
											<?php esc_html_e( 'Add a headline, tagline, or custom HTML on the brand panel.', 'wp-powersuite' ); ?>
										</label>
									</td>
								</tr>
								<tr class="wpps-split-empty-editor-row" style="<?php echo $split_empty_add_content ? '' : 'display:none;'; ?>">
									<th scope="row"><label for="<?php echo esc_attr( $module_id . '_split_empty_content' ); ?>"><?php esc_html_e( 'Panel content', 'wp-powersuite' ); ?></label></th>
									<td>
										<div class="wpps-split-empty-editor-wrap">
											<textarea id="<?php echo esc_attr( $module_id . '_split_empty_content' ); ?>" name="split_empty_content" class="wp-powersuite-advanced-setting wpps-split-empty-content-textarea" data-setting-key="split_empty_content" rows="14" cols="40"><?php echo esc_textarea( $split_empty_content ); ?></textarea>
										</div>
										<p class="description"><?php esc_html_e( 'Displayed vertically centered over the brand panel background.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
							</tbody></table>
						</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<?php if ( $is_full_page ) : ?>
		<?php AdminHelpers::accordionClose(); ?>
		<?php
		AdminHelpers::accordionOpen(
			'branding',
			__( 'Branding & Form Styling', 'wp-powersuite' ),
			__( 'Logo, footer visibility, and styling for the login box, fields, button, and labels.', 'wp-powersuite' )
		);
		?>
		<div class="wpps-form-customization-box wpps-lpc-card-styling" id="<?php echo esc_attr( $module_id . '_form_customization_box' ); ?>">
		<?php else : ?>
		</div>

		<div class="wpps-form-customization-box wpps-lpc-card wpps-lpc-card-styling" id="<?php echo esc_attr( $module_id . '_form_customization_box' ); ?>">
			<h2 class="wpps-lpc-section-title"><?php esc_html_e( 'Branding & Form Styling', 'wp-powersuite' ); ?></h2>
			<p class="wpps-lpc-section-desc"><?php esc_html_e( 'Logo, footer visibility, and styling for the login box, fields, button, and labels.', 'wp-powersuite' ); ?></p>
		<?php endif; ?>
			<div class="wpps-form-customization-tabs" role="tablist">
				<?php $first = true; foreach ( $form_tabs as $tab_id => $tab_label ) : ?>
					<button type="button"
						class="wpps-form-customization-tab <?php echo esc_attr( $first ? 'is-active' : '' ); ?>"
						role="tab"
						aria-selected="<?php echo $first ? 'true' : 'false'; ?>"
						aria-controls="<?php echo esc_attr( $module_id . '_tab_' . $tab_id ); ?>"
						id="<?php echo esc_attr( $module_id . '_tab_btn_' . $tab_id ); ?>"
						data-tab="<?php echo esc_attr( $tab_id ); ?>"
					><?php echo esc_html( $tab_label ); ?></button>
					<?php $first = false; endforeach; ?>
			</div>
			<?php
			$first = true;
			foreach ( $form_tabs as $tab_id => $tab_label ) :
				$is_logo        = ( $tab_id === 'logo' );
				$is_box         = ( $tab_id === 'box' );
				$is_form   = ( $tab_id === 'form' );
				$is_fields = ( $tab_id === 'fields' );
				$is_button = ( $tab_id === 'button' );
				$is_footer = ( $tab_id === 'footer' );
				$is_label  = ( $tab_id === 'label' );
			?>
				<div class="wpps-form-customization-panel"
					id="<?php echo esc_attr( $module_id . '_tab_' . $tab_id ); ?>"
					role="tabpanel"
					aria-labelledby="<?php echo esc_attr( $module_id . '_tab_btn_' . $tab_id ); ?>"
					data-tab="<?php echo esc_attr( $tab_id ); ?>"
					style="<?php echo esc_attr( $first ? '' : 'display:none;' ); ?>"
				>
					<?php if ( $is_logo ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-logo-tab-table <?php echo $hide_logo_checked ? 'wpps-logo-hidden' : ''; ?>" role="presentation" id="<?php echo esc_attr( $module_id . '_logo_tab_table' ); ?>">
							<tbody>
								<tr>
									<th scope="row"><?php esc_html_e( 'Hide logo', 'wp-powersuite' ); ?></th>
									<td>
										<label for="<?php echo esc_attr( $module_id . '_hide_logo' ); ?>">
											<input type="hidden" name="hide_logo" value="0" />
											<input type="checkbox"
												id="<?php echo esc_attr( $module_id . '_hide_logo' ); ?>"
												name="hide_logo"
												class="wp-powersuite-advanced-setting wpps-hide-logo-checkbox"
												data-setting-key="hide_logo"
												value="1"
												<?php checked( $hide_logo_checked ); ?>
											/>
										</label>
									</td>
								</tr>
								<tr class="wpps-logo-option-row">
									<th scope="row">
										<label for="<?php echo esc_attr( $module_id . '_logo_source' ); ?>"><?php esc_html_e( 'Logo Source', 'wp-powersuite' ); ?></label>
									</th>
									<td>
										<select id="<?php echo esc_attr( $module_id . '_logo_source' ); ?>" name="logo_source" class="wp-powersuite-advanced-setting" data-setting-key="logo_source">
											<option value="upload" <?php selected( $logo_source, 'upload' ); ?>><?php esc_html_e( 'Media Library', 'wp-powersuite' ); ?></option>
											<option value="site_icon" <?php selected( $logo_source, 'site_icon' ); ?>><?php esc_html_e( 'Site Icon', 'wp-powersuite' ); ?></option>
											<option value="url" <?php selected( $logo_source, 'url' ); ?>><?php esc_html_e( 'Image URL', 'wp-powersuite' ); ?></option>
										</select>
									</td>
								</tr>
								<tr class="wpps-logo-option-row wpps-logo-upload-row" <?php echo $logo_source === 'upload' ? '' : 'style="display:none;"'; ?>>
									<th scope="row"><label for="<?php echo esc_attr( $module_id . '_logo_url' ); ?>"><?php esc_html_e( 'Replace Logo', 'wp-powersuite' ); ?></label></th>
									<td>
										<input type="url"
											id="<?php echo esc_attr( $module_id . '_logo_url' ); ?>"
											name="logo_url"
											class="wp-powersuite-advanced-setting regular-text"
											data-setting-key="logo_url"
											value="<?php echo esc_url( $settings['logo_url'] ?? '' ); ?>"
											placeholder="https://example.com/logo.png"
										/>
										<button type="button" class="button" id="<?php echo esc_attr( $module_id . '_upload_logo' ); ?>"><?php esc_html_e( 'Upload', 'wp-powersuite' ); ?></button>
										<div class="wpps-logo-preview-wrap">
											<?php if ( ! empty( $settings['logo_url'] ) && $logo_source === 'upload' ) : ?>
												<div class="wpps-logo-preview-box">
													<button type="button" class="wpps-logo-preview-remove" title="<?php esc_attr_e( 'Remove logo', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Remove logo', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-no-alt"></span></button>
													<img src="<?php echo esc_url( $settings['logo_url'] ); ?>" alt="" />
												</div>
											<?php endif; ?>
										</div>
									</td>
								</tr>
								<tr class="wpps-logo-option-row wpps-logo-site-icon-row" <?php echo $logo_source === 'site_icon' ? '' : 'style="display:none;"'; ?>>
									<th scope="row"><?php esc_html_e( 'Site Icon', 'wp-powersuite' ); ?></th>
									<td>
										<?php if ( $site_icon_url ) : ?>
											<p style="margin: 0 0 8px;">
												<img src="<?php echo esc_url( $site_icon_url ); ?>" alt="" style="width: 64px; height: 64px; border-radius: 8px; object-fit: contain; border: 1px solid #c3c4c7; padding: 4px;" />
											</p>
											<p class="description">
												<a href="<?php echo esc_url( admin_url( 'options-general.php' ) ); ?>"><?php esc_html_e( 'Change in Settings → General', 'wp-powersuite' ); ?></a>
											</p>
										<?php else : ?>
											<p class="description">
												<?php esc_html_e( 'No Site Icon is set yet.', 'wp-powersuite' ); ?>
												<a href="<?php echo esc_url( admin_url( 'options-general.php' ) ); ?>"><?php esc_html_e( 'Add one in Settings → General', 'wp-powersuite' ); ?></a>
											</p>
										<?php endif; ?>
									</td>
								</tr>
								<tr class="wpps-logo-option-row wpps-logo-url-row" <?php echo $logo_source === 'url' ? '' : 'style="display:none;"'; ?>>
									<th scope="row"><label for="<?php echo esc_attr( $module_id . '_logo_external_url' ); ?>"><?php esc_html_e( 'Logo URL', 'wp-powersuite' ); ?></label></th>
									<td>
										<input type="url"
											id="<?php echo esc_attr( $module_id . '_logo_external_url' ); ?>"
											name="logo_external_url"
											class="wp-powersuite-advanced-setting regular-text"
											data-setting-key="logo_external_url"
											value="<?php echo esc_url( $logo_external_url ); ?>"
											placeholder="https://example.com/logo.png"
										/>
									</td>
								</tr>
								<tr class="wpps-logo-option-row">
									<th scope="row"><?php esc_html_e( 'Logo Alignment', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-alignment-icons" role="group" aria-label="<?php esc_attr_e( 'Logo alignment', 'wp-powersuite' ); ?>">
											<input type="hidden" name="logo_alignment" class="wp-powersuite-advanced-setting" data-setting-key="logo_alignment" value="<?php echo esc_attr( $logo_alignment ); ?>" id="<?php echo esc_attr( $module_id . '_logo_alignment' ); ?>" />
											<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $logo_alignment === 'left' ? 'is-active' : '' ); ?>" data-alignment="left" title="<?php esc_attr_e( 'Left', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignleft" aria-hidden="true"></span></button>
											<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $logo_alignment === 'center' ? 'is-active' : '' ); ?>" data-alignment="center" title="<?php esc_attr_e( 'Center', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-aligncenter" aria-hidden="true"></span></button>
											<button type="button" class="wpps-alignment-btn <?php echo esc_attr( $logo_alignment === 'right' ? 'is-active' : '' ); ?>" data-alignment="right" title="<?php esc_attr_e( 'Right', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-editor-alignright" aria-hidden="true"></span></button>
										</div>
									</td>
								</tr>
								<tr class="wpps-logo-option-row">
									<th scope="row"><?php esc_html_e( 'Logo spacing', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-input-unit-row" style="gap: 12px;">
											<label class="wpps-inline-label">
												<span><?php esc_html_e( 'Margin top', 'wp-powersuite' ); ?></span>
												<input type="number" name="logo_margin_top" class="wp-powersuite-advanced-setting small-text" data-setting-key="logo_margin_top" value="<?php echo esc_attr( $settings['logo_margin_top'] ?? '' ); ?>" min="0" max="100" step="1" placeholder="0" />
												<span class="wpps-unit-label">px</span>
											</label>
											<label class="wpps-inline-label">
												<span><?php esc_html_e( 'Margin bottom', 'wp-powersuite' ); ?></span>
												<input type="number" name="logo_margin_bottom" class="wp-powersuite-advanced-setting small-text" data-setting-key="logo_margin_bottom" value="<?php echo esc_attr( $settings['logo_margin_bottom'] ?? '' ); ?>" min="0" max="100" step="1" placeholder="16" />
												<span class="wpps-unit-label">px</span>
											</label>
										</div>
									</td>
								</tr>
								<tr class="wpps-logo-option-row">
									<th scope="row">
										<?php esc_html_e( 'Width', 'wp-powersuite' ); ?>
										<div class="wpps-device-icons-wrapper">
											<div class="wpps-device-icons" role="group" aria-label="<?php esc_attr_e( 'Device', 'wp-powersuite' ); ?>">
												<button type="button" class="wpps-device-icon" data-device="mobile" title="<?php esc_attr_e( 'Mobile', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-smartphone" aria-hidden="true"></span></button>
												<button type="button" class="wpps-device-icon" data-device="tablet" title="<?php esc_attr_e( 'Tablet', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-tablet" aria-hidden="true"></span></button>
												<button type="button" class="wpps-device-icon is-active" data-device="desktop" title="<?php esc_attr_e( 'Desktop', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-desktop" aria-hidden="true"></span></button>
											</div>
										</div>
									</th>
									<td>
										<div class="wpps-logo-width-inputs">
											<label class="wpps-logo-width-wrap wpps-logo-width-desktop">
												<input type="number" name="logo_width_desktop" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_desktop" value="<?php echo esc_attr( $settings['logo_width_desktop'] ?? '' ); ?>" min="50" max="500" step="10" placeholder="200" />
												<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
											</label>
											<label class="wpps-logo-width-wrap wpps-logo-width-tablet" style="display:none;">
												<input type="number" name="logo_width_tablet" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_tablet" value="<?php echo esc_attr( $settings['logo_width_tablet'] ?? '' ); ?>" min="50" max="500" step="10" placeholder="180" />
												<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
											</label>
											<label class="wpps-logo-width-wrap wpps-logo-width-mobile" style="display:none;">
												<input type="number" name="logo_width_mobile" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_mobile" value="<?php echo esc_attr( $settings['logo_width_mobile'] ?? '' ); ?>" min="50" max="500" step="10" placeholder="160" />
												<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
											</label>
										</div>
									</td>
								</tr>
								<tr>
									<th scope="row"><label for="<?php echo esc_attr( $module_id . '_logo_link' ); ?>"><?php esc_html_e( 'Logo Link', 'wp-powersuite' ); ?></label></th>
									<td>
										<input type="url"
											id="<?php echo esc_attr( $module_id . '_logo_link' ); ?>"
											name="logo_link"
											class="wp-powersuite-advanced-setting regular-text"
											data-setting-key="logo_link"
											value="<?php echo esc_url( $settings['logo_link'] ?? '' ); ?>"
											placeholder="<?php echo esc_attr( home_url( '/' ) ); ?>"
										/>
										<p class="description"><?php esc_html_e( 'Leave empty to link to your site homepage when a custom logo is set.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
							</tbody>
						</table>
					<?php elseif ( $is_box ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-box-tab-table <?php echo esc_attr( $box_bg_type ? 'wpps-bg-type-' . $box_bg_type : '' ); ?> <?php echo esc_attr( 'wpps-border-type-' . $box_border_type ); ?>" role="presentation" id="<?php echo esc_attr( $module_id . '_box_tab_table' ); ?>">
							<tbody>
								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $module_id . '_box_form_width' ); ?>"><?php esc_html_e( 'Box width', 'wp-powersuite' ); ?></label>
									</th>
									<td>
										<div class="wpps-input-unit-row">
											<input type="number" id="<?php echo esc_attr( $module_id . '_box_form_width' ); ?>" name="box_form_width" class="wp-powersuite-advanced-setting small-text" data-setting-key="box_form_width" value="<?php echo esc_attr( $box_form_width ); ?>" min="1" max="2000" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
											<select name="box_form_width_unit" class="wp-powersuite-advanced-setting" data-setting-key="box_form_width_unit" id="<?php echo esc_attr( $module_id . '_box_form_width_unit' ); ?>">
												<option value="px" <?php selected( $box_form_width_unit, 'px' ); ?>><?php esc_html_e( 'px', 'wp-powersuite' ); ?></option>
												<option value="%" <?php selected( $box_form_width_unit, '%' ); ?>><?php esc_html_e( '%', 'wp-powersuite' ); ?></option>
											</select>
										</div>
										<p class="description"><?php esc_html_e( 'Width of the outer login box (#login). Leave empty for the default.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
								<?php AdminHelpers::renderContainerStyleTab( $module_id, 'box', $box_container_vars ); ?>
							</tbody>
						</table>
					<?php elseif ( $is_form ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-form-tab-table <?php echo esc_attr( $form_bg_type ? 'wpps-form-bg-type-' . $form_bg_type : '' ); ?> <?php echo esc_attr( 'wpps-form-border-type-' . $form_border_type ); ?>" role="presentation" id="<?php echo esc_attr( $module_id . '_form_tab_table' ); ?>">
							<tbody>
								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $module_id . '_form_width' ); ?>"><?php esc_html_e( 'Form width', 'wp-powersuite' ); ?></label>
									</th>
									<td>
										<div class="wpps-input-unit-row">
											<input type="number" id="<?php echo esc_attr( $module_id . '_form_width' ); ?>" name="form_width" class="wp-powersuite-advanced-setting small-text" data-setting-key="form_width" value="<?php echo esc_attr( $form_width ); ?>" min="1" max="2000" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
											<select name="form_width_unit" class="wp-powersuite-advanced-setting" data-setting-key="form_width_unit" id="<?php echo esc_attr( $module_id . '_form_width_unit' ); ?>">
												<option value="px" <?php selected( $form_width_unit, 'px' ); ?>><?php esc_html_e( 'px', 'wp-powersuite' ); ?></option>
												<option value="%" <?php selected( $form_width_unit, '%' ); ?>><?php esc_html_e( '%', 'wp-powersuite' ); ?></option>
											</select>
										</div>
										<p class="description"><?php esc_html_e( 'Width of the login form inside the box. Leave empty for the default.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
								<?php AdminHelpers::renderContainerStyleTab( $module_id, 'form', $form_container_vars ); ?>
							</tbody>
						</table>
					<?php elseif ( $is_fields ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-fields-tab-table <?php echo esc_attr( 'wpps-border-type-' . $field_normal_border_type ); ?>" role="presentation" id="<?php echo esc_attr( $module_id . '_fields_tab_table' ); ?>">
							<tbody>
								<tr>
									<th scope="row"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-typography-wrap">
											<button type="button" class="wpps-typography-reset<?php echo ! $field_has_typography ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset typography', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Reset typography', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
											<button type="button" class="wpps-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon" aria-hidden="true"></span></button>
											<?php
											\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( $module_id, 'field', [
												'font_family' => $field_font_family,
												'font_weight' => $field_font_weight,
												'font_size_desktop' => $field_font_size_desktop,
												'font_size_tablet' => $field_font_size_tablet,
												'font_size_mobile' => $field_font_size_mobile,
												'text_transform' => $field_text_transform,
												'font_style' => $field_font_style,
												'line_height_desktop' => $field_line_height_desktop,
												'line_height_tablet' => $field_line_height_tablet,
												'line_height_mobile' => $field_line_height_mobile,
												'letter_spacing_desktop' => $field_letter_spacing_desktop,
												'letter_spacing_tablet' => $field_letter_spacing_tablet,
												'letter_spacing_mobile' => $field_letter_spacing_mobile,
											] );
											?>
										</div>
									</td>
								</tr>
								<?php
								AdminHelpers::renderResponsivePaddingSidesRow( $module_id, 'field_normal', [
									'padding_top'          => $field_normal_padding_top,
									'padding_right'        => $field_normal_padding_right,
									'padding_bottom'       => $field_normal_padding_bottom,
									'padding_left'         => $field_normal_padding_left,
									'padding_top_tablet'   => $field_normal_padding_top_tablet,
									'padding_right_tablet' => $field_normal_padding_right_tablet,
									'padding_bottom_tablet' => $field_normal_padding_bottom_tablet,
									'padding_left_tablet'  => $field_normal_padding_left_tablet,
									'padding_top_mobile'   => $field_normal_padding_top_mobile,
									'padding_right_mobile' => $field_normal_padding_right_mobile,
									'padding_bottom_mobile' => $field_normal_padding_bottom_mobile,
									'padding_left_mobile'  => $field_normal_padding_left_mobile,
									'row_description'      => __( 'Leave empty for default. Set per device (desktop/tablet/mobile) and per side.', 'wp-powersuite' ),
								] );
								?>
								<tr>
									<th scope="row">
										<label for="<?php echo esc_attr( $module_id . '_field_normal_text_color' ); ?>"><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label>
									</th>
									<td>
										<div class="wpps-color-field-row">
											<input type="color" id="<?php echo esc_attr( $module_id . '_field_normal_text_color' ); ?>" name="field_normal_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $field_normal_text_color ) ? ( strlen( $field_normal_text_color ) > 7 ? substr( $field_normal_text_color, 0, 7 ) : $field_normal_text_color ) : '#333333' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="field_normal_text_color" />
											<div class="wpps-color-code-wrap">
												<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="field_normal_text_color" data-color-input="<?php echo esc_attr( $module_id . '_field_normal_text_color' ); ?>" data-default-color="#333333" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $field_normal_text_color ) ? $field_normal_text_color : '#333333' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#333333" maxlength="9" />
												<button type="button" class="wpps-color-reset button-link" data-default-color="#333333"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
											</div>
										</div>
										<p class="description"><?php esc_html_e( 'Input text color.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
								<?php
								AdminHelpers::renderFieldBackgroundRows( $module_id, 'field_normal', [
									'bg_color'           => $field_normal_bg_color,
									'bg_overlay_opacity' => $field_normal_bg_overlay_opacity,
								] );
								?>
								<?php AdminHelpers::renderBorderAndShadowRows( $module_id, 'field_normal', $field_border_shadow_vars ); ?>
							</tbody>
						</table>
					<?php elseif ( $is_button ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-button-tab-table" role="presentation">
							<tbody>
								<tr>
									<th scope="row"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-typography-wrap">
											<button type="button" class="wpps-typography-reset wpps-button-typography-reset<?php echo ! $button_has_typography ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset typography', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
											<button type="button" class="wpps-typography-toggle wpps-button-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
											<?php
											\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( $module_id, 'button', [
												'font_family' => $button_font_family,
												'font_weight' => $button_font_weight,
												'font_size_desktop' => $button_font_size_desktop,
												'font_size_tablet' => $button_font_size_tablet,
												'font_size_mobile' => $button_font_size_mobile,
												'text_transform' => $button_text_transform,
												'font_style' => $button_font_style,
												'line_height_desktop' => $button_line_height_desktop,
												'line_height_tablet' => $button_line_height_tablet,
												'line_height_mobile' => $button_line_height_mobile,
												'letter_spacing_desktop' => $button_letter_spacing_desktop,
												'letter_spacing_tablet' => $button_letter_spacing_tablet,
												'letter_spacing_mobile' => $button_letter_spacing_mobile,
											], 'wpps-button-typography-popover' );
											?>
										</div>
									</td>
								</tr>
								<?php
								AdminHelpers::renderResponsivePaddingSidesRow( $module_id, 'button_normal', [
									'padding_top'         => $button_normal_padding_top,
									'padding_right'       => $button_normal_padding_right,
									'padding_bottom'      => $button_normal_padding_bottom,
									'padding_left'        => $button_normal_padding_left,
									'padding_top_tablet'  => $button_normal_padding_top_tablet,
									'padding_right_tablet' => $button_normal_padding_right_tablet,
									'padding_bottom_tablet' => $button_normal_padding_bottom_tablet,
									'padding_left_tablet' => $button_normal_padding_left_tablet,
									'padding_top_mobile'  => $button_normal_padding_top_mobile,
									'padding_right_mobile' => $button_normal_padding_right_mobile,
									'padding_bottom_mobile' => $button_normal_padding_bottom_mobile,
									'padding_left_mobile' => $button_normal_padding_left_mobile,
								] );
								?>
								<tr class="wpps-button-state-tabs-row">
									<td colspan="2">
										<div class="wpps-lpc-segment-bar wpps-lpc-segment-bar--compact">
											<span class="wpps-lpc-segment-bar__label"><?php esc_html_e( 'Button appearance', 'wp-powersuite' ); ?></span>
											<div class="wpps-lpc-segment-group wpps-button-state-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Button state', 'wp-powersuite' ); ?>">
												<button type="button" class="wpps-button-state-tab is-active" role="tab" aria-selected="true" aria-controls="<?php echo esc_attr( $module_id . '_button_normal_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_button_tab_btn_normal' ); ?>" data-button-state="normal"><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></button>
												<button type="button" class="wpps-button-state-tab" role="tab" aria-selected="false" aria-controls="<?php echo esc_attr( $module_id . '_button_hover_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_button_tab_btn_hover' ); ?>" data-button-state="hover"><?php esc_html_e( 'On hover', 'wp-powersuite' ); ?></button>
											</div>
										</div>
									</td>
								</tr>
								<tr class="wpps-button-state-panels-row">
									<td colspan="2" class="wpps-lpc-panel-card wpps-button-state-panels-cell">
										<div class="wpps-button-state-panel wpps-button-normal-panel" id="<?php echo esc_attr( $module_id . '_button_normal_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_button_tab_btn_normal' ); ?>" data-button-state="normal">
											<?php
											$button_normal_table_classes = 'form-table wpps-login-customizor-table wpps-button-normal-table wpps-border-type-' . esc_attr( $button_normal_border_type );
											if ( $button_normal_bg_type ) {
												$button_normal_table_classes .= ' wpps-button-normal-bg-type-' . esc_attr( $button_normal_bg_type );
											}
											?>
											<table class="<?php echo $button_normal_table_classes; ?>" role="presentation">
												<tbody>
													<tr>
														<th scope="row"><label for="<?php echo esc_attr( $module_id . '_button_normal_text_color' ); ?>"><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label></th>
														<td>
															<div class="wpps-color-field-row">
																<input type="color" id="<?php echo esc_attr( $module_id . '_button_normal_text_color' ); ?>" name="button_normal_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $button_normal_text_color ) ? ( strlen( $button_normal_text_color ) > 7 ? substr( $button_normal_text_color, 0, 7 ) : $button_normal_text_color ) : '#ffffff' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="button_normal_text_color" />
																<div class="wpps-color-code-wrap">
																	<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="button_normal_text_color" data-color-input="<?php echo esc_attr( $module_id . '_button_normal_text_color' ); ?>" data-default-color="#ffffff" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $button_normal_text_color ) ? $button_normal_text_color : '#ffffff' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#ffffff" maxlength="9" />
																	<button type="button" class="wpps-color-reset button-link" data-default-color="#ffffff"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
																</div>
															</div>
														</td>
													</tr>
													<?php
													AdminHelpers::renderButtonNormalBgRows( $module_id, [
														'bg_type'               => $button_normal_bg_type,
														'bg_color'              => $button_normal_bg_color,
														'bg_gradient_type'      => $button_normal_grad['type'],
														'bg_gradient_angle'     => (string) $button_normal_grad['angle'],
														'bg_gradient_color1'    => $button_normal_grad['color1'],
														'bg_gradient_pos1'     => (string) $button_normal_grad['pos1'],
														'bg_gradient_color2'    => $button_normal_grad['color2'],
														'bg_gradient_pos2'     => (string) $button_normal_grad['pos2'],
													] );
													AdminHelpers::renderBorderAndShadowRows( $module_id, 'button_normal', $button_normal_border_shadow_vars );
													?>
												</tbody>
											</table>
										</div>
										<div class="wpps-button-state-panel wpps-button-hover-panel" id="<?php echo esc_attr( $module_id . '_button_hover_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_button_tab_btn_hover' ); ?>" data-button-state="hover" style="display: none;">
											<?php
											$button_hover_table_classes = 'form-table wpps-login-customizor-table wpps-button-hover-table wpps-border-type-' . esc_attr( $button_hover_border_type );
											if ( $button_hover_bg_type ) {
												$button_hover_table_classes .= ' wpps-button-hover-bg-type-' . esc_attr( $button_hover_bg_type );
											}
											?>
											<table class="<?php echo $button_hover_table_classes; ?>" role="presentation">
												<tbody>
													<tr>
														<th scope="row"><label for="<?php echo esc_attr( $module_id . '_button_hover_text_color' ); ?>"><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label></th>
														<td>
															<div class="wpps-color-field-row">
																<input type="color" id="<?php echo esc_attr( $module_id . '_button_hover_text_color' ); ?>" name="button_hover_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $button_hover_text_color ) ? ( strlen( $button_hover_text_color ) > 7 ? substr( $button_hover_text_color, 0, 7 ) : $button_hover_text_color ) : '#ffffff' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="button_hover_text_color" />
																<div class="wpps-color-code-wrap">
																	<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="button_hover_text_color" data-color-input="<?php echo esc_attr( $module_id . '_button_hover_text_color' ); ?>" data-default-color="#ffffff" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $button_hover_text_color ) ? $button_hover_text_color : '#ffffff' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#ffffff" maxlength="9" />
																	<button type="button" class="wpps-color-reset button-link" data-default-color="#ffffff"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
																</div>
															</div>
														</td>
													</tr>
													<?php
													AdminHelpers::renderButtonHoverBgRows( $module_id, [
														'bg_type'               => $button_hover_bg_type,
														'bg_color'              => $button_hover_bg_color,
														'bg_gradient_type'      => $button_hover_grad['type'],
														'bg_gradient_angle'     => (string) $button_hover_grad['angle'],
														'bg_gradient_color1'    => $button_hover_grad['color1'],
														'bg_gradient_pos1'     => (string) $button_hover_grad['pos1'],
														'bg_gradient_color2'    => $button_hover_grad['color2'],
														'bg_gradient_pos2'     => (string) $button_hover_grad['pos2'],
													] );
													AdminHelpers::renderBorderAndShadowRows( $module_id, 'button_hover', $button_hover_border_shadow_vars );
													?>
												</tbody>
											</table>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					<?php elseif ( $is_footer ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-footer-tab-table" role="presentation">
							<tbody>
								<tr>
									<th scope="row"><?php esc_html_e( 'Hide Elements', 'wp-powersuite' ); ?></th>
									<td>
										<fieldset>
											<label style="display: block; margin-bottom: 10px;">
												<input type="hidden" name="hide_back_link" value="0" />
												<input type="checkbox"
													id="<?php echo esc_attr( $module_id . '_hide_back_link' ); ?>"
													name="hide_back_link"
													class="wp-powersuite-advanced-setting"
													data-setting-key="hide_back_link"
													value="1"
													<?php checked( ! empty( $settings['hide_back_link'] ) && $settings['hide_back_link'] !== '0' ); ?>
												/>
												<?php esc_html_e( 'Hide "Back to Site"', 'wp-powersuite' ); ?>
											</label>
											<label style="display: block; margin-bottom: 10px;">
												<input type="hidden" name="hide_lost_password" value="0" />
												<input type="checkbox"
													id="<?php echo esc_attr( $module_id . '_hide_lost_password' ); ?>"
													name="hide_lost_password"
													class="wp-powersuite-advanced-setting"
													data-setting-key="hide_lost_password"
													value="1"
													<?php checked( ! empty( $settings['hide_lost_password'] ) && $settings['hide_lost_password'] !== '0' ); ?>
												/>
												<?php esc_html_e( 'Hide "Lost Password"', 'wp-powersuite' ); ?>
											</label>
											<label style="display: block; margin-bottom: 10px;">
												<input type="hidden" name="hide_remember_me" value="0" />
												<input type="checkbox"
													id="<?php echo esc_attr( $module_id . '_hide_remember_me' ); ?>"
													name="hide_remember_me"
													class="wp-powersuite-advanced-setting"
													data-setting-key="hide_remember_me"
													value="1"
													<?php checked( ! empty( $settings['hide_remember_me'] ) && $settings['hide_remember_me'] !== '0' ); ?>
												/>
												<?php esc_html_e( 'Hide "Remember Me"', 'wp-powersuite' ); ?>
											</label>
											<label style="display: block;">
												<input type="hidden" name="hide_language_switcher" value="0" />
												<input type="checkbox"
													id="<?php echo esc_attr( $module_id . '_hide_language_switcher' ); ?>"
													name="hide_language_switcher"
													class="wp-powersuite-advanced-setting"
													data-setting-key="hide_language_switcher"
													value="1"
													<?php checked( ! empty( $settings['hide_language_switcher'] ) && $settings['hide_language_switcher'] !== '0' ); ?>
												/>
												<?php esc_html_e( 'Hide Language Switcher', 'wp-powersuite' ); ?>
											</label>
										</fieldset>
									</td>
								</tr>
								<tr>
									<th scope="row"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-typography-wrap">
											<button type="button" class="wpps-typography-reset wpps-footer-typography-reset<?php echo ! $footer_has_typography ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset typography', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
											<button type="button" class="wpps-typography-toggle wpps-footer-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
											<?php
											\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( $module_id, 'footer', [
												'font_family' => $footer_font_family,
												'font_weight' => $footer_font_weight,
												'font_size_desktop' => $footer_font_size_desktop,
												'font_size_tablet' => $footer_font_size_tablet,
												'font_size_mobile' => $footer_font_size_mobile,
												'text_transform' => $footer_text_transform,
												'font_style' => $footer_font_style,
												'line_height_desktop' => $footer_line_height_desktop,
												'line_height_tablet' => $footer_line_height_tablet,
												'line_height_mobile' => $footer_line_height_mobile,
												'letter_spacing_desktop' => $footer_letter_spacing_desktop,
												'letter_spacing_tablet' => $footer_letter_spacing_tablet,
												'letter_spacing_mobile' => $footer_letter_spacing_mobile,
											], 'wpps-footer-typography-popover' );
											?>
										</div>
									</td>
								</tr>
								<tr class="wpps-button-state-tabs-row">
									<td colspan="2">
										<div class="wpps-lpc-segment-bar wpps-lpc-segment-bar--compact">
											<span class="wpps-lpc-segment-bar__label"><?php esc_html_e( 'Link appearance', 'wp-powersuite' ); ?></span>
											<div class="wpps-lpc-segment-group wpps-button-state-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Footer link state', 'wp-powersuite' ); ?>">
												<button type="button" class="wpps-button-state-tab is-active" role="tab" aria-selected="true" aria-controls="<?php echo esc_attr( $module_id . '_footer_normal_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_footer_tab_btn_normal' ); ?>" data-button-state="normal"><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></button>
												<button type="button" class="wpps-button-state-tab" role="tab" aria-selected="false" aria-controls="<?php echo esc_attr( $module_id . '_footer_hover_panel' ); ?>" id="<?php echo esc_attr( $module_id . '_footer_tab_btn_hover' ); ?>" data-button-state="hover"><?php esc_html_e( 'On hover', 'wp-powersuite' ); ?></button>
											</div>
										</div>
									</td>
								</tr>
								<tr class="wpps-button-state-panels-row">
									<td colspan="2" class="wpps-lpc-panel-card wpps-button-state-panels-cell">
										<div class="wpps-button-state-panel" id="<?php echo esc_attr( $module_id . '_footer_normal_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_footer_tab_btn_normal' ); ?>" data-button-state="normal">
											<table class="form-table wpps-login-customizor-table" role="presentation"><tbody>
												<tr>
													<th scope="row"><label for="<?php echo esc_attr( $module_id . '_footer_normal_text_color' ); ?>"><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label></th>
													<td>
														<div class="wpps-color-field-row">
															<input type="color" id="<?php echo esc_attr( $module_id . '_footer_normal_text_color' ); ?>" name="footer_normal_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $footer_normal_text_color ) ? ( strlen( $footer_normal_text_color ) > 7 ? substr( $footer_normal_text_color, 0, 7 ) : $footer_normal_text_color ) : '#50575e' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="footer_normal_text_color" />
															<div class="wpps-color-code-wrap">
																<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="footer_normal_text_color" data-color-input="<?php echo esc_attr( $module_id . '_footer_normal_text_color' ); ?>" data-default-color="#50575e" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $footer_normal_text_color ) ? $footer_normal_text_color : '#50575e' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#50575e" maxlength="9" />
																<button type="button" class="wpps-color-reset button-link" data-default-color="#50575e"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
															</div>
														</div>
													</td>
												</tr>
											</tbody></table>
										</div>
										<div class="wpps-button-state-panel" id="<?php echo esc_attr( $module_id . '_footer_hover_panel' ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $module_id . '_footer_tab_btn_hover' ); ?>" data-button-state="hover" style="display: none;">
											<table class="form-table wpps-login-customizor-table" role="presentation"><tbody>
												<tr>
													<th scope="row"><label for="<?php echo esc_attr( $module_id . '_footer_hover_text_color' ); ?>"><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label></th>
													<td>
														<div class="wpps-color-field-row">
															<input type="color" id="<?php echo esc_attr( $module_id . '_footer_hover_text_color' ); ?>" name="footer_hover_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $footer_hover_text_color ) ? ( strlen( $footer_hover_text_color ) > 7 ? substr( $footer_hover_text_color, 0, 7 ) : $footer_hover_text_color ) : '#2271b1' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="footer_hover_text_color" />
															<div class="wpps-color-code-wrap">
																<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="footer_hover_text_color" data-color-input="<?php echo esc_attr( $module_id . '_footer_hover_text_color' ); ?>" data-default-color="#2271b1" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $footer_hover_text_color ) ? $footer_hover_text_color : '#2271b1' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#2271b1" maxlength="9" />
																<button type="button" class="wpps-color-reset button-link" data-default-color="#2271b1"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
															</div>
														</div>
													</td>
												</tr>
											</tbody></table>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					<?php elseif ( $is_label ) : ?>
						<table class="form-table wpps-login-customizor-table wpps-label-tab-table" role="presentation">
							<tbody>
								<tr>
									<th scope="row"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></th>
									<td>
										<div class="wpps-typography-wrap">
											<button type="button" class="wpps-typography-reset wpps-label-typography-reset<?php echo ! $label_has_typography ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset typography', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
											<button type="button" class="wpps-typography-toggle wpps-label-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
											<?php
											\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( $module_id, 'label', [
												'font_family' => $label_font_family,
												'font_weight' => $label_font_weight,
												'font_size_desktop' => $label_font_size_desktop,
												'font_size_tablet' => $label_font_size_tablet,
												'font_size_mobile' => $label_font_size_mobile,
												'text_transform' => $label_text_transform,
												'font_style' => $label_font_style,
												'line_height_desktop' => $label_line_height_desktop,
												'line_height_tablet' => $label_line_height_tablet,
												'line_height_mobile' => $label_line_height_mobile,
												'letter_spacing_desktop' => $label_letter_spacing_desktop,
												'letter_spacing_tablet' => $label_letter_spacing_tablet,
												'letter_spacing_mobile' => $label_letter_spacing_mobile,
											], 'wpps-label-typography-popover' );
											?>
										</div>
									</td>
								</tr>
								<tr>
									<th scope="row"><label><?php esc_html_e( 'Text Color', 'wp-powersuite' ); ?></label></th>
									<td>
										<div class="wpps-color-field-row">
											<input type="color" id="<?php echo esc_attr( $module_id . '_label_text_color' ); ?>" name="label_text_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $label_text_color ) ? ( strlen( $label_text_color ) > 7 ? substr( $label_text_color, 0, 7 ) : $label_text_color ) : '#3c434a' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="label_text_color" />
											<div class="wpps-color-code-wrap">
												<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="label_text_color" data-color-input="<?php echo esc_attr( $module_id . '_label_text_color' ); ?>" data-default-color="#3c434a" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $label_text_color ) ? $label_text_color : '#3c434a' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#3c434a" maxlength="9" />
												<button type="button" class="wpps-color-reset button-link" data-default-color="#3c434a"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th scope="row"><label for="<?php echo esc_attr( $module_id . '_label_spacing_bottom' ); ?>"><?php esc_html_e( 'Space between label and field', 'wp-powersuite' ); ?></label></th>
									<td>
										<div class="wpps-input-unit-row">
											<input type="number" id="<?php echo esc_attr( $module_id . '_label_spacing_bottom' ); ?>" name="label_spacing_bottom" class="wp-powersuite-advanced-setting small-text" data-setting-key="label_spacing_bottom" value="<?php echo esc_attr( $label_spacing_bottom ); ?>" min="0" max="100" step="1" placeholder="—" />
											<span class="wpps-unit-label">px</span>
										</div>
										<p class="description"><?php esc_html_e( 'Margin below the label (gap before the input). Leave empty for default.', 'wp-powersuite' ); ?></p>
									</td>
								</tr>
							</tbody>
						</table>
					<?php else : ?>
						<p class="description"><?php echo esc_html( sprintf( __( 'Options for %s will appear here.', 'wp-powersuite' ), $tab_label ) ); ?></p>
					<?php endif; ?>
				</div>
			<?php $first = false; endforeach; ?>
		</div>
		<?php if ( $is_full_page ) : ?>
		<?php AdminHelpers::accordionClose(); ?>
		<?php
		AdminHelpers::accordionOpen(
			'custom-css',
			__( 'Custom CSS', 'wp-powersuite' ),
			__( 'Additional CSS applied to the login page. Do not include style tags.', 'wp-powersuite' )
		);
		else :
		?>
		<div class="wpps-lpc-card wpps-lpc-card-css">
			<h2 class="wpps-lpc-section-title"><?php esc_html_e( 'Custom CSS', 'wp-powersuite' ); ?></h2>
			<p class="wpps-lpc-section-desc"><?php esc_html_e( 'Additional CSS applied to the login page. Do not include &lt;style&gt; tags.', 'wp-powersuite' ); ?></p>
		<?php endif; ?>
			<table class="form-table wpps-login-customizor-table wpps-custom-css-table" role="presentation">
				<tbody>
					<tr>
						<th scope="row"><label for="<?php echo esc_attr( $module_id . '_custom_css' ); ?>"><?php esc_html_e( 'CSS', 'wp-powersuite' ); ?></label></th>
						<td>
							<div class="wp-powersuite-hfc-panel wpps-login-custom-css-editor">
								<textarea
									id="<?php echo esc_attr( $module_id . '_custom_css' ); ?>"
									name="custom_css"
									class="wp-powersuite-advanced-setting large-text code wp-powersuite-css-editor"
									data-setting-key="custom_css"
									rows="8"
									cols="50"
									placeholder="<?php esc_attr_e( '/* e.g. .login h1 a { filter: brightness(1.1); } */', 'wp-powersuite' ); ?>"
								><?php echo esc_textarea( $custom_css ); ?></textarea>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		<?php if ( $is_full_page ) : ?>
		<?php AdminHelpers::accordionClose(); ?>
		</div>
		<?php AdminHelpers::renderLpcPageActionsBar( $module_id, 'wpps-lpc-actions-wrapper--bottom' ); ?>
		<?php else : ?>
		</div>
		<?php endif; ?>

	</form>
</div>
<?php if ( $is_full_page ) : ?>
</div>
<?php endif; ?>

<style>
/* WordPress admin color palette — on module wrapper so tabs/box outside tables inherit vars */
.wpps-lpc-card-styling.wpps-form-customization-box {
	margin-top: 0;
	padding-bottom: 16px;
}
.wpps-login-customizor-settings {
	--wpps-admin-primary: var(--wp-admin-theme-color, #2271b1);
	--wpps-admin-primary-hover: var(--wp-admin-theme-color-darker-10, #135e96);
	--wpps-admin-surface: #fff;
	--wpps-admin-surface-muted: #f0f0f1;
	--wpps-admin-surface-hover: #f6f7f7;
	--wpps-admin-border: #c3c4c7;
	--wpps-admin-border-light: #dcdcde;
	--wpps-admin-text: #1d2327;
	--wpps-admin-text-muted: #646970;
	--wpps-admin-text-secondary: #50575e;
	--wpps-admin-danger: #d63638;
	--wpps-admin-danger-hover: #b32d2e;
}
.wpps-section-heading { margin: 0; font-size: 14px; font-weight: 600; color: var(--wpps-admin-text); }
.wpps-form-alignment-row { display: none; }
.wpps-login-customizor-table.wpps-template-type-classic-centered .wpps-form-alignment-row { display: table-row; }
/* Classic layout: Background Type and sub-rows */
.wpps-classic-bg-type-row,
.wpps-classic-bg-color-row,
.wpps-classic-bg-gradient-row,
.wpps-classic-bg-image-row,
.wpps-classic-bg-video-row { display: none; }
.wpps-login-customizor-table.wpps-template-type-classic-centered .wpps-classic-bg-type-row { display: table-row; }
.wpps-login-customizor-table.wpps-template-type-classic-centered.wpps-classic-bg-type-color .wpps-classic-bg-color-row { display: table-row; }
.wpps-login-customizor-table.wpps-template-type-classic-centered.wpps-classic-bg-type-gradient .wpps-classic-bg-gradient-row { display: table-row; }
.wpps-login-customizor-table.wpps-template-type-classic-centered.wpps-classic-bg-type-image .wpps-classic-bg-image-row { display: table-row; }
.wpps-login-customizor-table.wpps-template-type-classic-centered.wpps-classic-bg-type-video .wpps-classic-bg-video-row { display: table-row; }
/* Split Layout options: show only when Split Layout is selected */
.wpps-split-ratio-row,
.wpps-split-column-order-row,
.wpps-split-panels-row { display: none; }
.wpps-login-customizor-table.wpps-template-type-split-layout .wpps-split-ratio-row,
.wpps-login-customizor-table.wpps-template-type-split-layout .wpps-split-column-order-row,
.wpps-login-customizor-table.wpps-template-type-split-layout .wpps-split-panels-row { display: table-row; }

/* Split layout panels: bg sub-rows visibility is set by PHP (inline style) and JS (syncSplitPanelBgRows) via data-wpps-bg-type */
/* Spacing between rows in all Login Customizor tabs */
.wpps-login-customizor-table:not(.wpps-split-form-inner-table):not(.wpps-split-empty-inner-table) tbody tr th,
.wpps-login-customizor-table:not(.wpps-split-form-inner-table):not(.wpps-split-empty-inner-table) tbody tr td { padding: 10px 0 10px 0; vertical-align: top; }
.wpps-login-customizor-table:not(.wpps-split-form-inner-table):not(.wpps-split-empty-inner-table) tbody tr th { padding-right: 12px; }
.wpps-login-customizor-table tbody tr th .description,
.wpps-login-customizor-table tbody tr td .description { margin-top: 4px; }
.wpps-login-customizor-table label input.small-text { margin-top: 0; }

.wpps-form-customization-box { margin-top: 0; }
.wpps-form-customization-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--wpps-admin-border-light, #dcdcde); padding-bottom: 12px; }
.wpps-form-customization-tab { padding: 6px 12px; background: var(--wpps-admin-surface-muted, #f0f0f1); border: 1px solid var(--wpps-admin-border-light, #dcdcde); border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--wpps-admin-text, #1d2327); }
.wpps-form-customization-tab:hover { background: var(--wpps-admin-surface-hover, #f6f7f7); color: var(--wpps-admin-text, #1d2327); }
.wpps-form-customization-tab.is-active,
.wpps-form-customization-tab.is-active:hover { background: var(--wpps-admin-surface, #fff); border-color: var(--wpps-admin-primary); color: var(--wpps-admin-primary); }
.wpps-button-state-tabs-row > td { padding-top: 8px; padding-bottom: 0; vertical-align: top; }
.wpps-button-state-panels-row > td { padding-top: 0; }
.wpps-button-state-panel { min-height: 40px; }
/* Button Normal table: show/hide bg color vs gradient row */
.wpps-button-normal-table .wpps-button-normal-bg-color-row,
.wpps-button-normal-table .wpps-button-normal-bg-gradient-row { display: none; }
.wpps-button-normal-table.wpps-button-normal-bg-type-color .wpps-button-normal-bg-color-row { display: table-row; }
.wpps-button-normal-table.wpps-button-normal-bg-type-gradient .wpps-button-normal-bg-gradient-row { display: table-row; }
/* Button Normal: hide border color/width/shadow when border type is none; radius always available */
.wpps-button-normal-table.wpps-border-type-none .wpps-button-normal-border-color-row,
.wpps-button-normal-table.wpps-border-type-none .wpps-button-normal-border-width-row,
.wpps-button-normal-table.wpps-border-type-none .wpps-button-normal-shadow-row { display: none; }
.wpps-button-normal-table.wpps-border-type-solid .wpps-button-normal-border-color-row,
.wpps-button-normal-table.wpps-border-type-solid .wpps-button-normal-border-width-row,
.wpps-button-normal-table.wpps-border-type-solid .wpps-button-normal-shadow-row,
.wpps-button-normal-table.wpps-border-type-dashed .wpps-button-normal-border-color-row,
.wpps-button-normal-table.wpps-border-type-dashed .wpps-button-normal-border-width-row,
.wpps-button-normal-table.wpps-border-type-dashed .wpps-button-normal-shadow-row,
.wpps-button-normal-table.wpps-border-type-dotted .wpps-button-normal-border-color-row,
.wpps-button-normal-table.wpps-border-type-dotted .wpps-button-normal-border-width-row,
.wpps-button-normal-table.wpps-border-type-dotted .wpps-button-normal-shadow-row { display: table-row; }
.wpps-button-normal-table .wpps-button-normal-border-radius-row,
.wpps-button-hover-table .wpps-button-hover-border-radius-row { display: table-row; }
/* Button Hover: show/hide rows by background type and border type */
.wpps-button-hover-table .wpps-button-hover-bg-color-row,
.wpps-button-hover-table .wpps-button-hover-bg-gradient-row { display: none; }
.wpps-button-hover-table.wpps-button-hover-bg-type-color .wpps-button-hover-bg-color-row { display: table-row; }
.wpps-button-hover-table.wpps-button-hover-bg-type-gradient .wpps-button-hover-bg-gradient-row { display: table-row; }
.wpps-button-hover-table.wpps-border-type-none .wpps-button-hover-border-color-row,
.wpps-button-hover-table.wpps-border-type-none .wpps-button-hover-border-width-row,
.wpps-button-hover-table.wpps-border-type-none .wpps-button-hover-shadow-row { display: none; }
.wpps-button-hover-table.wpps-border-type-solid .wpps-button-hover-border-color-row,
.wpps-button-hover-table.wpps-border-type-solid .wpps-button-hover-border-width-row,
.wpps-button-hover-table.wpps-border-type-solid .wpps-button-hover-shadow-row,
.wpps-button-hover-table.wpps-border-type-dashed .wpps-button-hover-border-color-row,
.wpps-button-hover-table.wpps-border-type-dashed .wpps-button-hover-border-width-row,
.wpps-button-hover-table.wpps-border-type-dashed .wpps-button-hover-shadow-row,
.wpps-button-hover-table.wpps-border-type-dotted .wpps-button-hover-border-color-row,
.wpps-button-hover-table.wpps-border-type-dotted .wpps-button-hover-border-width-row,
.wpps-button-hover-table.wpps-border-type-dotted .wpps-button-hover-shadow-row { display: table-row; }
.wpps-form-customization-panel { min-height: 60px; }

.wpps-alignment-icons { display: flex; gap: 2px; align-items: center; }
.wpps-alignment-btn { padding: 6px 10px; background: var(--wpps-admin-surface-muted); border: 1px solid var(--wpps-admin-border-light); border-radius: 4px; cursor: pointer; color: var(--wpps-admin-text); }
.wpps-alignment-btn:hover { background: var(--wpps-admin-surface-hover); }
.wpps-alignment-btn.is-active { background: var(--wpps-admin-primary); border-color: var(--wpps-admin-primary); color: #fff; }
.wpps-alignment-btn .dashicons { font-size: 20px; width: 20px; height: 20px; }

.wpps-device-icons-wrapper { display: inline-block; position: relative; margin-left: 6px; vertical-align: middle; }
.wpps-device-icons-wrapper:hover { padding-top: 38px; margin-top: -38px; }
.wpps-device-icons { position: relative; width: 18px; height: 18px; }
.wpps-device-icon { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; background: var(--wpps-admin-surface); border: 1px solid var(--wpps-admin-border); border-radius: 50%; cursor: pointer; color: var(--wpps-admin-text); z-index: 1; }
.wpps-device-icon:hover { background: var(--wpps-admin-surface-muted); border-color: var(--wpps-admin-border); color: var(--wpps-admin-text); }
.wpps-device-icon.is-active { background: var(--wpps-admin-primary); border-color: var(--wpps-admin-primary); color: #fff; opacity: 1; pointer-events: auto; bottom: 0 !important; left: 0 !important; margin-bottom: 0 !important; }
.wpps-device-icon .dashicons { font-size: 10px; width: 10px; height: 10px; }
/* Non-active icons stack above the slot; first non-active 2px up, second 22px up */
.wpps-device-icon:not(.is-active) { bottom: 100%; left: auto; right: 0; margin-bottom: 2px; opacity: 0; pointer-events: none; z-index: 2; }
.wpps-device-icon:not(.is-active) ~ .wpps-device-icon:not(.is-active) { margin-bottom: 22px; }
.wpps-device-icons-wrapper:hover .wpps-device-icon { opacity: 1; pointer-events: auto; }
.wpps-logo-width-inputs .wpps-logo-width-wrap { display: inline-flex; align-items: center; gap: 4px; }
.wpps-logo-preview-wrap { margin-top: 8px; }
.wpps-logo-preview-box { position: relative; display: inline-block; }
.wpps-logo-preview-box img { max-width: 200px; height: auto; border: 1px solid var(--wpps-admin-border-light); padding: 5px; display: block; }
.wpps-logo-preview-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: var(--wpps-admin-danger); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.wpps-logo-preview-remove:hover { background: var(--wpps-admin-danger-hover); color: #fff; }
.wpps-logo-tab-table.wpps-logo-hidden .wpps-logo-option-row { display: none !important; }

.wpps-bg-type-icons { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wpps-bg-type-btn { padding: 6px 10px; background: var(--wpps-admin-surface-muted); border: 1px solid var(--wpps-admin-border-light); border-radius: 4px; cursor: pointer; color: var(--wpps-admin-text); }
.wpps-bg-type-btn:hover { background: var(--wpps-admin-surface-hover); }
.wpps-bg-type-btn.is-active { background: var(--wpps-admin-primary); border-color: var(--wpps-admin-primary); color: #fff; }
.wpps-bg-type-btn .dashicons { font-size: 20px; width: 20px; height: 20px; }
.wpps-bg-type-reset { background: none; border: none; padding: 4px; margin-left: 8px; cursor: pointer; color: var(--wpps-admin-primary); vertical-align: middle; }
.wpps-bg-type-reset:hover { color: var(--wpps-admin-primary-hover); }
.wpps-bg-type-reset .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wpps-box-bg-color-row,
.wpps-box-bg-image-row,
.wpps-box-bg-gradient-row,
.wpps-box-bg-overlay-row,
.wpps-box-bg-overlay-opacity-row { display: none; }
.wpps-box-tab-table.wpps-bg-type-color .wpps-box-bg-color-row { display: table-row; }
.wpps-box-tab-table.wpps-bg-type-image .wpps-box-bg-image-row,
.wpps-box-tab-table.wpps-bg-type-image .wpps-box-bg-overlay-row,
.wpps-box-tab-table.wpps-bg-type-image .wpps-box-bg-overlay-opacity-row { display: table-row; }
.wpps-box-tab-table.wpps-bg-type-gradient .wpps-box-bg-gradient-row { display: table-row; }
.wpps-box-border-color-row,
.wpps-box-border-width-row,
.wpps-box-border-radius-row { display: none; }
.wpps-box-tab-table.wpps-border-type-solid .wpps-box-border-color-row,
.wpps-box-tab-table.wpps-border-type-dashed .wpps-box-border-color-row,
.wpps-box-tab-table.wpps-border-type-dotted .wpps-box-border-color-row { display: table-row; }
.wpps-box-tab-table.wpps-border-type-solid .wpps-box-border-width-row,
.wpps-box-tab-table.wpps-border-type-dashed .wpps-box-border-width-row,
.wpps-box-tab-table.wpps-border-type-dotted .wpps-box-border-width-row { display: table-row; }
.wpps-box-tab-table.wpps-border-type-solid .wpps-box-border-radius-row,
.wpps-box-tab-table.wpps-border-type-dashed .wpps-box-border-radius-row,
.wpps-box-tab-table.wpps-border-type-dotted .wpps-box-border-radius-row { display: table-row; }

/* Form tab: row visibility by border/background type */
.wpps-form-tab-table .wpps-form-border-color-row,
.wpps-form-tab-table .wpps-form-border-width-row,
.wpps-form-tab-table .wpps-form-border-radius-row,
.wpps-form-tab-table .wpps-form-bg-color-row,
.wpps-form-tab-table .wpps-form-bg-gradient-row,
.wpps-form-tab-table .wpps-form-bg-image-row,
.wpps-form-tab-table .wpps-form-bg-overlay-row,
.wpps-form-tab-table .wpps-form-bg-overlay-opacity-row { display: none; }
.wpps-form-tab-table.wpps-form-bg-type-color .wpps-form-bg-color-row { display: table-row; }
.wpps-form-tab-table.wpps-form-bg-type-image .wpps-form-bg-image-row,
.wpps-form-tab-table.wpps-form-bg-type-image .wpps-form-bg-overlay-row,
.wpps-form-tab-table.wpps-form-bg-type-image .wpps-form-bg-overlay-opacity-row { display: table-row; }
.wpps-form-tab-table.wpps-form-bg-type-gradient .wpps-form-bg-gradient-row { display: table-row; }
.wpps-form-tab-table.wpps-form-border-type-solid .wpps-form-border-color-row,
.wpps-form-tab-table.wpps-form-border-type-dashed .wpps-form-border-color-row,
.wpps-form-tab-table.wpps-form-border-type-dotted .wpps-form-border-color-row { display: table-row; }
.wpps-form-tab-table.wpps-form-border-type-solid .wpps-form-border-width-row,
.wpps-form-tab-table.wpps-form-border-type-dashed .wpps-form-border-width-row,
.wpps-form-tab-table.wpps-form-border-type-dotted .wpps-form-border-width-row { display: table-row; }
.wpps-form-tab-table.wpps-form-border-type-solid .wpps-form-border-radius-row,
.wpps-form-tab-table.wpps-form-border-type-dashed .wpps-form-border-radius-row,
.wpps-form-tab-table.wpps-form-border-type-dotted .wpps-form-border-radius-row { display: table-row; }

/* Fields tab: hide border/shadow rows when border type is none */
.wpps-fields-tab-table.wpps-border-type-none .wpps-field-normal-border-color-row,
.wpps-fields-tab-table.wpps-border-type-none .wpps-field-normal-border-width-row,
.wpps-fields-tab-table.wpps-border-type-none .wpps-field-normal-border-radius-row,
.wpps-fields-tab-table.wpps-border-type-none .wpps-field-normal-shadow-row { display: none; }
.wpps-fields-tab-table.wpps-border-type-solid .wpps-field-normal-border-color-row,
.wpps-fields-tab-table.wpps-border-type-solid .wpps-field-normal-border-width-row,
.wpps-fields-tab-table.wpps-border-type-solid .wpps-field-normal-border-radius-row,
.wpps-fields-tab-table.wpps-border-type-solid .wpps-field-normal-shadow-row,
.wpps-fields-tab-table.wpps-border-type-dashed .wpps-field-normal-border-color-row,
.wpps-fields-tab-table.wpps-border-type-dashed .wpps-field-normal-border-width-row,
.wpps-fields-tab-table.wpps-border-type-dashed .wpps-field-normal-border-radius-row,
.wpps-fields-tab-table.wpps-border-type-dashed .wpps-field-normal-shadow-row,
.wpps-fields-tab-table.wpps-border-type-dotted .wpps-field-normal-border-color-row,
.wpps-fields-tab-table.wpps-border-type-dotted .wpps-field-normal-border-width-row,
.wpps-fields-tab-table.wpps-border-type-dotted .wpps-field-normal-border-radius-row,
.wpps-fields-tab-table.wpps-border-type-dotted .wpps-field-normal-shadow-row { display: table-row; }

/* Single layout for Box/Form width, Padding, Border width, Border radius (value + unit) */
.wpps-input-unit-row { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.wpps-input-unit-row input[type="number"],
.wpps-input-unit-row input.small-text,
.wpps-input-unit-row select { margin: 0; }
.wpps-input-unit-row .wpps-unit-label { font-size: 13px; color: #50575e; margin: 0; line-height: 1.4; flex-shrink: 0; }
.wpps-inline-label { display: inline-flex; align-items: center; gap: 6px; }
.wpps-inline-label span:first-child { white-space: nowrap; }

/* Box Shadow: label + two square buttons + floating popover */
.wpps-box-shadow-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.wpps-box-shadow-reset { background: none; border: none; padding: 4px; margin-left: 0; margin-right: 2px; cursor: pointer; color: var(--wpps-admin-primary); vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
.wpps-box-shadow-reset:hover { color: var(--wpps-admin-primary-hover); }
.wpps-box-shadow-reset .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wpps-box-shadow-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--wpps-admin-surface-muted, #f0f0f1); border: 1px solid var(--wpps-admin-border-light, #dcdcde); border-radius: 4px; cursor: pointer; color: var(--wpps-admin-text, #1d2327); }
.wpps-box-shadow-toggle:hover { background: var(--wpps-admin-surface-hover, #f6f7f7); }
.wpps-box-shadow-icon { width: 20px; height: 20px; background: linear-gradient(135deg, #fff 0%, #fff 40%, #e0e0e0 40%, #e0e0e0 100%); border: 1px solid #8c8f94; border-radius: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); }

/* Typography: settings icon + popover (Fields tab) */
.wpps-typography-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.wpps-typography-reset { background: none; border: none; padding: 4px; margin-left: 0; margin-right: 2px; cursor: pointer; color: var(--wpps-admin-primary); vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
.wpps-typography-reset:hover { color: var(--wpps-admin-primary-hover); }
.wpps-typography-reset .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wpps-reset-hidden { display: none !important; }
.wpps-typography-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--wpps-admin-primary); border: 1px solid var(--wpps-admin-primary); border-radius: 4px; cursor: pointer; color: #fff; }
.wpps-typography-toggle:hover { background: var(--wpps-admin-primary-hover); border-color: var(--wpps-admin-primary-hover); color: #fff; }
.wpps-typography-icon { font-size: 18px; width: 18px; height: 18px; display: inline-block; color: #fff; }
.wpps-typography-popover { position: absolute; left: 0; top: 100%; margin-top: 8px; margin-bottom: 0; width: 340px; max-height: min(70vh, 420px); overflow-y: auto; padding: 12px; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100050; }
.wpps-typography-popover.is-positioned,
.wpps-box-shadow-popover.is-positioned { position: fixed !important; bottom: auto !important; margin: 0 !important; z-index: 100050; }
.wpps-typography-popover-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #ccd0d4; }
.wpps-typography-row { margin-bottom: 12px; }
.wpps-typography-row label,
.wpps-typography-row-label { display: block; font-size: 12px; margin-bottom: 4px; }
.wpps-typography-row select { width: 100%; margin: 0; }
.wpps-typography-responsive-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
.wpps-typography-responsive-row > label { flex: 0 0 auto; min-width: 88px; font-size: 12px; margin: 0; }
.wpps-typography-responsive-row .wpps-device-icons-wrapper { flex: 0 0 auto; }
.wpps-typography-responsive-row .wpps-typography-font-size-inputs,
.wpps-typography-responsive-row .wpps-typography-line-height-inputs,
.wpps-typography-responsive-row .wpps-typography-letter-spacing-inputs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.wpps-typography-responsive-row .wpps-input-unit-row { flex-shrink: 0; }
.wpps-typography-responsive-row .wpps-input-unit-row input.small-text { width: 56px; min-width: 56px; }

.wpps-box-shadow-popover { position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; width: 260px; padding: 12px; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100050; }
.wpps-box-shadow-popover-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.wpps-box-shadow-popover-title { font-weight: 600; font-size: 13px; }
.wpps-box-shadow-color-swatch-wrap { display: flex; align-items: center; gap: 6px; }
.wpps-box-shadow-swatch-trigger { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.wpps-box-shadow-preview-wrap { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background-color: #fff; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 6px 6px; background-position: 0 0, 0 3px, 3px -3px, -3px 0; }
.wpps-box-shadow-preview { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; }
.wpps-box-shadow-swatch-trigger .wpps-box-shadow-color-picker { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 1; cursor: pointer; }
.wpps-box-shadow-opacity-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.wpps-box-shadow-opacity-row label { flex: 0 0 90px; font-size: 12px; margin: 0; }
.wpps-box-shadow-opacity { flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 3px; }
.wpps-box-shadow-opacity::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-box-shadow-opacity::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-box-shadow-opacity-num { width: 48px !important; margin: 0 !important; }
.wpps-bg-overlay-opacity { flex: 0 1 100px; max-width: 100px; min-width: 60px; height: 6px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 3px; }
.wpps-bg-overlay-opacity::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-bg-overlay-opacity::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-bg-overlay-opacity-num { width: 56px !important; min-width: 56px !important; margin: 0 !important; }
.wpps-box-shadow-color-picker { width: 28px !important; height: 28px !important; padding: 0 !important; border: none !important; border-radius: 4px !important; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none !important; box-shadow: none !important; }
.wpps-box-shadow-color-picker:hover,
.wpps-box-shadow-color-picker:focus,
.wpps-box-shadow-color-picker:active { border: none !important; outline: none !important; box-shadow: none !important; }
.wpps-box-shadow-hex { width: 72px !important; margin: 0 !important; }
.wpps-box-shadow-slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wpps-box-shadow-slider-row label { flex: 0 0 90px; font-size: 12px; margin: 0; }
.wpps-box-shadow-range { flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 3px; }
.wpps-box-shadow-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-box-shadow-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--wpps-admin-primary); cursor: pointer; border: none; }
.wpps-box-shadow-num { width: 48px !important; margin: 0 !important; }
.wpps-box-shadow-unit { font-size: 12px; color: #646970; }
.wpps-box-shadow-inset-outset { display: flex; gap: 0; margin-top: 10px; border: 1px solid #ccd0d4; border-radius: 4px; overflow: hidden; }
.wpps-box-shadow-inset-btn,
.wpps-box-shadow-outset-btn { flex: 1; padding: 6px 10px; font-size: 12px; background: var(--wpps-admin-surface-muted, #f0f0f1); border: none; cursor: pointer; color: var(--wpps-admin-text, #1d2327); }
.wpps-box-shadow-inset-btn:hover:not(.is-active),
.wpps-box-shadow-outset-btn:hover:not(.is-active) { background: var(--wpps-admin-surface-hover, #f6f7f7); }
.wpps-box-shadow-inset-btn.is-active,
.wpps-box-shadow-outset-btn.is-active,
.wpps-box-shadow-inset-btn.is-active:hover,
.wpps-box-shadow-outset-btn.is-active:hover { background: var(--wpps-admin-primary); color: #fff; }
/* Color field: swatch + hex input (same line, no overlap) */
.wpps-color-field-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.wpps-color-picker-circle { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; flex-shrink: 0; border-radius: 50% !important; border: 2px solid #ddd !important; padding: 0 !important; cursor: pointer; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; overflow: hidden; }
.wpps-color-picker-circle::-webkit-color-swatch-wrapper { padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important; }
.wpps-color-picker-circle::-webkit-color-swatch { border: none !important; border-radius: 50% !important; width: 100% !important; height: 100% !important; }
.wpps-color-picker-circle::-moz-color-swatch { border: none !important; border-radius: 50% !important; width: 100% !important; height: 100% !important; }
.wpps-color-code-wrap { display: inline-block; position: relative; margin: 0; flex-shrink: 0; }
.wpps-color-code-wrap .wpps-color-reset { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970; }
.wpps-color-code-wrap .wpps-color-reset:hover { color: var(--wpps-admin-primary); }
.wpps-color-code-wrap .wpps-color-reset .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* Padding: four sides (Fields & Button tabs) */
.wpps-padding-sides-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.wpps-padding-side { display: inline-flex; flex-direction: column; gap: 4px; margin: 0; }
.wpps-padding-side .wpps-padding-side-label { font-size: 12px; color: #50575e; margin: 0; }
.wpps-padding-side input.small-text { width: 56px; margin: 0; }
.wpps-padding-side .wpps-unit-label { font-size: 12px; color: #50575e; margin: 0; }
.wpps-padding-link-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; background: var(--wpps-admin-surface-muted, #f0f0f1); border: 1px solid var(--wpps-admin-border, #c3c4c7); border-radius: 4px; cursor: pointer; color: var(--wpps-admin-primary); flex-shrink: 0; align-self: center; }
.wpps-padding-link-btn:hover { background: var(--wpps-admin-surface-hover, #f6f7f7); color: var(--wpps-admin-primary-hover); border-color: #8c8f94; }
.wpps-padding-link-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }
.wpps-padding-link-btn:not(.is-linked) { color: var(--wpps-admin-text-muted, #646970); }
.wpps-padding-link-btn:not(.is-linked):hover { color: var(--wpps-admin-primary); }
/* Gradient: type + angle inline, then color rows */
.wpps-gradient-type-angle-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.wpps-gradient-type-angle-row label { margin: 0; }
.wpps-gradient-editor .wpps-gradient-type { min-width: 120px; }
.wpps-gradient-angle-inline { display: inline-flex; align-items: center; gap: 6px; }
.wpps-gradient-angle-inline input { width: 64px; margin: 0; }
.wpps-gradient-color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wpps-gradient-color-row label { margin: 0; min-width: 52px; }
.wpps-gradient-color-wrap { display: inline-block; position: relative; }
.wpps-gradient-color-wrap .wpps-color-reset { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: #646970; }
.wpps-gradient-color-wrap .wpps-color-reset:hover { color: var(--wpps-admin-primary); }
.wpps-gradient-loc-label { margin-left: 12px; margin-right: 4px; }
.wpps-gradient-color-row input[type="number"].small-text { width: 56px; margin: 0; }
</style>

<script>
(function() {
	var moduleId = '<?php echo esc_js( $module_id ); ?>';

	function wppsGetLoginCustomizorRoot(fromEl) {
		if (fromEl && fromEl.closest) {
			var page = fromEl.closest('.wpps-login-customizor-page');
			if (page) return page;
			var modalSettings = fromEl.closest('.wp-powersuite-modal__settings');
			if (modalSettings) return modalSettings;
		}
		var pageRoot = document.querySelector('.wpps-login-customizor-page');
		if (pageRoot) return pageRoot;
		var modal = document.getElementById('wp-powersuite-modal');
		return modal ? modal.querySelector('.wp-powersuite-modal__settings') : null;
	}

	function initSplitEmptyEditorOnce(container) {
			var editorId = moduleId + '_split_empty_content';
			var ta = document.getElementById(editorId);
			if (!ta || ta.getAttribute('data-wpps-editor-inited')) return;
			if (container && container.contains && !container.contains(ta)) return;
			ta.classList.add('wp-powersuite-advanced-setting');
			ta.setAttribute('data-setting-key', 'split_empty_content');
			if (window.wp && window.wp.editor && typeof window.wp.editor.initialize === 'function') {
				try {
					window.wp.editor.initialize(editorId, {
						tinymce: {
							wpautop: true,
							height: 300,
							min_height: 300,
							plugins: 'charmap,colorpicker,hr,lists,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs',
							toolbar1: 'formatselect,bold,italic,underline,strikethrough,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv',
							toolbar2: 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
							wp_autoresize_on: true,
							content_style: 'body { color: #1d2327 !important; background: #fff !important; }'
						},
						quicktags: true,
						mediaButtons: true
					});
					ta.setAttribute('data-wpps-editor-inited', '1');
					var editorWrap = ta.closest ? ta.closest('.wp-editor-wrap') : null;
					if (editorWrap) {
						function wppsSyncSplitEmptyCodeHeight() {
							var codeArea = editorWrap.querySelector('textarea.wp-editor-area');
							if (!codeArea || !editorWrap.classList.contains('html-active')) {
								return;
							}
							codeArea.style.minHeight = '300px';
							codeArea.style.height = Math.max(300, codeArea.scrollHeight) + 'px';
						}
						var htmlTab = editorWrap.querySelector('.switch-html');
						var visualTab = editorWrap.querySelector('.switch-tmce');
						if (htmlTab) {
							htmlTab.addEventListener('click', function () {
								window.setTimeout(wppsSyncSplitEmptyCodeHeight, 0);
							});
						}
						if (visualTab) {
							visualTab.addEventListener('click', function () {
								window.setTimeout(wppsSyncSplitEmptyCodeHeight, 0);
							});
						}
						var codeArea = editorWrap.querySelector('textarea.wp-editor-area');
						if (codeArea) {
							codeArea.addEventListener('input', wppsSyncSplitEmptyCodeHeight);
						}
					}
				} catch (err) { /* ignore */ }
			}
		}
		window.__wppsInitSplitEmptyEditorOnce = initSplitEmptyEditorOnce;
		if (typeof window.wpPowerSuite === 'undefined') window.wpPowerSuite = {};
		if (typeof window.wpPowerSuite.syncModuleSettingsBeforeSave === 'undefined') window.wpPowerSuite.syncModuleSettingsBeforeSave = {};
		window.wpPowerSuite.syncModuleSettingsBeforeSave[moduleId] = function() {
			var settingsRoot = wppsGetLoginCustomizorRoot();
			if (settingsRoot) {
				var hoverHex = settingsRoot.querySelector('.wpps-color-code-input[data-setting-key="button_hover_text_color"]');
				var hoverPicker = document.getElementById(moduleId + '_button_hover_text_color');
				if (hoverHex && hoverPicker) {
					var hoverVal = (hoverHex.value || '').trim();
					if (hoverVal === '') {
						var normalHex = settingsRoot.querySelector('.wpps-color-code-input[data-setting-key="button_normal_text_color"]');
						var mirror = (normalHex && /^#/.test(normalHex.value)) ? normalHex.value : '#ffffff';
						hoverPicker.value = mirror.length > 7 ? mirror.substring(0, 7) : mirror;
					} else if (/^#/.test(hoverVal)) {
						hoverPicker.value = hoverVal.length > 7 ? hoverVal.substring(0, 7) : hoverVal;
					}
				}
			}
			var editorId = moduleId + '_split_empty_content';
			var ta = document.getElementById(editorId);
			if (ta) {
				// Only sync from TinyMCE when Visual tab is active; in Code tab the textarea is the source of truth
				var wrap = ta.closest ? ta.closest('.wp-editor-wrap') : null;
				var isCodeView = wrap && wrap.classList && wrap.classList.contains('html-active');
				if (!isCodeView && window.tinymce && typeof window.tinymce.get === 'function') {
					var ed = window.tinymce.get(editorId);
					if (ed) ta.value = ed.getContent();
				}
			}
			var settings = wppsGetLoginCustomizorRoot();
			if (settings && typeof wppsSyncShadowOpacityToHex === 'function') {
				settings.querySelectorAll('.wpps-box-shadow-popover').forEach(function(popover) {
					wppsSyncShadowOpacityToHex(popover);
				});
			}
		};
		window.syncSplitPanelBgRows = function syncSplitPanelBgRows(container) {
			if (!container) return;
			var panels = container.querySelectorAll ? container.querySelectorAll('.wpps-split-layout-panel') : [];
			panels.forEach(function(panel) {
				var formTable = panel.querySelector('.wpps-split-form-inner-table');
				var emptyTable = panel.querySelector('.wpps-split-empty-inner-table');
				function syncTable(table, hiddenInputKey) {
					if (!table) return;
					var hidden = panel.querySelector('input[data-setting-key="' + hiddenInputKey + '"]');
					var val = hidden ? (hidden.value || '').trim() : '';
					var rows = table.querySelectorAll ? table.querySelectorAll('tr[data-wpps-bg-type]') : [];
					rows.forEach(function(row) {
						var type = row.getAttribute('data-wpps-bg-type');
						row.style.setProperty('display', (val === type) ? 'table-row' : 'none', 'important');
					});
				}
				syncTable(formTable, 'split_form_bg_type');
				syncTable(emptyTable, 'split_empty_bg_type');
			});
		};
		function initLpcAccordions(container) {
			if (!container || !container.querySelector) return;
			var wrap = container.querySelector('.wpps-lpc-accordions');
			if (!wrap) return;
			var storageKey = 'wpps_lpc_accordion_state';
			var defaults = { layout: true, branding: false, 'custom-css': false };
			function getState() {
				try {
					var stored = localStorage.getItem(storageKey);
					return stored ? Object.assign({}, defaults, JSON.parse(stored)) : defaults;
				} catch (e) { return defaults; }
			}
			function saveState(state) {
				try { localStorage.setItem(storageKey, JSON.stringify(state)); } catch (e) {}
			}
			function applyState(state) {
				wrap.querySelectorAll('.wpps-lpc-accordion[data-accordion-id]').forEach(function(acc) {
					var id = acc.getAttribute('data-accordion-id');
					var isOpen = !!state[id];
					acc.classList.toggle('is-open', isOpen);
					var hdr = acc.querySelector('.wpps-lpc-accordion-header');
					if (hdr) hdr.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
				});
			}
			if (!wrap.getAttribute('data-wpps-lpc-accordions-init')) {
				wrap.setAttribute('data-wpps-lpc-accordions-init', '1');
				applyState(getState());
				wrap.querySelectorAll('.wpps-lpc-accordion-tooltip').forEach(function(tip) {
					tip.addEventListener('click', function(e) { e.stopPropagation(); });
				});
				wrap.querySelectorAll('.wpps-lpc-accordion-header').forEach(function(hdr) {
					hdr.addEventListener('click', function() {
						var acc = hdr.closest('.wpps-lpc-accordion');
						if (!acc) return;
						var id = acc.getAttribute('data-accordion-id');
						var isOpen = acc.classList.contains('is-open');
						if (isOpen && typeof wppsHideAllLpcFloatingPanels === 'function') {
							acc.querySelectorAll('.wpps-typography-popover.is-open, .wpps-box-shadow-popover.is-open').forEach(function(panel) {
								wppsHideLpcFloatingPanel(panel);
							});
						}
						acc.classList.toggle('is-open', !isOpen);
						hdr.setAttribute('aria-expanded', !isOpen ? 'true' : 'false');
						var state = getState();
						state[id] = !isOpen;
						saveState(state);
					});
				});
			}
		}
		function runInits(container) {
		if (!container) container = document;
		initLpcAccordions(container);
		var byId = container.getElementById ? function(id) { return container.getElementById(id); } : function(id) { return container.querySelector ? container.querySelector('#' + id) : null; };
		var hideLogoCheckbox = byId(moduleId + '_hide_logo');
		var logoTabTable = byId(moduleId + '_logo_tab_table');
		if (hideLogoCheckbox && logoTabTable) {
			logoTabTable.classList.toggle('wpps-logo-hidden', hideLogoCheckbox.checked);
			hideLogoCheckbox.addEventListener('change', function() { logoTabTable.classList.toggle('wpps-logo-hidden', this.checked); });
		}
		var logoSourceSelect = byId(moduleId + '_logo_source');
		if (logoSourceSelect && logoTabTable) {
			function syncLogoSourceRows() {
				var val = logoSourceSelect.value;
				logoTabTable.querySelectorAll('.wpps-logo-upload-row').forEach(function(row) { row.style.display = val === 'upload' ? '' : 'none'; });
				logoTabTable.querySelectorAll('.wpps-logo-site-icon-row').forEach(function(row) { row.style.display = val === 'site_icon' ? '' : 'none'; });
				logoTabTable.querySelectorAll('.wpps-logo-url-row').forEach(function(row) { row.style.display = val === 'url' ? '' : 'none'; });
			}
			logoSourceSelect.addEventListener('change', syncLogoSourceRows);
			syncLogoSourceRows();
		}
		var tabs = container.querySelectorAll ? container.querySelectorAll('.wpps-form-customization-tab') : [];
		var panels = container.querySelectorAll ? container.querySelectorAll('.wpps-form-customization-panel') : [];
		tabs.forEach(function(btn) {
			btn.addEventListener('click', function() {
				var tabId = this.getAttribute('data-tab');
				tabs.forEach(function(t) { t.classList.remove('is-active'); t.setAttribute('aria-selected', 'false'); });
				panels.forEach(function(p) { p.style.display = p.getAttribute('data-tab') === tabId ? '' : 'none'; });
				this.classList.add('is-active'); this.setAttribute('aria-selected', 'true');
				if (tabId === 'fields') { updateFieldBorderDependentRows(container); updateFieldTabTableClass(container); }
			});
		});
		var stateTabs = container.querySelectorAll ? container.querySelectorAll('.wpps-button-state-tabs .wpps-button-state-tab') : [];
		stateTabs.forEach(function(btn) {
			btn.addEventListener('click', function() {
				var state = this.getAttribute('data-button-state');
				var table = this.closest('.wpps-button-tab-table') || this.closest('.wpps-footer-tab-table');
				if (!table) return;
				var panelsCell = table.querySelector('.wpps-button-state-panels-cell');
				var statePanels = panelsCell ? panelsCell.querySelectorAll('.wpps-button-state-panel') : [];
				table.querySelectorAll('.wpps-button-state-tabs .wpps-button-state-tab').forEach(function(t) { t.classList.remove('is-active'); t.setAttribute('aria-selected', 'false'); });
				statePanels.forEach(function(p) { p.style.display = (p.getAttribute('data-button-state') === state) ? '' : 'none'; });
				this.classList.add('is-active'); this.setAttribute('aria-selected', 'true');
			});
		});
		var splitTabs = container.querySelectorAll ? container.querySelectorAll('.wpps-split-layout-tabs .wpps-split-layout-tab') : [];
		splitTabs.forEach(function(btn) {
			btn.addEventListener('click', function() {
				var col = this.getAttribute('data-split-column');
				var table = this.closest('.wpps-login-customizor-table');
				if (!table || !table.id || table.id.indexOf('_main_table') === -1) return;
				var panelsCell = table.querySelector('.wpps-split-panels-row .wpps-lpc-panel-card') || table.querySelector('.wpps-split-panels-row .wpps-button-state-panels-cell');
				var panels = panelsCell ? panelsCell.querySelectorAll('.wpps-split-layout-panel') : [];
				table.querySelectorAll('.wpps-split-layout-tabs .wpps-split-layout-tab').forEach(function(t) { t.classList.remove('is-active'); t.setAttribute('aria-selected', 'false'); });
				panels.forEach(function(p) { p.style.display = (p.getAttribute('data-split-column') === col) ? '' : 'none'; });
				this.classList.add('is-active'); this.setAttribute('aria-selected', 'true');
				if (col === 'empty') setTimeout(function() { initSplitEmptyEditorOnce(container); }, 250);
			});
		});
		container.addEventListener('change', function(e) {
			var cb = e.target.closest('.wpps-split-empty-add-content-toggle');
			if (!cb) return;
			var row = cb.closest('.wpps-split-empty-inner-table') ? cb.closest('.wpps-split-empty-inner-table').querySelector('.wpps-split-empty-editor-row') : null;
			if (row) row.style.display = cb.checked ? '' : 'none';
			if (cb.checked) setTimeout(function() { if (typeof window.__wppsInitSplitEmptyEditorOnce === 'function') window.__wppsInitSplitEmptyEditorOnce(container); }, 250);
		});
		syncSplitPanelBgRows(container);
		if (typeof window.wppsInitLpcLayoutPresets === 'function') {
			window.wppsInitLpcLayoutPresets(container);
		}
		initGradientEditors(container);
		// Box & Form overlay: sync saved overlay color to color input so swatch displays correctly in modal
		var overlayHexInputs = container.querySelectorAll ? container.querySelectorAll('.wpps-color-code-input[data-setting-key$="bg_image_overlay_color"]') : [];
		overlayHexInputs.forEach(function(overlayHex) {
			var colorId = overlayHex.getAttribute('data-color-input');
			var colorEl = colorId ? document.getElementById(colorId) : null;
			if (colorEl) {
				var hex = (overlayHex.value || '').trim();
				if (/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(hex)) {
					colorEl.value = hex.length > 7 ? hex.substring(0, 7) : hex;
				}
			}
		});
		var overlayNumInputs = container.querySelectorAll ? container.querySelectorAll('.wpps-bg-overlay-opacity-num') : [];
		overlayNumInputs.forEach(function(overlayNum) {
			var td = overlayNum.closest('td');
			var overlayRange = td ? td.querySelector('.wpps-bg-overlay-opacity') : null;
			if (overlayRange && !overlayRange.hasAttribute('data-wpps-overlay-bound')) {
				overlayRange.setAttribute('data-wpps-overlay-bound', '1');
				overlayRange.addEventListener('input', function() { overlayNum.value = overlayRange.value; });
				overlayRange.addEventListener('change', function() { overlayNum.value = overlayRange.value; });
				overlayNum.addEventListener('input', function() {
					var val = Math.max(0, Math.min(100, parseInt(overlayNum.value, 10) || 0));
					overlayRange.value = val;
					overlayNum.value = val;
				});
				overlayNum.addEventListener('change', function() {
					var val = Math.max(0, Math.min(100, parseInt(overlayNum.value, 10) || 0));
					overlayRange.value = val;
					overlayNum.value = val;
				});
			}
		});
	}

	function initGradientEditors(container) {
		var root = container || document;
		var editors = root.querySelectorAll ? root.querySelectorAll('.wpps-gradient-editor') : [];
		editors.forEach(function(editor) {
			var typeSelect = editor.querySelector('.wpps-gradient-type');
			var angleInline = editor.querySelector('.wpps-gradient-angle-inline');
			function toggleAngleInline() {
				if (angleInline) angleInline.style.display = typeSelect && typeSelect.value === 'linear' ? '' : 'none';
			}
			toggleAngleInline();
			typeSelect && typeSelect.addEventListener('change', toggleAngleInline);
		});
	}

	// Padding link: when linked, syncing one padding side updates the other three in the same device wrap
	function syncLinkedPaddingInputs(input) {
		var wrap = input.closest('.wpps-padding-wrap');
		if (!wrap) return;
		var linkBtn = wrap.querySelector('.wpps-padding-link-btn.is-linked');
		if (!linkBtn) return;
		var val = input.value;
		wrap.querySelectorAll('.wpps-padding-side-input').forEach(function(inp) {
			if (inp !== input) inp.value = val;
		});
	}
	if (!window._wppsPaddingLinkInputBound) {
		window._wppsPaddingLinkInputBound = true;
		document.addEventListener('input', function(e) {
			if (e.target && e.target.classList && e.target.classList.contains('wpps-padding-side-input')) {
				if (wppsGetLoginCustomizorRoot(e.target) && wppsGetLoginCustomizorRoot(e.target).contains(e.target)) syncLinkedPaddingInputs(e.target);
			}
		});
		document.addEventListener('change', function(e) {
			if (e.target && e.target.classList && e.target.classList.contains('wpps-padding-side-input')) {
				if (wppsGetLoginCustomizorRoot(e.target) && wppsGetLoginCustomizorRoot(e.target).contains(e.target)) syncLinkedPaddingInputs(e.target);
			}
		});
	}

	var LPC_FLOAT_PANEL_SEL = '.wpps-typography-popover, .wpps-box-shadow-popover';

	function wppsResetLpcFloatingPanel(popover) {
		if (!popover) return;
		popover.classList.remove('is-positioned', 'is-open');
		popover.style.position = '';
		popover.style.left = '';
		popover.style.top = '';
		popover.style.bottom = '';
		popover.style.right = '';
		popover.style.margin = '';
		popover.style.marginTop = '';
		popover.style.marginBottom = '';
		popover.style.visibility = '';
	}

	function wppsSyncLpcAccordionFloatState() {
		var root = wppsGetLoginCustomizorRoot();
		if (!root) return;
		root.querySelectorAll('.wpps-lpc-accordion--float-active').forEach(function(acc) {
			acc.classList.remove('wpps-lpc-accordion--float-active');
		});
		root.querySelectorAll(LPC_FLOAT_PANEL_SEL + '.is-open').forEach(function(popover) {
			var acc = popover.closest('.wpps-lpc-accordion');
			if (acc) acc.classList.add('wpps-lpc-accordion--float-active');
		});
	}

	function wppsPositionLpcFloatingPanel(popover, anchor, options) {
		if (!popover || !anchor) return;
		options = options || {};
		var placement = options.placement || 'below';
		var gap = typeof options.gap === 'number' ? options.gap : 8;
		var margin = 16;
		var wasHidden = popover.style.display === 'none' || popover.style.display === '';

		if (wasHidden) popover.style.display = 'block';

		popover.classList.add('is-positioned');
		popover.style.position = 'fixed';
		popover.style.visibility = 'hidden';
		popover.style.left = '-9999px';
		popover.style.top = '0';
		popover.style.bottom = 'auto';
		popover.style.right = 'auto';
		popover.style.margin = '0';

		var popRect = popover.getBoundingClientRect();
		var popW = popRect.width || popover.offsetWidth;
		var popH = popRect.height || popover.offsetHeight;
		var anchorRect = anchor.getBoundingClientRect();
		var left = anchorRect.left;
		var top = placement === 'above' ? anchorRect.top - popH - gap : anchorRect.bottom + gap;

		left = Math.max(margin, Math.min(left, window.innerWidth - popW - margin));
		if (top + popH > window.innerHeight - margin) {
			top = Math.max(margin, window.innerHeight - popH - margin);
		}
		if (top < margin) top = margin;

		popover.style.left = Math.round(left) + 'px';
		popover.style.top = Math.round(top) + 'px';
		popover.style.visibility = '';
	}

	function wppsShowLpcFloatingPanel(popover, anchor, options) {
		if (!popover || !anchor) return;
		wppsPositionLpcFloatingPanel(popover, anchor, options);
		popover.style.display = 'block';
		popover.classList.add('is-open');
		wppsSyncLpcAccordionFloatState();
	}

	function wppsHideLpcFloatingPanel(popover) {
		if (!popover) return;
		popover.style.display = 'none';
		wppsResetLpcFloatingPanel(popover);
		wppsSyncLpcAccordionFloatState();
	}

	function wppsHideAllLpcFloatingPanels() {
		document.querySelectorAll(LPC_FLOAT_PANEL_SEL).forEach(function(popover) {
			wppsHideLpcFloatingPanel(popover);
		});
	}

	if (!window._wppsLpcFloatPanelRepositionBound) {
		window._wppsLpcFloatPanelRepositionBound = true;
		var wppsRepositionLpcFloatingPanels = function() {
			document.querySelectorAll('.wpps-typography-popover.is-open, .wpps-box-shadow-popover.is-open').forEach(function(popover) {
				var wrap = popover.closest('.wpps-typography-wrap, .wpps-box-shadow-wrap');
				var anchor = wrap ? wrap.querySelector('.wpps-typography-toggle, .wpps-box-shadow-toggle') : null;
				if (!anchor) return;
				wppsPositionLpcFloatingPanel(popover, anchor, {
					placement: popover.classList.contains('wpps-box-shadow-popover') ? 'above' : 'below'
				});
			});
		};
		window.addEventListener('resize', wppsRepositionLpcFloatingPanels);
		window.addEventListener('scroll', wppsRepositionLpcFloatingPanels, true);
	}

	function wppsSyncShadowOpacityToHex(popover) {
		if (!popover) return;
		var hexInp = popover.querySelector('.wpps-box-shadow-hex');
		var picker = popover.querySelector('.wpps-box-shadow-color-picker');
		var range = popover.querySelector('.wpps-box-shadow-opacity');
		var num = popover.querySelector('.wpps-box-shadow-opacity-num');
		var preview = popover.querySelector('.wpps-box-shadow-preview');
		if (!hexInp || !range) return;
		var pct = Math.max(0, Math.min(100, parseInt(range.value, 10) || 100));
		if (num) num.value = pct;
		var raw = (hexInp.value || '').trim().replace(/^#/, '');
		if (/^[A-Fa-f0-9]{3}$/.test(raw)) {
			raw = raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2];
		}
		var rgb = '';
		if (/^[A-Fa-f0-9]{6}$/.test(raw)) {
			rgb = raw;
		} else if (/^[A-Fa-f0-9]{8}$/.test(raw)) {
			rgb = raw.slice(0, 6);
		} else if (picker && picker.value) {
			rgb = (picker.value || '').replace(/^#/, '');
		}
		if (!/^[A-Fa-f0-9]{6}$/.test(rgb)) return;
		if (picker) picker.value = '#' + rgb;
		if (pct >= 100) {
			hexInp.value = '#' + rgb;
		} else {
			var a = Math.round(pct / 100 * 255);
			var aa = (a < 16 ? '0' : '') + a.toString(16);
			hexInp.value = '#' + rgb + aa;
		}
		if (preview) preview.style.backgroundColor = hexInp.value;
	}

	function wppsSetShadowField(wrap, suffix, value) {
		if (!wrap) return;
		var num = wrap.querySelector('input.wpps-box-shadow-num[data-setting-key$="' + suffix + '"]');
		if (num) num.value = value;
		var range = wrap.querySelector('input.wpps-box-shadow-range[data-shadow-key$="' + suffix + '"]');
		if (range) range.value = value;
	}
	function wppsShadowIsUnset(wrap) {
		if (!wrap) return false;
		var suffixes = ['shadow_x', 'shadow_y', 'shadow_blur', 'shadow_spread'];
		for (var i = 0; i < suffixes.length; i++) {
			var num = wrap.querySelector('input.wpps-box-shadow-num[data-setting-key$="' + suffixes[i] + '"]');
			if (num && parseInt(num.value, 10) !== 0) return false;
		}
		return true;
	}
	function wppsGetDefaultShadowValues(wrap) {
		var inp = wrap ? wrap.querySelector('input.wpps-box-shadow-num[data-setting-key$="shadow_x"]') : null;
		var key = inp ? (inp.getAttribute('data-setting-key') || '') : '';
		if (key === 'box_shadow_x' || key === 'form_shadow_x') {
			return { x: 0, y: 8, blur: 24, spread: 0, color: '#0000001f', opacity: 12, picker: '#000000' };
		}
		return { x: 0, y: 2, blur: 8, spread: 0, color: '#00000026', opacity: 15, picker: '#000000' };
	}
	function wppsApplyDefaultBoxShadowIfEmpty(wrap) {
		if (!wrap || !wppsShadowIsUnset(wrap)) return;
		var d = wppsGetDefaultShadowValues(wrap);
		wppsSetShadowField(wrap, 'shadow_x', d.x);
		wppsSetShadowField(wrap, 'shadow_y', d.y);
		wppsSetShadowField(wrap, 'shadow_blur', d.blur);
		wppsSetShadowField(wrap, 'shadow_spread', d.spread);
		var colorPicker = wrap.querySelector('.wpps-box-shadow-color-picker');
		var hexInp = wrap.querySelector('.wpps-box-shadow-hex');
		if (colorPicker) colorPicker.value = d.picker;
		if (hexInp) hexInp.value = d.color;
		var opacityRange = wrap.querySelector('.wpps-box-shadow-opacity');
		var opacityNum = wrap.querySelector('.wpps-box-shadow-opacity-num');
		if (opacityRange) opacityRange.value = d.opacity;
		if (opacityNum) opacityNum.value = d.opacity;
		var popover = wrap.querySelector('.wpps-box-shadow-popover');
		var preview = popover ? popover.querySelector('.wpps-box-shadow-preview') : null;
		if (preview) preview.style.backgroundColor = d.color;
		var insetHidden = wrap.querySelector('input[data-setting-key$="shadow_inset"]');
		if (insetHidden) insetHidden.value = '0';
		wrap.querySelectorAll('.wpps-box-shadow-inset-btn, .wpps-box-shadow-outset-btn').forEach(function(b) {
			b.classList.toggle('is-active', b.getAttribute('data-value') === '0');
		});
		var resetBtn = wrap.querySelector('.wpps-box-shadow-reset');
		if (resetBtn) resetBtn.classList.remove('wpps-reset-hidden');
	}

	if (!window._wppsLoginCustomizorClickBound) {
		window._wppsLoginCustomizorClickBound = true;
		document.addEventListener('click', function(e) {
			var settingsRoot = wppsGetLoginCustomizorRoot(e.target);
			if (!settingsRoot || !settingsRoot.contains(e.target)) return;
			var btn = e.target.closest('.wpps-device-icon');
			if (btn) {
				var device = btn.getAttribute('data-device');
				if (device !== 'mobile' && device !== 'tablet' && device !== 'desktop') return;
				var row = btn.closest('tr') || btn.closest('.wpps-typography-responsive-row');
				if (row) {
					row.querySelectorAll('.wpps-device-icon').forEach(function(b) { b.classList.remove('is-active'); });
					btn.classList.add('is-active');
					var container = row.querySelector('.wpps-logo-width-inputs') || row.querySelector('.wpps-padding-inputs') || row.querySelector('.wpps-border-radius-inputs') || row.querySelector('.wpps-typography-font-size-inputs') || row.querySelector('.wpps-typography-line-height-inputs') || row.querySelector('.wpps-typography-letter-spacing-inputs');
					if (container) {
						var wrapClass, prefix;
						if (container.classList.contains('wpps-typography-font-size-inputs')) { wrapClass = 'wpps-font-size-wrap'; prefix = 'wpps-font-size'; }
						else if (container.classList.contains('wpps-typography-line-height-inputs')) { wrapClass = 'wpps-line-height-wrap'; prefix = 'wpps-line-height'; }
						else if (container.classList.contains('wpps-typography-letter-spacing-inputs')) { wrapClass = 'wpps-letter-spacing-wrap'; prefix = 'wpps-letter-spacing'; }
						else { wrapClass = container.classList.contains('wpps-logo-width-inputs') ? 'wpps-logo-width-wrap' : (container.classList.contains('wpps-padding-inputs') ? 'wpps-padding-wrap' : 'wpps-border-radius-wrap'); prefix = container.classList.contains('wpps-logo-width-inputs') ? 'wpps-logo-width' : (container.classList.contains('wpps-padding-inputs') ? 'wpps-padding' : 'wpps-border-radius'); }
						container.querySelectorAll('.' + wrapClass).forEach(function(w) { w.style.display = 'none'; });
						var show = container.querySelector('.' + prefix + '-' + device);
						if (show) show.style.display = 'inline-flex';
					}
				}
				return;
			}
			btn = e.target.closest('.wpps-padding-link-btn');
			if (btn) {
				btn.classList.toggle('is-linked');
				var isLinked = btn.classList.contains('is-linked');
				var icon = btn.querySelector('.dashicons');
				if (icon) {
					icon.className = 'dashicons ' + (isLinked ? 'dashicons-admin-links' : 'dashicons-editor-unlink');
				}
				btn.setAttribute('title', isLinked ? '<?php echo esc_js( __( 'Linked: all sides same value. Click to unlink.', 'wp-powersuite' ) ); ?>' : '<?php echo esc_js( __( 'Unlinked. Click to link all sides.', 'wp-powersuite' ) ); ?>');
				btn.setAttribute('aria-label', isLinked ? '<?php echo esc_js( __( 'Unlink padding', 'wp-powersuite' ) ); ?>' : '<?php echo esc_js( __( 'Link padding', 'wp-powersuite' ) ); ?>');
				return;
			}
			btn = e.target.closest('.wpps-alignment-btn');
			if (btn) {
				var val = btn.getAttribute('data-alignment');
				if (val !== 'left' && val !== 'center' && val !== 'right') return;
				var icons = btn.closest('.wpps-alignment-icons');
				if (icons) {
					var hidden = icons.querySelector('input[type="hidden"][data-setting-key]');
					if (hidden) hidden.value = val;
					icons.querySelectorAll('.wpps-alignment-btn').forEach(function(b) { b.classList.remove('is-active'); });
					btn.classList.add('is-active');
				}
				return;
			}
			btn = e.target.closest('.wpps-bg-type-btn');
			if (btn) {
				var val = btn.getAttribute('data-bg-type');
				if (val !== 'color' && val !== 'image' && val !== 'gradient' && val !== 'video') return;
				var group = btn.closest('.wpps-bg-type-icons');
				var boxTable = group ? group.closest('.wpps-box-tab-table') : null;
				var formTable = group ? group.closest('.wpps-form-tab-table') : null;
				var isClassicBg = group && group.classList.contains('wpps-classic-bg-type-icons');
				if (group) {
					if (boxTable) {
						var hidden = group.querySelector('input[data-setting-key="box_bg_type"]');
						if (hidden) hidden.value = val;
					}
					if (formTable) {
						var formHidden = group.querySelector('input[data-setting-key="form_bg_type"]');
						if (formHidden) formHidden.value = val;
					}
					if (isClassicBg) {
						var hidden = group.querySelector('input[data-setting-key="classic_bg_type"]');
						if (hidden) hidden.value = val;
						var settingsRoot = wppsGetLoginCustomizorRoot(group);
						var mainTable = settingsRoot ? settingsRoot.querySelector('.wpps-login-customizor-table[id="<?php echo esc_js( $module_id ); ?>_main_table"]') : null;
						if (mainTable) {
							mainTable.classList.remove('wpps-classic-bg-type-color', 'wpps-classic-bg-type-gradient', 'wpps-classic-bg-type-image', 'wpps-classic-bg-type-video');
							mainTable.classList.add('wpps-classic-bg-type-' + val);
						}
					}
					var buttonNormalIcons = group.classList && group.classList.contains('wpps-button-normal-bg-type-icons');
					if (buttonNormalIcons) {
						var hidden = group.querySelector('input[data-setting-key="button_normal_bg_type"]');
						if (hidden) hidden.value = val;
						updateButtonNormalTableClass(wppsGetLoginCustomizorRoot(group) || document);
					}
					var buttonHoverIcons = group.classList && group.classList.contains('wpps-button-hover-bg-type-icons');
					if (buttonHoverIcons) {
						var hidden = group.querySelector('input[data-setting-key="button_hover_bg_type"]');
						if (hidden) hidden.value = val;
						updateButtonHoverTableClass(wppsGetLoginCustomizorRoot(group) || document);
					}
					if (group.classList && group.classList.contains('wpps-split-form-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="split_form_bg_type"]');
						if (hidden) hidden.value = val;
						var panel = group.closest('.wpps-split-layout-panel');
						if (panel) {
							panel.classList.remove('wpps-split-form-bg-type-color', 'wpps-split-form-bg-type-gradient', 'wpps-split-form-bg-type-image', 'wpps-split-form-bg-type-video');
							panel.classList.add('wpps-split-form-bg-type-' + val);
						}
						syncSplitPanelBgRows(wppsGetLoginCustomizorRoot(group) || document);
					}
					if (group.classList && group.classList.contains('wpps-split-empty-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="split_empty_bg_type"]');
						if (hidden) hidden.value = val;
						var panel = group.closest('.wpps-split-layout-panel');
						if (panel) {
							panel.classList.remove('wpps-split-empty-bg-type-color', 'wpps-split-empty-bg-type-gradient', 'wpps-split-empty-bg-type-image', 'wpps-split-empty-bg-type-video');
							panel.classList.add('wpps-split-empty-bg-type-' + val);
						}
						syncSplitPanelBgRows(wppsGetLoginCustomizorRoot(group) || document);
					}
					var resetBtn = group.querySelector('.wpps-bg-type-reset');
					if (resetBtn) resetBtn.classList.remove('wpps-reset-hidden');
					group.querySelectorAll('.wpps-bg-type-btn').forEach(function(b) { b.classList.remove('is-active'); });
					btn.classList.add('is-active');
				}
				if (boxTable && val !== 'video') {
					boxTable.classList.remove('wpps-bg-type-color', 'wpps-bg-type-image', 'wpps-bg-type-gradient');
					boxTable.classList.add('wpps-bg-type-' + val);
				}
				if (formTable && val !== 'video') {
					formTable.classList.remove('wpps-form-bg-type-color', 'wpps-form-bg-type-image', 'wpps-form-bg-type-gradient');
					formTable.classList.add('wpps-form-bg-type-' + val);
				}
				return;
			}
			btn = e.target.closest('.wpps-bg-type-reset');
			if (btn) {
				var group = btn.closest('.wpps-bg-type-icons');
				var boxTable = group ? group.closest('.wpps-box-tab-table') : null;
				var formTable = group ? group.closest('.wpps-form-tab-table') : null;
				var isClassicBg = group && group.classList.contains('wpps-classic-bg-type-icons');
				if (group) {
					if (boxTable) {
						var hidden = group.querySelector('input[data-setting-key="box_bg_type"]');
						if (hidden) hidden.value = '';
					}
					if (formTable) {
						var formHidden = group.querySelector('input[data-setting-key="form_bg_type"]');
						if (formHidden) formHidden.value = '';
					}
					if (isClassicBg) {
						var hidden = group.querySelector('input[data-setting-key="classic_bg_type"]');
						if (hidden) hidden.value = '';
						var settingsRoot = wppsGetLoginCustomizorRoot(group);
						var mainTable = settingsRoot ? settingsRoot.querySelector('.wpps-login-customizor-table[id="<?php echo esc_js( $module_id ); ?>_main_table"]') : null;
						if (mainTable) mainTable.classList.remove('wpps-classic-bg-type-color', 'wpps-classic-bg-type-gradient', 'wpps-classic-bg-type-image', 'wpps-classic-bg-type-video');
						btn.classList.add('wpps-reset-hidden');
					}
					if (group.classList && group.classList.contains('wpps-split-form-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="split_form_bg_type"]');
						if (hidden) hidden.value = '';
						var panel = group.closest('.wpps-split-layout-panel');
						if (panel) panel.classList.remove('wpps-split-form-bg-type-color', 'wpps-split-form-bg-type-gradient', 'wpps-split-form-bg-type-image', 'wpps-split-form-bg-type-video');
						btn.classList.add('wpps-reset-hidden');
						syncSplitPanelBgRows(wppsGetLoginCustomizorRoot(group) || document);
					}
					if (group.classList && group.classList.contains('wpps-split-empty-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="split_empty_bg_type"]');
						if (hidden) hidden.value = '';
						var panel = group.closest('.wpps-split-layout-panel');
						if (panel) panel.classList.remove('wpps-split-empty-bg-type-color', 'wpps-split-empty-bg-type-gradient', 'wpps-split-empty-bg-type-image', 'wpps-split-empty-bg-type-video');
						btn.classList.add('wpps-reset-hidden');
						syncSplitPanelBgRows(wppsGetLoginCustomizorRoot(group) || document);
					}
					if (group.classList && group.classList.contains('wpps-button-normal-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="button_normal_bg_type"]');
						if (hidden) hidden.value = '';
						updateButtonNormalTableClass(wppsGetLoginCustomizorRoot(group) || document);
					}
					if (group.classList && group.classList.contains('wpps-button-hover-bg-type-icons')) {
						var hidden = group.querySelector('input[data-setting-key="button_hover_bg_type"]');
						if (hidden) hidden.value = '';
						updateButtonHoverTableClass(wppsGetLoginCustomizorRoot(group) || document);
					}
					group.querySelectorAll('.wpps-bg-type-btn').forEach(function(b) { b.classList.remove('is-active'); });
				}
				if (boxTable) boxTable.classList.remove('wpps-bg-type-color', 'wpps-bg-type-image', 'wpps-bg-type-gradient');
				if (formTable) formTable.classList.remove('wpps-form-bg-type-color', 'wpps-form-bg-type-image', 'wpps-form-bg-type-gradient');
			}
			btn = e.target.closest('.wpps-box-shadow-toggle');
			if (btn) {
				e.preventDefault();
				var wrap = btn.closest('.wpps-box-shadow-wrap');
				var popover = wrap ? wrap.querySelector('.wpps-box-shadow-popover') : null;
				if (popover) {
					var isOpen = popover.classList.contains('is-open');
					wppsHideAllLpcFloatingPanels();
					if (!isOpen) {
						wppsApplyDefaultBoxShadowIfEmpty(wrap);
						wppsShowLpcFloatingPanel(popover, btn, { placement: 'above', gap: 8 });
					}
				}
				return;
			}
			btn = e.target.closest('.wpps-box-shadow-reset');
			if (btn) {
				e.preventDefault();
				var wrap = btn.closest('.wpps-box-shadow-wrap');
				if (wrap) {
					wrap.querySelectorAll('.wpps-box-shadow-num').forEach(function(inp) { inp.value = 0; });
					wrap.querySelectorAll('.wpps-box-shadow-range').forEach(function(r) { r.value = 0; });
					var colorPicker = wrap.querySelector('.wpps-box-shadow-color-picker');
					var hexInp = wrap.querySelector('.wpps-box-shadow-hex');
					if (colorPicker) colorPicker.value = '#000000';
					if (hexInp) hexInp.value = '#000000';
					var opacityRange = wrap.querySelector('.wpps-box-shadow-opacity');
					var opacityNum = wrap.querySelector('.wpps-box-shadow-opacity-num');
					if (opacityRange) opacityRange.value = 100;
					if (opacityNum) opacityNum.value = 100;
					var popover = wrap.querySelector('.wpps-box-shadow-popover');
					var preview = popover ? popover.querySelector('.wpps-box-shadow-preview') : null;
					if (preview) preview.style.backgroundColor = '#000000';
					var insetHidden = wrap.querySelector('input[data-setting-key="box_shadow_inset"]') || wrap.querySelector('input[data-setting-key$="shadow_inset"]');
					if (insetHidden) insetHidden.value = '0';
					wrap.querySelectorAll('.wpps-box-shadow-inset-btn, .wpps-box-shadow-outset-btn').forEach(function(b) {
						b.classList.toggle('is-active', b.getAttribute('data-value') === '0');
					});
					btn.classList.add('wpps-reset-hidden');
				}
				return;
			}
			btn = e.target.closest('.wpps-typography-toggle');
			if (btn) {
				e.preventDefault();
				var wrap = btn.closest('.wpps-typography-wrap');
				var popover = wrap ? wrap.querySelector('.wpps-typography-popover') : null;
				if (popover) {
					var isOpen = popover.classList.contains('is-open');
					wppsHideAllLpcFloatingPanels();
					if (!isOpen) {
						wppsShowLpcFloatingPanel(popover, btn, { placement: 'below', gap: 8 });
					}
				}
				return;
			}
			btn = e.target.closest('.wpps-typography-reset');
			if (btn) {
				e.preventDefault();
				var wrap = btn.closest('.wpps-typography-wrap');
				if (wrap) {
					var popover = wrap.querySelector('.wpps-typography-popover');
					if (popover) {
						popover.querySelectorAll('select').forEach(function(s) {
							if (s.classList.contains('wpps-font-family-preset')) { s.value = ''; return; }
							s.value = s.querySelector('option[value=""]') ? '' : (s.options[0] ? s.options[0].value : '');
						});
						var fontKey = popover.classList.contains('wpps-button-typography-popover') ? 'button_font_family' : (popover.classList.contains('wpps-footer-typography-popover') ? 'footer_font_family' : (popover.classList.contains('wpps-label-typography-popover') ? 'label_font_family' : 'field_font_family'));
						popover.querySelectorAll('input[type="number"], input[type="text"]').forEach(function(inp) {
							if (inp.classList.contains('wpps-font-family-custom') || inp.getAttribute('data-setting-key') === fontKey) return;
							inp.value = '';
						});
						var hidden = popover.querySelector('input[data-setting-key="' + fontKey + '"]');
						if (hidden) hidden.value = '';
						var customRow = popover.querySelector('.wpps-font-family-custom-row');
						var customInp = popover.querySelector('.wpps-font-family-custom');
						if (customRow) customRow.style.display = 'none';
						if (customInp) customInp.value = '';
					}
					btn.classList.add('wpps-reset-hidden');
				}
				return;
			}
			btn = e.target.closest('.wpps-field-state-btn');
			if (btn) {
				e.preventDefault();
				var toggle = btn.closest('.wpps-field-state-toggle');
				if (toggle && !toggle.closest('.wpps-button-tab-wrap')) {
					toggle.querySelectorAll('.wpps-field-state-btn').forEach(function(b) { b.classList.remove('is-active'); });
					btn.classList.add('is-active');
					var state = btn.getAttribute('data-state');
					var table = toggle.closest('table');
					if (table) {
						if (table.classList.contains('wpps-footer-tab-table')) {
							table.querySelectorAll('.wpps-footer-state-normal').forEach(function(r) { r.style.display = state === 'normal' ? '' : 'none'; });
							table.querySelectorAll('.wpps-footer-state-hover').forEach(function(r) { r.style.display = state === 'hover' ? '' : 'none'; });
						} else {
							table.querySelectorAll('.wpps-field-state-normal').forEach(function(r) { r.style.display = state === 'normal' ? '' : 'none'; });
							table.querySelectorAll('.wpps-field-state-focus').forEach(function(r) { r.style.display = state === 'focus' ? '' : 'none'; });
							updateFieldBorderDependentRows(table);
						}
					}
				}
				return;
			}
			if (!e.target.closest('.wpps-box-shadow-popover') && !e.target.closest('.wpps-box-shadow-toggle')) {
				document.querySelectorAll('.wpps-box-shadow-popover.is-open').forEach(function(p) { wppsHideLpcFloatingPanel(p); });
			}
			if (!e.target.closest('.wpps-typography-popover') && !e.target.closest('.wpps-typography-toggle')) {
				document.querySelectorAll('.wpps-typography-popover.is-open').forEach(function(p) { wppsHideLpcFloatingPanel(p); });
			}
		});
	}
	if (!window._wppsLoginCustomizorChangeBound) {
		window._wppsLoginCustomizorChangeBound = true;
		document.addEventListener('change', function(ev) {
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="template_type"]')) {
				var table = ev.target.closest('.wpps-login-customizor-table');
				if (table) {
					var val = ev.target.value;
					if (val === 'split-layout') {
						table.classList.add('wpps-template-type-split-layout');
						table.classList.remove('wpps-template-type-classic-centered');
					} else {
						table.classList.remove('wpps-template-type-split-layout');
						table.classList.add('wpps-template-type-classic-centered');
					}
				}
			}
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="box_border_type"]')) {
				updateBoxTabTableClass(wppsGetLoginCustomizorRoot(ev.target) || document);
			}
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="form_border_type"]')) {
				updateFormTabTableClass(wppsGetLoginCustomizorRoot(ev.target) || document);
			}
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="field_normal_border_type"]')) {
				updateFieldTabTableClass(wppsGetLoginCustomizorRoot(ev.target) || document);
			}
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="button_normal_border_type"]')) {
				updateButtonNormalTableClass(wppsGetLoginCustomizorRoot(ev.target) || document);
			}
			if (ev.target && ev.target.matches && ev.target.matches('select[data-setting-key="button_hover_border_type"]')) {
				updateButtonHoverTableClass(wppsGetLoginCustomizorRoot(ev.target) || document);
			}
		});
	}
	function wppsHandleBoxShadowControlInput(t) {
		if (!t || !t.classList) return;
		if (t.closest && t.closest('.wpps-box-shadow-wrap')) {
			var wrap = t.closest('.wpps-box-shadow-wrap');
			var resetBtn = wrap ? wrap.querySelector('.wpps-box-shadow-reset') : null;
			if (resetBtn) resetBtn.classList.remove('wpps-reset-hidden');
		}
		if (t.classList.contains('wpps-box-shadow-range')) {
			var row = t.closest('.wpps-box-shadow-slider-row');
			var num = row ? row.querySelector('.wpps-box-shadow-num') : null;
			if (num) num.value = t.value;
		} else if (t.classList.contains('wpps-box-shadow-num')) {
			var row = t.closest('.wpps-box-shadow-slider-row');
			var range = row ? row.querySelector('.wpps-box-shadow-range') : null;
			if (range) range.value = t.value;
		} else if (t.classList.contains('wpps-box-shadow-color-picker')) {
			wppsSyncShadowOpacityToHex(t.closest('.wpps-box-shadow-popover'));
		} else if (t.classList.contains('wpps-box-shadow-hex')) {
			var hex = (t.value || '').trim();
			if (/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(hex)) {
				var popover = t.closest('.wpps-box-shadow-popover');
				var picker = popover ? popover.querySelector('.wpps-box-shadow-color-picker') : null;
				if (picker) picker.value = hex.length > 7 ? hex.substring(0, 7) : hex;
				var opacityRange = popover ? popover.querySelector('.wpps-box-shadow-opacity') : null;
				var opacityNum = popover ? popover.querySelector('.wpps-box-shadow-opacity-num') : null;
				if (hex.length === 9 && opacityRange && opacityNum) {
					var pct = Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 100);
					opacityRange.value = pct;
					opacityNum.value = pct;
				} else if (hex.length <= 7 && opacityRange && opacityNum) {
					opacityRange.value = 100;
					opacityNum.value = 100;
				}
				var preview = popover ? popover.querySelector('.wpps-box-shadow-preview') : null;
				if (preview) preview.style.backgroundColor = hex;
			}
		} else if (t.classList.contains('wpps-box-shadow-opacity') || t.classList.contains('wpps-box-shadow-opacity-num')) {
			var popover = t.closest('.wpps-box-shadow-popover');
			var range = popover ? popover.querySelector('.wpps-box-shadow-opacity') : null;
			var num = popover ? popover.querySelector('.wpps-box-shadow-opacity-num') : null;
			if (!range || !num) return;
			if (t.classList.contains('wpps-box-shadow-opacity-num')) {
				range.value = Math.max(0, Math.min(100, parseInt(t.value, 10) || 0));
			} else {
				num.value = t.value;
			}
			wppsSyncShadowOpacityToHex(popover);
		}
	}
	if (!window._wppsBoxShadowInputBound) {
		window._wppsBoxShadowInputBound = true;
		document.addEventListener('input', function(ev) {
			wppsHandleBoxShadowControlInput(ev.target);
		});
		document.addEventListener('change', function(ev) {
			wppsHandleBoxShadowControlInput(ev.target);
		});
		document.addEventListener('click', function(ev) {
			var btn = ev.target.closest('.wpps-box-shadow-inset-btn, .wpps-box-shadow-outset-btn');
			if (!btn) return;
			ev.preventDefault();
			var val = btn.getAttribute('data-value');
			var wrap = btn.closest('.wpps-box-shadow-wrap');
			var hidden = wrap ? (wrap.querySelector('input[data-setting-key="box_shadow_inset"]') || wrap.querySelector('input[data-setting-key$="shadow_inset"]')) : null;
			if (hidden) hidden.value = val;
			wrap.querySelectorAll('.wpps-box-shadow-inset-btn, .wpps-box-shadow-outset-btn').forEach(function(b) {
				b.classList.toggle('is-active', b.getAttribute('data-value') === val);
			});
			var resetBtn = wrap ? wrap.querySelector('.wpps-box-shadow-reset') : null;
			if (resetBtn) resetBtn.classList.remove('wpps-reset-hidden');
		});
	}
	if (!window._wppsFontFamilySyncBound) {
		window._wppsFontFamilySyncBound = true;
		function showTypographyResetIfInsidePopover(ev) {
			if (ev.target && ev.target.closest && ev.target.closest('.wpps-typography-popover')) {
				var wrap = ev.target.closest('.wpps-typography-wrap');
				var resetBtn = wrap ? wrap.querySelector('.wpps-typography-reset') : null;
				if (resetBtn) resetBtn.classList.remove('wpps-reset-hidden');
			}
		}
		document.addEventListener('change', showTypographyResetIfInsidePopover);
		document.addEventListener('input', showTypographyResetIfInsidePopover);
		document.addEventListener('change', function(ev) {
			if (ev.target && ev.target.classList && ev.target.classList.contains('wpps-font-family-preset')) {
				var popover = ev.target.closest('.wpps-typography-popover');
				if (!popover) return;
				var hidden = popover.querySelector('input[data-setting-key="field_font_family"]') || popover.querySelector('input[data-setting-key="button_font_family"]') || popover.querySelector('input[data-setting-key="footer_font_family"]') || popover.querySelector('input[data-setting-key="label_font_family"]');
				var customRow = popover.querySelector('.wpps-font-family-custom-row');
				var customInp = popover.querySelector('.wpps-font-family-custom');
				var val = ev.target.value;
				if (val === '__custom__') {
					if (customRow) customRow.style.display = '';
					if (hidden && customInp) hidden.value = (customInp.value || '').trim();
				} else {
					if (customRow) customRow.style.display = 'none';
					if (hidden) hidden.value = val;
				}
			}
		});
		document.addEventListener('input', function(ev) {
			if (ev.target && ev.target.classList && ev.target.classList.contains('wpps-font-family-custom')) {
				var popover = ev.target.closest('.wpps-typography-popover');
				if (!popover) return;
				var hidden = popover.querySelector('input[data-setting-key="field_font_family"]') || popover.querySelector('input[data-setting-key="button_font_family"]') || popover.querySelector('input[data-setting-key="footer_font_family"]') || popover.querySelector('input[data-setting-key="label_font_family"]');
				var preset = popover.querySelector('.wpps-font-family-preset');
				if (preset && preset.value === '__custom__' && hidden) {
					hidden.value = (ev.target.value || '').trim();
				}
			}
		});
	}

	function updateBoxTabTableClass(container) {
		var c = container || document;
		var table = null;
		if (c && c.nodeType === 1 && c.classList && c.classList.contains('wpps-box-tab-table')) {
			table = c;
		} else {
			var el = c.querySelector ? c.querySelector('input[data-setting-key="box_bg_type"]') : null;
			table = el ? el.closest('.wpps-box-tab-table') : null;
		}
		if (!table) return;
		var bgHidden = table.querySelector('input[data-setting-key="box_bg_type"]');
		var val = bgHidden ? bgHidden.value : '';
		table.classList.remove('wpps-bg-type-color', 'wpps-bg-type-image', 'wpps-bg-type-gradient');
		if (val) table.classList.add('wpps-bg-type-' + val);
		var borderSelect = table.querySelector('select[data-setting-key="box_border_type"]');
		var borderVal = borderSelect ? borderSelect.value : 'none';
		table.classList.remove('wpps-border-type-none', 'wpps-border-type-solid', 'wpps-border-type-dashed', 'wpps-border-type-dotted');
		table.classList.add('wpps-border-type-' + borderVal);
	}

	function updateFormTabTableClass(container) {
		var c = container || document;
		var tables = c.querySelectorAll ? c.querySelectorAll('.wpps-form-tab-table') : [];
		tables.forEach(function(table) {
			var hidden = table.querySelector('input[data-setting-key="form_bg_type"]');
			var val = hidden ? hidden.value : '';
			table.classList.remove('wpps-form-bg-type-color', 'wpps-form-bg-type-image', 'wpps-form-bg-type-gradient');
			if (val) table.classList.add('wpps-form-bg-type-' + val);
			var borderSelect = table.querySelector('select[data-setting-key="form_border_type"]');
			var borderVal = borderSelect ? borderSelect.value : 'none';
			table.classList.remove('wpps-form-border-type-none', 'wpps-form-border-type-solid', 'wpps-form-border-type-dashed', 'wpps-form-border-type-dotted');
			table.classList.add('wpps-form-border-type-' + borderVal);
		});
	}

	function updateFieldTabTableClass(container) {
		var c = container || document;
		var table = c.querySelector ? c.querySelector('.wpps-fields-tab-table') : null;
		if (!table) return;
		var borderSelect = table.querySelector('select[data-setting-key="field_normal_border_type"]');
		var borderVal = borderSelect ? borderSelect.value : 'none';
		table.classList.remove('wpps-border-type-none', 'wpps-border-type-solid', 'wpps-border-type-dashed', 'wpps-border-type-dotted');
		table.classList.add('wpps-border-type-' + borderVal);
	}

	function updateFieldBorderDependentRows(container) {
		updateFieldTabTableClass(container || document);
	}

	function updateButtonNormalTableClass(container) {
		var c = container || document;
		var table = c.querySelector ? c.querySelector('.wpps-button-normal-table') : null;
		if (!table) return;
		var bgHidden = table.querySelector('input[data-setting-key="button_normal_bg_type"]');
		var bgVal = bgHidden ? bgHidden.value : '';
		table.classList.remove('wpps-button-normal-bg-type-color', 'wpps-button-normal-bg-type-gradient');
		if (bgVal) table.classList.add('wpps-button-normal-bg-type-' + bgVal);
		var borderSelect = table.querySelector('select[data-setting-key="button_normal_border_type"]');
		var borderVal = borderSelect ? borderSelect.value : 'none';
		table.classList.remove('wpps-border-type-none', 'wpps-border-type-solid', 'wpps-border-type-dashed', 'wpps-border-type-dotted');
		table.classList.add('wpps-border-type-' + borderVal);
	}

	function updateButtonHoverTableClass(container) {
		var c = container || document;
		var table = c.querySelector ? c.querySelector('.wpps-button-hover-table') : null;
		if (!table) return;
		var bgHidden = table.querySelector('input[data-setting-key="button_hover_bg_type"]');
		var bgVal = bgHidden ? bgHidden.value : '';
		table.classList.remove('wpps-button-hover-bg-type-color', 'wpps-button-hover-bg-type-gradient');
		if (bgVal) table.classList.add('wpps-button-hover-bg-type-' + bgVal);
		var borderSelect = table.querySelector('select[data-setting-key="button_hover_border_type"]');
		var borderVal = borderSelect ? borderSelect.value : 'none';
		table.classList.remove('wpps-border-type-none', 'wpps-border-type-solid', 'wpps-border-type-dashed', 'wpps-border-type-dotted');
		table.classList.add('wpps-border-type-' + borderVal);
	}

	runInits(document);
	updateBoxTabTableClass(document);
	updateFormTabTableClass(document);
	updateFieldTabTableClass(document);
	updateButtonNormalTableClass(document);
	updateButtonHoverTableClass(document);
	function wppsInitShadowPopovers(container) {
		if (!container || !container.querySelectorAll) return;
		container.querySelectorAll('.wpps-box-shadow-popover').forEach(function(popover) {
			var hexInp = popover.querySelector('.wpps-box-shadow-hex');
			var hex = hexInp ? (hexInp.value || '').trim() : '';
			if (/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/.test(hex)) {
				var picker = popover.querySelector('.wpps-box-shadow-color-picker');
				if (picker) picker.value = hex.length > 7 ? hex.substring(0, 7) : hex;
				var opacityRange = popover.querySelector('.wpps-box-shadow-opacity');
				var opacityNum = popover.querySelector('.wpps-box-shadow-opacity-num');
				if (hex.length === 9 && opacityRange && opacityNum) {
					var pct = Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 100);
					opacityRange.value = pct;
					opacityNum.value = pct;
				}
				var preview = popover.querySelector('.wpps-box-shadow-preview');
				if (preview) preview.style.backgroundColor = hex;
			}
		});
	}

	function wppsLoginCustomizorBootstrap(settings) {
		if (!settings) return;
		runInits(settings);
		wppsInitShadowPopovers(settings);
		updateBoxTabTableClass(settings);
		updateFormTabTableClass(settings);
		updateFieldTabTableClass(settings);
		updateButtonNormalTableClass(settings);
		updateButtonHoverTableClass(settings);
		updateFieldBorderDependentRows(settings);
	}

	var pageRoot = document.querySelector('.wpps-login-customizor-page');
	if (pageRoot) {
		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', function() { wppsLoginCustomizorBootstrap(pageRoot); });
		} else {
			wppsLoginCustomizorBootstrap(pageRoot);
		}
	}

	jQuery(document).on('wp-powersuite-modal-loaded', function(ev) {
		var settings = document.querySelector('.wp-powersuite-modal__settings');
		if (settings && ev.detail && ev.detail.moduleId === moduleId) {
			wppsLoginCustomizorBootstrap(settings);
		}
	});
})();
</script>
<script>
(function() {
	var moduleId = '<?php echo esc_js( $module_id ); ?>';
	var fileFrame;
	var bgFrames = { box: null, form: null, classic: null };
	function getPreviewWrap() {
		var td = document.getElementById(moduleId + '_logo_url');
		return td ? td.closest('td').querySelector('.wpps-logo-preview-wrap') : null;
	}
	function initLogoUploader() {
		if (typeof jQuery === 'undefined' || typeof wp === 'undefined' || typeof wp.media === 'undefined') {
			setTimeout(initLogoUploader, 100);
			return;
		}
		var $ = jQuery;
		var btn = document.getElementById(moduleId + '_upload_logo');
		var input = document.getElementById(moduleId + '_logo_url');
		if (!btn || !input) return;
		$(btn).off('click').on('click', function(e) {
			e.preventDefault();
			if (fileFrame) { fileFrame.open(); return; }
			fileFrame = wp.media({
				title: '<?php echo esc_js( __( 'Select Logo', 'wp-powersuite' ) ); ?>',
				button: { text: '<?php echo esc_js( __( 'Use this image', 'wp-powersuite' ) ); ?>' },
				library: { type: 'image' },
				multiple: false
			});
			fileFrame.on('select', function() {
				var attachment = fileFrame.state().get('selection').first().toJSON();
				input.value = attachment.url;
				var wrap = getPreviewWrap();
				if (wrap) {
					var removeTitle = '<?php echo esc_js( __( 'Remove logo', 'wp-powersuite' ) ); ?>';
					wrap.innerHTML = '<div class="wpps-logo-preview-box"><button type="button" class="wpps-logo-preview-remove" title="' + removeTitle + '" aria-label="' + removeTitle + '"><span class="dashicons dashicons-no-alt"></span></button><img src="' + attachment.url + '" alt="" /></div>';
				}
			});
			fileFrame.open();
		});
	}
	function initRemoveLogo() {
		var input = document.getElementById(moduleId + '_logo_url');
		if (!input) return;
		var wrap = getPreviewWrap();
		if (!wrap) return;
		wrap.addEventListener('click', function(e) {
			if (e.target.closest('.wpps-logo-preview-remove')) {
				e.preventDefault();
				input.value = '';
				wrap.innerHTML = '';
			}
		});
	}
	// Color picker sync and reset (same as password protection module)
	function initBoxColorPickerSync() {
		if (typeof jQuery === 'undefined') return;
		var $ = jQuery;
		$(document).off('input change', '.wpps-color-code-input').on('input change', '.wpps-color-code-input', function() {
			var $textInput = $(this);
			var colorInputId = $textInput.data('color-input');
			var $colorInput = $('#' + colorInputId);
			var colorValue = $textInput.val().trim();
			if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/.test(colorValue)) {
				$colorInput.val(colorValue.length <= 7 ? colorValue : colorValue.slice(0, 7));
				$textInput.css('border-color', '');
			} else if (colorValue === '') {
				$colorInput.val('');
				$textInput.css('border-color', '');
			} else {
				$textInput.css('border-color', '#d63638');
			}
		});
		$(document).off('input change', '.wpps-color-picker-circle').on('input change', '.wpps-color-picker-circle', function() {
			var $colorInput = $(this);
			var colorInputId = $colorInput.attr('id');
			var $textInput = $('.wpps-color-code-input[data-color-input="' + colorInputId + '"]');
			if ($textInput.length) {
				$textInput.val($colorInput.val());
				$textInput.css('border-color', '');
			}
		});
		$(document).off('click', '.wpps-color-reset').on('click', '.wpps-color-reset', function(e) {
			e.preventDefault();
			var $resetButton = $(this);
			var defaultColor = $resetButton.data('default-color');
			var $textInput = $resetButton.prev('.wpps-color-code-input');
			var colorInputId = $textInput.data('color-input');
			var $colorInput = $('#' + colorInputId);
			$textInput.val(defaultColor);
			$colorInput.val(defaultColor);
			$textInput.css('border-color', '');
			$textInput.trigger('change');
		});
	}

	function initBgImageUpload(btnIdSuffix, inputIdSuffix, frameKey) {
		if (typeof jQuery === 'undefined' || typeof wp === 'undefined' || typeof wp.media === 'undefined') return;
		var $ = jQuery;
		var btn = document.getElementById(moduleId + btnIdSuffix);
		var input = document.getElementById(moduleId + '_' + inputIdSuffix);
		if (!btn || !input) return;
		$(btn).off('click').on('click', function(e) {
			e.preventDefault();
			if (bgFrames[frameKey]) { bgFrames[frameKey].open(); return; }
			bgFrames[frameKey] = wp.media({
				title: '<?php echo esc_js( __( 'Select Background Image', 'wp-powersuite' ) ); ?>',
				button: { text: '<?php echo esc_js( __( 'Use this image', 'wp-powersuite' ) ); ?>' },
				library: { type: 'image' },
				multiple: false
			});
			bgFrames[frameKey].on('select', function() {
				var attachment = bgFrames[frameKey].state().get('selection').first().toJSON();
				input.value = attachment && attachment.url ? attachment.url : '';
			});
			bgFrames[frameKey].open();
		});
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', function() {
			initLogoUploader();
			initRemoveLogo();
			initBoxColorPickerSync();
			initBgImageUpload('_upload_box_bg_image', 'box_bg_image', 'box');
			initBgImageUpload('_upload_form_bg_image', 'form_bg_image', 'form');
			initBgImageUpload('_upload_classic_bg_image', 'classic_bg_image', 'classic');
			initBgImageUpload('_upload_split_form_bg_image', 'split_form_bg_image', 'split_form');
			initBgImageUpload('_upload_split_empty_bg_image', 'split_empty_bg_image', 'split_empty');
		});
	} else {
		initLogoUploader();
		initRemoveLogo();
		initBoxColorPickerSync();
		initBgImageUpload('_upload_box_bg_image', 'box_bg_image', 'box');
		initBgImageUpload('_upload_form_bg_image', 'form_bg_image', 'form');
		initBgImageUpload('_upload_classic_bg_image', 'classic_bg_image', 'classic');
		initBgImageUpload('_upload_split_form_bg_image', 'split_form_bg_image', 'split_form');
		initBgImageUpload('_upload_split_empty_bg_image', 'split_empty_bg_image', 'split_empty');
	}
	jQuery(document).on('wp-powersuite-modal-loaded', function(ev) {
		fileFrame = null;
		bgFrames.box = null;
		bgFrames.form = null;
		bgFrames.classic = null;
		bgFrames.split_form = null;
		bgFrames.split_empty = null;
		setTimeout(function() {
			initLogoUploader();
			initRemoveLogo();
			if (ev.detail && ev.detail.moduleId === moduleId) {
				initBgImageUpload('_upload_box_bg_image', 'box_bg_image', 'box');
				initBgImageUpload('_upload_form_bg_image', 'form_bg_image', 'form');
				initBgImageUpload('_upload_classic_bg_image', 'classic_bg_image', 'classic');
				initBgImageUpload('_upload_split_form_bg_image', 'split_form_bg_image', 'split_form');
				initBgImageUpload('_upload_split_empty_bg_image', 'split_empty_bg_image', 'split_empty');
			}
		}, 100);
	});
})();
</script>
