<?php
/**
 * Basic Forms - Form Design Modal
 * Rebuilt with all customization options and default values.
 *
 * @package BasicForms
 * @since 1.0.0
 */

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

use BasicForms\DesignDefaults;

/**
 * Render color field (circle + hex input + reset).
 *
 * @param string $name    e.g. 'form_design[bg_color]'
 * @param string $value   Current color value
 * @param string $default Default color
 * @param string $input_id Unique ID for the color input
 */
function wpps_bf_render_color_row( $name, $value, $default, $input_id ) {
	$valid = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $value );
	$color_val = $valid ? ( strlen( $value ) > 7 ? substr( $value, 0, 7 ) : $value ) : $default;
	$text_val  = $valid ? $value : $default;
	$hex_id = $input_id . '-hex';
	?>
	<div class="wpps-color-field-row">
		<input type="color" id="<?php echo esc_attr( $input_id ); ?>" name="<?php echo esc_attr( $name ); ?>" value="<?php echo esc_attr( $color_val ); ?>" class="wpps-color-picker-circle wpps-bf-design-color" data-default-color="<?php echo esc_attr( $default ); ?>" aria-label="<?php esc_attr_e( 'Color picker', 'wppowersuite-lite' ); ?>" />
		<div class="wpps-color-code-wrap">
			<input type="text" id="<?php echo esc_attr( $hex_id ); ?>" class="wpps-color-code-input wpps-bf-design-color-hex" data-color-input="<?php echo esc_attr( $input_id ); ?>" data-default-color="<?php echo esc_attr( $default ); ?>" value="<?php echo esc_attr( $text_val ); ?>" style="width: 100px; padding-right: 25px;" placeholder="<?php echo esc_attr( $default ); ?>" maxlength="9" aria-label="<?php esc_attr_e( 'Hex color code', 'wppowersuite-lite' ); ?>" />
			<button type="button" class="wpps-color-reset button-link" data-default-color="<?php echo esc_attr( $default ); ?>" aria-label="<?php esc_attr_e( 'Reset to default', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
		</div>
	</div>
	<?php
}

$defaults = DesignDefaults::get();
$d = DesignDefaults::normalizeForAdminForm( wp_parse_args( $design ?? [], $defaults ) );
?>
<div id="wpps-bf-design-modal" class="wpps-bf-modal-overlay" aria-hidden="true" data-defaults="<?php echo esc_attr( wp_json_encode( $defaults ) ); ?>">
	<div class="wpps-bf-design-modal-container">
		<div class="wpps-bf-design-modal-header">
			<h2><?php esc_html_e( 'Form Design', 'wppowersuite-lite' ); ?></h2>
			<div class="wpps-bf-design-modal-actions">
				<button type="button" class="wpps-bf-btn wpps-bf-btn-link" id="wpps-bf-design-reset"><?php esc_html_e( 'Reset to defaults', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-modal-close" aria-label="<?php esc_attr_e( 'Close', 'wppowersuite-lite' ); ?>">&times;</button>
			</div>
		</div>
		<div class="wpps-bf-design-modal-body">
			<div class="wpps-bf-design-tabs">
				<button type="button" class="wpps-bf-design-tab is-active" data-tab="layout"><?php esc_html_e( 'Layout', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="container"><?php esc_html_e( 'Container', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="labels"><?php esc_html_e( 'Labels', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="inputs"><?php esc_html_e( 'Inputs', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="buttons"><?php esc_html_e( 'Buttons', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="messages"><?php esc_html_e( 'Messages', 'wppowersuite-lite' ); ?></button>
				<button type="button" class="wpps-bf-design-tab" data-tab="custom-css"><?php esc_html_e( 'Custom CSS', 'wppowersuite-lite' ); ?></button>
			</div>

			<div id="wpps-bf-design-form" class="wpps-bf-design-form">
				<!-- Layout -->
				<div class="wpps-bf-design-panel is-active" data-panel="layout">
					<h3><?php esc_html_e( 'Form Layout', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-layout"><?php esc_html_e( 'Width', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-layout" name="form_design[layout]" class="wpps-bf-input">
							<option value="default" <?php selected( $d['layout'], 'default' ); ?>><?php esc_html_e( 'Default (600px)', 'wppowersuite-lite' ); ?></option>
							<option value="full" <?php selected( $d['layout'], 'full' ); ?>><?php esc_html_e( 'Full Width', 'wppowersuite-lite' ); ?></option>
							<option value="compact" <?php selected( $d['layout'], 'compact' ); ?>><?php esc_html_e( 'Compact (400px)', 'wppowersuite-lite' ); ?></option>
							<option value="narrow" <?php selected( $d['layout'], 'narrow' ); ?>><?php esc_html_e( 'Narrow (320px)', 'wppowersuite-lite' ); ?></option>
							<option value="custom" <?php selected( $d['layout'], 'custom' ); ?>><?php esc_html_e( 'Custom', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row wpps-bf-design-max-width" style="<?php echo ( $d['layout'] ?? '' ) === 'custom' ? '' : 'display:none'; ?>">
						<label for="wpps-bf-design-max-width"><?php esc_html_e( 'Max Width (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-max-width" name="form_design[max_width]" class="wpps-bf-input" value="<?php echo esc_attr( $d['max_width'] ); ?>" inputmode="numeric" data-wpps-min="200" data-wpps-max="1200" data-wpps-step="10" placeholder="<?php echo esc_attr( $defaults['max_width'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-align"><?php esc_html_e( 'Alignment', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-align" name="form_design[align]" class="wpps-bf-input">
							<option value="left" <?php selected( $d['align'], 'left' ); ?>><?php esc_html_e( 'Left', 'wppowersuite-lite' ); ?></option>
							<option value="center" <?php selected( $d['align'], 'center' ); ?>><?php esc_html_e( 'Center', 'wppowersuite-lite' ); ?></option>
							<option value="right" <?php selected( $d['align'], 'right' ); ?>><?php esc_html_e( 'Right', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-field-spacing"><?php esc_html_e( 'Field Spacing', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-field-spacing" name="form_design[field_spacing]" class="wpps-bf-input">
							<option value="tight" <?php selected( $d['field_spacing'], 'tight' ); ?>><?php esc_html_e( 'Tight (12px)', 'wppowersuite-lite' ); ?></option>
							<option value="normal" <?php selected( $d['field_spacing'], 'normal' ); ?>><?php esc_html_e( 'Normal (20px)', 'wppowersuite-lite' ); ?></option>
							<option value="relaxed" <?php selected( $d['field_spacing'], 'relaxed' ); ?>><?php esc_html_e( 'Relaxed (28px)', 'wppowersuite-lite' ); ?></option>
							<option value="spacious" <?php selected( $d['field_spacing'], 'spacious' ); ?>><?php esc_html_e( 'Spacious (36px)', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-field-gap"><?php esc_html_e( 'Field Gap (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-field-gap" name="form_design[field_gap]" class="wpps-bf-input" value="<?php echo esc_attr( $d['field_gap'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="120" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['field_gap'] ); ?>">
						<p class="description"><?php esc_html_e( 'Horizontal gap between inline fields', 'wppowersuite-lite' ); ?></p>
					</div>
				</div>

				<!-- Container -->
				<div class="wpps-bf-design-panel" data-panel="container">
					<h3><?php esc_html_e( 'Form Container', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-bg-color"><?php esc_html_e( 'Background Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[bg_color]', $d['bg_color'], $defaults['bg_color'], 'wpps-bf-design-bg-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-padding"><?php esc_html_e( 'Padding (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-padding" name="form_design[padding]" class="wpps-bf-input" value="<?php echo esc_attr( $d['padding'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="80" data-wpps-step="4" placeholder="<?php echo esc_attr( $defaults['padding'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-border-width"><?php esc_html_e( 'Border Width (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-border-width" name="form_design[border_width]" class="wpps-bf-input" value="<?php echo esc_attr( $d['border_width'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="8" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['border_width'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-border-color"><?php esc_html_e( 'Border Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[border_color]', $d['border_color'], $defaults['border_color'], 'wpps-bf-design-border-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-border-radius"><?php esc_html_e( 'Border Radius (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-border-radius" name="form_design[border_radius]" class="wpps-bf-input" value="<?php echo esc_attr( $d['border_radius'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="24" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['border_radius'] ); ?>">
					</div>
				</div>

				<!-- Labels -->
				<div class="wpps-bf-design-panel" data-panel="labels">
					<h3><?php esc_html_e( 'Label Styling', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-label-position"><?php esc_html_e( 'Position', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-label-position" name="form_design[label_position]" class="wpps-bf-input">
							<option value="above" <?php selected( $d['label_position'], 'above' ); ?>><?php esc_html_e( 'Above field', 'wppowersuite-lite' ); ?></option>
							<option value="left" <?php selected( $d['label_position'], 'left' ); ?>><?php esc_html_e( 'Left of field', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-label-color"><?php esc_html_e( 'Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[label_color]', $d['label_color'], $defaults['label_color'], 'wpps-bf-design-label-color' ); ?>
					</div>
					<div class="wpps-bf-design-row wpps-style-color-typo-row" role="group" aria-labelledby="wpps-bf-design-label-typo-heading">
						<span id="wpps-bf-design-label-typo-heading" class="wpps-bf-design-row-label"><?php esc_html_e( 'Typography', 'wppowersuite-lite' ); ?></span>
						<div class="wpps-typography-wrap">
							<button type="button" class="wpps-typography-reset wpps-reset-hidden" title="<?php esc_attr_e( 'Reset typography', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
							<button type="button" class="wpps-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
							<?php
							$label_typo = [
								'font_family' => $d['label_font_family'],
								'font_weight' => $d['label_font_weight'],
								'font_size_desktop' => $d['label_font_size_desktop'],
								'font_size_tablet' => $d['label_font_size_tablet'],
								'font_size_mobile' => $d['label_font_size_mobile'],
								'text_transform' => $d['label_text_transform'],
								'font_style' => $d['label_font_style'],
								'line_height_desktop' => $d['label_line_height_desktop'],
								'line_height_tablet' => $d['label_line_height_tablet'],
								'line_height_mobile' => $d['label_line_height_mobile'],
								'letter_spacing_desktop' => $d['label_letter_spacing_desktop'],
								'letter_spacing_tablet' => $d['label_letter_spacing_tablet'],
								'letter_spacing_mobile' => $d['label_letter_spacing_mobile'],
							];
							\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( 'wpps-bf', 'label', $label_typo, 'wpps-bf-typography-popover', 'form_design' );
							?>
						</div>
						<p class="description"><?php esc_html_e( 'Font family, weight, size (responsive), line height, letter spacing', 'wppowersuite-lite' ); ?></p>
					</div>
				</div>

				<!-- Inputs -->
				<div class="wpps-bf-design-panel" data-panel="inputs">
					<h3><?php esc_html_e( 'Input Styling', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-input-border-width"><?php esc_html_e( 'Border Width (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-input-border-width" name="form_design[input_border_width]" class="wpps-bf-input" value="<?php echo esc_attr( $d['input_border_width'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="4" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['input_border_width'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-input-border-color"><?php esc_html_e( 'Border Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[input_border_color]', $d['input_border_color'], $defaults['input_border_color'], 'wpps-bf-design-input-border-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-input-bg"><?php esc_html_e( 'Background', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[input_bg]', $d['input_bg'], $defaults['input_bg'], 'wpps-bf-design-input-bg' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-input-border-radius"><?php esc_html_e( 'Border Radius (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-input-border-radius" name="form_design[input_border_radius]" class="wpps-bf-input" value="<?php echo esc_attr( $d['input_border_radius'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="24" data-wpps-step="1" placeholder="<?php esc_attr_e( 'Same as container', 'wppowersuite-lite' ); ?>">
						<p class="description"><?php esc_html_e( 'Leave empty to use container border radius', 'wppowersuite-lite' ); ?></p>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-input-padding"><?php esc_html_e( 'Padding (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-input-padding" name="form_design[input_padding]" class="wpps-bf-input" value="<?php echo esc_attr( $d['input_padding'] ); ?>" inputmode="numeric" data-wpps-min="4" data-wpps-max="24" data-wpps-step="2" placeholder="<?php echo esc_attr( $defaults['input_padding'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-placeholder-color"><?php esc_html_e( 'Placeholder Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[placeholder_color]', $d['placeholder_color'], $defaults['placeholder_color'], 'wpps-bf-design-placeholder-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-field-text-color"><?php esc_html_e( 'Field Text Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[field_text_color]', $d['field_text_color'], $defaults['field_text_color'], 'wpps-bf-design-field-text-color' ); ?>
						<p class="description"><?php esc_html_e( 'Color of text when typing in the field', 'wppowersuite-lite' ); ?></p>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-help-text-color"><?php esc_html_e( 'Help Text Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[help_text_color]', $d['help_text_color'], $defaults['help_text_color'], 'wpps-bf-design-help-text-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-help-text-font-size"><?php esc_html_e( 'Help Text Size (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-help-text-font-size" name="form_design[help_text_font_size]" class="wpps-bf-input" value="<?php echo esc_attr( $d['help_text_font_size'] ); ?>" inputmode="numeric" data-wpps-min="10" data-wpps-max="18" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['help_text_font_size'] ); ?>">
					</div>
					<div class="wpps-bf-design-row wpps-style-color-typo-row" role="group" aria-labelledby="wpps-bf-design-placeholder-typo-heading">
						<span id="wpps-bf-design-placeholder-typo-heading" class="wpps-bf-design-row-label"><?php esc_html_e( 'Placeholder Typography', 'wppowersuite-lite' ); ?></span>
						<div class="wpps-typography-wrap">
							<button type="button" class="wpps-typography-reset wpps-reset-hidden" title="<?php esc_attr_e( 'Reset typography', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
							<button type="button" class="wpps-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
							<?php
							$placeholder_typo = [
								'font_family' => $d['placeholder_font_family'],
								'font_weight' => $d['placeholder_font_weight'],
								'font_size_desktop' => $d['placeholder_font_size_desktop'] ?: $d['placeholder_font_size'],
								'font_size_tablet' => $d['placeholder_font_size_tablet'],
								'font_size_mobile' => $d['placeholder_font_size_mobile'],
								'text_transform' => $d['placeholder_text_transform'],
								'font_style' => $d['placeholder_font_style'],
								'line_height_desktop' => $d['placeholder_line_height_desktop'],
								'line_height_tablet' => $d['placeholder_line_height_tablet'],
								'line_height_mobile' => $d['placeholder_line_height_mobile'],
								'letter_spacing_desktop' => $d['placeholder_letter_spacing_desktop'],
								'letter_spacing_tablet' => $d['placeholder_letter_spacing_tablet'],
								'letter_spacing_mobile' => $d['placeholder_letter_spacing_mobile'],
							];
							\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( 'wpps-bf', 'placeholder', $placeholder_typo, 'wpps-bf-typography-popover', 'form_design' );
							?>
						</div>
					</div>
					<div class="wpps-bf-design-row wpps-style-color-typo-row" role="group" aria-labelledby="wpps-bf-design-field-typo-heading">
						<span id="wpps-bf-design-field-typo-heading" class="wpps-bf-design-row-label"><?php esc_html_e( 'Field Typography', 'wppowersuite-lite' ); ?></span>
						<div class="wpps-typography-wrap">
							<button type="button" class="wpps-typography-reset wpps-reset-hidden" title="<?php esc_attr_e( 'Reset typography', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
							<button type="button" class="wpps-typography-toggle" title="<?php esc_attr_e( 'Typography settings', 'wppowersuite-lite' ); ?>"><span class="dashicons dashicons-edit-large wpps-typography-icon"></span></button>
							<?php
							$field_typo = [
								'font_family' => $d['field_font_family'],
								'font_weight' => $d['field_font_weight'],
								'font_size_desktop' => $d['field_font_size_desktop'],
								'font_size_tablet' => $d['field_font_size_tablet'],
								'font_size_mobile' => $d['field_font_size_mobile'],
								'text_transform' => $d['field_text_transform'],
								'font_style' => $d['field_font_style'],
								'line_height_desktop' => $d['field_line_height_desktop'],
								'line_height_tablet' => $d['field_line_height_tablet'],
								'line_height_mobile' => $d['field_line_height_mobile'],
								'letter_spacing_desktop' => $d['field_letter_spacing_desktop'],
								'letter_spacing_tablet' => $d['field_letter_spacing_tablet'],
								'letter_spacing_mobile' => $d['field_letter_spacing_mobile'],
							];
							\WP_PowerSuite\Admin\TypographyHelper::renderTypographyPopover( 'wpps-bf', 'field', $field_typo, 'wpps-bf-typography-popover', 'form_design' );
							?>
						</div>
						<p class="description"><?php esc_html_e( 'Font for input text', 'wppowersuite-lite' ); ?></p>
					</div>
				</div>

				<!-- Buttons -->
				<div class="wpps-bf-design-panel" data-panel="buttons">
					<h3><?php esc_html_e( 'Submit Button', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-primary-color"><?php esc_html_e( 'Primary Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[primary_color]', $d['primary_color'], $defaults['primary_color'], 'wpps-bf-design-primary-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-hover-color"><?php esc_html_e( 'Hover Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[button_hover_color]', $d['button_hover_color'], $defaults['button_hover_color'], 'wpps-bf-design-button-hover-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-border-color"><?php esc_html_e( 'Border Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[button_border_color]', $d['button_border_color'], $defaults['button_border_color'], 'wpps-bf-design-button-border-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-border-width"><?php esc_html_e( 'Border Width (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-button-border-width" name="form_design[button_border_width]" class="wpps-bf-input" value="<?php echo esc_attr( $d['button_border_width'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="4" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['button_border_width'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-shadow"><?php esc_html_e( 'Shadow', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-button-shadow" name="form_design[button_shadow]" class="wpps-bf-input">
							<option value="none" <?php selected( ( $d['button_shadow'] ?? '' ), 'none' ); ?>><?php esc_html_e( 'None', 'wppowersuite-lite' ); ?></option>
							<option value="sm" <?php selected( $d['button_shadow'] ?? '', 'sm' ); ?>><?php esc_html_e( 'Small', 'wppowersuite-lite' ); ?></option>
							<option value="md" <?php selected( $d['button_shadow'] ?? '', 'md' ); ?>><?php esc_html_e( 'Medium', 'wppowersuite-lite' ); ?></option>
							<option value="lg" <?php selected( $d['button_shadow'] ?? '', 'lg' ); ?>><?php esc_html_e( 'Large', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-style"><?php esc_html_e( 'Style', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-button-style" name="form_design[button_style]" class="wpps-bf-input">
							<option value="solid" <?php selected( $d['button_style'], 'solid' ); ?>><?php esc_html_e( 'Solid', 'wppowersuite-lite' ); ?></option>
							<option value="outline" <?php selected( $d['button_style'], 'outline' ); ?>><?php esc_html_e( 'Outline', 'wppowersuite-lite' ); ?></option>
							<option value="flat" <?php selected( $d['button_style'], 'flat' ); ?>><?php esc_html_e( 'Flat', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-size"><?php esc_html_e( 'Size', 'wppowersuite-lite' ); ?></label>
						<select id="wpps-bf-design-button-size" name="form_design[button_size]" class="wpps-bf-input">
							<option value="small" <?php selected( $d['button_size'], 'small' ); ?>><?php esc_html_e( 'Small', 'wppowersuite-lite' ); ?></option>
							<option value="medium" <?php selected( $d['button_size'], 'medium' ); ?>><?php esc_html_e( 'Medium', 'wppowersuite-lite' ); ?></option>
							<option value="large" <?php selected( $d['button_size'], 'large' ); ?>><?php esc_html_e( 'Large', 'wppowersuite-lite' ); ?></option>
						</select>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-button-border-radius"><?php esc_html_e( 'Border Radius (px)', 'wppowersuite-lite' ); ?></label>
						<input type="number" id="wpps-bf-design-button-border-radius" name="form_design[button_border_radius]" class="wpps-bf-input" value="<?php echo esc_attr( $d['button_border_radius'] ); ?>" inputmode="numeric" data-wpps-min="0" data-wpps-max="24" data-wpps-step="1" placeholder="<?php echo esc_attr( $defaults['button_border_radius'] ); ?>">
					</div>
					<div class="wpps-bf-design-row">
						<label class="wpps-bf-checkbox-label">
							<input type="checkbox" name="form_design[button_full_width]" value="1" <?php checked( ! empty( $d['button_full_width'] ) ); ?>>
							<?php esc_html_e( 'Full width button', 'wppowersuite-lite' ); ?>
						</label>
					</div>
				</div>

				<!-- Messages -->
				<div class="wpps-bf-design-panel" data-panel="messages">
					<h3><?php esc_html_e( 'Success & Error Messages', 'wppowersuite-lite' ); ?></h3>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-success-bg"><?php esc_html_e( 'Success Background', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[success_msg_bg]', $d['success_msg_bg'], $defaults['success_msg_bg'], 'wpps-bf-design-success-bg' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-success-color"><?php esc_html_e( 'Success Text Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[success_msg_color]', $d['success_msg_color'], $defaults['success_msg_color'], 'wpps-bf-design-success-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-success-border"><?php esc_html_e( 'Success Border Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[success_msg_border]', $d['success_msg_border'], $defaults['success_msg_border'], 'wpps-bf-design-success-border' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-error-bg"><?php esc_html_e( 'Error Background', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[error_msg_bg]', $d['error_msg_bg'], $defaults['error_msg_bg'], 'wpps-bf-design-error-bg' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-error-color"><?php esc_html_e( 'Error Text Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[error_msg_color]', $d['error_msg_color'], $defaults['error_msg_color'], 'wpps-bf-design-error-color' ); ?>
					</div>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-error-border"><?php esc_html_e( 'Error Border Color', 'wppowersuite-lite' ); ?></label>
						<?php wpps_bf_render_color_row( 'form_design[error_msg_border]', $d['error_msg_border'], $defaults['error_msg_border'], 'wpps-bf-design-error-border' ); ?>
					</div>
				</div>

				<!-- Custom CSS -->
				<div class="wpps-bf-design-panel" data-panel="custom-css">
					<h3><?php esc_html_e( 'Custom CSS', 'wppowersuite-lite' ); ?></h3>
					<p class="description" style="margin-top:0;margin-bottom:16px;">
						<?php
						$scope_form_id = isset( $form_id ) ? (int) $form_id : 0;
						if ( $scope_form_id > 0 ) {
							echo wp_kses(
								sprintf(
									/* translators: %s: CSS scope selector */
									__( 'Add CSS scoped to this form. Prefix selectors with %s so styles only affect this form.', 'wppowersuite-lite' ),
									'<code>.wpps-bf-wrapper.wpps-bf-' . esc_html( (string) $scope_form_id ) . '</code>'
								),
								[ 'code' => [] ]
							);
						} else {
							esc_html_e( 'Add CSS scoped to this form. Save the form first to see its scope selector. Prefix selectors with .wpps-bf-wrapper.wpps-bf-{form_id}.', 'wppowersuite-lite' );
						}
						?>
					</p>
					<div class="wpps-bf-design-row">
						<label for="wpps-bf-design-custom-css"><?php esc_html_e( 'CSS', 'wppowersuite-lite' ); ?></label>
						<textarea
							id="wpps-bf-design-custom-css"
							name="form_design[custom_css]"
							class="wpps-bf-input wpps-bf-design-custom-css"
							rows="12"
							spellcheck="false"
							placeholder="<?php echo esc_attr( '.wpps-bf-wrapper.wpps-bf-123 .wpps-bf-form { /* your styles */ }' ); ?>"
						><?php echo esc_textarea( $d['custom_css'] ?? '' ); ?></textarea>
					</div>
				</div>
			</div>
		</div>
		<div class="wpps-bf-design-modal-footer">
			<button type="button" class="wpps-bf-btn wpps-bf-btn-secondary wpps-bf-btn-sm wpps-bf-design-modal-close"><?php esc_html_e( 'Cancel', 'wppowersuite-lite' ); ?></button>
			<button type="button" class="wpps-bf-btn wpps-bf-btn-primary" id="wpps-bf-design-apply">
				<span class="wpps-bf-apply-text"><?php esc_html_e( 'Apply', 'wppowersuite-lite' ); ?></span>
				<span class="wpps-bf-apply-loader" style="display:none;"><span class="dashicons dashicons-update spin"></span> <?php esc_html_e( 'Saving...', 'wppowersuite-lite' ); ?></span>
			</button>
		</div>
	</div>
</div>
