<?php

/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2025 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Component\ComponentHelper;

$options = $displayData['options'];
$device = SpPgaeBuilderBase::$defaultDevice;
$doc = Factory::getDocument();

if (!class_exists('SppbCustomCssParser'))
{
	require_once JPATH_ROOT . '/components/com_sppagebuilder/helpers/css-parser.php';
}

// Image lazy load
$config = ComponentHelper::getParams('com_sppagebuilder');
$lazyload = $config->get('lazyloadimg', '0');
$placeholder = $config->get('lazyplaceholder', '');
$lazy_bg_image = '';
$placeholder_bg_image = '';

$row_id = (isset($options->id) && $options->id) ? $options->id : 'section-id-' . $options->dynamicId;
$rowIdSelector = '.sp-page-builder .page-content #' . $row_id;
$rowSelector = '#' . $row_id;
$cssHelper = new CSSHelper($rowIdSelector, true);

$row_styles = '';
$style = '';

$styleX = '';
$mediaStyle = '';

$propMaps = [
	'padding'            => 'padding',
	'margin'             => 'margin',
	'section_overflow_x' => 'overflow-x',
	'section_overflow_y' => 'overflow-y',
	'color'              => 'color',
	'row_border_radius'  => 'border-radius',
	'row_border_style'   => !empty($options->row_border) ? 'border-style' : null,
	'row_border_color'   => !empty($options->row_border) ? 'border-color' : null,
	'row_border_width'   => !empty($options->row_border) ? 'border-width' : null,
	'row_width'          => 'width',
	'row_max_width'      => 'max-width',
	'row_min_width'      => 'min-width',
];

$units = [
	'row_border_color'   => false,
	'row_border_style'   => false,
	'row_border_width'   => false,
	'padding'            => false,
	'margin'             => false,
	'section_overflow_x' => false,
	'section_overflow_y' => false,
	'color'              => false,
	'row_width'          => $options->row_width->unit ?? 'px',
	'row_max_width'      => $options->row_max_width->unit ?? 'px',
	'row_min_width'      => $options->row_min_width->unit ?? 'px',
];

$modifier = ['padding' => 'spacing', 'margin' => 'spacing'];
$default = [];

if (!empty($options->section_height_option) && $options->section_height_option === 'win-height') {
	$propMaps['section_height'] = 'height';
	$default['section_height'] = '100vh';
	$units['section_height'] = false;
} elseif (!empty($options->section_height_option) && $options->section_height_option === 'height') {
	$propMaps = array_merge($propMaps, [
		'section_height' => 'height'
	]);
}

$propMaps = array_merge($propMaps, [
	'row_width' => 'width',
	'section_min_height' => 'min-height',
	'section_max_height' => 'max-height',
	'row_max_width' => 'max-width',
	'row_min_width' => 'min-width'
]);

$sectionStyle = $cssHelper->generateStyle(':self', $options, $propMaps, $units, $modifier, $default);
$cssHelper->setID($rowIdSelector . '.sppb-row-overlay', true);
$sectionOverlay = $cssHelper->generateStyle(':self', $options, ['row_border_radius' => 'border-radius']);
$cssHelper->setID($rowIdSelector, true);

$sectionStyle .= $sectionOverlay;

$deviceList = array_filter(AddonHelper::$deviceList, function ($size) {
	return $size !== SpPgaeBuilderBase::$defaultDevice;
});

$background_image = (isset($options->background_image) && $options->background_image) ? $options->background_image : '';
$background_image_src = isset($background_image->src) ? $background_image->src : $background_image;

$backgroundRepeat = $backgroundSize = $backgroundAttachment = $backgroundPosition = false;

if (property_exists($options, 'background_type') && isset($options->background_type)) {
	if (($options->background_type == 'image' || $options->background_type == 'color') && isset($options->background_color) && $options->background_color) $style .= 'background-color:' . $options->background_color . ';';

	if (($options->background_type == 'image' && $background_image_src) || (isset($options->background_type) && $options->background_type == 'video')) {
		if ($lazyload) {
			if ($placeholder) {
				$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
			}
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$lazy_bg_image .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$originalSrc = Uri::base(true) . '/' . $background_image_src;
				$lazy_bg_image .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($originalSrc) . ');';
			}
		} else {
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$style .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$style .= 'background-image:url("' . SppagebuilderHelperSite::cleanPath($original_src) . '");';
			}
		}

		if (isset($options->background_repeat) && $options->background_repeat){
			if(is_object($options->background_repeat)){
				$backgroundRepeat = AddonHelper::generateMultiDeviceObject($options, 'background_repeat', 'background-repeat', $device, false, false);
				$styleX .= $backgroundRepeat->$device;
				$style .= $backgroundRepeat->$device;
			} else {
				$style .= 'background-repeat:' . ($options->background_repeat ?? 'no-repeat') . ';';
				$backgroundRepeat['xl'] = 'background-repeat:' . ($options->background_repeat ?? 'no-repeat') . ';';
			}
		}
		if (isset($options->background_size) && $options->background_size){
			if(is_object($options->background_size)){
				$backgroundSize = AddonHelper::generateMultiDeviceObject($options, 'background_size', 'background-size', $device, false, false);
				$styleX .= $backgroundSize->$device;
				$style .= $backgroundSize->$device;
			} else {
				if ($options->background_size != 'custom') {
					$style .= 'background-size:' . ($options->background_size ?? 'cover') . ';';
					$backgroundSize['xl'] = 'background-size:' . ($options->background_size ?? 'cover') . ';';
				}
			}
		}
		if (isset($options->background_attachment) && $options->background_attachment){
			if(is_object($options->background_attachment)){
				$backgroundAttachment = AddonHelper::generateMultiDeviceObject($options, 'background_attachment', 'background-attachment', $device, false, false);
				$styleX .= $backgroundAttachment->$device;
				$style .= $backgroundAttachment->$device;
			} else {
				$style .= 'background-attachment:' . ($options->background_attachment ?? 'fixed') . ';';
				$backgroundAttachment['xl'] = 'background-attachment:' . ($options->background_attachment ?? 'fixed') . ';';
			}
		}
		if (isset($options->background_position) && $options->background_position){
			if(is_object($options->background_position)){
				$backgroundPosition = AddonHelper::generateMultiDeviceObject($options, 'background_position', 'background-position', $device, false, false);
				$styleX .= $backgroundPosition->$device;
				$style .= $backgroundPosition->$device;
			} else {
				if ($options->background_position != 'custom') {
					$style .= 'background-position:' . ($options->background_position ?? 'left-top') . ';';
					$backgroundPosition['xl'] = 'background-position:' . ($options->background_position ?? 'left-top') . ';';
				}
			}
		}


		if (isset($options->background_size) && $options->background_size == 'custom') {
			if (isset($options->background_size_custom) && \is_object($options->background_size_custom)) {
				$backgroundSize = AddonHelper::generateMultiDeviceObject($options, 'background_size_custom', 'background-size', $device, false, ($options->background_size_custom->unit ?? 'px'));
				$styleX .= $backgroundSize->$device;
			}
		}
	}

	if (isset($options->background_position) && $options->background_position == 'custom') {
		$backgroundPosition = AddonHelper::initDeviceObject();

		foreach ($backgroundPosition as $key => $_) {
			if (isset($options->background_position_custom_x->$key) && isset($options->background_position_custom_y->$key)) {
				$backgroundPosition->$key = \is_object($options->background_position_custom_x) && \is_object($options->background_position_custom_y)
					? 'background-position: ' . $options->background_position_custom_x->$key . $options->background_position_custom_x->unit . ' ' . $options->background_position_custom_y->$key . $options->background_position_custom_y->unit . ';'
					: 'background-position: ' . $options->background_position_custom_x . $options->background_position_custom_x->unit . ' ' . $options->background_position_custom_y . $options->background_position_custom_y->unit . ';';
			}
		}

		$styleX .= $backgroundPosition->$device;
	}

	if ($options->background_type == 'gradient' && isset($options->background_gradient) && is_object($options->background_gradient)) {
		$radialPos = (isset($options->background_gradient->radialPos) && !empty($options->background_gradient->radialPos)) ? $options->background_gradient->radialPos : 'center center';

		$gradientColor = (isset($options->background_gradient->color) && !empty($options->background_gradient->color)) ? $options->background_gradient->color : '';

		$gradientColor2 = (isset($options->background_gradient->color2) && !empty($options->background_gradient->color2)) ? $options->background_gradient->color2 : '';

		$gradientDeg = (isset($options->background_gradient->deg) && !empty($options->background_gradient->deg)) ? $options->background_gradient->deg : '0';

		$gradientPos = (isset($options->background_gradient->pos) && !empty($options->background_gradient->pos)) ? $options->background_gradient->pos : '0';

		$gradientPos2 = (isset($options->background_gradient->pos2) && !empty($options->background_gradient->pos2)) ? $options->background_gradient->pos2 : '100';

		if (isset($options->background_gradient->type) && $options->background_gradient->type == 'radial') {
			$style .= "\tbackground-image: radial-gradient(at " . $radialPos . ", " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
		} else {
			$style .= "\tbackground-image: linear-gradient(" . $gradientDeg . "deg, " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
		}
	}
} else {
	if (isset($options->background_color) && $options->background_color) $style .= 'background-color:' . $options->background_color . ';';

	if ($background_image_src || (isset($options->background_type) && $options->background_type == 'video')) {
		if ($lazyload) {
			if ($placeholder) {
				$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
			}
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$lazy_bg_image .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$lazy_bg_image .= 'background-image:url(' .  SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		} else {
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$style .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$style .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		}

		if (isset($options->background_repeat) && $options->background_repeat) $style .= 'background-repeat:' . $options->background_repeat . ';';
		if (isset($options->background_size) && $options->background_size && $options->background_size != 'custom') $style .= 'background-size:' . $options->background_size . ';';
		if (isset($options->background_attachment) && $options->background_attachment) $style .= 'background-attachment:' . $options->background_attachment . ';';
		if (isset($options->background_position) && $options->background_position && $options->background_position != 'custom') $style .= 'background-position:' . $options->background_position . ';';

		if (isset($options->background_size) && $options->background_size == 'custom') {
			if (isset($options->background_size_custom) && \is_object($options->background_size_custom)) {
				$backgroundSize = AddonHelper::generateMultiDeviceObject($options, 'background_size_custom', 'background-size', $device, false, ($options->background_size_custom->unit ?? 'px'));
				$styleX .= $backgroundSize->$device;
			}
		}

		if (isset($options->background_position) && $options->background_position == 'custom') {
			$backgroundPosition = AddonHelper::initDeviceObject();

			foreach ($backgroundPosition as $key => $_) {
				if (!empty($options->background_position_custom_x->$key) && !empty($options->background_position_custom_y->$key)) {
					$backgroundPosition->$key = \is_object($options->background_position_custom_x) && \is_object($options->background_position_custom_y)
						? 'background-position: ' . $options->background_position_custom_x->$key . $options->background_position_custom_x->unit . ' ' . $options->background_position_custom_y->$key . $options->background_position_custom_y->unit . ';'
						: 'background-position: ' . $options->background_position_custom_x . $options->background_position_custom_x->unit . ' ' . $options->background_position_custom_y . $options->background_position_custom_y->unit . ';';
				}
			}

			$styleX .= $backgroundPosition->$device;
		}
	}

	if ($style) {
		$row_styles .= '.sp-page-builder .page-content #' . $row_id . '{' . $style . '}';
	}
}

// Box Shadow
if (isset($options->row_boxshadow) && $options->row_boxshadow) {
	if (is_object($options->row_boxshadow)) {
		$ho = (isset($options->row_boxshadow->ho) && $options->row_boxshadow->ho != '') ? $options->row_boxshadow->ho . 'px' : '0px';
		$vo = (isset($options->row_boxshadow->vo) && $options->row_boxshadow->vo != '') ? $options->row_boxshadow->vo . 'px' : '0px';
		$blur = (isset($options->row_boxshadow->blur) && $options->row_boxshadow->blur != '') ? $options->row_boxshadow->blur . 'px' : '0px';
		$spread = (isset($options->row_boxshadow->spread) && $options->row_boxshadow->spread != '') ? $options->row_boxshadow->spread . 'px' : '0px';
		$color = (isset($options->row_boxshadow->color) && $options->row_boxshadow->color != '') ? $options->row_boxshadow->color : '#fff';

		$style .= "box-shadow: {$ho} {$vo} {$blur} {$spread} {$color};";
	} else {
		$style .= "box-shadow: " . $options->row_boxshadow . ";";
	}
}

$rowIdSelector 		= '.sp-page-builder .page-content #' . $row_id;
$backgroundSize 	= $backgroundSize ?? false;
$backgroundPosition = $backgroundPosition ?? false;

$mediaStyle = array_map(function ($size) use (
	$rowIdSelector,
	$backgroundSize,
	$backgroundPosition,
	$backgroundRepeat,
	$backgroundAttachment
) {
	$str = '';
	$str .= AddonHelper::mediaQuery($size);

	$getVal = function ($var, $key) {
		if (empty($var)) {
			return '';
		}
		if (is_object($var)) {
			return isset($var->$key) ? $var->$key : '';
		}
		if (is_array($var)) {
			return isset($var[$key]) ? $var[$key] : '';
		}
		return '';
	};

	$str .= $rowIdSelector . '{';
	$str .= $getVal($backgroundSize, $size);
	$str .= $getVal($backgroundPosition, $size);
	$str .= $getVal($backgroundRepeat, $size);
	$str .= $getVal($backgroundAttachment, $size);
	$str .= '}';
	$str .= '}';

	return $str;
}, $deviceList);

$mediaStyle = implode("\n", $mediaStyle);

if ($styleX) {
	$row_styles .= '.sp-page-builder .page-content #' . $row_id . '{' . $styleX . '}';
}

if ($style) {
	$row_styles .= '.sp-page-builder .page-content #' . $row_id . '{' . $style . '}';
	$row_styles .= '.sp-page-builder .page-content #' . $row_id . '{' . $placeholder_bg_image . '}';
	$row_styles .= '.sp-page-builder .page-content #' . $row_id . '.sppb-element-loaded {' . $lazy_bg_image . '}';
}

if ($mediaStyle) {
	$row_styles .= $mediaStyle;
}

$row_styles .= $sectionStyle;

// Overlay
if (isset($options->background_type)) {
	if ($options->background_type == 'image' || $options->background_type == 'video') {
		if (!isset($options->overlay_type)) {
			$options->overlay_type = 'overlay_color';
		}
		if (isset($options->overlay) && $options->overlay && $options->overlay_type == 'overlay_color') {
			$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {background-color: ' . $options->overlay . '}';
		}
		if (isset($options->gradient_overlay) && $options->gradient_overlay && $options->overlay_type == 'overlay_gradient') {
			$overlay_radialPos = (isset($options->gradient_overlay->radialPos) && !empty($options->gradient_overlay->radialPos)) ? $options->gradient_overlay->radialPos : 'center center';

			$overlay_gradientColor = (isset($options->gradient_overlay->color) && !empty($options->gradient_overlay->color)) ? $options->gradient_overlay->color : '';

			$overlay_gradientColor2 = (isset($options->gradient_overlay->color2) && !empty($options->gradient_overlay->color2)) ? $options->gradient_overlay->color2 : '';

			$overlay_gradientDeg = (isset($options->gradient_overlay->deg) && !empty($options->gradient_overlay->deg)) ? $options->gradient_overlay->deg : '0';

			$overlay_gradientPos = (isset($options->gradient_overlay->pos) && !empty($options->gradient_overlay->pos)) ? $options->gradient_overlay->pos : '0';

			$overlay_gradientPos2 = (isset($options->gradient_overlay->pos2) && !empty($options->gradient_overlay->pos2)) ? $options->gradient_overlay->pos2 : '100';

			if (isset($options->gradient_overlay->type) && $options->gradient_overlay->type == 'radial') {
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
					background: radial-gradient(at ' . $overlay_radialPos . ', ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			} else {
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
					background: linear-gradient(' . $overlay_gradientDeg . 'deg, ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			}
		}
		if (isset($options->pattern_overlay) && $options->pattern_overlay && $options->overlay_type == 'overlay_pattern') {
			if (is_object($options->pattern_overlay)) {
				if (strpos($options->pattern_overlay->src, "http://") !== false || strpos($options->pattern_overlay->src, "https://") !== false) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-image:url(' . $options->pattern_overlay->src . ');
							background-attachment: scroll;
						}';
					if (isset($options->overlay_pattern_color)) {
						$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
								background-color:' . $options->overlay_pattern_color . ';
							}';
					}
				} else {
					$original_src = Uri::base(true) . '/' . $options->pattern_overlay->src;
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
							background-attachment: scroll;
						}';
					if (isset($options->overlay_pattern_color)) {
						$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
								background-color:' . $options->overlay_pattern_color . ';
							}';
					}
				}
			} else {
				if (strpos($options->pattern_overlay, "http://") !== false || strpos($options->pattern_overlay, "https://") !== false) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-image:url(' . $options->pattern_overlay . ');
							background-attachment: scroll;
						}';
					if (isset($options->overlay_pattern_color)) {
						$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
								background-color:' . $options->overlay_pattern_color . ';
							}';
					}
				} else {
					$original_src = Uri::base(true) . '/' . $options->pattern_overlay;
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
							background-attachment: scroll;
						}';
					if (isset($options->overlay_pattern_color)) {
						$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
								background-color:' . $options->overlay_pattern_color . ';
							}';
					}
				}
			}
		}
	}
} else {
	if (!isset($options->overlay_type)) {
		$options->overlay_type = 'overlay_color';
	}
	if (isset($options->overlay) && $options->overlay && $options->overlay_type == 'overlay_color') {
		$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {background-color: ' . $options->overlay . '}';
	}
	if (isset($options->gradient_overlay) && $options->gradient_overlay && $options->overlay_type == 'overlay_gradient') {
		$overlay_radialPos = (isset($options->gradient_overlay->radialPos) && !empty($options->gradient_overlay->radialPos)) ? $options->gradient_overlay->radialPos : 'center center';

		$overlay_gradientColor = (isset($options->gradient_overlay->color) && !empty($options->gradient_overlay->color)) ? $options->gradient_overlay->color : '';

		$overlay_gradientColor2 = (isset($options->gradient_overlay->color2) && !empty($options->gradient_overlay->color2)) ? $options->gradient_overlay->color2 : '';

		$overlay_gradientDeg = (isset($options->gradient_overlay->deg) && !empty($options->gradient_overlay->deg)) ? $options->gradient_overlay->deg : '0';

		$overlay_gradientPos = (isset($options->gradient_overlay->pos) && !empty($options->gradient_overlay->pos)) ? $options->gradient_overlay->pos : '0';

		$overlay_gradientPos2 = (isset($options->gradient_overlay->pos2) && !empty($options->gradient_overlay->pos2)) ? $options->gradient_overlay->pos2 : '100';

		if (isset($options->gradient_overlay->type) && $options->gradient_overlay->type == 'radial') {
			$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
				background: radial-gradient(at ' . $overlay_radialPos . ', ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
			}';
		} else {
			$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
				background: linear-gradient(' . $overlay_gradientDeg . 'deg, ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
			}';
		}
	}
	if (isset($options->pattern_overlay) && $options->pattern_overlay && $options->overlay_type == 'overlay_pattern') {
		if (is_object($options->pattern_overlay)) {
			if (strpos($options->pattern_overlay->src, "http://") !== false || strpos($options->pattern_overlay->src, "https://") !== false) {
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
						background-image:url(' . $options->pattern_overlay->src . ');
						background-attachment: scroll;
					}';
				if (isset($options->overlay_pattern_color)) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-color:' . $options->overlay_pattern_color . ';
						}';
				}
			} else {
				$original_src = Uri::base(true) . '/' . $options->pattern_overlay->src;
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
						background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
						background-attachment: scroll;
					}';
				if (isset($options->overlay_pattern_color)) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-color:' . $options->overlay_pattern_color . ';
						}';
				}
			}
		} else {
			if (strpos($options->pattern_overlay, "http://") !== false || strpos($options->pattern_overlay, "https://") !== false) {
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
						background-image:url(' . $options->pattern_overlay . ');
						background-attachment: scroll;
					}';
				if (isset($options->overlay_pattern_color)) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-color:' . $options->overlay_pattern_color . ';
						}';
				}
			} else {
				$original_src = Uri::base(true) . '/' . $options->pattern_overlay;
				$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
						background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
						background-attachment: scroll;
					}';
				if (isset($options->overlay_pattern_color)) {
					$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
							background-color:' . $options->overlay_pattern_color . ';
						}';
				}
			}
		}
	}
}

//Blend Mode
if (isset($options->background_type) && $options->background_type) {
	if ($options->background_type == 'image') {
		if (isset($options->blend_mode) && $options->blend_mode) {
			$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' > .sppb-row-overlay {
				mix-blend-mode:' . $options->blend_mode . ';
			}';
		}
	}
}

// Row Title
if ((isset($options->title) && $options->title) || (isset($options->subtitle) && $options->subtitle)) {
	if (!empty($options->title)) {
		$titleStyle = '';

		if (!empty($options->title_fontsize)) {
			$titleFontSize = AddonHelper::generateMultiDeviceObject($options, 'title_fontsize', ['font-size', 'line-height'], $device);
			$titleStyle .= $titleFontSize->$device;
		}

		if (!empty($options->title_position)) {
			$titleAlignment = CSSHelper::parseAlignment($options, 'title_position');
			$titleStyle .= 'text-align: ' . $titleAlignment . ';';
		}

		if (!empty($options->title_fontweight)) {
			$titleStyle .= 'font-weight: ' . $options->title_fontweight . ';';
		}

		if (!empty($options->title_text_color)) {
			$titleStyle .= 'color:' . $options->title_text_color . ';';
		}

		$titleMarginTop = AddonHelper::generateMultiDeviceObject($options, 'title_margin_top', 'margin-top', $device);
		$titleMarginBottom = AddonHelper::generateMultiDeviceObject($options, 'title_margin_bottom', 'margin-bottom', $device);

		$titleStyle .= $titleMarginTop->$device;
		$titleStyle .= $titleMarginBottom->$device;

		$titleSelector = '.sp-page-builder .page-content #' . $row_id . ' .sppb-section-title .sppb-title-heading';

		$titleFontSize = $titleFontSize ?? new stdClass;
		$titleStyleMedia = array_map(
			function ($size) use (
				$titleSelector,
				$titleFontSize,
				$titleMarginTop,
				$titleMarginBottom
			) {
				$str = AddonHelper::mediaQuery($size);
				$str .= $titleSelector . '{';
				$str .= $titleFontSize->$size ?? '';
				$str .= $titleMarginTop->$size ?? '';
				$str .= $titleMarginBottom->$size ?? '';
				$str .= '}';
				$str .= '}';

				return $str;
			},
			$deviceList
		);

		$titleStyleMedia = implode("\r\n", $titleStyleMedia);

		$row_styles .= !empty($titleStyle) ? '.sp-page-builder .page-content #' . $row_id . ' .sppb-section-title .sppb-title-heading {' . $titleStyle . '}' : '';
		$row_styles .= !empty($titleStyleMedia) ? $titleStyleMedia : '';
	}

	// Subtitle font size
	if (!empty($options->subtitle)) {
		$subTitleStyle = '';

		$subtitleFontSize = AddonHelper::generateMultiDeviceObject($options, 'subtitle_fontsize', 'font-size', $device);
		$subtitleSelector = '.sp-page-builder .page-content #' . $row_id . ' .sppb-section-title .sppb-title-subheading';

		if (!empty($options->title_position)) {
			$titleAlignment = CSSHelper::parseAlignment($options, 'title_position');
			$subTitleStyle .= 'text-align: ' . $titleAlignment . ';';
		}

		$subtitleStyleMedia = array_map(
			function ($size) use (
				$subtitleSelector,
				$subtitleFontSize
			) {
				$str = AddonHelper::mediaQuery($size);
				$str .= $subtitleSelector . '{';
				$str .= $subtitleFontSize->$size;
				$str .= '}';
				$str .= '}';

				return $str;
			},
			$deviceList
		);

		$subtitleStyleMedia = implode("\r\n", $subtitleStyleMedia);
		$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' .sppb-section-title .sppb-title-subheading {' . $subtitleFontSize->$device . '}';
		$row_styles .= '.sp-page-builder .page-content #' . $row_id . ' .sppb-section-title .sppb-title-subheading {' . $subTitleStyle . '}';
		$row_styles .= !empty($subtitleStyleMedia) ? $subtitleStyleMedia : '';
	}
}

//container width
if (isset($options->fullscreen) && !$options->fullscreen && isset($options->container_width) && is_object($options->container_width) && isset($options->container_width->md) && $options->container_width->md != '') {
	$row_styles .= '@media (min-width: 1400px) {#' . $row_id . ' > .sppb-row-container { max-width:' . $options->container_width->md . 'px;}}';
} else if (isset($options->fullscreen) && !$options->fullscreen && isset($options->container_width) && !is_object($options->container_width)) {
	$row_styles .= '@media (min-width: 1400px) {#' . $row_id . ' > .sppb-row-container { max-width:' . $options->container_width . 'px;}}';
}

if (property_exists($options, 'no_gutter') && !$options->no_gutter) {
	if (!$options->no_gutter && isset($options->columns_gap) && is_object($options->columns_gap)) {
		$columnsGapMargin = AddonHelper::initDeviceObject();
		$columnsGapPadding = AddonHelper::initDeviceObject();
		$gapUnit = $options->columns_gap->unit;

		foreach ($columnsGapMargin as $key => $gaps) {
			if (!empty($options->columns_gap->$key)) {
				$gap = (int) $options->columns_gap->$key / 2;
				$columnsGapMargin->$key .= 'margin-left: -' . $gap . $gapUnit . ';';
				$columnsGapMargin->$key .= 'margin-right: -' . $gap . $gapUnit . ';';
				$columnsGapPadding->$key .= 'padding-left: ' . $gap . $gapUnit . ';';
				$columnsGapPadding->$key .= 'padding-right: ' . $gap . $gapUnit . ';';
			}
		}

		$rowContainerClass = (isset($options->fullscreen) && boolval($options->fullscreen)) ? ".sppb-container-inner" : ".sppb-row-container";
		$marginSelector = '#' . $row_id . ' > ' . $rowContainerClass . ' > .sppb-row ';
		$paddingSelector = '#' . $row_id . ' >  ' . $rowContainerClass . ' > .sppb-row > div';
		$columnsGapMarginStyle = $marginSelector . '{' . $columnsGapMargin->$device . '}';
		$columnsGapPaddingStyle = $paddingSelector . '{' . $columnsGapPadding->$device . '}';

		$columnsGapMedia = array_map(
			function ($size) use (
				$marginSelector,
				$paddingSelector,
				$columnsGapMargin,
				$columnsGapPadding
			) {
				$str = AddonHelper::mediaQuery($size);
				$str .= $marginSelector . '{';
				$str .= $columnsGapMargin->$size;
				$str .= '}';
				$str .= $paddingSelector . '{';
				$str .= $columnsGapPadding->$size;
				$str .= '}';
				$str .= '}';

				return $str;
			},
			$deviceList
		);

		$columnsGapMedia = implode("\r\n", $columnsGapMedia);


		$row_styles .= $columnsGapMarginStyle;
		$row_styles .= $columnsGapPaddingStyle;
		$row_styles .= $columnsGapMedia;

		// nested row
		$marginSelectorNested = '#' . $row_id . ' > .sppb-container-inner > .sppb-nested-row';
		$paddingSelectorNested = '#' . $row_id . ' > .sppb-container-inner > .sppb-nested-row > div';
		$columnsGapMarginStyleNested = $marginSelectorNested . '{' . $columnsGapMargin->$device . '}';
		$columnsGapPaddingStyleNested = $paddingSelectorNested . '{' . $columnsGapPadding->$device . '}';

		$columnsGapMediaNested = array_map(
			function ($size) use (
				$marginSelectorNested,
				$paddingSelectorNested,
				$columnsGapMargin,
				$columnsGapPadding
			) {
				$str = AddonHelper::mediaQuery($size);
				$str .= $marginSelectorNested . '{';
				$str .= $columnsGapMargin->$size;
				$str .= '}';
				$str .= $paddingSelectorNested . '{';
				$str .= $columnsGapPadding->$size;
				$str .= '}';
				$str .= '}';

				return $str;
			},
			$deviceList
		);

		$columnsGapMediaNested = implode("\r\n", $columnsGapMediaNested);


		$row_styles .= $columnsGapMarginStyleNested;
		$row_styles .= $columnsGapPaddingStyleNested;
		$row_styles .= $columnsGapMediaNested;
	}
}

if(isset($options->row_custom_css) && $options->row_custom_css) {
	$row_styles .= SppbCustomCssParser::getCss('row', $options->row_custom_css, $rowSelector , '');
}

echo $row_styles;
