<?php
/**
 *  Dynamic CSS
 *
 * @package    Smart_Post_Show_Pro
 * @subpackage Smart_Post_Show_Pro/public
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$classes = get_body_class();
if ( in_array( 'et_divi_builder', $classes, true ) ) {
	$layout_preset             = isset( $layouts['pcp_layout_preset'] ) ? $layouts['pcp_layout_preset'] : '';
	$popup_content_color       = isset( $view_options['popup_content_color'] ) ? $view_options['popup_content_color'] : '';
	$popup_title_color         = isset( $popup_content_color['post-title'] ) ? $popup_content_color['post-title'] : '#111';
	$popup_meta_color          = isset( $popup_content_color['post-meta'] ) ? $popup_content_color['post-meta'] : '#888';
	$popup_post_content_color  = isset( $popup_content_color['post-content'] ) ? $popup_content_color['post-content'] : '#444';
	$popup_custom_fields_color = isset( $popup_content_color['custom-fields'] ) ? $popup_content_color['custom-fields'] : '#888';
	$show_section_title        = isset( $view_options['section_title'] ) ? $view_options['section_title'] : false;
	$pcp_post_type             = isset( $view_options['pcp_select_post_type'] ) ? $view_options['pcp_select_post_type'] : '';
	// Section Title.
	if ( $show_section_title ) {
		$section_title_margin_top    = isset( $view_options['section_title_margin']['top'] ) && $view_options['section_title_margin']['top'] > 0 ? $view_options['section_title_margin']['top'] . 'px' : 0;
		$section_title_margin_right  = isset( $view_options['section_title_margin']['right'] ) && $view_options['section_title_margin']['right'] > 0 ? $view_options['section_title_margin']['right'] . 'px' : 0;
		$section_title_margin_bottom = isset( $view_options['section_title_margin']['bottom'] ) && $view_options['section_title_margin']['bottom'] > 0 ? $view_options['section_title_margin']['bottom'] . 'px' : 0;
		$section_title_margin_left   = isset( $view_options['section_title_margin']['left'] ) && $view_options['section_title_margin']['left'] > 0 ? $view_options['section_title_margin']['left'] . 'px' : 0;
		$_section_title_typography   = isset( $view_options['section_title_typography'] ) && array_key_exists( 'font-size', $view_options['section_title_typography'] ) ? $view_options['section_title_typography'] : array(
			'color'              => '#444',
			'font-family'        => '',
			'font-weight'        => '',
			'subset'             => '',
			'font-size'          => '24',
			'tablet-font-size'   => '20',
			'mobile-font-size'   => '18',
			'line-height'        => '28',
			'tablet-line-height' => '24',
			'mobile-line-height' => '20',
			'letter-spacing'     => '0',
			'text-align'         => 'left',
			'text-transform'     => 'none',
			'type'               => '',
			'unit'               => 'px',
		);
		$section_title_font_weight   = ! empty( $_section_title_typography['font-weight'] ) ? $_section_title_typography['font-weight'] : '400';
		$section_title_font_style    = ! empty( $_section_title_typography['font-style'] ) ? $_section_title_typography['font-style'] : 'normal';
		$custom_css                 .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-section-title{";
		if ( ! empty( $_section_title_typography['font-family'] ) ) {
			$pcp_typography[] = $_section_title_typography;
			$custom_css      .= "font-family: {$_section_title_typography['font-family']};font-weight: {$section_title_font_weight};font-style: {$section_title_font_style};";
		}
		$custom_css .= "text-align: {$_section_title_typography['text-align']};text-transform: {$_section_title_typography['text-transform']};font-size: {$_section_title_typography['font-size']}px;line-height: {$_section_title_typography['line-height']}px;letter-spacing: {$_section_title_typography['letter-spacing']}px;color: {$_section_title_typography['color']};margin: {$section_title_margin_top} {$section_title_margin_right} {$section_title_margin_bottom} {$section_title_margin_left}}";
	}
	$margin_between_horizontal_post = isset( $view_options['margin_between_post']['left-right'] ) ? (int) $view_options['margin_between_post']['left-right'] : 20;
	$margin_between_vertical_post   = isset( $view_options['margin_between_post']['top-bottom'] ) ? (int) $view_options['margin_between_post']['top-bottom'] : 20;
	$margin_between_post_half       = $margin_between_horizontal_post / 2;
	$custom_css                    .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-row {column-gap: {$margin_between_horizontal_post}px; row-gap: {$margin_between_vertical_post}px;}#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-row .sp-pcp-block-hierarchical{grid-gap: {$margin_between_horizontal_post}px;}";
	if ( 'masonry_layout' === $pcp_layout_preset || 'filter_layout' === $pcp_layout_preset ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-row{ margin-right: -{$margin_between_post_half}px;margin-left: -{$margin_between_post_half}px;}#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-row [class*='sp-pcp-col-']{padding-right: {$margin_between_post_half}px;padding-left: {$margin_between_post_half}px;padding-bottom: {$margin_between_vertical_post}px;}";
	}
	/**
	 * Style for each slide/post.
	 */
	$post_sorter = isset( $view_options['post_content_sorter'] ) ? $view_options['post_content_sorter'] : '';
	// Post Title.
	if ( $post_sorter['pcp_post_title']['show_post_title'] ) {
		$post_title_margin = isset( $post_sorter['pcp_post_title']['post_title_margin'] ) ? $post_sorter['pcp_post_title']['post_title_margin'] : array(
			'top'    => '0',
			'right'  => '0',
			'bottom' => '9',
			'left'   => '0',
		);

		$_post_title_typography = isset( $view_options['post_title_typography'] ) && array_key_exists( 'font-size', $view_options['post_title_typography'] ) ? $view_options['post_title_typography'] : array(
			'color'              => '#111',
			'hover_color'        => '#e1624b',
			'font-family'        => '',
			'font-weight'        => '',
			'subset'             => '',
			'font-size'          => '20',
			'tablet-font-size'   => '18',
			'mobile-font-size'   => '16',
			'line-height'        => '24',
			'tablet-line-height' => '22',
			'mobile-line-height' => '20',
			'letter-spacing'     => '0',
			'text-align'         => 'left',
			'text-transform'     => 'none',
			'type'               => '',
			'unit'               => 'px',
		);
		$post_title_font_weight = ! empty( $_post_title_typography['font-weight'] ) ? $_post_title_typography['font-weight'] : '400';
		$post_title_font_style  = ! empty( $_post_title_typography['font-style'] ) ? $_post_title_typography['font-style'] : 'normal';
		$custom_css            .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-title a,.pcp-modal-{$pcp_id} .sp-pcp-title, .pcp-wrapper-{$pcp_id} .pcp-collapse-header a{";
		if ( ! empty( $_post_title_typography['font-family'] ) ) {
			$pcp_typography[] = $_post_title_typography;
			$custom_css      .= "font-family: {$_post_title_typography['font-family']};font-weight: {$post_title_font_weight};font-style: {$post_title_font_style};";
		}
		if ( 'zigzag_layout' !== $layout_preset ) {
			$custom_css .= "text-align: {$_post_title_typography['text-align']};";
		}
		$custom_css .= "text-transform: {$_post_title_typography['text-transform']};font-size: {$_post_title_typography['font-size']}px;line-height: {$_post_title_typography['line-height']}px;letter-spacing: {$_post_title_typography['letter-spacing']}px;color: {$_post_title_typography['color']};display: inherit;}#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-title,.pcp-modal-{$pcp_id} .sp-pcp-title {margin: {$post_title_margin['top']}px {$post_title_margin['right']}px {$post_title_margin['bottom']}px {$post_title_margin['left']}px;}#et-boc .et-l .pcp-wrapper-{$pcp_id} .pcp-collapse-header a{display: inline-block;}.pcp-modal-{$pcp_id} .sp-pcp-title{text-align: {$_post_title_typography['text-align']};color: {$popup_title_color}; display: block;}";
		$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-title a:hover,#et-boc .et-l .pcp-wrapper-{$pcp_id} .pcp-collapse-header:hover a{color: {$_post_title_typography['hover_color']};}";
	}

	// Post Content.
	if ( $post_sorter['pcp_post_content']['show_post_content'] ) {
		$post_content_margin      = isset( $post_sorter['pcp_post_content']['post_content_margin'] ) ? $post_sorter['pcp_post_content']['post_content_margin'] : array(
			'top'    => '0',
			'right'  => '0',
			'bottom' => '17',
			'left'   => '0',
		);
		$_post_content_typography = isset( $view_options['post_content_typography'] ) && array_key_exists( 'font-size', $view_options['post_content_typography'] ) ? $view_options['post_content_typography'] : array(
			'color'              => '#444',
			'font-family'        => '',
			'font-weight'        => '',
			'subset'             => '',
			'font-size'          => '16',
			'tablet-font-size'   => '14',
			'mobile-font-size'   => '12',
			'line-height'        => '20',
			'tablet-line-height' => '18',
			'mobile-line-height' => '18',
			'letter-spacing'     => '0',
			'text-align'         => 'left',
			'text-transform'     => 'none',
			'type'               => '',
			'unit'               => 'px',
		);
		$post_content_font_weight = ! empty( $_post_content_typography['font-weight'] ) ? $_post_content_typography['font-weight'] : '400';
		$post_content_font_style  = ! empty( $_post_content_typography['font-style'] ) ? $_post_content_typography['font-style'] : 'normal';
		$custom_css              .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content,.pcp-modal-{$pcp_id} .sp-pcp-post-content, #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content p, .pcp-modal-{$pcp_id} .sp-pcp-post-content p{";
		if ( ! empty( $_post_content_typography['font-family'] ) ) {
			$pcp_typography[] = $_post_content_typography;
			$custom_css      .= "font-family: {$_post_content_typography['font-family']};font-weight: {$post_content_font_weight};font-style: {$post_content_font_style};";
		}
		if ( 'zigzag_layout' !== $layout_preset ) {
			$custom_css .= "text-align: {$_post_content_typography['text-align']};";
		}
		$custom_css .= "text-transform: {$_post_content_typography['text-transform']};font-size: {$_post_content_typography['font-size']}px;line-height: {$_post_content_typography['line-height']}px;letter-spacing: {$_post_content_typography['letter-spacing']}px;margin: {$post_content_margin['top']}px {$post_content_margin['right']}px {$post_content_margin['bottom']}px {$post_content_margin['left']}px;color: {$_post_content_typography['color']}; }";
	}

	if ( 'carousel_layout' === $layout_preset || 'slider_layout' === $layout_preset || 'thumbnails_slider' === $layout_preset ) {
		include SP_PCP_PATH . '/public/dynamic-css/carousel-css.php';
	}
	$custom_css .= ".pcp-modal-{$pcp_id} .sp-pcp-post-content{color: {$popup_post_content_color};}";
	//
	// Global Settings.
	//
	// Content orientation [Overlay].
	$post_content_orientation   = $view_options['post_content_orientation'];
	$post_details_class         = 'overlay-box' === $post_content_orientation ? '.sp-pcp-post-details' : '';
	$post_details_content_class = 'overlay-box' === $post_content_orientation ? '.sp-pcp-post-details-content' : '';
	if ( in_array( $post_content_orientation, array( 'overlay', 'overlay-box' ), true ) && 'accordion_layout' !== $layout_preset && 'timeline_layout' !== $layout_preset && 'list_layout' !== $layout_preset && 'zigzag_layout' !== $layout_preset ) {
		$post_overlay_background_type     = $view_options['post_overlay_background_type'];
		$post_overlay_background          = $view_options['post_overlay_background'];
		$post_overlay_gradient_background = $view_options['post_overlay_gradient_background'];
		switch ( $post_overlay_background_type ) {
			case 'solid':
				$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-post-details {$post_details_content_class}{background: {$post_overlay_background};}";
				break;
			case 'gradient':
				$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-post-details {$post_details_content_class}{background-color: {$post_overlay_gradient_background['background-color']};background-image: linear-gradient({$post_overlay_gradient_background['background-gradient-direction']}, {$post_overlay_gradient_background['background-color']},{$post_overlay_gradient_background['background-gradient-color']});}";
				break;
		}
		if ( 'on_hover' === $view_options['post_overlay_content_visibility'] ) {
			$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-post-details{opacity: 0;transition: .3s ease-out;}#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post:hover .sp-pcp-post-details{opacity: 1;z-index:10;}";
		}
	}

	// Post border.
	$_post_border = isset( $view_options['post_border'] ) ? $view_options['post_border'] : array(
		'all'           => '0',
		'style'         => 'solid',
		'color'         => '#e2e2e2',
		'border_radius' => '0',
		'unit'          => 'px',
	);

	if ( isset( $_post_border['all'] ) ) {
		$_post_border['border_radius'] = isset( $_post_border['border_radius'] ) ? $_post_border['border_radius'] : '0';
		$_post_border['unit']          = isset( $_post_border['unit'] ) ? $_post_border['unit'] : 'px';
		$custom_css                   .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post {$post_details_class} {$post_details_content_class}{border: {$_post_border['all']}px {$_post_border['style']} {$_post_border['color']};border-radius:{$_post_border['border_radius']}{$_post_border['unit']};}";
	}


	// Post box shadow.
	$show_post_box_shadow = SP_PCP_Functions::pcp_metabox_value( 'show_post_box_shadow', $view_options, false );
	if ( $show_post_box_shadow && 'none' !== $show_post_box_shadow ) {
		$post_box_shadow_property = SP_PCP_Functions::pcp_metabox_value(
			'post_box_shadow_property',
			$view_options,
			array(
				'horizontal'  => '0',
				'vertical'    => '0',
				'blur'        => '8',
				'spread'      => '0',
				'color'       => 'rgb(187, 187, 187)',
				'hover_color' => 'rgb(187, 187, 187)',
			)
		);
		$box_shadow_h             = SP_PCP_Functions::pcp_metabox_value( 'horizontal', $post_box_shadow_property );
		$box_shadow_v             = SP_PCP_Functions::pcp_metabox_value( 'vertical', $post_box_shadow_property );
		$box_shadow_blur          = SP_PCP_Functions::pcp_metabox_value( 'blur', $post_box_shadow_property );
		$box_shadow_spread        = SP_PCP_Functions::pcp_metabox_value( 'spread', $post_box_shadow_property );
		$box_shadow_color         = SP_PCP_Functions::pcp_metabox_value( 'color', $post_box_shadow_property );
		$box_shadow_hover_color   = SP_PCP_Functions::pcp_metabox_value( 'hover_color', $post_box_shadow_property );

		$box_shadow_style         = 'outset' === $show_post_box_shadow ? '' : 'inset';
		$box_shadow_margin_top    = 'inset' === $box_shadow_style ? '0' : ( $box_shadow_spread - $box_shadow_v + 0.5 * $box_shadow_blur );
		$box_shadow_margin_right  = 'inset' === $box_shadow_style ? '0' : ( $box_shadow_spread + $box_shadow_h + 0.5 * $box_shadow_blur );
		$box_shadow_margin_bottom = 'inset' === $box_shadow_style ? '0' : ( $box_shadow_spread + $box_shadow_v + 0.5 * $box_shadow_blur );
		$box_shadow_margin_left   = 'inset' === $box_shadow_style ? '0' : ( $box_shadow_spread - $box_shadow_h + 0.5 * $box_shadow_blur );
		$custom_css              .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post {$post_details_class} {$post_details_content_class}{box-shadow: {$box_shadow_h}px {$box_shadow_v}px {$box_shadow_blur}px {$box_shadow_spread}px {$box_shadow_color} {$box_shadow_style};margin: {$box_shadow_margin_top}px {$box_shadow_margin_right}px {$box_shadow_margin_bottom}px {$box_shadow_margin_left}px;#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post:hover{box-shadow: {$box_shadow_h}px {$box_shadow_v}px {$box_shadow_blur}px {$box_shadow_spread}px {$box_shadow_hover_color} {$box_shadow_style};}";
	}

	// Post background color.
	$post_background_property = SP_PCP_Functions::pcp_metabox_value( 'post_background_property', $view_options, 'transparent' );
	if ( ! in_array( $post_content_orientation, array( 'overlay', 'overlay-box' ), true ) ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post{background-color: {$post_background_property};}";
	}

	// Post inner padding.
	if ( 'overlay' !== $post_content_orientation ) {
		$_post_inner_padding       = SP_PCP_Functions::pcp_metabox_value(
			'post_inner_padding_property',
			$view_options,
			array(
				'top'    => '0',
				'right'  => '0',
				'bottom' => '0',
				'left'   => '0',
			)
		);
		$post_inner_padding_unit   = isset( $_post_inner_padding['unit'] ) ? $_post_inner_padding['unit'] : '';
		$post_inner_padding_top    = $_post_inner_padding['top'] > 0 ? $_post_inner_padding['top'] . $post_inner_padding_unit : '0';
		$post_inner_padding_right  = $_post_inner_padding['right'] > 0 ? $_post_inner_padding['right'] . $post_inner_padding_unit : '0';
		$post_inner_padding_bottom = $_post_inner_padding['bottom'] > 0 ? $_post_inner_padding['bottom'] . $post_inner_padding_unit : '0';
		$post_inner_padding_left   = $_post_inner_padding['left'] > 0 ? $_post_inner_padding['left'] . $post_inner_padding_unit : '0';
		$custom_css               .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post {$post_details_class} {padding: {$post_inner_padding_top} {$post_inner_padding_right} {$post_inner_padding_bottom} {$post_inner_padding_left};}";
	}

	//
	// Display Options.
	//
	// Post content padding.
	$post_content_padding_property = isset( $view_options['post_content_padding_property'] ) ? $view_options['post_content_padding_property'] : array(
		'top'    => '0',
		'right'  => '0',
		'bottom' => '0',
		'left'   => '0',
	);
	if ( 'list_layout' === $layout_preset || 'zigzag_layout' === $layout_preset ) {
		$post_content_padding_unit   = $post_content_padding_property['unit'];
		$post_content_padding_top    = $post_content_padding_property['top'] > 0 ? $post_content_padding_property['top'] . $post_content_padding_unit : 0;
		$post_content_padding_right  = $post_content_padding_property['right'] > 0 ? $post_content_padding_property['right'] . $post_content_padding_unit : 0;
		$post_content_padding_bottom = $post_content_padding_property['bottom'] > 0 ? $post_content_padding_property['bottom'] . $post_content_padding_unit : 0;
		$post_content_padding_left   = $post_content_padding_property['left'] > 0 ? $post_content_padding_property['left'] . $post_content_padding_unit : 0;
		$custom_css                 .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post-details {$post_details_content_class} {padding: {$post_content_padding_top} {$post_content_padding_right} {$post_content_padding_bottom} {$post_content_padding_left};}";
	} elseif ( 'zigzag_layout' !== $layout_preset || 'list_layout' !== $layout_preset || 'timeline_layout' !== $layout_preset || 'accordion_layout' !== $layout_preset || 'default' !== $post_content_orientation ) {
		$post_content_padding_property = isset( $view_options['post_content_padding_property_two'] ) ? $view_options['post_content_padding_property_two'] : $post_content_padding_property;
		$post_content_padding_unit     = isset( $post_content_padding_property['unit'] ) ? $post_content_padding_property['unit'] : 'px';
		$post_content_padding_top      = $post_content_padding_property['top'] > 0 ? $post_content_padding_property['top'] . $post_content_padding_unit : 0;
		$post_content_padding_right    = $post_content_padding_property['right'] > 0 ? $post_content_padding_property['right'] . $post_content_padding_unit : 0;
		$post_content_padding_bottom   = $post_content_padding_property['bottom'] > 0 ? $post_content_padding_property['bottom'] . $post_content_padding_unit : 0;
		$post_content_padding_left     = $post_content_padding_property['left'] > 0 ? $post_content_padding_property['left'] . $post_content_padding_unit : 0;
		$custom_css                   .= "#pcp_wrapper-{$pcp_id} .sp-pcp-post-details {$post_details_content_class} {padding: {$post_content_padding_top} {$post_content_padding_right} {$post_content_padding_bottom} {$post_content_padding_left};}";
	}

	/**
	 * Post Thumbnail CSS.
	 */
	$post_thumb_css           = $post_sorter['pcp_post_thumb'];
	$post_thumb_margin        = isset( $post_thumb_css['post_thumb_margin'] ) ? $post_thumb_css['post_thumb_margin'] : array(
		'top'    => '0',
		'right'  => '0',
		'bottom' => '11',
		'left'   => '0',
	);
	$post_thumb_border_radius = isset( $post_thumb_css['post_thumb_border_radius'] ) ? $post_thumb_css['post_thumb_border_radius'] : array(
		'all'  => '0',
		'unit' => 'px',
	);
	// Post thumb border radius.
	$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post .pcp-post-thumb-wrapper{border-radius: {$post_thumb_border_radius['all']}{$post_thumb_border_radius['unit']};margin: {$post_thumb_margin['top']}px {$post_thumb_margin['right']}px {$post_thumb_margin['bottom']}px {$post_thumb_margin['left']}px;}.pcp-modal-{$pcp_id} .sp-pcp-post .sp-pcp-post-thumb-area {margin: {$post_thumb_margin['top']}px {$post_thumb_margin['right']}px {$post_thumb_margin['bottom']}px {$post_thumb_margin['left']}px;}#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-overlay.sp-pcp-post .pcp-post-thumb-wrapper,#et-boc .et-l #pcp_wrapper-{$pcp_id} .left-thumb.sp-pcp-post .pcp-post-thumb-wrapper,#et-boc .et-l #pcp_wrapper-{$pcp_id} .right-thumb.sp-pcp-post .pcp-post-thumb-wrapper,#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-content-box.sp-pcp-post .pcp-post-thumb-wrapper{margin: 0;}";

	// Border for Post thumb.
	$post_thumb_border = isset( $post_thumb_css['pcp_thumb_border'] ) ? $post_thumb_css['pcp_thumb_border'] : array(
		'all'           => '0',
		'style'         => 'solid',
		'color'         => '#dddddd',
		'border_radius' => '0',
		'unit'          => 'px',
	);
	if ( isset( $post_thumb_border['all'] ) ) {
		$post_thumb_border['border_radius'] = isset( $post_thumb_border['border_radius'] ) ? $post_thumb_border['border_radius'] : 0;
		$post_thumb_border['unit']          = isset( $post_thumb_border['unit'] ) ? $post_thumb_border['unit'] : 'px';
		$custom_css                        .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-thumb-wrapper{border: {$post_thumb_border['all']}px {$post_thumb_border['style']} {$post_thumb_border['color']};border-radius:{$post_thumb_border['border_radius']}{$post_thumb_border['unit']};}";
	}

	// Grayscale effect.
	$post_thumb_gray_scale = isset( $post_thumb_css['post_thumb_gray_scale'] ) ? $post_thumb_css['post_thumb_gray_scale'] : 'none';
	if ( 'gray_and_normal' === $post_thumb_gray_scale ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-thumb img{-webkit-filter: grayscale(100%);filter: grayscale(100%);}#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post:hover .sp-pcp-thumb img{-webkit-filter: grayscale(0);filter: grayscale(0);}";
	} elseif ( 'gray_on_hover' === $post_thumb_gray_scale ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-thumb img{-webkit-filter: grayscale(0);filter: grayscale(0);}#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post:hover .sp-pcp-thumb img{-webkit-filter: grayscale(100%);filter: grayscale(100%);}";
	} elseif ( 'always_gray' === $post_thumb_gray_scale ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-thumb img,#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post:hover .sp-pcp-thumb img{-webkit-filter: grayscale(100%);filter: grayscale(100%);}";
	}
	// Zoom effect.
	$post_thumb_zoom = isset( $post_thumb_css['post_thumb_zoom'] ) ? $post_thumb_css['post_thumb_zoom'] : 'none';
	if ( 'zoom_in' === $post_thumb_zoom ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post-thumb-area:hover img,
		#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-overlay:hover .pcp-post-thumb-wrapper img,
		#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-content-box:hover .pcp-post-thumb-wrapper im{transform: scale(1.08);}";
	} elseif ( 'zoom_out' === $post_thumb_zoom ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-thumb-wrapper img,
		#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-overlay .pcp-post-thumb-wrapper img,
		#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-content-box .pcp-post-thumb-wrapper img
		{transform: scale(1.08);}
		#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-thumb-wrapper:hover img,
		#pcp_wrapper-{$pcp_id} .sp-overlay:hover .pcp-post-thumb-wrapper img,
		#pcp_wrapper-{$pcp_id} .sp-pcp-content-box:hover .pcp-post-thumb-wrapper img{transform: scale(1.0);}";
	}

	// Custom Fields.
	$_custom_fields_typography = isset( $view_options['custom_fields_typography'] ) && array_key_exists( 'font-size', $view_options['custom_fields_typography'] ) ? $view_options['custom_fields_typography'] : array(
		'color'              => '#888',
		'font-family'        => '',
		'font-weight'        => '',
		'subset'             => '',
		'font-size'          => '14',
		'tablet-font-size'   => '14',
		'mobile-font-size'   => '12',
		'line-height'        => '18',
		'tablet-line-height' => '18',
		'mobile-line-height' => '16',
		'letter-spacing'     => '0',
		'text-align'         => 'left',
		'text-transform'     => 'none',
		'type'               => '',
		'unit'               => 'px',
	);
	$custom_fields_font_weight = ! empty( $_custom_fields_typography['font-weight'] ) ? $_custom_fields_typography['font-weight'] : '400';
	$custom_fields_font_style  = ! empty( $_custom_fields_typography['font-style'] ) ? $_custom_fields_typography['font-style'] : 'normal';
	$pcp_custom_fields_margin  = isset( $post_sorter['pcp_custom_fields']['pcp_custom_fields_margin'] ) ? $post_sorter['pcp_custom_fields']['pcp_custom_fields_margin'] : array(
		'top'    => '0',
		'right'  => '0',
		'bottom' => '15',
		'left'   => '0',
	);
	$custom_css               .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp_pcp_cf_list,.pcp-popup-{$pcp_id} .sp_pcp_cf_list{";
	if ( ! empty( $_custom_fields_typography['font-family'] ) ) {
		$pcp_typography[] = $_custom_fields_typography;
		$custom_css      .= "font-family: {$_custom_fields_typography['font-family']};font-weight: {$custom_fields_font_weight};font-style: {$custom_fields_font_style};";
	}
	if ( 'zigzag_layout' !== $layout_preset ) {
		$custom_css .= "text-align: {$_custom_fields_typography['text-align']};";
	}
	$custom_css .= "text-transform: {$_custom_fields_typography['text-transform']};font-size: {$_custom_fields_typography['font-size']}px;line-height: {$_custom_fields_typography['line-height']}px;letter-spacing: {$_custom_fields_typography['letter-spacing']}px;color: {$_custom_fields_typography['color']};margin: {$pcp_custom_fields_margin['top']}px {$pcp_custom_fields_margin['right']}px {$pcp_custom_fields_margin['bottom']}px {$pcp_custom_fields_margin['left']}px;}.pcp-popup-{$pcp_id} .sp_pcp_cf_list{color: {$popup_custom_fields_color};}";
	// Ajax Live filter buttons Font Properties.
	$live_filter_btn_font_typo = isset( $view_options['live_filter_btn_font_properties'] ) ? $view_options['live_filter_btn_font_properties'] : array(
		'font-family'    => '',
		'font-weight'    => '700',
		'font-size'      => '13',
		'letter-spacing' => '0',
		'text-transform' => 'uppercase',
		'unit'           => 'px',
	);
	if ( ! empty( $live_filter_btn_font_typo['font-family'] ) ) {
		$pcp_typography[] = $live_filter_btn_font_typo;
	}
	// Post Meta.
	$_post_meta_typography    = isset( $view_options['post_meta_typography'] ) && array_key_exists( 'font-size', $view_options['post_meta_typography'] ) ? $view_options['post_meta_typography'] : array(
		'color'              => '#888',
		'hover_color'        => '#e1624b',
		'font-family'        => '',
		'font-weight'        => '',
		'subset'             => '',
		'font-size'          => '14',
		'tablet-font-size'   => '14',
		'mobile-font-size'   => '12',
		'line-height'        => '16',
		'tablet-line-height' => '16',
		'mobile-line-height' => '16',
		'letter-spacing'     => '0',
		'text-align'         => 'left',
		'text-transform'     => 'none',
		'type'               => '',
		'unit'               => 'px',
	);
	$post_meta_font_weight    = ! empty( $_post_meta_typography['font-weight'] ) ? $_post_meta_typography['font-weight'] : '400';
	$post_meta_font_style     = ! empty( $_post_meta_typography['font-style'] ) ? $_post_meta_typography['font-style'] : 'normal';
	$post_meta_margin         = isset( $post_sorter['pcp_post_meta']['post_meta_margin'] ) ? $post_sorter['pcp_post_meta']['post_meta_margin'] : array(
		'top'    => '0',
		'right'  => '0',
		'bottom' => '9',
		'left'   => '0',
	);
	$post_meta_between_margin = isset( $post_sorter['pcp_post_meta']['post_meta_between_margin'] ) ? $post_sorter['pcp_post_meta']['post_meta_between_margin'] : array(
		'top'    => '0',
		'right'  => '5',
		'bottom' => '5',
		'left'   => '0',
	);
	$custom_css              .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post .pcp-category a,#et-boc .et-l .pcp-wrapper-{$pcp_id}  .sp-pcp-post .sp-pcp-post-meta ul li{
		margin: {$post_meta_between_margin['top']}px {$post_meta_between_margin['right']}px {$post_meta_between_margin['bottom']}px {$post_meta_between_margin['left']}px;
	}";
	$custom_css              .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li,#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta ul,#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a,.pcp-popup-{$pcp_id} .sp-pcp-post-meta ul,.pcp-popup-{$pcp_id} .sp-pcp-post-meta li,.pcp-popup-{$pcp_id} .sp-pcp-post-meta li a{";
	if ( ! empty( $_post_meta_typography['font-family'] ) ) {
		$pcp_typography[] = $_post_meta_typography;
		$custom_css      .= "font-family: {$_post_meta_typography['font-family']};font-weight: {$post_meta_font_weight};font-style: {$post_meta_font_style};";
	}

	$custom_css .= "text-transform: {$_post_meta_typography['text-transform']};font-size: {$_post_meta_typography['font-size']}px;line-height: {$_post_meta_typography['line-height']}px;letter-spacing: {$_post_meta_typography['letter-spacing']}px;color: {$_post_meta_typography['color']};}.pcp-popup-{$pcp_id} .sp-pcp-post-meta ul,.pcp-popup-{$pcp_id} .sp-pcp-post-meta li,.pcp-popup-{$pcp_id} .sp-pcp-post-meta li a {color: {$popup_meta_color};}.pcp-modal-{$pcp_id} .sp-pcp-post-meta,#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta{margin: {$post_meta_margin['top']}px {$post_meta_margin['right']}px {$post_meta_margin['bottom']}px {$post_meta_margin['left']}px;";
	if ( 'zigzag_layout' !== $layout_preset ) {
		$custom_css .= "text-align: {$_post_meta_typography['text-align']};";
	}
	$custom_css .= '}';

	$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a:hover,.pcp-popup-{$pcp_id} .sp-pcp-post-meta li a:hover{color: {$_post_meta_typography['hover_color']};}";

	// Post Pill Meta Color. ( button style meta ).
	$post_meta_group = isset( $post_sorter['pcp_post_meta']['pcp_post_meta_group'] ) ? $post_sorter['pcp_post_meta']['pcp_post_meta_group'] : '';
	$title_above     = 1;
	$over_thumb      = 1;
	$show_post_meta  = isset( $post_sorter['pcp_post_meta']['show_post_meta'] ) ? $post_sorter['pcp_post_meta']['show_post_meta'] : true;

	if ( is_array( $post_meta_group ) && $show_post_meta ) {
		foreach ( $post_meta_group as $key => $post_meta ) {
			$selected_meta      = $post_meta['select_post_meta'];
			$meta_position      = isset( $post_meta['pcp_meta_position'] ) ? $post_meta['pcp_meta_position'] : '';
			$meta_pill_color    = isset( $post_meta['pcp_meta_pill_color'] ) ? $post_meta['pcp_meta_pill_color'] : array(
				'text' => '#fff',
				'bg'   => '#e53935',
			);
			$pcp_taxonomy       = isset( $post_meta['post_meta_taxonomy'] ) ? $post_meta['post_meta_taxonomy'] : '';
			$pcp_taxonomy_class = ! empty( $pcp_taxonomy ) ? ".{$pcp_taxonomy}" : '';
			$text_color         = $meta_pill_color['text'];
			$bg                 = $meta_pill_color['bg'];
			if ( 'taxonomy' === $selected_meta ) {
				if ( 'over_thumb' === $meta_position ) {
					$meta_over_thumb_position = isset( $post_meta['pcp_meta_over_thump_position'] ) ? $post_meta['pcp_meta_over_thump_position'] : 'top_left';
					$custom_css              .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post-thumb-area {$pcp_taxonomy_class}.pcp-category.{$meta_over_thumb_position} a,.pcp-modal-{$pcp_id} .sp-pcp-post-thumb-area {$pcp_taxonomy_class}.pcp-category.{$meta_over_thumb_position} a{ color: {$text_color}; background: {$bg};}";
					++$over_thumb;
				}
				if ( 'above_title' === $meta_position ) {
					$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} {$pcp_taxonomy_class}.pcp-category.above_title,.pcp-modal-{$pcp_id} {$pcp_taxonomy_class}.pcp-category.above_title{
						text-align: {$_post_meta_typography['text-align']};
					}#et-boc .et-l #pcp_wrapper-{$pcp_id} {$pcp_taxonomy_class}.pcp-category.above_title a,.pcp-modal-{$pcp_id} {$pcp_taxonomy_class}.pcp-category.above_title a{ color: {$text_color}; background: {$bg};}";
					++$title_above;
				}
			}
		}
	}
	if ( ! empty( $_post_meta_typography['font-family'] ) ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-post-thumb-area .pcp-category a,.pcp-modal-{$pcp_id} .sp-pcp-post-thumb-area .pcp-category a{font-family: {$_post_meta_typography['font-family']};}";
	}

	/* Popup */
	if ( 'popup' === $view_options['pcp_page_link_type'] ) {
		$max_width  = isset( $view_options['pcp_popup_width']['all'] ) ? $view_options['pcp_popup_width'] : array(
			'all'  => 1050,
			'unit' => 'px',
		);
		$max_height = isset( $view_options['pcp_popup_height']['all'] ) ? $view_options['pcp_popup_height'] : array(
			'all'  => 700,
			'unit' => 'px',
		);

		$close_btn_size = isset( $view_options['popup_close_btn_size']['all'] ) ? $view_options['popup_close_btn_size']['all'] : '30';
		$custom_css    .= ".pcp-modal-{$pcp_id}.pcp-modal{background: {$view_options['popup_bg_color']};max-width: {$max_width['all']}{$max_width['unit']};max-height: {$max_height['all']}{$max_height['unit']};}.pcp-popup-{$pcp_id}.mfp-bg {background: {$view_options['popup_overlay_color']};}.pcp-modal-{$pcp_id}.pcp-modal button.mfp-close{color: {$view_options['popup_close_button_color']['color']};font-size: {$close_btn_size}px;width: {$close_btn_size}px;height: {$close_btn_size}px;}.pcp-modal-{$pcp_id}.pcp-modal button.mfp-close:hover{color: {$view_options['popup_close_button_color']['hover-color']};}.pcp-popup-{$pcp_id} .pcp-popup-button-prev,.pcp-popup-{$pcp_id} .pcp-popup-button-next {color: {$view_options['popup_nav_color']['color']};background: {$view_options['popup_nav_color']['bg']};}.pcp-popup-{$pcp_id} .pcp-popup-button-prev:hover,.pcp-popup-{$pcp_id} .pcp-popup-button-next:hover{color: {$view_options['popup_nav_color']['hover-color']};background: {$view_options['popup_nav_color']['hover-bg']};}";
		// Social Share.
		$post_social_settings = $post_sorter['pcp_social_share'];
		$social_margin        = isset( $post_social_settings['social_margin'] ) ? $post_social_settings['social_margin'] : array(
			'top'    => '0',
			'right'  => '0',
			'bottom' => '0',
			'left'   => '0',
		);
		$icon_custom_color    = isset( $post_social_settings['social_icon_custom_color'] ) ? $post_social_settings['social_icon_custom_color'] : false;
		$social_icon_color    = isset( $post_social_settings['social_icon_color'] ) ? $post_social_settings['social_icon_color'] : array(
			'icon_color'        => '#ffffff',
			'icon_hover_color'  => '#ffffff',
			'icon_bg'           => '#e1624b',
			'icon_bg_hover'     => '#C75657',
			'icon_border_hover' => '#C75657',
		);
		$social_position      = isset( $post_social_settings['social_position'] ) ? $post_social_settings['social_position'] : 'left';
		if ( 'zigzag_layout' !== $layout_preset ) {
			$custom_css .= "#pcp_wrapper-{$pcp_id}  .sp-pcp-post .sp-pcp-social-share{text-align: {$social_position};}";
		}
		$custom_css .= ".pcp-popup-{$pcp_id}  .sp-pcp-post .sp-pcp-social-share{text-align: {$social_position};}#pcp_wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-social-share,.pcp-popup-{$pcp_id} .sp-pcp-post .sp-pcp-social-share{margin: {$social_margin['top']}px {$social_margin['right']}px {$social_margin['bottom']}px {$social_margin['left']}px;}.pcp-popup-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a.icon_only .fa,#pcp_wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a.icon_only .fa{background: transparent;border: none;}"; // start from here.

		if ( $icon_custom_color ) {
			$social_icon_color        = $post_social_settings['social_icon_color'];
			$social_icon_border       = $post_social_settings['social_icon_border'];
			$social_icon_border_width = (int) $social_icon_border['all'];
			$social_line_height       = 30 - ( $social_icon_border_width * 2 );
			$custom_css              .= ".pcp-popup-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a .fa,#pcp_wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a .fa{ color: {$social_icon_color['icon_color']}; line-height: {$social_line_height}px; background: {$social_icon_color['icon_bg']}; border: {$social_icon_border_width}px {$social_icon_border['style']} {$social_icon_border['color']}; }.pcp-popup-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a:hover .fa, #pcp_wrapper-{$pcp_id} .sp-pcp-post .sp-pcp-social-share a:hover .fa{ color: {$social_icon_color['icon_hover_color']}; background: {$social_icon_color['icon_bg_hover']}; border-color: {$social_icon_color['icon_border_hover']}; }"; }
	}
	// Post ReadMore Settings.
	$post_content_settings = $post_sorter['pcp_post_content'];
	$show_read_more        = isset( $post_content_settings['show_read_more'] ) ? $post_content_settings['show_read_more'] : true;
	if ( $show_read_more ) {
		$_read_more_typography = isset( $view_options['read_more_typography'] ) && array_key_exists( 'font-size', $view_options['read_more_typography'] ) ? $view_options['read_more_typography'] : array(
			'font-family'        => '',
			'font-weight'        => '600',
			'subset'             => '',
			'font-size'          => '12',
			'tablet-font-size'   => '12',
			'mobile-font-size'   => '10',
			'line-height'        => '18',
			'tablet-line-height' => '18',
			'mobile-line-height' => '16',
			'letter-spacing'     => '0',
			'text-align'         => 'left',
			'text-transform'     => 'uppercase',
			'type'               => '',
			'unit'               => 'px',
		);
		$read_more_font_weight = ! empty( $_read_more_typography['font-weight'] ) ? $_read_more_typography['font-weight'] : '400';
		$read_more_font_style  = ! empty( $_read_more_typography['font-style'] ) ? $_read_more_typography['font-style'] : 'normal';
		$read_more_type        = isset( $post_content_settings['read_more_type'] ) ? $post_content_settings['read_more_type'] : 'button';
		$custom_css           .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link{";
		if ( ! empty( $_read_more_typography['font-family'] ) ) {
			$pcp_typography[] = $_read_more_typography;
			$custom_css      .= "font-family: {$_read_more_typography['font-family']}; font-weight: {$read_more_font_weight}; font-style: {$read_more_font_style};";
		} $custom_css .= "text-transform: {$_read_more_typography['text-transform']}; font-size: {$_read_more_typography['font-size']}px; line-height: {$_read_more_typography['line-height']}px; letter-spacing: {$_read_more_typography['letter-spacing']}px; }";
		if ( 'zigzag_layout' !== $layout_preset ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-readmore{ text-align: {$_read_more_typography['text-align']}; }";
		} if ( 'button' === $read_more_type ) {
			$_button_color  = isset( $post_content_settings['readmore_color_button'] ) ? $post_content_settings['readmore_color_button'] : array(
				'standard'     => '#111',
				'hover'        => '#fff',
				'bg'           => 'transparent',
				'hover_bg'     => '#e1624b',
				'border'       => '#888',
				'hover_border' => '#e1624b',
			);
			$_border_radius = isset( $post_content_settings['readmore_button_radius'] ) ? $post_content_settings['readmore_button_radius'] : array(
				'all'  => '0',
				'unit' => 'px',
			);
			$custom_css    .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link{ background: {$_button_color['bg']}; color: {$_button_color['standard']}; border-color: {$_button_color['border']}; border-radius: {$_border_radius['all']}{$_border_radius['unit']}; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link:hover { background: {$_button_color['hover_bg']}; color: {$_button_color['hover']}; border-color: {$_button_color['hover_border']}; }";
		} else {
			$readmore_text_color = $post_content_settings['readmore_color_text'];
			$custom_css         .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link{ color: {$readmore_text_color['standard']}; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link:hover{ color: {$readmore_text_color['hover']}; } "; }
	}
	// Pagination CSS and Live filter CSS.
	$show_pagination = isset( $view_options['show_post_pagination'] ) ? $view_options['show_post_pagination'] : false;
	if ( $show_pagination ) {
		$pagination_btn_color = isset( $view_options['pcp_pagination_btn_color'] ) ? $view_options['pcp_pagination_btn_color'] : array(
			'text_color'        => '#5e5e5e',
			'text_acolor'       => '#ffffff',
			'background'        => '#ffffff',
			'active_background' => '#e1624b',
		);

		$pagination_alignment = isset( $view_options['pagination_alignment'] ) ? $view_options['pagination_alignment'] : 'left';
		$custom_css          .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-pagination .page-numbers.current, #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-pagination a.active , #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-pagination a:hover{ color: {$pagination_btn_color['text_acolor']}; background-color: {$pagination_btn_color['active_background']}; border-color: {$pagination_btn_color['border_acolor']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-pagination,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-load-more{ text-align: {$pagination_alignment }; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-post-pagination .page-numbers, .pcp-post-pagination a{ background: {$pagination_btn_color['background']}; color:{$pagination_btn_color['text_color']}; border-color: {$pagination_btn_color['border_color']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-load-more button{ background: {$pagination_btn_color['background']}; color: {$pagination_btn_color['text_color']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-load-more button{ background: {$pagination_btn_color['active_background']}; color: {$pagination_btn_color['text_acolor']}; }";
	}
	$index          = 0;
	$taxonomy_types = isset( $view_options['pcp_filter_by_taxonomy']['pcp_taxonomy_and_terms'] ) && ! empty( $view_options['pcp_filter_by_taxonomy']['pcp_taxonomy_and_terms'] ) ? $view_options['pcp_filter_by_taxonomy']['pcp_taxonomy_and_terms'] : '';
	$filter_options = isset( $taxonomy_types[ $index ]['ajax_filter_options'] ) ? $taxonomy_types[ $index ]['ajax_filter_options'] : '';

	$pcp_filter_btn_color  = isset( $view_options['pcp_filter_btn_color'] ) ? $view_options['pcp_filter_btn_color'] : '';
	$pcp_filter_btn_border = isset( $filter_options['pcp_ajax_filter_btn_border'] ) ? $filter_options['pcp_ajax_filter_btn_border'] : array(
		'all'           => '1',
		'style'         => 'solid',
		'color'         => '#bbbbbb',
		'hover_color'   => '#e1624b',
		'border_radius' => '2',
	);
	if ( ! empty( $pcp_filter_btn_color ) ) {
		$custom_css                 .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-author-filter.pcp-bar.fl_button input~div,
.pcp-custom-field-filter.pcp-bar.fl_button input~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-filter-bar .pcp-filter-by.pcp-bar.fl_button input~div, #et-boc .et-l .pcp-order-by.pcp-bar.fl-btn input~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-order.pcp-bar.fl-btn input~div { background: {$pcp_filter_btn_color['background']}; color:{$pcp_filter_btn_color['text_color']}; border: {$pcp_filter_btn_border['all']}px {$pcp_filter_btn_border['style']} {$pcp_filter_btn_color['color']};border-radius:{$pcp_filter_btn_border['border_radius']}{$pcp_filter_btn_border['unit']};#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-author-filter.pcp-bar.fl_button input:checked~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-filter-bar .pcp-filter-by.pcp-bar.fl_button input:checked~div, #et-boc .et-l .pcp-order-by.pcp-bar.fl-btn input:checked~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-order.pcp-bar.fl-btn input:checked~div{ color: {$pcp_filter_btn_color['text_acolor']}; background: {$pcp_filter_btn_color['active_background']}; border-color: {$pcp_filter_btn_border['hover_color']};#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-author-filter.pcp-bar.fl_button input:hover~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-filter-bar .pcp-filter-by.pcp-bar.fl_button input:hover~div, #et-boc .et-l .pcp-order-by.pcp-bar.fl-btn input:hover~div,#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-order.pcp-bar.fl-btn input:hover~div{ color: {$pcp_filter_btn_color['text_acolor']}; background: {$pcp_filter_btn_color['active_background']}; border-color: {$pcp_filter_btn_border['hover_color']}; }";
		$ajax_filter_btn_font_weight = ! empty( $live_filter_btn_font_typo['font-weight'] ) ? $live_filter_btn_font_typo['font-weight'] : '400';
		$ajax_filter_btn_font_style  = ! empty( $live_filter_btn_font_typo['font-style'] ) ? $live_filter_btn_font_typo['font-style'] : 'normal';
		if ( ! empty( $live_filter_btn_font_typo['font-family'] ) ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-filter-bar .pcp-filter-by.pcp-bar.fl_button.filter-{$pcp_select_taxonomy} input~div,
			#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-shuffle-filter .pcp-button{
			font-family: {$live_filter_btn_font_typo['font-family']};font-weight: {$ajax_filter_btn_font_weight};font-style: {$ajax_filter_btn_font_style};}";}
	}

	// Accordion Settings.
	if ( 'accordion_layout' === $layout_preset ) {
		$expand_close_icon      = $view_options['expand_close_icon'];
		$icon_position          = $view_options['accordion_icon_position'];
		$accordion_border       = isset( $view_options['accordion_border'] ) ? $view_options['accordion_border'] : $view_options['post_border'];
		$accordion_border_width = $accordion_border['all'];
		$accordion_border_style = $accordion_border['style'];
		$accordion_border_color = $accordion_border['color'];
		$custom_css            .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-collapse-header{ background-color: {$view_options['header_bg_color']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-single-accordion{ border: {$accordion_border_width}px {$accordion_border_style} {$accordion_border_color}; margin-bottom: {$margin_between_vertical_post}px; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-collapse-body { border-top:{$accordion_border_width}px {$accordion_border_style} {$accordion_border_color}; }";
		if ( $expand_close_icon ) {
			if ( 'right' === $icon_position ) {
				$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-collapse-header .ui-icon{ float: right; }";
			} $custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-collapse-header .ui-icon{ font-size: {$view_options['accordion_icon_size']['all']}px; color: {$view_options['accordion_icon_color_set']}; }";
		} else {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-collapse-header .ui-icon{ display: none; }"; }
	} if ( 'timeline_layout' === $layout_preset ) {
		$timeline_style = isset( $layouts['timeline_other_style'] ) ? $layouts['timeline_other_style'] : 'timeline_style_1';
		// Timeline settings.
		$timeline_line_width      = $view_options['timeline_line_width']['all'];
		$timeline_line_width_half = $timeline_line_width / 2;
		$timeline_arrow_border    = (int) $_post_border['all'] + 10;
		$time_arrow_top_two       = 14 - (int) $_post_border['all'];
		$time_arrow_top           = 54 - (int) $_post_border['all'];
		$custom_css              .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::before{ border-color: transparent {$post_background_property} transparent transparent; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::before{ border-color: transparent transparent transparent {$post_background_property}; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::after{ border: {$timeline_arrow_border }px solid transparent; border-color: transparent transparent transparent {$_post_border['color']}; top: {$time_arrow_top_two}px; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::after{ top: {$time_arrow_top}px; border-color: transparent {$_post_border['color']} transparent transparent; } #et-boc .et-l #pcp_wrapper-{$pcp_id}.sp-pcp-timeline-section .pcp-timeline-item:hover:before{ border: 3px solid {$view_options['timeline_circle_color']['hover']}; background-color:{$view_options['timeline_circle_color']['hover']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id}.sp-pcp-timeline-section .pcp-timeline-item:before{ border: 3px solid {$view_options['timeline_circle_color']['standard']}; background-color: {$view_options['timeline_circle_color']['standard']}; }#et-boc .et-l #pcp_wrapper-{$pcp_id}.sp-pcp-timeline-section .pcp-timeline-grid::after { background: {$view_options['timeline_line_color']}; width: {$timeline_line_width}px; margin-left: -{$timeline_line_width_half}px; }";
		if ( 'timeline_style_2' === $timeline_style ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::before{ border-color: transparent transparent transparent  {$post_background_property}; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::before{ border-color: transparent {$post_background_property} transparent transparent; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::after{  border-color: transparent  {$_post_border['color']} transparent transparent; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::after{ border-color: transparent transparent transparent {$_post_border['color']}; }";
		}
		if ( 'timeline_style_3' === $timeline_style ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::before{ border-color: transparent {$post_background_property} transparent transparent; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item .sp-pcp-post::after{  border-color: transparent  {$_post_border['color']} transparent transparent; }";
		}
		if ( 'timeline_style_4' === $timeline_style ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::before{ border-color: transparent transparent {$post_background_property}; } #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-timeline-item:nth-child(2n+2) .sp-pcp-post::after{  border-color: transparent transparent transparent {$_post_border['color']}; }";
		}
	}
	// Filter Settings.
	$filer_btn_bg            = isset( $view_options['pcp_filer_btn_bg'] ) ? $view_options['pcp_filer_btn_bg'] : array(
		'text_color'        => '#444444',
		'text_acolor'       => '#ffffff',
		'border_color'      => '#bbbbbb',
		'border_acolor'     => '#e1624b',
		'background'        => 'transparent',
		'active-background' => '#e1624b',
	);
	$margin_between_button   = isset( $view_options['pcp_margin_between_button'] ) ? $view_options['pcp_margin_between_button'] : array(
		'top'    => '0',
		'right'  => '8',
		'bottom' => '8',
		'left'   => '0',
		'unit'   => 'px',
	);
	$margin_between_taxonomy = isset( $view_options['pcp_margin_between_taxonomy'] ) ? $view_options['pcp_margin_between_taxonomy'] : array(
		'top'    => '0',
		'right'  => '0',
		'bottom' => '30',
		'left'   => '0',
		'unit'   => 'px',
	);
	$custom_css             .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-shuffle-filter .taxonomy-group{ margin: {$margin_between_taxonomy['top']}px {$margin_between_taxonomy['right']}px {$margin_between_taxonomy['bottom']}px {$margin_between_taxonomy['left']}px; }#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-shuffle-filter .pcp-button{
	background: {$filer_btn_bg['background']}; color: {$filer_btn_bg['text_color']};margin: {$margin_between_button['top']}px {$margin_between_button['right']}px {$margin_between_button['bottom']}px {$margin_between_button['left']}px; border: 2px solid {$filer_btn_bg['border_color']};font-size:  {$live_filter_btn_font_typo['font-size']}px;text-transform: {$live_filter_btn_font_typo['text-transform']};letter-spacing: {$live_filter_btn_font_typo['letter-spacing']}px;}} #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-shuffle-filter .pcp-button:hover, #et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-shuffle-filter .pcp-button.is-active { background: {$filer_btn_bg['active-background']}; color: {$filer_btn_bg['text_acolor']}; border: 2px solid {$filer_btn_bg['border_acolor']}; }";
	if ( 'product' === $pcp_post_type ) {
		// Product rating.
		$pcp_product_rating  = isset( $post_sorter['pcp_product_rating'] ) ? $post_sorter['pcp_product_rating'] : '';
		$show_product_rating = isset( $pcp_product_rating['pcp_show_product_rating'] ) ? $pcp_product_rating['pcp_show_product_rating'] : '';
		if ( $show_product_rating ) {
			$pcp_product_rating_colors      = isset( $pcp_product_rating['pcp_product_rating_colors'] ) ? $pcp_product_rating['pcp_product_rating_colors'] : array(
				'color'       => '#F4C100',
				'empty_color' => '#C8C8C8',
			);
			$pcp_product_rating_alignment   = isset( $pcp_product_rating['pcp_product_rating_alignment'] ) ? $pcp_product_rating['pcp_product_rating_alignment'] : 'center';
			$pcp_product_review_count_color = isset( $pcp_product_rating['pcp_product_review_count_color'] ) ? $pcp_product_rating['pcp_product_review_count_color'] : '#444444';

			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-rating, .pcp-popup-{$pcp_id} .sp-pcp-product-rating { text-align: {$pcp_product_rating_alignment}}";
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-rating .star-rating::before, .pcp-popup-{$pcp_id} .sp-pcp-product-rating .star-rating::before, #pcp_wrapper-{$pcp_id} .woocommerce .star-rating::before, #pcp_wrapper-{$pcp_id} .woocommerce .comment-form-rating .stars a, #pcp_wrapper-{$pcp_id} .woocommerce .star-rating::before { color: {$pcp_product_rating_colors['empty_color']};}";
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-rating .star-rating span::before, .pcp-popup-{$pcp_id} .sp-pcp-product-rating .star-rating span::before { color: {$pcp_product_rating_colors['color']};}";
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-rating .sp-pcp-review-count, .pcp-popup-{$pcp_id} .sp-pcp-product-rating .sp-pcp-review-count { color: {$pcp_product_review_count_color};}";
		}
		// Product price.
		$pcp_product_price  = isset( $post_sorter['pcp_product_price'] ) ? $post_sorter['pcp_product_price'] : '';
		$show_product_price = isset( $pcp_product_price['pcp_show_product_price'] ) ? $pcp_product_price['pcp_show_product_price'] : '';
		if ( $show_product_price ) {
			$pcp_product_price_color     = isset( $pcp_product_price['pcp_product_price_color'] ) ? $pcp_product_price['pcp_product_price_color'] : '#888888';
			$pcp_product_del_price_color = isset( $pcp_product_price['pcp_product_del_price_color'] ) ? $pcp_product_price['pcp_product_del_price_color'] : '#888888';
			$pcp_product_price_alignment = isset( $pcp_product_price['pcp_product_price_alignment'] ) ? $pcp_product_price['pcp_product_price_alignment'] : 'center';

			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-price, .pcp-popup-{$pcp_id} .sp-pcp-product-price { color: {$pcp_product_price_color}; text-align: {$pcp_product_price_alignment};}";
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-product-price del, .pcp-popup-{$pcp_id} .sp-pcp-product-price del { color: {$pcp_product_del_price_color};}";
		}


		// Product add to cart button.
		$pcp_product_cart         = isset( $post_sorter['pcp_product_cart'] ) ? $post_sorter['pcp_product_cart'] : '';
		$show_product_cart_button = isset( $pcp_product_cart['pcp_show_product_cart_button'] ) ? $pcp_product_cart['pcp_show_product_cart_button'] : '';
		if ( $show_product_cart_button ) {
			$pcp_add_to_cart_border        = isset( $pcp_product_cart['pcp_add_to_cart_border'] ) ? $pcp_product_cart['pcp_add_to_cart_border'] : array(
				'all'   => '1',
				'style' => 'solid',
				'color' => '#222222',
			);
			$pcp_add_to_cart_border_merge  = $pcp_add_to_cart_border['all'] . 'px ' . $pcp_add_to_cart_border['style'] . ' ' . $pcp_add_to_cart_border['color'];
			$pcp_add_to_cart_border_radius = isset( $pcp_product_cart['pcp_add_to_cart_border_radius'] ) ? $pcp_product_cart['pcp_add_to_cart_border_radius'] : '0';
			$pcp_add_to_cart_button_colors = isset( $pcp_product_cart['pcp_add_to_cart_button_colors'] ) ? $pcp_product_cart['pcp_add_to_cart_button_colors'] : array(
				'color'            => '#444444',
				'hover_color'      => '#ffffff',
				'background'       => 'transparent',
				'hover_background' => '#222222',
			);
			$add_to_cart_typography        = isset( $view_options['add_to_cart_typography'] ) ? $view_options['add_to_cart_typography'] : array(
				'font-family'        => '',
				'font-weight'        => '600',
				'subset'             => '',
				'font-size'          => '12',
				'tablet-font-size'   => '12',
				'mobile-font-size'   => '10',
				'line-height'        => '18',
				'tablet-line-height' => '18',
				'mobile-line-height' => '16',
				'letter-spacing'     => '0',
				'text-align'         => 'left',
				'text-transform'     => 'uppercase',
				'type'               => '',
				'unit'               => 'px',
			);
			$add_to_cart_font_weight       = ! empty( $add_to_cart_typography['font-weight'] ) ? $add_to_cart_typography['font-weight'] : '400';
			$add_to_cart_font_style        = ! empty( $add_to_cart_typography['font-style'] ) ? $add_to_cart_typography['font-style'] : 'normal';

			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-cart-button a.button, .pcp-popup-{$pcp_id} .sp-pcp-cart-button a.button{";
			if ( ! empty( $add_to_cart_typography['font-family'] ) ) {
				$pcp_typography[] = $add_to_cart_typography;
				$custom_css      .= "font-family: {$add_to_cart_typography['font-family']}; font-weight: {$add_to_cart_font_weight}; font-style: {$add_to_cart_font_style};";
			} $custom_css .= "text-transform: {$add_to_cart_typography['text-transform']}; font-size: {$add_to_cart_typography['font-size']}px; line-height: {$add_to_cart_typography['line-height']}px; letter-spacing: {$add_to_cart_typography['letter-spacing']}px; border: {$pcp_add_to_cart_border_merge} !important; border-radius: {$pcp_add_to_cart_border_radius}px; color: {$pcp_add_to_cart_button_colors['color']}; background-color: {$pcp_add_to_cart_button_colors['background']} }";

			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-cart-button a.button:hover, .pcp-popup-{$pcp_id} .sp-pcp-cart-button a.button:hover { color: {$pcp_add_to_cart_button_colors['hover_color']}; background-color: {$pcp_add_to_cart_button_colors['hover_background']}}";
			$custom_css .= "#pcp_wrapper-{$pcp_id} .sp-pcp-cart-button, .pcp-popup-{$pcp_id} .sp-pcp-cart-button { text-align: {$add_to_cart_typography['text-align']};}";
		}
	}
	// Responsive.
	$custom_css .= ' @media (max-width: 768px) {';
	if ( 'product' === $pcp_post_type ) {
		if ( $show_product_cart_button ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-cart-button a.button, .pcp-popup-{$pcp_id} .sp-pcp-cart-button a.button{ font-size: {$add_to_cart_typography['tablet-font-size']}px;}";
		}
	}
	if ( $show_section_title ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-section-title{ font-size: {$_section_title_typography['tablet-font-size']}px; line-height: {$_section_title_typography['tablet-line-height']}px; }";
	} if ( $post_sorter['pcp_post_title']['show_post_title'] ) {
		$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-title a{ font-size: {$_post_title_typography['tablet-font-size']}px; line-height: {$_post_title_typography['tablet-line-height']}px; }";
	} if ( $post_sorter['pcp_post_content']['show_post_content'] ) {
		$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content, #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content p{ font-size: {$_post_content_typography['tablet-font-size']}px; line-height: {$_post_content_typography['tablet-line-height']}px; }";
	} if ( $post_content_settings['show_read_more'] ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link{ font-size: {$_read_more_typography['tablet-font-size']}px; line-height: {$_read_more_typography['tablet-line-height']}px; }";
	} $custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li, #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a { font-size: {$_post_meta_typography['tablet-font-size']}px; line-height: {$_post_meta_typography['tablet-line-height']}px; } #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp_pcp_cf_list{ font-size: {$_custom_fields_typography['tablet-font-size']}px; line-height: {$_custom_fields_typography['tablet-line-height']}px; } }@media (max-width: 420px) {";
	if ( 'product' === $pcp_post_type ) {
		if ( $show_product_cart_button ) {
			$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .sp-pcp-cart-button a.button, .pcp-popup-{$pcp_id} .sp-pcp-cart-button a.button{ font-size: {$add_to_cart_typography['mobile-font-size']}px;}";
		}
	}
	if ( $show_section_title ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-section-title{ font-size: {$_section_title_typography['mobile-font-size']}px; line-height: {$_section_title_typography['mobile-line-height']}px; }";
	} if ( $post_sorter['pcp_post_title']['show_post_title'] ) {
		$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-title a{ font-size: {$_post_title_typography['mobile-font-size']}px; line-height: {$_post_title_typography['mobile-line-height']}px; }";
	} if ( $post_sorter['pcp_post_content']['show_post_content'] ) {
		$custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content, #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-content p{ font-size: {$_post_content_typography['mobile-font-size']}px; line-height: {$_post_content_typography['mobile-line-height']}px; }";
	} if ( $post_content_settings['show_read_more'] ) {
		$custom_css .= "#et-boc .et-l #pcp_wrapper-{$pcp_id} .pcp-readmore-link{ font-size: {$_read_more_typography['mobile-font-size']}px; line-height: {$_read_more_typography['mobile-line-height']}px; }";
	} $custom_css .= "#et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li, #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a{ font-size: {$_post_meta_typography['mobile-font-size']}px; line-height: {$_post_meta_typography['mobile-line-height']}px; } #et-boc .et-l .pcp-wrapper-{$pcp_id} .sp_pcp_cf_list{ font-size: {$_custom_fields_typography['mobile-font-size']}px; line-height: {$_custom_fields_typography['mobile-line-height']}px; } }";

}
