'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
				',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_seconds_lebel_margin',
            [
                'label' => esc_html__( 'Margin', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],

                'selectors' => [
								'{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-timer-content > span.elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-title,
								{{WRAPPER}} .elementskit-flip-clock .elementskit-secs .elementskit-label
					' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

// start genaral styles
        $this->add_control(
            'ekit_countdown_timer_seconds_heading_general',
            [
                'label' => esc_html__( 'General', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_background',
                'label' => esc_html__( 'Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],

				'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
								{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
								{{WRAPPER}} .elementskit-flip-clock  > .elementskit-secs .elementskit-count ',
            ]
        );

       $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_border_color_group',
                'label' => esc_html__( 'Border', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ',
            ]
        );

		$this->add_responsive_control(
            'ekit_countdown_timer_seconds_border_radious_open',
            [
                'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
					{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
					{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
       $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ekit_countdown_timer_seconds_box_shadow_group',
                'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
                'selector' => '{{WRAPPER}} .elementskit-countdown-timer .elementskit-timer-container.elementskit-seconds .elementskit-inner-container,
				{{WRAPPER}} .elementskit-countdown-timer-2 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-3.elementskit-version-box .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-countdown-timer-4 .elementskit-timer-container.elementskit-seconds .elementskit-timer-count,
				{{WRAPPER}} .elementskit-flip-clock .elementskit-secs ',
            ]
        );
        $this->end_controls_section();
		// end seconds style section

        //Section Background

        $this->start_controls_section(
            'ekit_countdown_timer_bg_style', [
                'label'	 =>esc_html__( 'Background', 'elementskit-lite' ),
                'tab'	 => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'ekit_countdown_timer_style' => 'style6'
                ]
            ]
        );

        $this->add_responsive_control(
            'ekit_countdown_timer_content_height', [
                'label'			 =>esc_html__( 'Height', 'elementskit-lite' ),
                'type'			 => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'			 => [
                    'px' => [
                        'min'	 => 0,
                        'step'	 => 1,
                    ],
                ],
                'desktop_default' => [
					'size' => 120,
					'unit' => 'px',
				],
				'tablet_default' => [
					'size' => 100,
					'unit' => 'px',
				],
				'mobile_default' => [
					'size' => 100,
					'unit' => '%',
				],
                'selectors'		 => [
                    '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4'	=> 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ekit_countdown_timer_content_line_height', [
                'label'			 =>esc_html__( 'Line Height', 'elementskit-lite' ),
                'type'			 => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%' ],
                'range'			 => [
                    'px' => [
                        'min'	 => 0,
                        'step'	 => 1,
                    ],
                ],
                'desktop_default' => [
					'size' => 120,
					'unit' => 'px',
				],
				'tablet_default' => [
					'size' => 100,
					'unit' => 'px',
				],
				'mobile_default' => [
					'size' => 100,
					'unit' => '%',
				],
                'selectors'		 => [
                    '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4'	=> 'line-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'ekit_countdown_timer_outer_section_bg_style',
            [
                'label' => esc_html__( 'Outer Part', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_outer_background_group',
                'label' => esc_html__( 'Outer Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-countdown-container .elementskit-countdown-timer-4',
            ]
        );
        $this->add_control(
            'ekit_countdown_timer_inner_section_bg_style',
            [
                'label' => esc_html__( 'Inner Part', 'elementskit-lite' ),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );
        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'ekit_countdown_timer_inner_background_group',
                'label' => esc_html__( 'Inner Background', 'elementskit-lite' ),
                'types' => [ 'classic', 'gradient' ],
                'selector' => '{{WRAPPER}} .elementskit-countdown-container',
            ]
        );

        $this->end_controls_section();
        
        $this->insert_pro_message();
    }

    protected function render( ) {
        echo '<div class="ekit-wid-con" >';
            $this->render_raw();
        echo '</div>';
    }

	protected function render_raw( ) {
		$settings = $this->get_settings_for_display();
		extract($settings);

		if(isset($ekit_countdown_timer_weeks_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-week', esc_attr(wp_strip_all_tags($ekit_countdown_timer_weeks_label)));
		}

		if(isset($ekit_countdown_timer_days_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-day', esc_attr(wp_strip_all_tags($ekit_countdown_timer_days_label)));
		}

		if(isset($ekit_countdown_timer_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-hour', esc_attr(wp_strip_all_tags($ekit_countdown_timer_hours_label)));
		}

		if(isset($ekit_countdown_timer_minutes_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-minute', esc_attr(wp_strip_all_tags($ekit_countdown_timer_minutes_hours_label)));
		}

		if(isset($ekit_countdown_timer_seconds_hours_label)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-date-ekit-second', esc_attr(wp_strip_all_tags($ekit_countdown_timer_seconds_hours_label)));
		}

		if(isset($ekit_countdown_timer_due_time)){
			$this->add_render_attribute('ekit_countdown_timer', 'data-ekit-countdown', esc_attr($ekit_countdown_timer_due_time));
		}

		$this->add_render_attribute('ekit_countdown_timer', [
			'data-finish-title' => esc_attr(wp_strip_all_tags($ekit_countdown_timer_title)),
			'data-finish-content' => esc_attr(wp_strip_all_tags($ekit_countdown_timer_expiry_content)),
		]);

		switch ( $ekit_countdown_timer_style ) {
			case 'style1' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer ekit-countdown text-center');
				break;
			case 'style2' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-2 ekit-countdown text-center');
				break;
			case 'style3' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-flip-clock text-center');
				break;
			case 'style4' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-3 ekit-countdown text-center');
				break;
			case 'style5' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-3 ekit-countdown elementskit-version-box text-center align-items-end');
				break;
			case 'style6' :
				$this->add_render_attribute('ekit_countdown_timer', 'class', 'elementskit-countdown-timer-4 ekit-countdown');
				break;
		}

		if($ekit_countdown_timer_style != 'style6' ) {
			$markup = sprintf('<div %s></div>', $this->get_render_attribute_string('ekit_countdown_timer'));
		} else {
			$markup = sprintf('<div class="elementskit-countdown-container text-center"><div %s></div></div>', $this->get_render_attribute_string('ekit_countdown_timer'));
		}

		// PHPCS - the variable $markup holds safe data.
		echo $markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}
}