<?php
/**
 * CSS generator.
 *
 * @package LoginPageCustomizerAndDesigner
 */

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

/**
 * Class LPCD_Css_Generator
 *
 * Converts template block settings and page settings into CSS.
 */
class LPCD_Css_Generator {

	/**
	 * Box-shadow presets.
	 *
	 * @var array
	 */
	private static $shadow_map = array(
		'none'   => 'none',
		'soft'   => '0 2px 8px rgba(0,0,0,0.08)',
		'medium' => '0 4px 16px rgba(0,0,0,0.12)',
		'strong' => '0 8px 32px rgba(0,0,0,0.18)',
	);

	/**
	 * Animation duration mapping.
	 *
	 * @var array
	 */
	private static $anim_dur_map = array(
		'fast'   => '0.3s',
		'normal' => '0.6s',
		'slow'   => '1s',
	);

	/**
	 * Generate all CSS for a parsed template.
	 *
	 * @param array  $template_data Parsed template data (pageSettings + blocks).
	 * @param string $category      Template category (e.g. 'animated', 'advanced').
	 * @return string Full CSS string.
	 */
	public static function generate( $template_data, $category = '' ) {
		$page    = isset( $template_data['pageSettings'] ) ? $template_data['pageSettings'] : array();
		$blocks  = isset( $template_data['blocks'] ) ? $template_data['blocks'] : array();
		$css     = '';

		// Find the login form block and its order.
		$form_settings = array();
		$form_order    = 10; // Default high order so it appears at bottom if no blocks are set.
		foreach ( $blocks as $block ) {
			if ( 'loginForm' === $block['type'] ) {
				$form_settings = isset( $block['settings'] ) ? $block['settings'] : array();
				$form_order    = isset( $block['order'] ) ? absint( $block['order'] ) : 10;
				break;
			}
		}

		$is_advanced = ( 'advanced' === $category );

		$css .= self::generate_custom_properties( $page, $form_settings );
		$css .= self::generate_body_styles( $page );

		// Advanced templates have dedicated CSS files for form styling.
		// Skip generated form/field/button/link styles to avoid conflicts.
		if ( ! $is_advanced ) {
			$css .= self::generate_form_styles( $form_settings, $form_order );
			$css .= self::generate_field_styles( $form_settings );
			$css .= self::generate_button_styles( $form_settings );
			$css .= self::generate_link_styles( $form_settings );
		}

		$css .= self::generate_message_styles( $form_settings );
		$css .= self::generate_block_styles( $blocks );
		$css .= self::generate_form_animation_styles( $form_settings );

		// Mobile responsive styles.
		$css .= self::generate_mobile_styles( $page );

		// Custom CSS.
		if ( ! empty( $page['customCss'] ) ) {
			$css .= "\n/* Custom CSS */\n" . $page['customCss'];
		}

		return $css;
	}

	/**
	 * Generate CSS custom properties block.
	 *
	 * @param array $page Page settings.
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_custom_properties( $page, $form ) {
		$bg = self::resolve_background_value( $page );

		$form_bg      = isset( $form['formBackground'] ) ? $form['formBackground'] : '#ffffff';
		$form_radius  = isset( $form['formBorderRadius'] ) ? absint( $form['formBorderRadius'] ) : 4;
		$form_padding = isset( $form['formPadding'] ) ? absint( $form['formPadding'] ) : 26;
		$form_width   = isset( $form['formWidth'] ) ? absint( $form['formWidth'] ) : 360;
		$form_shadow  = isset( $form['formBoxShadow'] ) && isset( self::$shadow_map[ $form['formBoxShadow'] ] )
			? self::$shadow_map[ $form['formBoxShadow'] ]
			: 'none';

		// Custom shadow.
		if ( 'custom' === ( isset( $form['formBoxShadow'] ) ? $form['formBoxShadow'] : '' ) ) {
			$sx      = isset( $form['shadowX'] ) ? intval( $form['shadowX'] ) : 0;
			$sy      = isset( $form['shadowY'] ) ? intval( $form['shadowY'] ) : 20;
			$sblur   = isset( $form['shadowBlur'] ) ? absint( $form['shadowBlur'] ) : 40;
			$sspread = isset( $form['shadowSpread'] ) ? intval( $form['shadowSpread'] ) : 0;
			$scolor  = isset( $form['shadowColor'] ) ? sanitize_text_field( $form['shadowColor'] ) : 'rgba(0,0,0,0.15)';
			$sinset  = ! empty( $form['shadowInset'] ) ? 'inset ' : '';
			$form_shadow = $sinset . $sx . 'px ' . $sy . 'px ' . $sblur . 'px ' . $sspread . 'px ' . $scolor;
		}

		$field_bg     = isset( $form['usernameBackgroundColor'] ) ? $form['usernameBackgroundColor'] : '#f9f9f9';
		$field_border = isset( $form['usernameBorderColor'] ) ? $form['usernameBorderColor'] : '#e0e0e0';
		$field_radius = isset( $form['usernameBorderRadius'] ) ? absint( $form['usernameBorderRadius'] ) : 4;
		$field_text   = isset( $form['usernameTextColor'] ) ? $form['usernameTextColor'] : '#333333';
		$field_height = isset( $form['usernameHeight'] ) ? absint( $form['usernameHeight'] ) : 44;
		$field_size   = isset( $form['usernameFontSize'] ) ? absint( $form['usernameFontSize'] ) : 15;

		$label_color    = isset( $form['labelColor'] ) ? $form['labelColor'] : ( isset( $form['usernameTextColor'] ) ? $form['usernameTextColor'] : '#1e293b' );
		$remember_color = isset( $form['rememberMeColor'] ) ? $form['rememberMeColor'] : ( isset( $form['usernameTextColor'] ) ? $form['usernameTextColor'] : '#50575e' );

		$btn_bg       = isset( $form['submitBackgroundColor'] ) ? $form['submitBackgroundColor'] : '#2271b1';
		$btn_text     = isset( $form['submitTextColor'] ) ? $form['submitTextColor'] : '#ffffff';
		$btn_hover    = isset( $form['submitHoverBackgroundColor'] ) ? $form['submitHoverBackgroundColor'] : '#135e96';
		$btn_radius   = isset( $form['submitBorderRadius'] ) ? absint( $form['submitBorderRadius'] ) : 4;
		$btn_height   = isset( $form['submitHeight'] ) ? absint( $form['submitHeight'] ) : 44;
		$btn_size     = isset( $form['submitFontSize'] ) ? absint( $form['submitFontSize'] ) : 16;
		$btn_weight   = isset( $form['submitFontWeight'] ) ? $form['submitFontWeight'] : '600';

		$anim_type = isset( $page['pageAnimation']['type'] ) ? $page['pageAnimation']['type'] : 'none';
		$anim_dur  = isset( $page['pageAnimation']['duration'] ) ? absint( $page['pageAnimation']['duration'] ) : 600;
		$anim_sec  = $anim_dur / 1000;

		$css  = ":root {\n";
		$css .= "    --lpcd-bg: " . esc_attr( $bg ) . ";\n";
		$css .= "    --lpcd-form-bg: " . esc_attr( $form_bg ) . ";\n";
		$css .= "    --lpcd-form-radius: " . esc_attr( $form_radius ) . "px;\n";
		$css .= "    --lpcd-form-padding: " . esc_attr( $form_padding ) . "px;\n";
		$css .= "    --lpcd-form-width: " . esc_attr( $form_width ) . "px;\n";
		$css .= "    --lpcd-form-margin-top: " . esc_attr( isset( $form['marginTop'] ) ? absint( $form['marginTop'] ) : 0 ) . "px;\n";
		$css .= "    --lpcd-form-margin-bottom: " . esc_attr( isset( $form['marginBottom'] ) ? absint( $form['marginBottom'] ) : 20 ) . "px;\n";
		$css .= "    --lpcd-form-shadow: " . esc_attr( $form_shadow ) . ";\n";
		$css .= "    --lpcd-field-bg: " . esc_attr( $field_bg ) . ";\n";
		$css .= "    --lpcd-field-border: " . esc_attr( $field_border ) . ";\n";
		$css .= "    --lpcd-field-radius: " . esc_attr( $field_radius ) . "px;\n";
		$css .= "    --lpcd-field-text: " . esc_attr( $field_text ) . ";\n";
		$css .= "    --lpcd-field-height: " . esc_attr( $field_height ) . "px;\n";
		$css .= "    --lpcd-field-size: " . esc_attr( $field_size ) . "px;\n";
		$css .= "    --lpcd-label-color: " . esc_attr( $label_color ) . ";\n";
		$css .= "    --lpcd-remember-color: " . esc_attr( $remember_color ) . ";\n";
		$css .= "    --lpcd-btn-bg: " . esc_attr( $btn_bg ) . ";\n";
		$css .= "    --lpcd-btn-text: " . esc_attr( $btn_text ) . ";\n";
		$css .= "    --lpcd-btn-hover-bg: " . esc_attr( $btn_hover ) . ";\n";
		$css .= "    --lpcd-btn-radius: " . esc_attr( $btn_radius ) . "px;\n";
		$css .= "    --lpcd-btn-height: " . esc_attr( $btn_height ) . "px;\n";
		$css .= "    --lpcd-btn-size: " . esc_attr( $btn_size ) . "px;\n";
		$css .= "    --lpcd-btn-weight: " . esc_attr( $btn_weight ) . ";\n";
		$css .= "    --lpcd-anim-dur: " . esc_attr( $anim_sec ) . "s;\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Resolve background value from page settings.
	 *
	 * @param array $page Page settings.
	 * @return string CSS background value.
	 */
	private static function resolve_background_value( $page ) {
		$type = isset( $page['backgroundType'] ) ? $page['backgroundType'] : 'color';

		switch ( $type ) {
			case 'gradient':
				$c1    = isset( $page['backgroundGradient']['color1'] ) ? $page['backgroundGradient']['color1'] : '#667eea';
				$c2    = isset( $page['backgroundGradient']['color2'] ) ? $page['backgroundGradient']['color2'] : '#764ba2';
				$angle = isset( $page['backgroundGradient']['angle'] ) ? absint( $page['backgroundGradient']['angle'] ) : 135;
				return 'linear-gradient(' . $angle . 'deg, ' . $c1 . ', ' . $c2 . ')';

			case 'image':
				$url = isset( $page['backgroundImage'] ) ? $page['backgroundImage'] : '';
				if ( ! empty( $url ) ) {
					$pos  = isset( $page['backgroundPosition'] ) ? $page['backgroundPosition'] : 'center';
					$size = isset( $page['backgroundSize'] ) ? $page['backgroundSize'] : 'cover';
					return $url . '|' . $pos . '|' . $size; // Special token parsed in body styles.
				}
				return '#f0f0f1';

			case 'video':
				return '#0a0a0a';

			default:
				return isset( $page['backgroundColor'] ) ? $page['backgroundColor'] : '#f0f0f1';
		}
	}

	/**
	 * Generate body styles.
	 *
	 * @param array $page Page settings.
	 * @return string CSS string.
	 */
	private static function generate_body_styles( $page ) {
		$type = isset( $page['backgroundType'] ) ? $page['backgroundType'] : 'color';
		$css  = '';

		if ( 'image' === $type && ! empty( $page['backgroundImage'] ) ) {
			$url  = esc_url( $page['backgroundImage'] );
			$pos  = isset( $page['backgroundPosition'] ) ? esc_attr( $page['backgroundPosition'] ) : 'center';
			$size = isset( $page['backgroundSize'] ) ? esc_attr( $page['backgroundSize'] ) : 'cover';

			$css .= "body.login {\n";
			$css .= "    background-image: url('" . $url . "');\n";
			$css .= "    background-position: " . $pos . ";\n";
			$css .= "    background-size: " . $size . ";\n";
			$css .= "    background-repeat: no-repeat;\n";
			$css .= "    position: relative;\n";
			$css .= "}\n";

			// Overlay.
			$overlay_enabled = isset( $page['overlayEnabled'] ) ? $page['overlayEnabled'] : false;
			if ( $overlay_enabled ) {
				$o_color   = isset( $page['overlayColor'] ) ? esc_attr( $page['overlayColor'] ) : '#000000';
				$o_opacity = isset( $page['overlayOpacity'] ) ? floatval( $page['overlayOpacity'] ) : 0.4;

				$css .= "body.login::before {\n";
				$css .= "    content: '';\n";
				$css .= "    position: fixed;\n";
				$css .= "    top: 0; left: 0; right: 0; bottom: 0;\n";
				$css .= "    background: " . $o_color . ";\n";
				$css .= "    opacity: " . esc_attr( $o_opacity ) . ";\n";
				$css .= "    z-index: 0;\n";
				$css .= "    pointer-events: none;\n";
				$css .= "}\n";
				$css .= "body.login #login { position: relative; z-index: 1; }\n";
			}
		} elseif ( 'animated-gradient' === $type ) {
			$ag     = isset( $page['animatedGradient'] ) && is_array( $page['animatedGradient'] ) ? $page['animatedGradient'] : array();
			$colors = isset( $ag['colors'] ) && is_array( $ag['colors'] ) ? $ag['colors'] : array( '#667eea', '#764ba2' );
			$angle  = isset( $ag['angle'] ) ? absint( $ag['angle'] ) : 135;
			$speed  = isset( $ag['speed'] ) ? absint( $ag['speed'] ) : 8;

			// Append first color for seamless loop.
			$loop_colors = $colors;
			$loop_colors[] = $colors[0];
			$color_str = implode( ', ', array_map( 'esc_attr', $loop_colors ) );

			$css .= "@keyframes lpcd-gradient-shift {\n";
			$css .= "    0%   { background-position: 0% 50%; }\n";
			$css .= "    50%  { background-position: 100% 50%; }\n";
			$css .= "    100% { background-position: 0% 50%; }\n";
			$css .= "}\n";
			$css .= "body.login {\n";
			$css .= "    background: linear-gradient(" . esc_attr( $angle ) . "deg, " . $color_str . ");\n";
			$css .= "    background-size: 300% 300%;\n";
			$css .= "    animation: lpcd-gradient-shift " . esc_attr( $speed ) . "s ease infinite;\n";
			$css .= "    display: flex;\n";
			$css .= "    flex-direction: column;\n";
			$css .= "    justify-content: center;\n";
			$css .= "    align-items: center;\n";
			$css .= "    min-height: 100vh;\n";
			$css .= "    padding: 2rem 0;\n";
			$css .= "}\n";
		} else {
			$css .= "body.login {\n";
			$css .= "    background: var(--lpcd-bg);\n";
			$css .= "    display: flex;\n";
			$css .= "    flex-direction: column;\n";
			$css .= "    justify-content: center;\n";
			$css .= "    align-items: center;\n";
			$css .= "    min-height: 100vh;\n";
			$css .= "    padding: 2rem 0;\n";
			$css .= "}\n";
		}
		// Split layout handling.
		$layout_type = isset( $page['layoutType'] ) ? $page['layoutType'] : 'centered';
		if ( 'split_left' === $layout_type || 'split_right' === $layout_type ) {
			$split_align = isset( $page['splitAlignment'] ) ? $page['splitAlignment'] : 'center'; // flex-start, center, flex-end, stretch
			$split_width = isset( $page['splitFormWidth'] ) ? absint( $page['splitFormWidth'] ) : 40;
			$bp_width    = 100 - $split_width;

			$grid_cols = 'split_left' === $layout_type ? "{$bp_width}% {$split_width}%" : "{$split_width}% {$bp_width}%";
			
			$align_items = $split_align;
			if ( 'flex-start' === $align_items ) {
				$align_items = 'start';
			} elseif ( 'flex-end' === $align_items ) {
				$align_items = 'end';
			}

			$css .= "body.login {\n";
			$css .= "    display: grid;\n";
			$css .= "    grid-template-columns: {$grid_cols};\n";
			$css .= "    min-height: 100vh;\n";
			$css .= "    padding: 0 !important;\n";
			$css .= "    align-items: {$align_items};\n";
			$css .= "}\n";

			$form_col = 'split_left' === $layout_type ? '2' : '1';
			$css .= "body.login div#login {\n";
			$css .= "    grid-column: {$form_col};\n";
			$css .= "    grid-row: 1;\n";
			$css .= "    margin: auto !important;\n"; // Centered inside tracks
			$css .= "    justify-self: center;\n";
			
			if ( 'stretch' === $split_align ) {
				$css .= "    height: 100%;\n";
				$css .= "    border-radius: 0 !important;\n";
				$css .= "    display: flex;\n";
				$css .= "    flex-direction: column;\n";
				$css .= "    justify-content: center;\n";
			}
			$css .= "}\n";

			// Branding panel.
			$bp          = isset( $page['brandingPanel'] ) && is_array( $page['brandingPanel'] ) ? $page['brandingPanel'] : array();
			$bp_bg_type  = isset( $bp['backgroundType'] ) ? $bp['backgroundType'] : 'color';
			$bp_bg_color = isset( $bp['backgroundColor'] ) ? esc_attr( $bp['backgroundColor'] ) : '#1a1a2e';
			$bp_text     = isset( $bp['textColor'] ) ? esc_attr( $bp['textColor'] ) : '#ffffff';
			$bp_v_align  = isset( $bp['verticalAlign'] ) ? esc_attr( $bp['verticalAlign'] ) : 'center';
			$bp_order    = 'split_left' === $layout_type ? '1' : '2';

			$css .= ".lpcd-branding-panel {\n";
			$css .= "    grid-column: {$bp_order};\n";
			$css .= "    grid-row: 1;\n";
			$css .= "    width: 100%;\n";
			$css .= "    height: 100%;\n";
			$css .= "    display: flex;\n";
			$css .= "    flex-direction: column;\n";
			$css .= "    justify-content: {$bp_v_align};\n";
			$css .= "    align-items: center;\n";
			$css .= "    padding: 3rem;\n";
			$css .= "    color: {$bp_text};\n";
			$css .= "    text-align: center;\n";
			$css .= "    box-sizing: border-box;\n";
			$css .= "    position: relative;\n";
			$css .= "    overflow: hidden;\n";

			if ( 'image' === $bp_bg_type && ! empty( $bp['backgroundImage'] ) ) {
				$bp_img_url = esc_url( $bp['backgroundImage'] );
				$bp_img_pos = isset( $bp['backgroundPosition'] ) ? esc_attr( $bp['backgroundPosition'] ) : 'center';
				$bp_img_sz  = isset( $bp['backgroundSize'] ) ? esc_attr( $bp['backgroundSize'] ) : 'cover';
				$css .= "    background-image: url('{$bp_img_url}');\n";
				$css .= "    background-size: {$bp_img_sz};\n";
				$css .= "    background-position: {$bp_img_pos};\n";
				$css .= "    background-repeat: no-repeat;\n";
			} elseif ( 'gradient' === $bp_bg_type ) {
				$gc1   = isset( $bp['gradientColor1'] ) ? esc_attr( $bp['gradientColor1'] ) : '#1a1a2e';
				$gc2   = isset( $bp['gradientColor2'] ) ? esc_attr( $bp['gradientColor2'] ) : '#16213e';
				$gangle = isset( $bp['gradientAngle'] ) ? absint( $bp['gradientAngle'] ) : 135;
				$css .= "    background: linear-gradient({$gangle}deg, {$gc1}, {$gc2});\n";
			} else {
				$css .= "    background: {$bp_bg_color};\n";
			}

			$css .= "}\n";

			// Branding panel inner content.
			$css .= ".lpcd-branding-panel .lpcd-branding-content {\n";
			$css .= "    max-width: 400px;\n";
			$css .= "    width: 100%;\n";
			$css .= "}\n";

			// Branding panel text elements inherit color.
			$css .= ".lpcd-branding-panel .lpcd-block-heading,\n";
			$css .= ".lpcd-branding-panel .lpcd-block-text {\n";
			$css .= "    color: inherit;\n";
			$css .= "}\n";

			// Branding panel logo styling.
			$css .= ".lpcd-branding-panel .lpcd-block-logo img {\n";
			$css .= "    max-width: 120px;\n";
			$css .= "    height: auto;\n";
			$css .= "}\n";

			// Branding panel divider.
			$css .= ".lpcd-branding-panel .lpcd-block-divider hr {\n";
			$css .= "    border-color: rgba(255,255,255,0.3);\n";
			$css .= "    max-width: 60px;\n";
			$css .= "    margin: 1rem auto;\n";
			$css .= "}\n";

			// Hide the WP default .login h1 (logo) in split mode since blocks handle it.
			$css .= "body.login.lpcd-active h1 a {\n";
			$css .= "    display: none;\n";
			$css .= "}\n";
		}

		return $css;
	}

	/**
	 * Generate form container styles.
	 *
	 * @param array $form Form block settings.
	 * @param int   $form_order The order the form block sits at.
	 * @return string CSS string.
	 */
	private static function generate_form_styles( $form, $form_order = 10 ) {
		$css  = "body.login div#login {\n";
		$css .= "    width: var(--lpcd-form-width);\n";
		$css .= "    max-width: 100%;\n";
		$css .= "    margin: 0 !important;\n"; // Body flex centering handles alignment now.
		$css .= "    display: flex;\n";
		$css .= "    flex-direction: column;\n";
		$css .= "    align-items: center;\n";
		$css .= "    padding: 0 !important;\n";
		$css .= "}\n";

		// Hide WP default logo and language switcher so our blocks take full control.
		$css .= "body.login #login h1 a { display: none !important; }\n";
		$css .= "body.login #login .language-switcher { display: none !important; }\n";

		// Order internal WP elements dynamically.
		$css .= "body.login #login_error { order: -2; width: 100%; box-sizing: border-box; }\n";
		$css .= "body.login .message { order: -1; width: 100%; box-sizing: border-box; }\n";
		$css .= "body.login #loginform { order: {$form_order}; width: 100%; box-sizing: border-box; }\n";
		$css .= "body.login #lostpasswordform { order: {$form_order}; width: 100%; box-sizing: border-box; }\n";
		$css .= "body.login #registerform { order: {$form_order}; width: 100%; box-sizing: border-box; }\n";
		$css .= "body.login #nav { order: 99; width: 100%; text-align: center; margin: 16px 0 0 0 !important; padding: 0 !important; }\n";
		$css .= "body.login #backtoblog { order: 100; width: 100%; text-align: center; margin: 8px 0 0 0 !important; padding: 0 !important; }\n";

		// Remove default WP login form background/shadow.
		$css .= "body.login #loginform,\n";
		$css .= "body.login #lostpasswordform,\n";
		$css .= "body.login #registerform {\n";
		$css .= "    background: var(--lpcd-form-bg);\n";
		$css .= "    border-radius: var(--lpcd-form-radius);\n";
		$css .= "    padding: var(--lpcd-form-padding) !important;\n";
		$css .= "    box-shadow: var(--lpcd-form-shadow);\n";
		$css .= "    margin-top: var(--lpcd-form-margin-top) !important;\n";
		$css .= "    margin-bottom: var(--lpcd-form-margin-bottom) !important;\n";
		$css .= "    margin-left: auto !important;\n";
		$css .= "    margin-right: auto !important;\n";
		$css .= "    display: flex;\n";
		$css .= "    flex-direction: column;\n";
		$css .= "    width: var(--lpcd-form-width);\n";
		$css .= "    max-width: 100%;\n";

		// Form border.
		$border_enabled = isset( $form['formBorderEnabled'] ) ? $form['formBorderEnabled'] : false;
		if ( $border_enabled ) {
			$b_color = isset( $form['formBorderColor'] ) ? esc_attr( $form['formBorderColor'] ) : '#e0e0e0';
			$b_width = isset( $form['formBorderWidth'] ) ? absint( $form['formBorderWidth'] ) : 1;
			$css    .= "    border: " . $b_width . "px solid " . $b_color . ";\n";
		} else {
			$css    .= "    border: none;\n";
		}

		$css .= "}\n";

		// Normalize paragraph and wrapper spacing to match the React editor exactly.
		$css .= "body.login #loginform p,\n";
		$css .= "body.login #loginform .user-pass-wrap,\n";
		$css .= "body.login #registerform p {\n";
		$css .= "    margin-bottom: 20px;\n";
		$css .= "    padding: 0;\n";
		$css .= "}\n";

		$css .= "body.login #loginform label,\n";
		$css .= "body.login #registerform label {\n";
		$css .= "    display: block;\n";
		$css .= "    margin-bottom: 4px;\n";
		$css .= "    font-size: 13px;\n";
		$css .= "    font-weight: 600;\n";
		$css .= "    color: var(--lpcd-label-color);\n";
		$css .= "}\n";

		// Remember me block tightly below the password.
		$css .= "body.login #loginform .forgetmenot {\n";
		$css .= "    float: none;\n";
		$css .= "    margin-top: -4px;\n";
		$css .= "    margin-bottom: 12px;\n";
		$css .= "    display: flex;\n";
		$css .= "    align-items: center;\n";
		$css .= "    gap: 6px;\n";
		$css .= "}\n";

		$css .= "body.login #loginform .forgetmenot input {\n";
		$css .= "    margin: 0 !important;\n";
		$css .= "}\n";

		$css .= "body.login #loginform .forgetmenot label {\n";
		$css .= "    margin: 0 !important;\n";
		$css .= "    font-size: 13px !important;\n";
		$css .= "    font-weight: normal;\n";
		$css .= "    color: var(--lpcd-remember-color);\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Generate input field styles.
	 *
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_field_styles( $form ) {
		$css = '';

		// Username field.
		$css .= "body.login input[name=\"log\"] {\n";
		$css .= "    background: var(--lpcd-field-bg);\n";
		$css .= "    border: 1px solid var(--lpcd-field-border);\n";
		$css .= "    border-radius: var(--lpcd-field-radius);\n";
		$css .= "    color: var(--lpcd-field-text);\n";
		$css .= "    height: var(--lpcd-field-height);\n";
		$css .= "    font-size: var(--lpcd-field-size);\n";
		$css .= "    padding: 0 12px;\n";
		$css .= "}\n";

		// Password field (may have different settings).
		$pw_bg     = isset( $form['passwordBackgroundColor'] ) ? esc_attr( $form['passwordBackgroundColor'] ) : '';
		$pw_border = isset( $form['passwordBorderColor'] ) ? esc_attr( $form['passwordBorderColor'] ) : '';
		$pw_radius = isset( $form['passwordBorderRadius'] ) ? absint( $form['passwordBorderRadius'] ) : 4;
		$pw_text   = isset( $form['passwordTextColor'] ) ? esc_attr( $form['passwordTextColor'] ) : '';
		$pw_height = isset( $form['passwordHeight'] ) ? absint( $form['passwordHeight'] ) : 44;
		$pw_size   = isset( $form['passwordFontSize'] ) ? absint( $form['passwordFontSize'] ) : 15;

		$css .= "body.login input[name=\"pwd\"] {\n";
		if ( ! empty( $pw_bg ) ) {
			$css .= "    background: " . $pw_bg . ";\n";
		} else {
			$css .= "    background: var(--lpcd-field-bg);\n";
		}
		if ( ! empty( $pw_border ) ) {
			$css .= "    border: 1px solid " . $pw_border . ";\n";
		} else {
			$css .= "    border: 1px solid var(--lpcd-field-border);\n";
		}
		$css .= "    border-radius: " . $pw_radius . "px;\n";
		if ( ! empty( $pw_text ) ) {
			$css .= "    color: " . $pw_text . ";\n";
		} else {
			$css .= "    color: var(--lpcd-field-text);\n";
		}
		$css .= "    height: " . $pw_height . "px;\n";
		$css .= "    font-size: " . $pw_size . "px;\n";
		$css .= "    padding: 0 12px;\n";
		$css .= "}\n";

		// Hide labels if needed.
		$hide_user_label = isset( $form['usernameShowLabel'] ) && ! $form['usernameShowLabel'];
		$hide_pw_label   = isset( $form['passwordShowLabel'] ) && ! $form['passwordShowLabel'];

		if ( $hide_user_label ) {
			$css .= "body.login #loginform label[for=\"user_login\"] {\n";
			$css .= "    font-size: 0;\n";
			$css .= "    line-height: 0;\n";
			$css .= "    margin-bottom: 0;\n";
			$css .= "}\n";
		}

		if ( $hide_pw_label ) {
			$css .= "body.login #loginform .user-pass-wrap > label {\n";
			$css .= "    font-size: 0;\n";
			$css .= "    line-height: 0;\n";
			$css .= "    margin-bottom: 0;\n";
			$css .= "}\n";
		}

		// Style the native WP password toggle button.
		$css .= "body.login .wp-pwd {\n";
		$css .= "    position: relative !important;\n";
		$css .= "    display: block !important;\n";
		$css .= "    width: 100% !important;\n";
		$css .= "}\n";
		$css .= "body.login .wp-pwd input {\n";
		$css .= "    margin-bottom: 0 !important;\n";
		$css .= "    padding-right: 44px !important;\n";
		$css .= "}\n";
		$css .= "body.login .wp-hide-pw {\n";
		$css .= "    position: absolute !important;\n";
		$css .= "    right: 0 !important;\n";
		$css .= "    top: 0 !important;\n";
		$css .= "    bottom: 0 !important;\n";
		$css .= "    width: 44px !important;\n";
		$css .= "    display: flex !important;\n";
		$css .= "    align-items: center !important;\n";
		$css .= "    justify-content: center !important;\n";
		$css .= "    background: transparent !important;\n";
		$css .= "    border: none !important;\n";
		$css .= "    box-shadow: none !important;\n";
		$css .= "    color: var(--lpcd-field-text, #333) !important;\n";
		$css .= "    cursor: pointer !important;\n";
		$css .= "    z-index: 2 !important;\n";
		$css .= "    padding: 0 !important;\n";
		$css .= "    min-height: auto !important;\n";
		$css .= "}\n";
		$css .= "body.login .wp-hide-pw .dashicons {\n";
		$css .= "    font-size: 18px !important;\n";
		$css .= "    width: 18px !important;\n";
		$css .= "    height: 18px !important;\n";
		$css .= "    display: flex !important;\n";
		$css .= "    align-items: center !important;\n";
		$css .= "    justify-content: center !important;\n";
		$css .= "}\n";
		$css .= "body.login .wp-hide-pw:hover, body.login .wp-hide-pw:focus {\n";
		$css .= "    color: var(--lpcd-btn-bg, #2271b1) !important;\n";
		$css .= "}\n";

		// Registration form field styling.
		$css .= "body.login #registerform input.input {\n";
		$css .= "    background: var(--lpcd-field-bg);\n";
		$css .= "    border: 1px solid var(--lpcd-field-border);\n";
		$css .= "    border-radius: var(--lpcd-field-radius);\n";
		$css .= "    color: var(--lpcd-field-text);\n";
		$css .= "    height: var(--lpcd-field-height);\n";
		$css .= "    font-size: var(--lpcd-field-size);\n";
		$css .= "    padding: 0 12px;\n";
		$css .= "}\n";

		// Registration confirmation message styling.
		$css .= "body.login #reg_passmail {\n";
		$css .= "    font-size: 13px;\n";
		$css .= "    color: var(--lpcd-field-text, #555);\n";
		$css .= "    text-align: center;\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Generate submit button styles.
	 *
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_button_styles( $form ) {
		$full_width = isset( $form['submitFullWidth'] ) ? $form['submitFullWidth'] : true;

		$css  = "body.login #wp-submit {\n";
		$css .= "    background: var(--lpcd-btn-bg);\n";
		$css .= "    color: var(--lpcd-btn-text);\n";
		$css .= "    border: none;\n";
		$css .= "    border-radius: var(--lpcd-btn-radius);\n";
		$css .= "    height: var(--lpcd-btn-height);\n";
		$css .= "    font-size: var(--lpcd-btn-size);\n";
		$css .= "    font-weight: var(--lpcd-btn-weight);\n";
		$css .= "    cursor: pointer;\n";
		$css .= "    transition: all 0.25s ease;\n";

		if ( $full_width ) {
			$css .= "    width: 100%;\n";
			$css .= "    text-align: center;\n";
		}

		$css .= "}\n";

		// Hover effect.
		$hover_effect = isset( $form['hoverEffect'] ) ? $form['hoverEffect'] : 'none';

		switch ( $hover_effect ) {
			case 'lift':
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background: var(--lpcd-btn-hover-bg);\n";
				$css .= "    transform: translateY(-2px);\n";
				$css .= "    box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n";
				$css .= "}\n";
				break;

			case 'glow':
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background: var(--lpcd-btn-hover-bg);\n";
				$css .= "    box-shadow: 0 0 16px var(--lpcd-btn-bg);\n";
				$css .= "}\n";
				break;

			case 'scale':
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background: var(--lpcd-btn-hover-bg);\n";
				$css .= "    transform: scale(1.03);\n";
				$css .= "}\n";
				break;

			case 'pulse':
				$css .= "@keyframes lpcd-btn-pulse {\n";
				$css .= "    0%   { box-shadow: 0 0 0 0 var(--lpcd-btn-bg); }\n";
				$css .= "    70%  { box-shadow: 0 0 0 10px transparent; }\n";
				$css .= "    100% { box-shadow: 0 0 0 0 transparent; }\n";
				$css .= "}\n";
				$css .= "body.login #wp-submit {\n";
				$css .= "    animation: lpcd-btn-pulse 2s infinite;\n";
				$css .= "}\n";
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background: var(--lpcd-btn-hover-bg);\n";
				$css .= "}\n";
				break;

			case 'bgSlide':
				$css .= "body.login #wp-submit {\n";
				$css .= "    background: linear-gradient(to right, var(--lpcd-btn-hover-bg) 50%, var(--lpcd-btn-bg) 50%) !important;\n";
				$css .= "    background-size: 200% 100% !important;\n";
				$css .= "    background-position: right center !important;\n";
				$css .= "    transition: background-position 0.3s ease;\n";
				$css .= "}\n";
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background-position: left center !important;\n";
				$css .= "}\n";
				break;

			default:
				$css .= "body.login #wp-submit:hover {\n";
				$css .= "    background: var(--lpcd-btn-hover-bg);\n";
				$css .= "}\n";
				break;
		}

		// Make submit row full width if needed.
		$css .= "body.login .submit {\n";
		$css .= "    margin-top: 5px;\n";
		if ( $full_width ) {
			$css .= "    text-align: center;\n";
		}
		$css .= "}\n";

		// reCAPTCHA wrapper spacing.
		$css .= "body.login .lpcd-recaptcha-wrap {\n";
		$css .= "    margin: 16px 0;\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Generate link styles.
	 *
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_link_styles( $form ) {
		$css = '';

		$link_color = isset( $form['lostPasswordColor'] ) ? esc_attr( $form['lostPasswordColor'] ) : '#2271b1';
		$css       .= "body.login #nav a, body.login #backtoblog a {\n";
		$css       .= "    color: " . $link_color . ";\n";
		$css       .= "}\n";

		// Hide elements based on settings.
		$hide_remember = isset( $form['showRememberMe'] ) && ! $form['showRememberMe'];
		$hide_lost_pw  = isset( $form['showLostPassword'] ) && ! $form['showLostPassword'];
		$hide_back     = isset( $form['showBackLink'] ) && ! $form['showBackLink'];
		$hide_register = isset( $form['showRegisterLink'] ) && ! $form['showRegisterLink'];

		if ( $hide_remember ) {
			$css .= "body.login .forgetmenot { display: none !important; }\n";
		}

		if ( $hide_lost_pw ) {
			$css .= "body.login #nav { display: none !important; }\n";
		}

		if ( $hide_back ) {
			$css .= "body.login #backtoblog { display: none !important; }\n";
		}

		if ( $hide_register ) {
			$css .= "body.login #nav .login-register { display: none !important; }\n";
		}

		return $css;
	}

	/**
	 * Generate block-specific styles (non-form blocks).
	 *
	 * @param array $blocks Block list.
	 * @return string CSS string.
	 */
	private static function generate_block_styles( $blocks ) {
		$css = '';

		foreach ( $blocks as $block ) {
			if ( 'loginForm' === $block['type'] ) {
				continue;
			}

			$id = isset( $block['id'] ) ? sanitize_key( $block['id'] ) : '';
			$s  = isset( $block['settings'] ) ? $block['settings'] : array();

			switch ( $block['type'] ) {
				case 'logo':
					$width     = isset( $s['width'] ) ? absint( $s['width'] ) : 80;
					$alignment = isset( $s['alignment'] ) ? esc_attr( $s['alignment'] ) : 'center';
					$mt        = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 0;
					$mb        = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 20;
					$pl        = isset( $s['paddingLeft'] ) ? absint( $s['paddingLeft'] ) : 0;
					$pr        = isset( $s['paddingRight'] ) ? absint( $s['paddingRight'] ) : 0;

					$css .= ".lpcd-block-logo {\n";
					$css .= "    text-align: " . $alignment . ";\n";
					$css .= "    margin-top: " . $mt . "px;\n";
					$css .= "    margin-bottom: " . $mb . "px;\n";
					if ( $pl > 0 ) {
						$css .= "    padding-left: " . $pl . "px;\n";
					}
					if ( $pr > 0 ) {
						$css .= "    padding-right: " . $pr . "px;\n";
					}
					$css .= "}\n";
					$css .= ".lpcd-block-logo img {\n";
					$css .= "    width: " . $width . "px;\n";
					$css .= "    height: auto;\n";
					$css .= "}\n";
					break;

				case 'heading':
					$color   = isset( $s['textColor'] ) ? esc_attr( $s['textColor'] ) : '#1d2327';
					$size    = isset( $s['fontSize'] ) ? absint( $s['fontSize'] ) : 24;
					$weight  = isset( $s['fontWeight'] ) ? esc_attr( $s['fontWeight'] ) : '700';
					$align   = isset( $s['alignment'] ) ? esc_attr( $s['alignment'] ) : 'center';
					$spacing = isset( $s['letterSpacing'] ) ? floatval( $s['letterSpacing'] ) : 0;
					$mt      = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 0;
					$mb      = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 12;
					$pl      = isset( $s['paddingLeft'] ) ? absint( $s['paddingLeft'] ) : 0;
					$pr      = isset( $s['paddingRight'] ) ? absint( $s['paddingRight'] ) : 0;
					$family  = isset( $s['fontFamily'] ) && 'inherit' !== $s['fontFamily'] ? esc_attr( $s['fontFamily'] ) : '';

					$css .= ".lpcd-block-heading {\n";
					$css .= "    color: " . $color . ";\n";
					$css .= "    font-size: " . $size . "px;\n";
					$css .= "    font-weight: " . $weight . ";\n";
					$css .= "    text-align: " . $align . ";\n";
					$css .= "    letter-spacing: " . esc_attr( $spacing ) . "px;\n";
					$css .= "    margin-top: " . $mt . "px;\n";
					$css .= "    margin-bottom: " . $mb . "px;\n";
					if ( $pl > 0 ) {
						$css .= "    padding-left: " . $pl . "px;\n";
					}
					if ( $pr > 0 ) {
						$css .= "    padding-right: " . $pr . "px;\n";
					}
					if ( ! empty( $family ) ) {
						$css .= "    font-family: '" . $family . "', sans-serif;\n";
					}
					$css .= "}\n";
					break;

				case 'text':
					$color  = isset( $s['textColor'] ) ? esc_attr( $s['textColor'] ) : '#50575e';
					$size   = isset( $s['fontSize'] ) ? absint( $s['fontSize'] ) : 14;
					$weight = isset( $s['fontWeight'] ) ? esc_attr( $s['fontWeight'] ) : '400';
					$align  = isset( $s['alignment'] ) ? esc_attr( $s['alignment'] ) : 'center';
					$lh     = isset( $s['lineHeight'] ) ? floatval( $s['lineHeight'] ) : 1.6;
					$mt     = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 0;
					$mb     = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 16;
					$pl     = isset( $s['paddingLeft'] ) ? absint( $s['paddingLeft'] ) : 0;
					$pr     = isset( $s['paddingRight'] ) ? absint( $s['paddingRight'] ) : 0;
					$family = isset( $s['fontFamily'] ) && 'inherit' !== $s['fontFamily'] ? esc_attr( $s['fontFamily'] ) : '';

					$css .= ".lpcd-block-text {\n";
					$css .= "    color: " . $color . ";\n";
					$css .= "    font-size: " . $size . "px;\n";
					$css .= "    font-weight: " . $weight . ";\n";
					$css .= "    text-align: " . $align . ";\n";
					$css .= "    line-height: " . esc_attr( $lh ) . ";\n";
					$css .= "    margin-top: " . $mt . "px;\n";
					$css .= "    margin-bottom: " . $mb . "px;\n";
					if ( $pl > 0 ) {
						$css .= "    padding-left: " . $pl . "px;\n";
					}
					if ( $pr > 0 ) {
						$css .= "    padding-right: " . $pr . "px;\n";
					}
					if ( ! empty( $family ) ) {
						$css .= "    font-family: '" . $family . "', sans-serif;\n";
					}
					$css .= "}\n";
					break;

				case 'divider':
					$style = isset( $s['style'] ) ? esc_attr( $s['style'] ) : 'solid';
					$color = isset( $s['color'] ) ? esc_attr( $s['color'] ) : '#e0e0e0';
					$width = isset( $s['width'] ) ? absint( $s['width'] ) : 100;
					$thick = isset( $s['thickness'] ) ? absint( $s['thickness'] ) : 1;
					$align = isset( $s['alignment'] ) ? esc_attr( $s['alignment'] ) : 'center';
					$mt    = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 12;
					$mb    = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 12;

					$margin_map = array(
						'left'   => '0 auto 0 0',
						'center' => '0 auto',
						'right'  => '0 0 0 auto',
					);
					$margin_val = isset( $margin_map[ $align ] ) ? $margin_map[ $align ] : '0 auto';

					$css .= ".lpcd-block-divider {\n";
					$css .= "    margin-top: " . $mt . "px;\n";
					$css .= "    margin-bottom: " . $mb . "px;\n";
					$css .= "}\n";

					if ( 'invisible' === $style ) {
						$css .= ".lpcd-block-divider hr {\n";
						$css .= "    border: none;\n";
						$css .= "    height: " . $thick . "px;\n";
						$css .= "}\n";
					} else {
						$css .= ".lpcd-block-divider hr {\n";
						$css .= "    border: none;\n";
						$css .= "    border-top: " . $thick . "px " . $style . " " . $color . ";\n";
						$css .= "    width: " . $width . "%;\n";
						$css .= "    margin: " . $margin_val . ";\n";
						$css .= "}\n";
					}
					break;

				case 'customHtml':
					$mt = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 0;
					$mb = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 16;
					$pl = isset( $s['paddingLeft'] ) ? absint( $s['paddingLeft'] ) : 0;
					$pr = isset( $s['paddingRight'] ) ? absint( $s['paddingRight'] ) : 0;

					$css .= ".lpcd-block-html {\n";
					$css .= "    margin-top: " . $mt . "px;\n";
					$css .= "    margin-bottom: " . $mb . "px;\n";
					if ( $pl > 0 ) {
						$css .= "    padding-left: " . $pl . "px;\n";
					}
					if ( $pr > 0 ) {
						$css .= "    padding-right: " . $pr . "px;\n";
					}
					$css .= "}\n";
					break;

				case 'videoBackground':
					$mt = isset( $s['marginTop'] ) ? absint( $s['marginTop'] ) : 0;
					$mb = isset( $s['marginBottom'] ) ? absint( $s['marginBottom'] ) : 0;

					if ( $mt > 0 || $mb > 0 ) {
						$css .= ".lpcd-block-video {\n";
						if ( $mt > 0 ) {
							$css .= "    margin-top: " . $mt . "px;\n";
						}
						if ( $mb > 0 ) {
							$css .= "    margin-bottom: " . $mb . "px;\n";
						}
						$css .= "}\n";
					}
					break;
			}
		}

		return $css;
	}

	/**
	 * Generate message and notification styles.
	 *
	 * Styles for .message (info/success), #login_error (errors),
	 * #nav, #backtoblog, and #lostpasswordform.
	 *
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_message_styles( $form ) {
		$radius = isset( $form['formBorderRadius'] ) ? absint( $form['formBorderRadius'] ) : 8;
		$css    = '';

		// Info/success messages (.message).
		$css .= "body.login .message {\n";
		$css .= "    background: #f0f9ff;\n";
		$css .= "    border: 1px solid #bae6fd;\n";
		$css .= "    border-left: 4px solid #0ea5e9;\n";
		$css .= "    color: #0c4a6e;\n";
		$css .= "    padding: 12px 16px;\n";
		$css .= "    margin-bottom: 20px;\n";
		$css .= "    border-radius: " . $radius . "px;\n";
		$css .= "    font-size: 13px;\n";
		$css .= "    line-height: 1.6;\n";
		$css .= "    box-shadow: none;\n";
		$css .= "    max-width: var(--lpcd-form-width, 360px);\n";
		$css .= "    width: 100%;\n";
		$css .= "    box-sizing: border-box;\n";
		$css .= "}\n";

		// Error messages (#login_error).
		$css .= "body.login #login_error {\n";
		$css .= "    background: #fef2f2;\n";
		$css .= "    border: 1px solid #fecaca;\n";
		$css .= "    border-left: 4px solid #ef4444;\n";
		$css .= "    color: #991b1b;\n";
		$css .= "    padding: 12px 16px;\n";
		$css .= "    margin-bottom: 20px;\n";
		$css .= "    border-radius: " . $radius . "px;\n";
		$css .= "    font-size: 13px;\n";
		$css .= "    line-height: 1.6;\n";
		$css .= "    box-shadow: none;\n";
		$css .= "    max-width: var(--lpcd-form-width, 360px);\n";
		$css .= "    width: 100%;\n";
		$css .= "    box-sizing: border-box;\n";
		$css .= "}\n";

		// Error links.
		$css .= "body.login #login_error a {\n";
		$css .= "    color: #991b1b;\n";
		$css .= "    font-weight: 500;\n";
		$css .= "}\n";

		// Navigation links (#nav — Log In / Register links).
		$css .= "body.login #nav {\n";
		$css .= "    text-align: center;\n";
		$css .= "    padding: 16px 0 0;\n";
		$css .= "    max-width: var(--lpcd-form-width, 360px);\n";
		$css .= "    width: 100%;\n";
		$css .= "}\n";

		$css .= "body.login #nav a {\n";
		$css .= "    color: var(--lpcd-field-text, #555);\n";
		$css .= "    font-size: 13px;\n";
		$css .= "    text-decoration: none;\n";
		$css .= "    transition: color 0.2s;\n";
		$css .= "}\n";

		$css .= "body.login #nav a:hover {\n";
		$css .= "    color: var(--lpcd-btn-bg, #1A1A1A);\n";
		$css .= "}\n";

		// Back to blog (#backtoblog).
		$css .= "body.login #backtoblog {\n";
		$css .= "    text-align: center;\n";
		$css .= "    padding: 8px 0 0;\n";
		$css .= "    max-width: var(--lpcd-form-width, 360px);\n";
		$css .= "    width: 100%;\n";
		$css .= "}\n";

		$css .= "body.login #backtoblog a {\n";
		$css .= "    color: var(--lpcd-field-text, #555);\n";
		$css .= "    font-size: 12px;\n";
		$css .= "    text-decoration: none;\n";
		$css .= "    letter-spacing: 0.5px;\n";
		$css .= "    transition: color 0.2s;\n";
		$css .= "}\n";

		$css .= "body.login #backtoblog a:hover {\n";
		$css .= "    color: var(--lpcd-btn-bg, #1A1A1A);\n";
		$css .= "}\n";

		// Lost password form — same transparency as login form.
		$css .= "body.login #lostpasswordform {\n";
		$css .= "    background: transparent;\n";
		$css .= "    border: none;\n";
		$css .= "    box-shadow: none;\n";
		$css .= "    padding: 0;\n";
		$css .= "    margin: 0;\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Generate form entrance animation styles.
	 *
	 * @param array $form Form block settings.
	 * @return string CSS string.
	 */
	private static function generate_form_animation_styles( $form ) {
		$anim_type = isset( $form['animationType'] ) ? $form['animationType'] : 'none';

		if ( 'none' === $anim_type ) {
			return '';
		}

		$dur_key = isset( $form['animationDuration'] ) ? $form['animationDuration'] : 'normal';
		$dur     = isset( self::$anim_dur_map[ $dur_key ] ) ? self::$anim_dur_map[ $dur_key ] : '0.6s';

		$css = '';

		switch ( $anim_type ) {
			case 'fadeIn':
				$css .= "body.login #login {\n";
				$css .= "    animation: lpcd-fadeIn " . esc_attr( $dur ) . " ease-out both;\n";
				$css .= "}\n";
				break;
			case 'slideUp':
				$css .= "body.login #login {\n";
				$css .= "    animation: lpcd-slideUp " . esc_attr( $dur ) . " ease-out both;\n";
				$css .= "}\n";
				break;
			case 'zoomIn':
				$css .= "body.login #login {\n";
				$css .= "    animation: lpcd-zoomIn " . esc_attr( $dur ) . " ease-out both;\n";
				$css .= "}\n";
				break;
		}

		return $css;
	}

	/**
	 * Generate mobile responsive styles.
	 *
	 * @param array $page Page settings.
	 * @return string CSS string.
	 */
	private static function generate_mobile_styles( $page ) {
		$layout_type = isset( $page['layoutType'] ) ? $page['layoutType'] : 'centered';
		$is_split    = ( 'split_left' === $layout_type || 'split_right' === $layout_type );

		$css  = "\n/* Mobile Responsive */\n";
		$css .= "@media screen and (max-width: 768px) {\n";

		// --- Global mobile rules for ALL layouts ---
		$css .= "    body.login {\n";
		$css .= "        padding: 1.5rem !important;\n";
		$css .= "        min-height: 100vh;\n";
		$css .= "    }\n";

		// Scale down heading blocks on small screens.
		$css .= "    .lpcd-block-heading {\n";
		$css .= "        font-size: clamp(20px, 5vw, 32px) !important;\n";
		$css .= "        margin-bottom: 4px !important;\n";
		$css .= "    }\n";

		// Scale text blocks.
		$css .= "    .lpcd-block-text {\n";
		$css .= "        font-size: 13px !important;\n";
		$css .= "        margin-bottom: 16px !important;\n";
		$css .= "    }\n";

		// Scale logo blocks.
		$css .= "    .lpcd-block-logo img {\n";
		$css .= "        max-width: 80px !important;\n";
		$css .= "    }\n";
		$css .= "    .lpcd-block-logo {\n";
		$css .= "        margin-bottom: 12px !important;\n";
		$css .= "    }\n";

		// Scale divider blocks.
		$css .= "    .lpcd-block-divider {\n";
		$css .= "        margin-top: 8px !important;\n";
		$css .= "        margin-bottom: 8px !important;\n";
		$css .= "    }\n";

		// Form container on mobile.
		$css .= "    body.login div#login {\n";
		$css .= "        width: 100% !important;\n";
		$css .= "        max-width: 100% !important;\n";
		$css .= "        margin: 0 !important;\n";
		$css .= "    }\n";

		$css .= "    body.login #loginform,\n";
		$css .= "    body.login #lostpasswordform,\n";
		$css .= "    body.login #registerform {\n";
		$css .= "        width: 100% !important;\n";
		$css .= "        max-width: 100% !important;\n";
		$css .= "        padding: 24px !important;\n";
		$css .= "        box-sizing: border-box;\n";
		$css .= "    }\n";

		// Tighter form field spacing.
		$css .= "    body.login #loginform p,\n";
		$css .= "    body.login #loginform .user-pass-wrap {\n";
		$css .= "        margin-bottom: 16px;\n";
		$css .= "    }\n";

		// --- Split layout specific mobile ---
		if ( $is_split ) {
			// Switch from grid to flex column.
			$css .= "    body.login {\n";
			$css .= "        display: flex !important;\n";
			$css .= "        flex-direction: column !important;\n";
			$css .= "        align-items: center !important;\n";
			$css .= "        justify-content: flex-start !important;\n";
			$css .= "        padding: 0 !important;\n";
			$css .= "    }\n";

			// Branding panel: compact horizontal strip on mobile.
			$css .= "    .lpcd-branding-panel {\n";
			$css .= "        width: 100% !important;\n";
			$css .= "        height: auto !important;\n";
			$css .= "        padding: 2rem 1.5rem 1.5rem !important;\n";
			$css .= "        order: -1 !important;\n";
			$css .= "    }\n";

			// Keep branding content compact.
			$css .= "    .lpcd-branding-panel .lpcd-branding-content {\n";
			$css .= "        max-width: 100% !important;\n";
			$css .= "    }\n";

			// Scale branding elements.
			$css .= "    .lpcd-branding-panel .lpcd-block-heading {\n";
			$css .= "        font-size: 22px !important;\n";
			$css .= "        margin-bottom: 4px !important;\n";
			$css .= "    }\n";
			$css .= "    .lpcd-branding-panel .lpcd-block-text {\n";
			$css .= "        font-size: 12px !important;\n";
			$css .= "        margin-bottom: 0 !important;\n";
			$css .= "    }\n";
			$css .= "    .lpcd-branding-panel .lpcd-block-logo img {\n";
			$css .= "        max-width: 48px !important;\n";
			$css .= "    }\n";
			$css .= "    .lpcd-branding-panel .lpcd-block-logo {\n";
			$css .= "        margin-bottom: 8px !important;\n";
			$css .= "    }\n";

			// Hide quotes / extra text on small mobile.
			$css .= "    .lpcd-branding-panel .lpcd-block-divider {\n";
			$css .= "        display: none !important;\n";
			$css .= "    }\n";

			// Form side: full width with proper padding.
			$css .= "    body.login div#login {\n";
			$css .= "        width: 100% !important;\n";
			$css .= "        min-width: 100% !important;\n";
			$css .= "        min-height: auto !important;\n";
			$css .= "        padding: 1.5rem !important;\n";
			$css .= "        box-sizing: border-box !important;\n";
			$css .= "    }\n";
		} else {
			// Centered layout mobile.
			$css .= "    body.login {\n";
			$css .= "        display: flex !important;\n";
			$css .= "        flex-direction: column !important;\n";
			$css .= "        align-items: center !important;\n";
			$css .= "        justify-content: center !important;\n";
			$css .= "    }\n";
		}

		$css .= "}\n";

		// Extra small screens.
		$css .= "@media screen and (max-width: 400px) {\n";
		$css .= "    body.login {\n";
		$css .= "        padding: 1rem !important;\n";
		$css .= "    }\n";
		$css .= "    body.login #loginform,\n";
		$css .= "    body.login #lostpasswordform,\n";
		$css .= "    body.login #registerform {\n";
		$css .= "        padding: 20px !important;\n";
		$css .= "        border-radius: 12px !important;\n";
		$css .= "    }\n";
		$css .= "    .lpcd-block-heading {\n";
		$css .= "        font-size: 20px !important;\n";
		$css .= "    }\n";

		if ( $is_split ) {
			$css .= "    .lpcd-branding-panel {\n";
			$css .= "        padding: 1.5rem 1rem 1rem !important;\n";
			$css .= "    }\n";
			$css .= "    .lpcd-branding-panel .lpcd-block-heading {\n";
			$css .= "        font-size: 18px !important;\n";
			$css .= "    }\n";
		}

		$css .= "}\n";

		return $css;
	}

}

