<?php
/**
 * Login Page Customizor – admin form helpers.
 * @package LoginPageCustomizor
 */

namespace LoginPageCustomizor;

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

final class AdminHelpers {

	/** @param array<string, mixed> $settings @param mixed $default @return mixed */
	public static function get( array $settings, $key, $default = '', $trim_string = true ) {
		if ( ! isset( $settings[ $key ] ) ) {
			return $default;
		}
		$v = $settings[ $key ];
		if ( $trim_string && is_string( $v ) ) {
			return trim( $v );
		}
		return $v;
	}

	/**
	 * Parse gradient JSON from settings into flat keys for admin form.
	 *
	 * @param array<string, mixed> $settings
	 * @param string               $gradient_key   e.g. 'box_bg_gradient', 'form_bg_gradient'
	 * @param array{array{color: string, pos: int}} $default_stops
	 * @return array{type: string, angle: int, color1: string, pos1: int, color2: string, pos2: int}
	 */
	public static function parseGradient( array $settings, $gradient_key, array $default_stops = [] ) {
		$default = [
			'type'   => 'linear',
			'angle'  => 135,
			'stops'  => [ [ 'color' => '#ffffff', 'pos' => 0 ], [ 'color' => '#e8e8e8', 'pos' => 100 ] ],
		];
		if ( ! empty( $default_stops ) ) {
			$default = [ 'type' => 'linear', 'angle' => 135, 'stops' => $default_stops ];
		}
		$json = isset( $settings[ $gradient_key ] ) ? (string) $settings[ $gradient_key ] : '';
		$parsed = [];
		if ( $json !== '' ) {
			$decoded = json_decode( $json, true );
			if ( is_array( $decoded ) && ! empty( $decoded['stops'] ) && is_array( $decoded['stops'] ) ) {
				$parsed = $decoded;
			}
		}
		$parsed = array_merge( $default, $parsed );
		$stops = $parsed['stops'];
		$hex = '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/';
		$c1 = ( isset( $stops[0]['color'] ) && preg_match( $hex, (string) $stops[0]['color'] ) ) ? (string) $stops[0]['color'] : $default['stops'][0]['color'];
		$p1 = isset( $stops[0]['pos'] ) ? max( 0, min( 100, (int) $stops[0]['pos'] ) ) : 0;
		$c2 = ( isset( $stops[1]['color'] ) && preg_match( $hex, (string) $stops[1]['color'] ) ) ? (string) $stops[1]['color'] : ( isset( $default['stops'][1]['color'] ) ? $default['stops'][1]['color'] : '#e8e8e8' );
		$p2 = isset( $stops[1]['pos'] ) ? max( 0, min( 100, (int) $stops[1]['pos'] ) ) : 100;
		return [
			'type'   => ( isset( $parsed['type'] ) && $parsed['type'] === 'radial' ) ? 'radial' : 'linear',
			'angle'  => isset( $parsed['angle'] ) ? max( 0, min( 360, (int) $parsed['angle'] ) ) : 135,
			'color1' => $c1,
			'pos1'   => $p1,
			'color2' => $c2,
			'pos2'   => $p2,
		];
	}

	/** @return array<string, string> */
	public static function getFontFamilyPresets() {
		return [
			'' => __( 'Default', 'wp-powersuite' ),
			'inherit' => __( 'Inherit', 'wp-powersuite' ),
			'Arial, sans-serif' => 'Arial',
			'Helvetica, Arial, sans-serif' => 'Helvetica',
			'Georgia, serif' => 'Georgia',
			"'Times New Roman', Times, serif" => 'Times New Roman',
			'Verdana, Geneva, sans-serif' => 'Verdana',
			'Tahoma, Geneva, sans-serif' => 'Tahoma',
			"'Trebuchet MS', Helvetica, sans-serif" => 'Trebuchet MS',
			"'Palatino Linotype', Palatino, serif" => 'Palatino Linotype',
			"'Courier New', Courier, monospace" => 'Courier New',
			'Impact, Charcoal, sans-serif' => 'Impact',
			'system-ui, -apple-system, sans-serif' => __( 'System UI', 'wp-powersuite' ),
		];
	}

	/**
	 * Output the device icons (desktop/tablet/mobile) chunk used in many rows.
	 */
	public static function deviceIcons() {
		?>
		<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>
		<?php
	}

	/** @param string $module_id @param string $prefix @param array<string, mixed> $vars */
	public static function renderTypographyPopover( $module_id, $prefix, array $vars = [] ) {
		$p   = $prefix . '_';
		$ff  = isset( $vars['font_family'] ) ? (string) $vars['font_family'] : '';
		$fw  = isset( $vars['font_weight'] ) ? (string) $vars['font_weight'] : '';
		$fsd = isset( $vars['font_size_desktop'] ) ? (string) $vars['font_size_desktop'] : '';
		$fst = isset( $vars['font_size_tablet'] ) ? (string) $vars['font_size_tablet'] : '';
		$fsm = isset( $vars['font_size_mobile'] ) ? (string) $vars['font_size_mobile'] : '';
		$tt  = isset( $vars['text_transform'] ) ? (string) $vars['text_transform'] : '';
		$fsty = isset( $vars['font_style'] ) ? (string) $vars['font_style'] : '';
		$lhd = isset( $vars['line_height_desktop'] ) ? (string) $vars['line_height_desktop'] : '';
		$lht = isset( $vars['line_height_tablet'] ) ? (string) $vars['line_height_tablet'] : '';
		$lhm = isset( $vars['line_height_mobile'] ) ? (string) $vars['line_height_mobile'] : '';
		$lsd = isset( $vars['letter_spacing_desktop'] ) ? (string) $vars['letter_spacing_desktop'] : '';
		$lst = isset( $vars['letter_spacing_tablet'] ) ? (string) $vars['letter_spacing_tablet'] : '';
		$lsm = isset( $vars['letter_spacing_mobile'] ) ? (string) $vars['letter_spacing_mobile'] : '';

		$presets = self::getFontFamilyPresets();
		$is_custom = $ff !== '' && ! array_key_exists( $ff, $presets );
		$extra_class = ( $prefix !== 'field' ) ? ' wpps-' . $prefix . '-typography-popover' : '';
		?>
		<div class="wpps-typography-popover<?php echo esc_attr( $extra_class ); ?>" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_typography_popover' ); ?>" role="dialog" aria-label="<?php esc_attr_e( 'Typography settings', 'wp-powersuite' ); ?>" style="display:none;">
			<div class="wpps-typography-popover-title"><?php esc_html_e( 'Typography', 'wp-powersuite' ); ?></div>
			<input type="hidden" name="<?php echo esc_attr( $p ); ?>font_family" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_family" value="<?php echo esc_attr( $ff ); ?>" />
			<div class="wpps-typography-row wpps-font-family-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_preset' ); ?>"><?php esc_html_e( 'Font Family', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_preset' ); ?>" class="wpps-font-family-preset regular-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_family">
					<?php foreach ( $presets as $val => $label ) : ?>
						<option value="<?php echo esc_attr( $val ); ?>" <?php selected( $ff, $val ); ?>><?php echo esc_html( $label ); ?></option>
					<?php endforeach; ?>
					<option value="__custom__" <?php selected( $is_custom, true ); ?>><?php esc_html_e( 'Custom...', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-row wpps-font-family-custom-row" style="<?php echo esc_attr( $is_custom ? '' : 'display:none;' ); ?>">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_custom' ); ?>"><?php esc_html_e( 'Custom font stack', 'wp-powersuite' ); ?></label>
				<input type="text" id="<?php echo esc_attr( $module_id . '_' . $p . 'font_family_custom' ); ?>" class="wpps-font-family-custom regular-text" placeholder="<?php esc_attr_e( "e.g. 'Open Sans', sans-serif", 'wp-powersuite' ); ?>" value="<?php echo $is_custom ? esc_attr( $ff ) : ''; ?>" />
				<p class="description" style="margin: 6px 0 0;"><?php esc_html_e( 'Use any font name or stack. Enqueue the font (e.g. Google Fonts) in your theme or plugin for it to load.', 'wp-powersuite' ); ?></p>
			</div>
			<div class="wpps-typography-row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'font_weight' ); ?>"><?php esc_html_e( 'Font Weight', 'wp-powersuite' ); ?></label>
				<select id="<?php echo esc_attr( $module_id . '_' . $p . 'font_weight' ); ?>" name="<?php echo esc_attr( $p ); ?>font_weight" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_weight">
					<option value="" <?php selected( $fw, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="300" <?php selected( $fw, '300' ); ?>><?php esc_html_e( '300 (Light)', 'wp-powersuite' ); ?></option>
					<option value="400" <?php selected( $fw, '400' ); ?>><?php esc_html_e( '400 (Normal)', 'wp-powersuite' ); ?></option>
					<option value="500" <?php selected( $fw, '500' ); ?>><?php esc_html_e( '500 (Medium)', 'wp-powersuite' ); ?></option>
					<option value="600" <?php selected( $fw, '600' ); ?>><?php esc_html_e( '600 (Semi-bold)', 'wp-powersuite' ); ?></option>
					<option value="700" <?php selected( $fw, '700' ); ?>><?php esc_html_e( '700 (Bold)', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-responsive-row">
				<label><?php esc_html_e( 'Font Size', 'wp-powersuite' ); ?></label>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-font-size-inputs">
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>font_size_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_desktop" value="<?php echo esc_attr( $fsd ); ?>" min="10" max="72" step="1" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>font_size_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_tablet" value="<?php echo esc_attr( $fst ); ?>" min="10" max="72" step="1" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-font-size-wrap wpps-font-size-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>font_size_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>font_size_mobile" value="<?php echo esc_attr( $fsm ); ?>" min="10" max="72" step="1" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
			</div>
			<div class="wpps-typography-row">
				<label><?php esc_html_e( 'Text Transform', 'wp-powersuite' ); ?></label>
				<select name="<?php echo esc_attr( $p ); ?>text_transform" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>text_transform">
					<option value="" <?php selected( $tt, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="none" <?php selected( $tt, 'none' ); ?>><?php esc_html_e( 'None', 'wp-powersuite' ); ?></option>
					<option value="lowercase" <?php selected( $tt, 'lowercase' ); ?>><?php esc_html_e( 'Lowercase', 'wp-powersuite' ); ?></option>
					<option value="uppercase" <?php selected( $tt, 'uppercase' ); ?>><?php esc_html_e( 'Uppercase', 'wp-powersuite' ); ?></option>
					<option value="capitalize" <?php selected( $tt, 'capitalize' ); ?>><?php esc_html_e( 'Capitalize', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-row">
				<label><?php esc_html_e( 'Font Style', 'wp-powersuite' ); ?></label>
				<select name="<?php echo esc_attr( $p ); ?>font_style" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>font_style">
					<option value="" <?php selected( $fsty, '' ); ?>><?php esc_html_e( 'Default', 'wp-powersuite' ); ?></option>
					<option value="normal" <?php selected( $fsty, 'normal' ); ?>><?php esc_html_e( 'Normal', 'wp-powersuite' ); ?></option>
					<option value="italic" <?php selected( $fsty, 'italic' ); ?>><?php esc_html_e( 'Italic', 'wp-powersuite' ); ?></option>
					<option value="oblique" <?php selected( $fsty, 'oblique' ); ?>><?php esc_html_e( 'Oblique', 'wp-powersuite' ); ?></option>
				</select>
			</div>
			<div class="wpps-typography-responsive-row">
				<label><?php esc_html_e( 'Line Height', 'wp-powersuite' ); ?></label>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-line-height-inputs">
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>line_height_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_desktop" value="<?php echo esc_attr( $lhd ); ?>" min="0.5" max="3" step="0.1" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>line_height_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_tablet" value="<?php echo esc_attr( $lht ); ?>" min="0.5" max="3" step="0.1" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
					<label class="wpps-input-unit-row wpps-line-height-wrap wpps-line-height-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>line_height_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>line_height_mobile" value="<?php echo esc_attr( $lhm ); ?>" min="0.5" max="3" step="0.1" />
						<span class="wpps-unit-label"><?php esc_html_e( 'unitless', 'wp-powersuite' ); ?></span>
					</label>
				</div>
			</div>
			<div class="wpps-typography-responsive-row">
				<label><?php esc_html_e( 'Letter Spacing', 'wp-powersuite' ); ?></label>
				<?php self::deviceIcons(); ?>
				<div class="wpps-typography-letter-spacing-inputs">
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-desktop">
						<input type="text" name="<?php echo esc_attr( $p ); ?>letter_spacing_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_desktop" value="<?php echo esc_attr( $lsd ); ?>" placeholder="0" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-tablet" style="display:none;">
						<input type="text" name="<?php echo esc_attr( $p ); ?>letter_spacing_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_tablet" value="<?php echo esc_attr( $lst ); ?>" placeholder="0" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-letter-spacing-wrap wpps-letter-spacing-mobile" style="display:none;">
						<input type="text" name="<?php echo esc_attr( $p ); ?>letter_spacing_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>letter_spacing_mobile" value="<?php echo esc_attr( $lsm ); ?>" placeholder="0" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
			</div>
		</div>
		<?php
	}

	/** @param string $module_id @param string $prefix @param array<string, mixed> $vars */
	public static function renderContainerStyleTab( $module_id, $prefix, array $vars = [] ) {
		$p = $prefix . '_';
		$pd  = isset( $vars['padding_desktop'] ) ? (string) $vars['padding_desktop'] : '';
		$pt  = isset( $vars['padding_tablet'] ) ? (string) $vars['padding_tablet'] : '';
		$pm  = isset( $vars['padding_mobile'] ) ? (string) $vars['padding_mobile'] : '';
		$bt  = isset( $vars['border_type'] ) ? (string) $vars['border_type'] : 'none';
		$bc  = isset( $vars['border_color'] ) ? (string) $vars['border_color'] : '#cccccc';
		$bw  = isset( $vars['border_width'] ) ? (string) $vars['border_width'] : '';
		$brd = isset( $vars['border_radius_desktop'] ) ? (string) $vars['border_radius_desktop'] : '';
		$brt = isset( $vars['border_radius_tablet'] ) ? (string) $vars['border_radius_tablet'] : '';
		$brm = isset( $vars['border_radius_mobile'] ) ? (string) $vars['border_radius_mobile'] : '';
		$sx  = isset( $vars['shadow_x'] ) ? (int) $vars['shadow_x'] : 0;
		$sy  = isset( $vars['shadow_y'] ) ? (int) $vars['shadow_y'] : 0;
		$sblur = isset( $vars['shadow_blur'] ) ? (int) $vars['shadow_blur'] : 0;
		$sspread = isset( $vars['shadow_spread'] ) ? (int) $vars['shadow_spread'] : 0;
		$sc  = isset( $vars['shadow_color'] ) ? (string) $vars['shadow_color'] : '#000000';
		$si  = ( ! empty( $vars['shadow_inset'] ) && $vars['shadow_inset'] !== '0' ) ? '1' : '0';
		$bgt = isset( $vars['bg_type'] ) ? (string) $vars['bg_type'] : '';
		$bgc = isset( $vars['bg_color'] ) ? (string) $vars['bg_color'] : '#ffffff';
		$bgg_type  = isset( $vars['bg_gradient_type'] ) ? (string) $vars['bg_gradient_type'] : 'linear';
		$bgg_angle = isset( $vars['bg_gradient_angle'] ) ? (string) $vars['bg_gradient_angle'] : '135';
		$bgg_c1    = isset( $vars['bg_gradient_color1'] ) ? (string) $vars['bg_gradient_color1'] : '#ffffff';
		$bgg_p1    = isset( $vars['bg_gradient_pos1'] ) ? (string) $vars['bg_gradient_pos1'] : '0';
		$bgg_c2    = isset( $vars['bg_gradient_color2'] ) ? (string) $vars['bg_gradient_color2'] : '#e8e8e8';
		$bgg_p2    = isset( $vars['bg_gradient_pos2'] ) ? (string) $vars['bg_gradient_pos2'] : '100';
		$bgi = isset( $vars['bg_image'] ) ? (string) $vars['bg_image'] : '';
		$bg_overlay_color   = isset( $vars['bg_image_overlay_color'] ) ? (string) $vars['bg_image_overlay_color'] : '#000000';
		$bg_overlay_opacity = isset( $vars['bg_image_overlay_opacity'] ) ? (string) $vars['bg_image_overlay_opacity'] : '0';
		$default_border = isset( $vars['default_border_color'] ) ? (string) $vars['default_border_color'] : '#cccccc';
		$default_bg     = isset( $vars['default_bg_color'] ) ? (string) $vars['default_bg_color'] : '#ffffff';
		$shadow_color_valid = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $sc ) ? $sc : '#000000';
		$shadow_color_circle = ( strlen( $shadow_color_valid ) > 7 ) ? substr( $shadow_color_valid, 0, 7 ) : $shadow_color_valid;
		$shadow_opacity_pct  = 100;
		if ( strlen( $shadow_color_valid ) === 9 ) {
			$shadow_opacity_pct = (int) round( hexdec( substr( $shadow_color_valid, 7, 2 ) ) / 255 * 100 );
		}
		$id_suffix = ( $prefix === 'form' ? 'form_' : '' );
		$gradient_editor_id = $module_id . '_' . $id_suffix . 'gradient_editor';
		$shadow_popover_id = $module_id . '_' . $prefix . '_shadow_popover';
		if ( ! empty( $vars['padding_use_sides'] ) ) {
			self::renderResponsivePaddingSidesRow( $module_id, $prefix, $vars );
		} else {
			?>
		<tr>
			<th scope="row">
				<?php esc_html_e( 'Padding', 'wp-powersuite' ); ?>
				<?php self::deviceIcons(); ?>
			</th>
			<td>
				<div class="wpps-padding-inputs">
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_desktop" value="<?php echo esc_attr( $pd ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_tablet" value="<?php echo esc_attr( $pt ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_mobile" value="<?php echo esc_attr( $pm ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
				<p class="description"><?php esc_html_e( 'Leave empty for default padding.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
			<?php
		}
		?>
		<tr>
			<th scope="row"><?php esc_html_e( 'Border Type', 'wp-powersuite' ); ?></th>
			<td>
				<select name="<?php echo esc_attr( $p ); ?>border_type" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>border_type" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_type' ); ?>">
					<option value="none" <?php selected( $bt, 'none' ); ?>><?php esc_html_e( 'None', 'wp-powersuite' ); ?></option>
					<option value="solid" <?php selected( $bt, 'solid' ); ?>><?php esc_html_e( 'Solid', 'wp-powersuite' ); ?></option>
					<option value="dashed" <?php selected( $bt, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'wp-powersuite' ); ?></option>
					<option value="dotted" <?php selected( $bt, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'wp-powersuite' ); ?></option>
				</select>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-border-color-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>"><?php esc_html_e( 'Border Color', 'wp-powersuite' ); ?></label>
			</th>
			<td>
				<div class="wpps-color-field-row">
					<input type="color" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>" name="<?php echo esc_attr( $p ); ?>border_color" value="<?php echo esc_attr( $bc ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>border_color" />
					<div class="wpps-color-code-wrap">
						<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>border_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>" data-default-color="<?php echo esc_attr( $default_border ); ?>" value="<?php echo esc_attr( $bc ); ?>" style="width: 100px; padding-right: 25px;" placeholder="<?php echo esc_attr( $default_border ); ?>" maxlength="9" />
						<button type="button" class="wpps-color-reset button-link" data-default-color="<?php echo esc_attr( $default_border ); ?>" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
					</div>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-border-width-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'border_width' ); ?>"><?php esc_html_e( 'Border Width', 'wp-powersuite' ); ?></label>
			</th>
			<td>
				<div class="wpps-input-unit-row">
					<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_width' ); ?>" name="<?php echo esc_attr( $p ); ?>border_width" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_width" value="<?php echo esc_attr( $bw ); ?>" min="0" max="50" step="1" />
					<span class="wpps-unit-label">px</span>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-border-radius-row">
			<th scope="row">
				<?php esc_html_e( 'Border Radius', 'wp-powersuite' ); ?>
				<?php self::deviceIcons(); ?>
			</th>
			<td>
				<div class="wpps-border-radius-inputs">
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_desktop" value="<?php echo esc_attr( $brd ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_tablet" value="<?php echo esc_attr( $brt ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_mobile" value="<?php echo esc_attr( $brm ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
				<p class="description"><?php esc_html_e( 'Desktop applies on all screens until tablet or mobile is set. Leave empty for no rounding.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
		<?php
		$shadow_title = isset( $vars['shadow_row_label'] ) ? (string) $vars['shadow_row_label'] : __( 'Box Shadow', 'wp-powersuite' );
		?>
		<tr>
			<th scope="row"><?php echo esc_html( $shadow_title ); ?></th>
			<td>
				<div class="wpps-box-shadow-wrap">
					<button type="button" class="wpps-box-shadow-reset<?php echo ( $sx === 0 && $sy === 0 && $sblur === 0 && $sspread === 0 ) ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset box shadow', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Reset box shadow', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
					<button type="button" class="wpps-box-shadow-toggle" title="<?php esc_attr_e( 'Box shadow settings', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Box shadow settings', 'wp-powersuite' ); ?>"><span class="wpps-box-shadow-icon"></span></button>
					<?php
					self::renderShadowPopoverContent( $module_id, $p, $shadow_popover_id, $shadow_title, $shadow_color_valid, $shadow_color_circle, $shadow_opacity_pct, $sx, $sy, $sblur, $sspread, $si );
					?>
				</div>
			</td>
		</tr>
		<tr>
			<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
			<td>
				<div class="wpps-bg-type-icons <?php echo $prefix === 'form' ? 'wpps-form-bg-type-icons' : ''; ?>" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
					<input type="hidden" name="<?php echo esc_attr( $p ); ?>bg_type" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_type" value="<?php echo esc_attr( $bgt ); ?>" id="<?php echo esc_attr( $module_id . '_' . $p . 'bg_type' ); ?>" />
					<button type="button" class="wpps-bg-type-btn <?php echo esc_attr( $bgt === '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( $bgt === '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( $bgt === '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-reset<?php echo $bgt === '' ? ' 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>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-bg-color-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . '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 . '_' . $p . 'bg_color' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_color" value="<?php echo esc_attr( $bgc ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>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="<?php echo esc_attr( $p ); ?>bg_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $p . 'bg_color' ); ?>" data-default-color="<?php echo esc_attr( $default_bg ); ?>" value="<?php echo esc_attr( $bgc ); ?>" style="width: 100px; padding-right: 25px;" placeholder="<?php echo esc_attr( $default_bg ); ?>" maxlength="9" />
						<button type="button" class="wpps-color-reset button-link" data-default-color="<?php echo esc_attr( $default_bg ); ?>" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
					</div>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-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( $gradient_editor_id ); ?>">
					<div class="wpps-gradient-type-angle-row">
						<label for="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_type' ); ?>"><?php esc_html_e( 'Gradient Type', 'wp-powersuite' ); ?></label>
						<select id="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_type' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_type">
							<option value="linear" <?php selected( $bgg_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
							<option value="radial" <?php selected( $bgg_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
						</select>
						<span class="wpps-gradient-angle-inline" id="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_angle_inline' ); ?>">
							<label for="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_angle' ); ?>"><?php esc_html_e( 'Gradient Angle', 'wp-powersuite' ); ?></label>
							<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_angle" id="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_angle' ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_angle" min="0" max="360" value="<?php echo esc_attr( $bgg_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="<?php echo esc_attr( $p ); ?>bg_gradient_color1" id="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_color1' ); ?>" value="<?php echo esc_attr( $bgg_c1 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color1 wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color1" class="wpps-gradient-hex1 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" data-color-input="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_color1' ); ?>" data-default-color="#ffffff" value="<?php echo esc_attr( $bgg_c1 ); ?>" 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>
						<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
						<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" class="wp-powersuite-advanced-setting wpps-gradient-pos1 small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" min="0" max="100" value="<?php echo esc_attr( $bgg_p1 ); ?>" /> %
					</div>
					<div class="wpps-gradient-color-row">
						<label><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
						<input type="color" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" id="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_color2' ); ?>" value="<?php echo esc_attr( $bgg_c2 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color2 wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" class="wpps-gradient-hex2 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" data-color-input="<?php echo esc_attr( $module_id . '_' . $id_suffix . 'gradient_color2' ); ?>" data-default-color="#e8e8e8" value="<?php echo esc_attr( $bgg_c2 ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#e8e8e8" maxlength="9" />
							<button type="button" class="wpps-color-reset button-link" data-default-color="#e8e8e8"><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="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" class="wp-powersuite-advanced-setting wpps-gradient-pos2 small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" min="0" max="100" value="<?php echo esc_attr( $bgg_p2 ); ?>" /> %
					</div>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( $prefix ); ?>-bg-image-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'bg_image' ); ?>"><?php esc_html_e( 'Select Image', 'wp-powersuite' ); ?></label>
			</th>
			<td>
				<input type="url" id="<?php echo esc_attr( $module_id . '_' . $p . 'bg_image' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_image" class="wp-powersuite-advanced-setting regular-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_image" value="<?php echo esc_url( $bgi ); ?>" placeholder="https://" />
				<button type="button" class="button wpps-<?php echo esc_attr( $prefix ); ?>-bg-image-upload" id="<?php echo esc_attr( $module_id . '_upload_' . $p . 'bg_image' ); ?>"><?php esc_html_e( 'Select Image', 'wp-powersuite' ); ?></button>
			</td>
		</tr>
		<?php
		if ( $prefix === 'box' || $prefix === 'form' ) {
			$overlay_color_circle = ( strlen( $bg_overlay_color ) > 7 ) ? substr( $bg_overlay_color, 0, 7 ) : $bg_overlay_color;
			if ( ! preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_overlay_color ) ) {
				$overlay_color_circle = '#000000';
			}
			$overlay_color_id   = $module_id . '_' . $prefix . '_bg_image_overlay_color';
			$overlay_opacity_id = $module_id . '_' . $prefix . '_bg_image_overlay_opacity';
			$overlay_name       = $prefix . '_bg_image_overlay_color';
			$overlay_opacity_name = $prefix . '_bg_image_overlay_opacity';
			$overlay_setting_key = $prefix . '_bg_image_overlay_color';
			$overlay_opacity_key = $prefix . '_bg_image_overlay_opacity';
			$overlay_row_class  = 'wpps-' . $prefix . '-bg-overlay-row';
			$overlay_opacity_row_class = 'wpps-' . $prefix . '-bg-overlay-opacity-row';
			?>
		<tr class="<?php echo esc_attr( $overlay_row_class ); ?>">
			<th scope="row">
				<label for="<?php echo esc_attr( $overlay_color_id ); ?>"><?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( $overlay_color_id ); ?>" name="<?php echo esc_attr( $overlay_name ); ?>" value="<?php echo esc_attr( $overlay_color_circle ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $overlay_setting_key ); ?>" />
					<div class="wpps-color-code-wrap">
						<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $overlay_setting_key ); ?>" data-color-input="<?php echo esc_attr( $overlay_color_id ); ?>" 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})$/', $bg_overlay_color ) ? $bg_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" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
					</div>
				</div>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $overlay_opacity_row_class ); ?>">
			<th scope="row">
				<label for="<?php echo esc_attr( $overlay_opacity_id ); ?>"><?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( $bg_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
					<input type="number" id="<?php echo esc_attr( $overlay_opacity_id ); ?>" name="<?php echo esc_attr( $overlay_opacity_name ); ?>" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="<?php echo esc_attr( $overlay_opacity_key ); ?>" value="<?php echo esc_attr( $bg_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>
		<?php
		}
		?>
		<?php
	}

	/**
	 * Render the shadow popover content (single source of truth for all shadow fields: Box, Form, Field, Button).
	 *
	 * @param string $module_id            Module id.
	 * @param string $p                    Name prefix (e.g. 'box_', 'field_normal_').
	 * @param string $shadow_popover_id    Id for the popover element.
	 * @param string $popover_title        Title shown in the popover header.
	 * @param string $shadow_color_valid   Valid 6 or 8-digit hex for shadow color.
	 * @param string $shadow_color_circle  First 7 chars for type="color" input.
	 * @param int    $shadow_opacity_pct   Opacity 0-100.
	 * @param int    $sx                   Shadow X.
	 * @param int    $sy                   Shadow Y.
	 * @param int    $sblur                Shadow blur.
	 * @param int    $sspread              Shadow spread.
	 * @param string $si                   Shadow inset '0' or '1'.
	 */
	private static function renderShadowPopoverContent( $module_id, $p, $shadow_popover_id, $popover_title, $shadow_color_valid, $shadow_color_circle, $shadow_opacity_pct, $sx, $sy, $sblur, $sspread, $si ) {
		?>
		<div class="wpps-box-shadow-popover" id="<?php echo esc_attr( $shadow_popover_id ); ?>" role="dialog" aria-label="<?php esc_attr_e( 'Box shadow settings', 'wp-powersuite' ); ?>" style="display:none;">
			<div class="wpps-box-shadow-popover-header">
				<span class="wpps-box-shadow-popover-title"><?php echo esc_html( $popover_title ); ?></span>
				<div class="wpps-box-shadow-color-swatch-wrap">
					<div class="wpps-box-shadow-swatch-trigger">
						<div class="wpps-box-shadow-preview-wrap">
							<div class="wpps-box-shadow-preview" style="background-color:<?php echo esc_attr( $shadow_color_valid ); ?>"></div>
						</div>
						<input type="color" id="<?php echo esc_attr( $module_id . '_' . $p . 'shadow_color' ); ?>" class="wpps-box-shadow-color-picker" value="<?php echo esc_attr( $shadow_color_circle ); ?>" aria-label="<?php esc_attr_e( 'Shadow color', 'wp-powersuite' ); ?>" />
					</div>
					<input type="text" class="wpps-box-shadow-hex wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_color" data-shadow-hex style="width:72px;" value="<?php echo esc_attr( $shadow_color_valid ); ?>" maxlength="9" placeholder="#000000" />
				</div>
				<div class="wpps-box-shadow-opacity-row">
					<label><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
					<input type="range" class="wpps-box-shadow-opacity" min="0" max="100" value="<?php echo esc_attr( $shadow_opacity_pct ); ?>" aria-label="<?php esc_attr_e( 'Shadow opacity', 'wp-powersuite' ); ?>" />
					<input type="number" class="wpps-box-shadow-opacity-num" min="0" max="100" value="<?php echo esc_attr( $shadow_opacity_pct ); ?>" aria-label="<?php esc_attr_e( 'Shadow opacity percent', 'wp-powersuite' ); ?>" />
					<span class="wpps-box-shadow-unit">%</span>
				</div>
			</div>
			<div class="wpps-box-shadow-slider-row">
				<label><?php esc_html_e( 'Horizontal (X)', 'wp-powersuite' ); ?></label>
				<input type="range" class="wpps-box-shadow-range" data-shadow-key="<?php echo esc_attr( $p ); ?>shadow_x" min="-50" max="50" value="<?php echo esc_attr( $sx ); ?>" />
				<input type="number" class="wp-powersuite-advanced-setting small-text wpps-box-shadow-num" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_x" value="<?php echo esc_attr( $sx ); ?>" min="-50" max="50" />
				<span class="wpps-box-shadow-unit">px</span>
			</div>
			<div class="wpps-box-shadow-slider-row">
				<label><?php esc_html_e( 'Vertical (Y)', 'wp-powersuite' ); ?></label>
				<input type="range" class="wpps-box-shadow-range" data-shadow-key="<?php echo esc_attr( $p ); ?>shadow_y" min="-50" max="50" value="<?php echo esc_attr( $sy ); ?>" />
				<input type="number" class="wp-powersuite-advanced-setting small-text wpps-box-shadow-num" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_y" value="<?php echo esc_attr( $sy ); ?>" min="-50" max="50" />
				<span class="wpps-box-shadow-unit">px</span>
			</div>
			<div class="wpps-box-shadow-slider-row">
				<label><?php esc_html_e( 'Blur', 'wp-powersuite' ); ?></label>
				<input type="range" class="wpps-box-shadow-range" data-shadow-key="<?php echo esc_attr( $p ); ?>shadow_blur" min="0" max="50" value="<?php echo esc_attr( $sblur ); ?>" />
				<input type="number" class="wp-powersuite-advanced-setting small-text wpps-box-shadow-num" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_blur" value="<?php echo esc_attr( $sblur ); ?>" min="0" max="50" />
				<span class="wpps-box-shadow-unit">px</span>
			</div>
			<div class="wpps-box-shadow-slider-row">
				<label><?php esc_html_e( 'Spread', 'wp-powersuite' ); ?></label>
				<input type="range" class="wpps-box-shadow-range" data-shadow-key="<?php echo esc_attr( $p ); ?>shadow_spread" min="-20" max="20" value="<?php echo esc_attr( $sspread ); ?>" />
				<input type="number" class="wp-powersuite-advanced-setting small-text wpps-box-shadow-num" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_spread" value="<?php echo esc_attr( $sspread ); ?>" min="-20" max="20" />
				<span class="wpps-box-shadow-unit">px</span>
			</div>
			<div class="wpps-box-shadow-inset-outset">
				<button type="button" class="wpps-box-shadow-inset-btn <?php echo $si === '1' ? 'is-active' : ''; ?>" data-value="1"><?php esc_html_e( 'Inset', 'wp-powersuite' ); ?></button>
				<button type="button" class="wpps-box-shadow-outset-btn <?php echo $si === '0' ? 'is-active' : ''; ?>" data-value="0"><?php esc_html_e( 'Outset', 'wp-powersuite' ); ?></button>
			</div>
			<input type="hidden" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>shadow_inset" name="<?php echo esc_attr( $p ); ?>shadow_inset" value="<?php echo esc_attr( $si ); ?>" />
		</div>
		<?php
	}

	/**
	 * Render a single responsive Padding row (desktop/tablet/mobile with device icons). Used by Button Normal/Hover.
	 *
	 * @param string               $module_id Module id.
	 * @param string               $prefix    Prefix for name (e.g. 'button_normal' -> button_normal_padding_desktop).
	 * @param array<string, mixed> $vars      Keys: padding_desktop, padding_tablet, padding_mobile.
	 */
	public static function renderResponsivePaddingRow( $module_id, $prefix, array $vars = [] ) {
		$p  = $prefix . '_';
		$pd = isset( $vars['padding_desktop'] ) ? (string) $vars['padding_desktop'] : '';
		$pt = isset( $vars['padding_tablet'] ) ? (string) $vars['padding_tablet'] : '';
		$pm = isset( $vars['padding_mobile'] ) ? (string) $vars['padding_mobile'] : '';
		?>
		<tr>
			<th scope="row">
				<?php esc_html_e( 'Padding', 'wp-powersuite' ); ?>
				<?php self::deviceIcons(); ?>
			</th>
			<td>
				<div class="wpps-padding-inputs">
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_desktop" value="<?php echo esc_attr( $pd ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_tablet" value="<?php echo esc_attr( $pt ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-padding-wrap wpps-padding-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>padding_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>padding_mobile" value="<?php echo esc_attr( $pm ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( 'Default', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
				<p class="description"><?php esc_html_e( 'Leave empty for default.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render responsive Padding row with 4 sides per device (desktop/tablet/mobile). Used by Button tab.
	 *
	 * @param string               $module_id Module id.
	 * @param string               $prefix    Prefix for name (e.g. 'button_normal' -> button_normal_padding_top, button_normal_padding_top_tablet, ...).
	 * @param array<string, mixed> $vars      Keys: padding_top, padding_right, padding_bottom, padding_left (desktop),
	 *                                        padding_top_tablet, padding_right_tablet, padding_bottom_tablet, padding_left_tablet,
	 *                                        padding_top_mobile, padding_right_mobile, padding_bottom_mobile, padding_left_mobile.
	 *                                        Optional: row_description (override the default description text).
	 */
	public static function renderResponsivePaddingSidesRow( $module_id, $prefix, array $vars = [] ) {
		$p = $prefix . '_';
		$pt_d  = isset( $vars['padding_top'] ) ? (string) $vars['padding_top'] : '';
		$pr_d  = isset( $vars['padding_right'] ) ? (string) $vars['padding_right'] : '';
		$pb_d  = isset( $vars['padding_bottom'] ) ? (string) $vars['padding_bottom'] : '';
		$pl_d  = isset( $vars['padding_left'] ) ? (string) $vars['padding_left'] : '';
		$pt_t  = isset( $vars['padding_top_tablet'] ) ? (string) $vars['padding_top_tablet'] : '';
		$pr_t  = isset( $vars['padding_right_tablet'] ) ? (string) $vars['padding_right_tablet'] : '';
		$pb_t  = isset( $vars['padding_bottom_tablet'] ) ? (string) $vars['padding_bottom_tablet'] : '';
		$pl_t  = isset( $vars['padding_left_tablet'] ) ? (string) $vars['padding_left_tablet'] : '';
		$pt_m  = isset( $vars['padding_top_mobile'] ) ? (string) $vars['padding_top_mobile'] : '';
		$pr_m  = isset( $vars['padding_right_mobile'] ) ? (string) $vars['padding_right_mobile'] : '';
		$pb_m  = isset( $vars['padding_bottom_mobile'] ) ? (string) $vars['padding_bottom_mobile'] : '';
		$pl_m  = isset( $vars['padding_left_mobile'] ) ? (string) $vars['padding_left_mobile'] : '';
		$sides = [
			'desktop' => [ 'top' => $pt_d, 'right' => $pr_d, 'bottom' => $pb_d, 'left' => $pl_d ],
			'tablet'  => [ 'top' => $pt_t, 'right' => $pr_t, 'bottom' => $pb_t, 'left' => $pl_t ],
			'mobile'  => [ 'top' => $pt_m, 'right' => $pr_m, 'bottom' => $pb_m, 'left' => $pl_m ],
		];
		$suffix = [ 'desktop' => '', 'tablet' => '_tablet', 'mobile' => '_mobile' ];
		?>
		<tr>
			<th scope="row">
				<label><?php esc_html_e( 'Padding', 'wp-powersuite' ); ?></label>
				<?php self::deviceIcons(); ?>
			</th>
			<td>
				<div class="wpps-padding-inputs">
					<?php foreach ( [ 'desktop', 'tablet', 'mobile' ] as $device ) : ?>
						<?php
						$show = $sides[ $device ];
						$sfx  = $suffix[ $device ];
						$hide = $device !== 'desktop';
						?>
						<div class="wpps-padding-wrap wpps-padding-<?php echo esc_attr( $device ); ?> wpps-padding-sides-row"<?php echo $hide ? ' style="display:none;"' : ''; ?>>
							<label class="wpps-padding-side">
								<span class="wpps-padding-side-label"><?php esc_html_e( 'Top', 'wp-powersuite' ); ?></span>
								<input type="number" name="<?php echo esc_attr( $p ); ?>padding_top<?php echo esc_attr( $sfx ); ?>" class="wp-powersuite-advanced-setting small-text wpps-padding-side-input" data-setting-key="<?php echo esc_attr( $p ); ?>padding_top<?php echo esc_attr( $sfx ); ?>" value="<?php echo esc_attr( $show['top'] ); ?>" min="0" max="200" step="1" placeholder="—" />
								<span class="wpps-unit-label">px</span>
							</label>
							<label class="wpps-padding-side">
								<span class="wpps-padding-side-label"><?php esc_html_e( 'Right', 'wp-powersuite' ); ?></span>
								<input type="number" name="<?php echo esc_attr( $p ); ?>padding_right<?php echo esc_attr( $sfx ); ?>" class="wp-powersuite-advanced-setting small-text wpps-padding-side-input" data-setting-key="<?php echo esc_attr( $p ); ?>padding_right<?php echo esc_attr( $sfx ); ?>" value="<?php echo esc_attr( $show['right'] ); ?>" min="0" max="200" step="1" placeholder="—" />
								<span class="wpps-unit-label">px</span>
							</label>
							<label class="wpps-padding-side">
								<span class="wpps-padding-side-label"><?php esc_html_e( 'Bottom', 'wp-powersuite' ); ?></span>
								<input type="number" name="<?php echo esc_attr( $p ); ?>padding_bottom<?php echo esc_attr( $sfx ); ?>" class="wp-powersuite-advanced-setting small-text wpps-padding-side-input" data-setting-key="<?php echo esc_attr( $p ); ?>padding_bottom<?php echo esc_attr( $sfx ); ?>" value="<?php echo esc_attr( $show['bottom'] ); ?>" min="0" max="200" step="1" placeholder="—" />
								<span class="wpps-unit-label">px</span>
							</label>
							<label class="wpps-padding-side">
								<span class="wpps-padding-side-label"><?php esc_html_e( 'Left', 'wp-powersuite' ); ?></span>
								<input type="number" name="<?php echo esc_attr( $p ); ?>padding_left<?php echo esc_attr( $sfx ); ?>" class="wp-powersuite-advanced-setting small-text wpps-padding-side-input" data-setting-key="<?php echo esc_attr( $p ); ?>padding_left<?php echo esc_attr( $sfx ); ?>" value="<?php echo esc_attr( $show['left'] ); ?>" min="0" max="200" step="1" placeholder="—" />
								<span class="wpps-unit-label">px</span>
							</label>
							<button type="button" class="wpps-padding-link-btn is-linked" title="<?php esc_attr_e( 'Linked: all sides same value. Click to unlink.', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Unlink padding', 'wp-powersuite' ); ?>">
								<span class="dashicons dashicons-admin-links" aria-hidden="true"></span>
							</button>
						</div>
					<?php endforeach; ?>
				</div>
				<p class="description"><?php echo esc_html( isset( $vars['row_description'] ) && $vars['row_description'] !== '' ? (string) $vars['row_description'] : __( 'Desktop values apply on all screen sizes until you set tablet or mobile. Leave empty for default. Set per device and per side.', 'wp-powersuite' ) ); ?></p>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render only border and box-shadow rows (no padding, no background). Used by Fields tab.
	 * When border type is "none", caller should hide these rows via CSS (e.g. .wpps-border-type-none).
	 *
	 * @param string               $module_id Module id.
	 * @param string               $prefix    Prefix for name/data-setting-key (e.g. 'field_normal').
	 * @param array<string, mixed> $vars      Keys: border_type, border_color, border_width, border_radius (single),
	 *                                        or border_radius_desktop|tablet|mobile for responsive;
	 *                                        shadow_x, shadow_y, shadow_blur, shadow_spread, shadow_color, shadow_inset.
	 */
	public static function renderBorderAndShadowRows( $module_id, $prefix, array $vars = [] ) {
		$p   = $prefix . '_';
		$bt  = isset( $vars['border_type'] ) ? (string) $vars['border_type'] : 'none';
		$bc  = isset( $vars['border_color'] ) ? (string) $vars['border_color'] : '#cccccc';
		$bw  = isset( $vars['border_width'] ) ? (string) $vars['border_width'] : '';
		$br  = isset( $vars['border_radius'] ) ? (string) $vars['border_radius'] : '';
		$brd = isset( $vars['border_radius_desktop'] ) ? (string) $vars['border_radius_desktop'] : '';
		$brt = isset( $vars['border_radius_tablet'] ) ? (string) $vars['border_radius_tablet'] : '';
		$brm = isset( $vars['border_radius_mobile'] ) ? (string) $vars['border_radius_mobile'] : '';
		$border_radius_responsive = ! empty( $vars['border_radius_responsive'] );
		$sx  = isset( $vars['shadow_x'] ) ? (int) $vars['shadow_x'] : 0;
		$sy  = isset( $vars['shadow_y'] ) ? (int) $vars['shadow_y'] : 0;
		$sblur  = isset( $vars['shadow_blur'] ) ? (int) $vars['shadow_blur'] : 0;
		$sspread = isset( $vars['shadow_spread'] ) ? (int) $vars['shadow_spread'] : 0;
		$sc  = isset( $vars['shadow_color'] ) ? (string) $vars['shadow_color'] : '#000000';
		$si  = ( ! empty( $vars['shadow_inset'] ) && $vars['shadow_inset'] !== '0' ) ? '1' : '0';
		$default_border = isset( $vars['default_border_color'] ) ? (string) $vars['default_border_color'] : '#cccccc';
		$shadow_color_valid = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $sc ) ? $sc : '#000000';
		$shadow_color_circle = ( strlen( $shadow_color_valid ) > 7 ) ? substr( $shadow_color_valid, 0, 7 ) : $shadow_color_valid;
		$shadow_opacity_pct  = 100;
		if ( strlen( $shadow_color_valid ) === 9 ) {
			$shadow_opacity_pct = (int) round( hexdec( substr( $shadow_color_valid, 7, 2 ) ) / 255 * 100 );
		}
		$shadow_popover_id = $module_id . '_' . $prefix . '_shadow_popover';
		$shadow_row_label = isset( $vars['shadow_row_label'] ) ? (string) $vars['shadow_row_label'] : __( 'Field Shadow', 'wp-powersuite' );
		?>
		<tr>
			<th scope="row"><?php esc_html_e( 'Border Type', 'wp-powersuite' ); ?></th>
			<td>
				<select name="<?php echo esc_attr( $p ); ?>border_type" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>border_type" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_type' ); ?>">
					<option value="none" <?php selected( $bt, 'none' ); ?>><?php esc_html_e( 'None', 'wp-powersuite' ); ?></option>
					<option value="solid" <?php selected( $bt, 'solid' ); ?>><?php esc_html_e( 'Solid', 'wp-powersuite' ); ?></option>
					<option value="dashed" <?php selected( $bt, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'wp-powersuite' ); ?></option>
					<option value="dotted" <?php selected( $bt, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'wp-powersuite' ); ?></option>
				</select>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( str_replace( '_', '-', $prefix ) ); ?>-border-color-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>"><?php esc_html_e( 'Border Color', 'wp-powersuite' ); ?></label>
			</th>
			<td>
				<div class="wpps-color-field-row">
					<div class="wpps-color-swatch-wrap">
						<div class="wpps-color-swatch-preview-wrap">
							<div class="wpps-color-swatch-preview" role="presentation" aria-hidden="true"></div>
						</div>
						<input type="color" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>" name="<?php echo esc_attr( $p ); ?>border_color" value="<?php echo esc_attr( $bc ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>border_color" />
					</div>
					<div class="wpps-color-code-wrap">
						<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>border_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $p . 'border_color' ); ?>" data-default-color="<?php echo esc_attr( $default_border ); ?>" value="<?php echo esc_attr( $bc ); ?>" style="width: 100px; padding-right: 25px;" placeholder="<?php echo esc_attr( $default_border ); ?>" maxlength="9" />
						<button type="button" class="wpps-color-reset button-link" data-default-color="<?php echo esc_attr( $default_border ); ?>" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
					</div>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( str_replace( '_', '-', $prefix ) ); ?>-border-width-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $module_id . '_' . $p . 'border_width' ); ?>"><?php esc_html_e( 'Border Width', 'wp-powersuite' ); ?></label>
			</th>
			<td>
				<div class="wpps-input-unit-row">
					<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_width' ); ?>" name="<?php echo esc_attr( $p ); ?>border_width" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_width" value="<?php echo esc_attr( $bw ); ?>" min="0" max="50" step="1" />
					<span class="wpps-unit-label">px</span>
				</div>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( str_replace( '_', '-', $prefix ) ); ?>-border-radius-row">
			<th scope="row">
				<?php esc_html_e( 'Border Radius', 'wp-powersuite' ); ?>
				<?php if ( $border_radius_responsive ) { self::deviceIcons(); } ?>
			</th>
			<td>
				<?php if ( $border_radius_responsive ) { ?>
				<div class="wpps-border-radius-inputs">
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-desktop">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_desktop" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_desktop" value="<?php echo esc_attr( $brd !== '' ? $brd : $br ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-tablet" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_tablet" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_tablet" value="<?php echo esc_attr( $brt ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
					<label class="wpps-input-unit-row wpps-border-radius-wrap wpps-border-radius-mobile" style="display:none;">
						<input type="number" name="<?php echo esc_attr( $p ); ?>border_radius_mobile" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius_mobile" value="<?php echo esc_attr( $brm ); ?>" min="0" max="200" step="1" placeholder="<?php esc_attr_e( '0', 'wp-powersuite' ); ?>" />
						<span class="wpps-unit-label">px</span>
					</label>
				</div>
				<?php } else { ?>
				<div class="wpps-input-unit-row">
					<input type="number" id="<?php echo esc_attr( $module_id . '_' . $p . 'border_radius' ); ?>" name="<?php echo esc_attr( $p ); ?>border_radius" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>border_radius" value="<?php echo esc_attr( $br ); ?>" min="0" max="50" step="1" placeholder="0" />
					<span class="wpps-unit-label">px</span>
				</div>
				<?php } ?>
				<p class="description"><?php echo $border_radius_responsive ? esc_html__( 'Desktop applies on all screens until tablet or mobile is set. Leave empty for no rounding.', 'wp-powersuite' ) : esc_html__( 'Leave empty for no rounding.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
		<tr class="wpps-<?php echo esc_attr( str_replace( '_', '-', $prefix ) ); ?>-shadow-row">
			<th scope="row"><?php echo esc_html( $shadow_row_label ); ?></th>
			<td>
				<div class="wpps-box-shadow-wrap">
					<button type="button" class="wpps-box-shadow-reset<?php echo ( $sx === 0 && $sy === 0 && $sblur === 0 && $sspread === 0 ) ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset box shadow', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Reset box shadow', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate"></span></button>
					<button type="button" class="wpps-box-shadow-toggle" title="<?php esc_attr_e( 'Box shadow settings', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Box shadow settings', 'wp-powersuite' ); ?>"><span class="wpps-box-shadow-icon"></span></button>
					<?php
					self::renderShadowPopoverContent( $module_id, $p, $shadow_popover_id, $shadow_row_label, $shadow_color_valid, $shadow_color_circle, $shadow_opacity_pct, $sx, $sy, $sblur, $sspread, $si );
					?>
				</div>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render Background Color and Opacity rows. Used by Fields tab for input background. Opacity controls the background color opacity.
	 *
	 * @param string               $module_id Module id.
	 * @param string               $prefix    Prefix for name/data-setting-key (e.g. 'field_normal').
	 * @param array<string, mixed> $vars      Keys: bg_color, bg_overlay_opacity (opacity 0-100 for background color).
	 */
	public static function renderFieldBackgroundRows( $module_id, $prefix, array $vars = [] ) {
		$p   = $prefix . '_';
		$bgc = isset( $vars['bg_color'] ) ? (string) $vars['bg_color'] : '';
		$bg_opacity = isset( $vars['bg_overlay_opacity'] ) ? (string) $vars['bg_overlay_opacity'] : '100';
		$row_class_prefix = 'wpps-' . str_replace( '_', '-', $prefix );
		$bg_color_id = $module_id . '_' . str_replace( '_', '-', $prefix ) . '_bg_color';
		$opacity_id = $module_id . '_' . str_replace( '_', '-', $prefix ) . '_bg_overlay_opacity';
		$bg_color_valid = ( $bgc !== '' && preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bgc ) ) ? $bgc : '#ffffff';
		$bg_color_circle = ( strlen( $bg_color_valid ) > 7 ) ? substr( $bg_color_valid, 0, 7 ) : $bg_color_valid;
		?>
		<tr class="<?php echo esc_attr( $row_class_prefix ); ?>-bg-color-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $bg_color_id ); ?>"><?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( $bg_color_id ); ?>" name="<?php echo esc_attr( $p ); ?>bg_color" value="<?php echo esc_attr( $bg_color_circle ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>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="<?php echo esc_attr( $p ); ?>bg_color" data-color-input="<?php echo esc_attr( $bg_color_id ); ?>" data-default-color="#ffffff" value="<?php echo esc_attr( $bg_color_valid ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#ffffff" maxlength="9" />
						<button type="button" class="wpps-color-reset button-link" data-default-color="#ffffff" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><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 background color.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class_prefix ); ?>-bg-overlay-opacity-row">
			<th scope="row">
				<label for="<?php echo esc_attr( $opacity_id ); ?>"><?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( $bg_opacity ); ?>" aria-label="<?php esc_attr_e( 'Background color opacity', 'wp-powersuite' ); ?>" />
					<input type="number" id="<?php echo esc_attr( $opacity_id ); ?>" name="<?php echo esc_attr( $p ); ?>bg_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="<?php echo esc_attr( $p ); ?>bg_overlay_opacity" value="<?php echo esc_attr( $bg_opacity ); ?>" min="0" max="100" step="1" aria-label="<?php esc_attr_e( 'Background color opacity percent', 'wp-powersuite' ); ?>" />
					<span class="wpps-box-shadow-unit">%</span>
				</div>
				<p class="description"><?php esc_html_e( 'Opacity of the background color. 100 = solid.', 'wp-powersuite' ); ?></p>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render Background Type (Color + Gradient only), Background Color row, and Gradient row for Button Normal state.
	 *
	 * @param string               $module_id Module id.
	 * @param array<string, mixed> $vars      Keys: bg_type, bg_color, bg_gradient_type, bg_gradient_angle,
	 *                                        bg_gradient_color1, bg_gradient_pos1, bg_gradient_color2, bg_gradient_pos2.
	 */
	public static function renderButtonNormalBgRows( $module_id, array $vars = [] ) {
		$p   = 'button_normal_';
		$bgt = isset( $vars['bg_type'] ) && in_array( $vars['bg_type'], [ 'color', 'gradient' ], true ) ? $vars['bg_type'] : '';
		$bgc = isset( $vars['bg_color'] ) ? (string) $vars['bg_color'] : '#2271b1';
		$bgg_type  = isset( $vars['bg_gradient_type'] ) ? (string) $vars['bg_gradient_type'] : 'linear';
		$bgg_angle = isset( $vars['bg_gradient_angle'] ) ? (string) $vars['bg_gradient_angle'] : '135';
		$bgg_c1    = isset( $vars['bg_gradient_color1'] ) ? (string) $vars['bg_gradient_color1'] : '#2271b1';
		$bgg_p1    = isset( $vars['bg_gradient_pos1'] ) ? (string) $vars['bg_gradient_pos1'] : '0';
		$bgg_c2    = isset( $vars['bg_gradient_color2'] ) ? (string) $vars['bg_gradient_color2'] : '#135e96';
		$bgg_p2    = isset( $vars['bg_gradient_pos2'] ) ? (string) $vars['bg_gradient_pos2'] : '100';
		$gradient_editor_id = $module_id . '_button_normal_gradient_editor';
		?>
		<tr>
			<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
			<td>
				<div class="wpps-bg-type-icons wpps-button-normal-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
					<input type="hidden" name="<?php echo esc_attr( $p ); ?>bg_type" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_type" value="<?php echo esc_attr( $bgt ); ?>" />
					<button type="button" class="wpps-bg-type-btn <?php echo $bgt === '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 $bgt === '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-reset<?php echo $bgt === '' ? ' 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>
			</td>
		</tr>
		<tr class="wpps-button-normal-bg-color-row">
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_button_normal_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 . '_button_normal_bg_color' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_color" value="<?php echo esc_attr( $bgc ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>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="<?php echo esc_attr( $p ); ?>bg_color" data-color-input="<?php echo esc_attr( $module_id . '_button_normal_bg_color' ); ?>" data-default-color="#2271b1" value="<?php echo esc_attr( $bgc ); ?>" 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>
		<tr class="wpps-button-normal-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( $gradient_editor_id ); ?>">
					<div class="wpps-gradient-type-angle-row">
						<label><?php esc_html_e( 'Gradient Type', 'wp-powersuite' ); ?></label>
						<select name="<?php echo esc_attr( $p ); ?>bg_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_type">
							<option value="linear" <?php selected( $bgg_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
							<option value="radial" <?php selected( $bgg_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
						</select>
						<span class="wpps-gradient-angle-inline">
							<label><?php esc_html_e( 'Angle', 'wp-powersuite' ); ?></label>
							<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_angle" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_angle" min="0" max="360" value="<?php echo esc_attr( $bgg_angle ); ?>" step="1" />
							<span class="wpps-unit-label">°</span>
						</span>
					</div>
					<div class="wpps-gradient-color-row">
						<label for="<?php echo esc_attr( $module_id . '_button_normal_gradient_color1' ); ?>"><?php esc_html_e( 'Color 1', 'wp-powersuite' ); ?></label>
						<input type="color" id="<?php echo esc_attr( $module_id . '_button_normal_gradient_color1' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_gradient_color1" value="<?php echo esc_attr( $bgg_c1 ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color1" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" data-color-input="<?php echo esc_attr( $module_id . '_button_normal_gradient_color1' ); ?>" data-default-color="#2271b1" value="<?php echo esc_attr( $bgg_c1 ); ?>" 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>
						<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
						<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" min="0" max="100" value="<?php echo esc_attr( $bgg_p1 ); ?>" /> %
					</div>
					<div class="wpps-gradient-color-row">
						<label for="<?php echo esc_attr( $module_id . '_button_normal_gradient_color2' ); ?>"><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
						<input type="color" id="<?php echo esc_attr( $module_id . '_button_normal_gradient_color2' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" value="<?php echo esc_attr( $bgg_c2 ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" data-color-input="<?php echo esc_attr( $module_id . '_button_normal_gradient_color2' ); ?>" data-default-color="#135e96" value="<?php echo esc_attr( $bgg_c2 ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#135e96" maxlength="9" />
							<button type="button" class="wpps-color-reset button-link" data-default-color="#135e96"><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="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" min="0" max="100" value="<?php echo esc_attr( $bgg_p2 ); ?>" /> %
					</div>
				</div>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render Background Type (Color + Gradient only), Background Color row, and Gradient row for Button Hover state.
	 *
	 * @param string               $module_id Module id.
	 * @param array<string, mixed> $vars      Keys: bg_type, bg_color, bg_gradient_type, bg_gradient_angle,
	 *                                        bg_gradient_color1, bg_gradient_pos1, bg_gradient_color2, bg_gradient_pos2.
	 */
	public static function renderButtonHoverBgRows( $module_id, array $vars = [] ) {
		$p   = 'button_hover_';
		$bgt = isset( $vars['bg_type'] ) && in_array( $vars['bg_type'], [ 'color', 'gradient' ], true ) ? $vars['bg_type'] : '';
		$bgc = isset( $vars['bg_color'] ) ? (string) $vars['bg_color'] : '#135e96';
		$bgg_type  = isset( $vars['bg_gradient_type'] ) ? (string) $vars['bg_gradient_type'] : 'linear';
		$bgg_angle = isset( $vars['bg_gradient_angle'] ) ? (string) $vars['bg_gradient_angle'] : '135';
		$bgg_c1    = isset( $vars['bg_gradient_color1'] ) ? (string) $vars['bg_gradient_color1'] : '#135e96';
		$bgg_p1    = isset( $vars['bg_gradient_pos1'] ) ? (string) $vars['bg_gradient_pos1'] : '0';
		$bgg_c2    = isset( $vars['bg_gradient_color2'] ) ? (string) $vars['bg_gradient_color2'] : '#2271b1';
		$bgg_p2    = isset( $vars['bg_gradient_pos2'] ) ? (string) $vars['bg_gradient_pos2'] : '100';
		$gradient_editor_id = $module_id . '_button_hover_gradient_editor';
		?>
		<tr>
			<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
			<td>
				<div class="wpps-bg-type-icons wpps-button-hover-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
					<input type="hidden" name="<?php echo esc_attr( $p ); ?>bg_type" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_type" value="<?php echo esc_attr( $bgt ); ?>" />
					<button type="button" class="wpps-bg-type-btn <?php echo $bgt === '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 $bgt === '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-reset<?php echo $bgt === '' ? ' 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>
			</td>
		</tr>
		<tr class="wpps-button-hover-bg-color-row">
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_button_hover_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 . '_button_hover_bg_color' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_color" value="<?php echo esc_attr( $bgc ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>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="<?php echo esc_attr( $p ); ?>bg_color" data-color-input="<?php echo esc_attr( $module_id . '_button_hover_bg_color' ); ?>" data-default-color="#135e96" value="<?php echo esc_attr( $bgc ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#135e96" maxlength="9" />
						<button type="button" class="wpps-color-reset button-link" data-default-color="#135e96"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
					</div>
				</div>
			</td>
		</tr>
		<tr class="wpps-button-hover-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( $gradient_editor_id ); ?>">
					<div class="wpps-gradient-type-angle-row">
						<label><?php esc_html_e( 'Gradient Type', 'wp-powersuite' ); ?></label>
						<select name="<?php echo esc_attr( $p ); ?>bg_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_type">
							<option value="linear" <?php selected( $bgg_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
							<option value="radial" <?php selected( $bgg_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
						</select>
						<span class="wpps-gradient-angle-inline">
							<label><?php esc_html_e( 'Angle', 'wp-powersuite' ); ?></label>
							<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_angle" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_angle" min="0" max="360" value="<?php echo esc_attr( $bgg_angle ); ?>" step="1" />
							<span class="wpps-unit-label">°</span>
						</span>
					</div>
					<div class="wpps-gradient-color-row">
						<label for="<?php echo esc_attr( $module_id . '_button_hover_gradient_color1' ); ?>"><?php esc_html_e( 'Color 1', 'wp-powersuite' ); ?></label>
						<input type="color" id="<?php echo esc_attr( $module_id . '_button_hover_gradient_color1' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_gradient_color1" value="<?php echo esc_attr( $bgg_c1 ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color1" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color1" data-color-input="<?php echo esc_attr( $module_id . '_button_hover_gradient_color1' ); ?>" data-default-color="#135e96" value="<?php echo esc_attr( $bgg_c1 ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#135e96" maxlength="9" />
							<button type="button" class="wpps-color-reset button-link" data-default-color="#135e96"><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="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos1" min="0" max="100" value="<?php echo esc_attr( $bgg_p1 ); ?>" /> %
					</div>
					<div class="wpps-gradient-color-row">
						<label for="<?php echo esc_attr( $module_id . '_button_hover_gradient_color2' ); ?>"><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
						<input type="color" id="<?php echo esc_attr( $module_id . '_button_hover_gradient_color2' ); ?>" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" value="<?php echo esc_attr( $bgg_c2 ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $p ); ?>bg_gradient_color2" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_color2" data-color-input="<?php echo esc_attr( $module_id . '_button_hover_gradient_color2' ); ?>" data-default-color="#2271b1" value="<?php echo esc_attr( $bgg_c2 ); ?>" 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>
						<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
						<input type="number" name="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" class="wp-powersuite-advanced-setting small-text" data-setting-key="<?php echo esc_attr( $p ); ?>bg_gradient_pos2" min="0" max="100" value="<?php echo esc_attr( $bgg_p2 ); ?>" /> %
					</div>
				</div>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render background sub-rows (color, gradient, image, video) for a split column (Column with Form or Column without Form).
	 * Row visibility is controlled by panel class wpps-{prefix}-bg-type-{color|gradient|image|video}.
	 *
	 * @param string               $module_id Module id.
	 * @param string               $prefix    Setting prefix e.g. 'split_form_bg' or 'split_empty_bg'.
	 * @param array<string, mixed> $vars      Keys: bg_color, bg_image, image_overlay_color, image_overlay_opacity,
	 *                                        image_position, image_size, image_repeat, bg_video, video_overlay_color,
	 *                                        video_overlay_opacity, gradient_type, gradient_angle, gradient_color1,
	 *                                        gradient_pos1, gradient_color2, gradient_pos2.
	 * @param string               $current_bg_type Current selected type: 'color', 'gradient', 'image', 'video', or ''.
	 */
	public static function renderSplitColumnBgRows( $module_id, $prefix, array $vars = [], $current_bg_type = '' ) {
		$row_class = 'wpps-' . str_replace( '_', '-', $prefix ) . '-';
		$show = function( $type ) use ( $current_bg_type ) {
			return ( $current_bg_type === $type ) ? '' : ' style="display: none !important;"';
		};
		$color    = isset( $vars['bg_color'] ) ? (string) $vars['bg_color'] : '#f0f0f1';
		$img      = isset( $vars['bg_image'] ) ? (string) $vars['bg_image'] : '';
		$img_ov_c = isset( $vars['image_overlay_color'] ) ? (string) $vars['image_overlay_color'] : '#000000';
		$img_ov_o = isset( $vars['image_overlay_opacity'] ) ? (string) $vars['image_overlay_opacity'] : '0';
		$img_pos  = isset( $vars['image_position'] ) ? (string) $vars['image_position'] : 'center center';
		$img_size = isset( $vars['image_size'] ) ? (string) $vars['image_size'] : 'cover';
		$img_rep  = isset( $vars['image_repeat'] ) ? (string) $vars['image_repeat'] : 'no-repeat';
		$vid      = isset( $vars['bg_video'] ) ? (string) $vars['bg_video'] : '';
		$vid_ov_c = isset( $vars['video_overlay_color'] ) ? (string) $vars['video_overlay_color'] : '#000000';
		$vid_ov_o = isset( $vars['video_overlay_opacity'] ) ? (string) $vars['video_overlay_opacity'] : '0';
		$g_type   = isset( $vars['gradient_type'] ) ? (string) $vars['gradient_type'] : 'linear';
		$g_angle  = isset( $vars['gradient_angle'] ) ? (string) $vars['gradient_angle'] : '135';
		$g_c1     = isset( $vars['gradient_color1'] ) ? (string) $vars['gradient_color1'] : '#f0f0f1';
		$g_p1     = isset( $vars['gradient_pos1'] ) ? (string) $vars['gradient_pos1'] : '0';
		$g_c2     = isset( $vars['gradient_color2'] ) ? (string) $vars['gradient_color2'] : '#e0e0e0';
		$g_p2     = isset( $vars['gradient_pos2'] ) ? (string) $vars['gradient_pos2'] : '100';
		$input_id = $module_id . '_' . str_replace( '_', '_', $prefix ) . '_image';
		$upload_btn_id = $module_id . '_upload_' . $prefix . '_image';
		?>
		<tr class="<?php echo esc_attr( $row_class ); ?>color-row" data-wpps-bg-type="color"<?php echo $show( 'color' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_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 . '_' . $prefix . '_color' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_color" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $color ) ? ( strlen( $color ) > 7 ? substr( $color, 0, 7 ) : $color ) : '#f0f0f1' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_color" />
					<div class="wpps-color-code-wrap">
						<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $prefix . '_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})$/', $color ) ? $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="<?php echo esc_attr( $row_class ); ?>gradient-row" data-wpps-bg-type="gradient"<?php echo $show( 'gradient' ); ?>>
			<th scope="row"><?php esc_html_e( 'Gradient', 'wp-powersuite' ); ?></th>
			<td>
				<div class="wpps-gradient-editor" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_gradient_editor' ); ?>">
					<div class="wpps-gradient-type-angle-row">
						<label><?php esc_html_e( 'Gradient Type', 'wp-powersuite' ); ?></label>
						<select name="<?php echo esc_attr( $prefix ); ?>_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_type">
							<option value="linear" <?php selected( $g_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
							<option value="radial" <?php selected( $g_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
						</select>
						<span class="wpps-gradient-angle-inline">
							<label><?php esc_html_e( 'Angle', 'wp-powersuite' ); ?></label>
							<input type="number" name="<?php echo esc_attr( $prefix ); ?>_gradient_angle" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_angle" min="0" max="360" value="<?php echo esc_attr( $g_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="<?php echo esc_attr( $prefix ); ?>_gradient_color1" value="<?php echo esc_attr( $g_c1 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color1 wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_color1" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $prefix ); ?>_gradient_color1" class="wpps-gradient-hex1 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_color1" data-color-input="<?php echo esc_attr( $module_id . '_' . $prefix . '_gradient_color1' ); ?>" data-default-color="#f0f0f1" value="<?php echo esc_attr( $g_c1 ); ?>" 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="<?php echo esc_attr( $prefix ); ?>_gradient_pos1" class="wp-powersuite-advanced-setting wpps-gradient-pos1 small-text" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_pos1" min="0" max="100" value="<?php echo esc_attr( $g_p1 ); ?>" /> %
					</div>
					<div class="wpps-gradient-color-row">
						<label><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
						<input type="color" name="<?php echo esc_attr( $prefix ); ?>_gradient_color2" value="<?php echo esc_attr( $g_c2 ); ?>" class="wp-powersuite-advanced-setting wpps-gradient-color2 wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_color2" />
						<div class="wpps-gradient-color-wrap">
							<input type="text" name="<?php echo esc_attr( $prefix ); ?>_gradient_color2" class="wpps-gradient-hex2 wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_color2" data-color-input="<?php echo esc_attr( $module_id . '_' . $prefix . '_gradient_color2' ); ?>" data-default-color="#e0e0e0" value="<?php echo esc_attr( $g_c2 ); ?>" 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="<?php echo esc_attr( $prefix ); ?>_gradient_pos2" class="wp-powersuite-advanced-setting wpps-gradient-pos2 small-text" data-setting-key="<?php echo esc_attr( $prefix ); ?>_gradient_pos2" min="0" max="100" value="<?php echo esc_attr( $g_p2 ); ?>" /> %
					</div>
				</div>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_image' ); ?>"><?php esc_html_e( 'Background Image', 'wp-powersuite' ); ?></label></th>
			<td>
				<input type="url" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_image" class="wp-powersuite-advanced-setting regular-text" data-setting-key="<?php echo esc_attr( $prefix ); ?>_image" value="<?php echo esc_url( $img ); ?>" placeholder="https://" />
				<button type="button" class="button wpps-split-bg-image-upload" id="<?php echo esc_attr( $upload_btn_id ); ?>" data-input-id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image' ); ?>"><?php esc_html_e( 'Select Image', 'wp-powersuite' ); ?></button>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_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 . '_' . $prefix . '_image_overlay_color' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_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})$/', $img_ov_c ) ? ( strlen( $img_ov_c ) > 7 ? substr( $img_ov_c, 0, 7 ) : $img_ov_c ) : '#000000' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_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="<?php echo esc_attr( $prefix ); ?>_image_overlay_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $prefix . '_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})$/', $img_ov_c ) ? $img_ov_c : '#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="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_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( $img_ov_o ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
					<input type="number" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_overlay_opacity' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_image_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="<?php echo esc_attr( $prefix ); ?>_image_overlay_opacity" value="<?php echo esc_attr( $img_ov_o ); ?>" min="0" max="100" step="1" />
					<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="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_position' ); ?>"><?php esc_html_e( 'Position', 'wp-powersuite' ); ?></label></th>
			<td>
				<select id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_position' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_image_position" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_image_position">
					<option value="left top" <?php selected( $img_pos, 'left top' ); ?>><?php esc_html_e( 'Left Top', 'wp-powersuite' ); ?></option>
					<option value="center top" <?php selected( $img_pos, 'center top' ); ?>><?php esc_html_e( 'Center Top', 'wp-powersuite' ); ?></option>
					<option value="right top" <?php selected( $img_pos, 'right top' ); ?>><?php esc_html_e( 'Right Top', 'wp-powersuite' ); ?></option>
					<option value="left center" <?php selected( $img_pos, 'left center' ); ?>><?php esc_html_e( 'Left Center', 'wp-powersuite' ); ?></option>
					<option value="center center" <?php selected( $img_pos, 'center center' ); ?>><?php esc_html_e( 'Center Center', 'wp-powersuite' ); ?></option>
					<option value="right center" <?php selected( $img_pos, 'right center' ); ?>><?php esc_html_e( 'Right Center', 'wp-powersuite' ); ?></option>
					<option value="left bottom" <?php selected( $img_pos, 'left bottom' ); ?>><?php esc_html_e( 'Left Bottom', 'wp-powersuite' ); ?></option>
					<option value="center bottom" <?php selected( $img_pos, 'center bottom' ); ?>><?php esc_html_e( 'Center Bottom', 'wp-powersuite' ); ?></option>
					<option value="right bottom" <?php selected( $img_pos, 'right bottom' ); ?>><?php esc_html_e( 'Right Bottom', 'wp-powersuite' ); ?></option>
				</select>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_size' ); ?>"><?php esc_html_e( 'Display Size', 'wp-powersuite' ); ?></label></th>
			<td>
				<select id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_size' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_image_size" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_image_size">
					<option value="auto" <?php selected( $img_size, 'auto' ); ?>><?php esc_html_e( 'Auto', 'wp-powersuite' ); ?></option>
					<option value="cover" <?php selected( $img_size, 'cover' ); ?>><?php esc_html_e( 'Cover', 'wp-powersuite' ); ?></option>
					<option value="contain" <?php selected( $img_size, 'contain' ); ?>><?php esc_html_e( 'Contain', 'wp-powersuite' ); ?></option>
				</select>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class ); ?>image-row" data-wpps-bg-type="image"<?php echo $show( 'image' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_repeat' ); ?>"><?php esc_html_e( 'Repeat', 'wp-powersuite' ); ?></label></th>
			<td>
				<select id="<?php echo esc_attr( $module_id . '_' . $prefix . '_image_repeat' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_image_repeat" class="wp-powersuite-advanced-setting" data-setting-key="<?php echo esc_attr( $prefix ); ?>_image_repeat">
					<option value="repeat" <?php selected( $img_rep, 'repeat' ); ?>><?php esc_html_e( 'Repeat', 'wp-powersuite' ); ?></option>
					<option value="no-repeat" <?php selected( $img_rep, 'no-repeat' ); ?>><?php esc_html_e( 'No Repeat', 'wp-powersuite' ); ?></option>
					<option value="repeat-x" <?php selected( $img_rep, 'repeat-x' ); ?>><?php esc_html_e( 'Repeat X', 'wp-powersuite' ); ?></option>
					<option value="repeat-y" <?php selected( $img_rep, 'repeat-y' ); ?>><?php esc_html_e( 'Repeat Y', 'wp-powersuite' ); ?></option>
				</select>
			</td>
		</tr>
		<tr class="<?php echo esc_attr( $row_class ); ?>video-row" data-wpps-bg-type="video"<?php echo $show( 'video' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_video' ); ?>"><?php esc_html_e( 'Background Video URL', 'wp-powersuite' ); ?></label></th>
			<td>
				<input type="url" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_video' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_video" class="wp-powersuite-advanced-setting regular-text" data-setting-key="<?php echo esc_attr( $prefix ); ?>_video" value="<?php echo esc_url( $vid ); ?>" 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="<?php echo esc_attr( $row_class ); ?>video-row" data-wpps-bg-type="video"<?php echo $show( 'video' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_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 . '_' . $prefix . '_video_overlay_color' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_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})$/', $vid_ov_c ) ? ( strlen( $vid_ov_c ) > 7 ? substr( $vid_ov_c, 0, 7 ) : $vid_ov_c ) : '#000000' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="<?php echo esc_attr( $prefix ); ?>_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="<?php echo esc_attr( $prefix ); ?>_video_overlay_color" data-color-input="<?php echo esc_attr( $module_id . '_' . $prefix . '_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})$/', $vid_ov_c ) ? $vid_ov_c : '#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="<?php echo esc_attr( $row_class ); ?>video-row" data-wpps-bg-type="video"<?php echo $show( 'video' ); ?>>
			<th scope="row"><label for="<?php echo esc_attr( $module_id . '_' . $prefix . '_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( $vid_ov_o ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
					<input type="number" id="<?php echo esc_attr( $module_id . '_' . $prefix . '_video_overlay_opacity' ); ?>" name="<?php echo esc_attr( $prefix ); ?>_video_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="<?php echo esc_attr( $prefix ); ?>_video_overlay_opacity" value="<?php echo esc_attr( $vid_ov_o ); ?>" min="0" max="100" step="1" />
					<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>
		<?php
	}

	/**
	 * Accordion section open (Code Snippets pattern).
	 */
	public static function accordionOpen( string $id, string $title, string $tooltip_text, bool $is_open = false ): void {
		$body_id   = 'wpps-lpc-accordion-' . $id;
		$open_cls  = $is_open ? ' is-open' : '';
		$expanded  = $is_open ? 'true' : 'false';
		?>
		<div class="wpps-lpc-accordion<?php echo esc_attr( $open_cls ); ?>" data-accordion-id="<?php echo esc_attr( $id ); ?>">
			<button type="button" class="wpps-lpc-accordion-header" aria-expanded="<?php echo esc_attr( $expanded ); ?>" aria-controls="<?php echo esc_attr( $body_id ); ?>">
				<span class="wpps-lpc-accordion-title">
					<?php echo esc_html( $title ); ?>
					<span class="wpps-lpc-accordion-tooltip" aria-label="<?php esc_attr_e( 'Help', 'wp-powersuite' ); ?>">
						<span class="wpps-lpc-accordion-tooltip-trigger">?</span>
						<span class="wpps-lpc-accordion-tooltip-panel"><?php echo esc_html( $tooltip_text ); ?></span>
					</span>
				</span>
				<span class="dashicons dashicons-arrow-down-alt2 wpps-lpc-accordion-chevron" aria-hidden="true"></span>
			</button>
			<div id="<?php echo esc_attr( $body_id ); ?>" class="wpps-lpc-accordion-body">
		<?php
	}

	/** Accordion section close. */
	public static function accordionClose(): void {
		?>
			</div>
		</div>
		<?php
	}

	/**
	 * Restore + Save actions for the LPC full-page editor (top or bottom bar).
	 *
	 * @param string $module_id Module id.
	 * @param string $modifier  Optional BEM modifier class e.g. 'wpps-lpc-actions-wrapper--bottom'.
	 */
	public static function renderLpcPageActionsBar( string $module_id, string $modifier = '' ): void {
		$wrapper_class = 'wpps-lpc-actions-wrapper';
		if ( $modifier !== '' ) {
			$wrapper_class .= ' ' . $modifier;
		}
		?>
		<div class="<?php echo esc_attr( $wrapper_class ); ?>">
			<div class="wpps-lpc-actions">
				<button type="button" class="button wpps-restore-lpc">
					<?php esc_html_e( 'Restore Defaults', 'wp-powersuite' ); ?>
				</button>
				<button type="button" class="button button-primary wp-powersuite-custom-page-save wpps-save-lpc" data-module-id="<?php echo esc_attr( $module_id ); ?>">
					<?php esc_html_e( 'Save Changes', 'wp-powersuite' ); ?>
				</button>
			</div>
		</div>
		<?php
	}

	/**
	 * Subsection heading inside LPC form tables (split column panels, etc.).
	 *
	 * @param string $title Section title.
	 * @param string $desc  Optional short description.
	 */
	public static function renderLpcSubsectionHead( string $title, string $desc = '' ): void {
		?>
		<tr class="wpps-lpc-subsection-head">
			<td colspan="2">
				<div class="wpps-lpc-subsection">
					<h4 class="wpps-lpc-subsection__title"><?php echo esc_html( $title ); ?></h4>
					<?php if ( $desc !== '' ) : ?>
						<p class="wpps-lpc-subsection__desc"><?php echo esc_html( $desc ); ?></p>
					<?php endif; ?>
				</div>
			</td>
		</tr>
		<?php
	}
}
