<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Repeater;

if (!defined('ABSPATH')) {
	exit; // Exit if accessed directly
}

/**
 * Header Sidebar Widget
 *
 * @since 1.0.0
 */
class Header_Sidebar extends Widget_Base
{
	use Widget_helper;
	use UnlockafeUtils;

	/**
	 * Retrieve the widget name.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name()
	{
		return 'unlockafe-header-sidebar';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title()
	{
		return __('Header Sidebar', 'unlock-addons-for-elementor');
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon()
	{
		return 'eicon-apps ulicon';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories()
	{
		return ['unlockafe-addons'];
	}

	public function get_style_depends()
	{
		return ['unlockafe-global'];
	}

	public function get_script_depends()
	{
		return [];
	}

	private function get_available_menus()
	{
		$menus = wp_get_nav_menus();
		$options = [];

		foreach ($menus as $menu) {
			$options[$menu->slug] = $menu->name;
		}

		return $options;
	}

	protected function register_controls()
	{
		$this->register_controls_section();
		$this->style_tab_content();
	}

	protected function register_controls_section()
	{
		// layout Panel
		$this->start_controls_section(
			'wpr_layout',
			[
				'label' => esc_html__('Design Layout', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_design_style',
			[
				'label' => esc_html__('Select Layout', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'layout-1' => esc_html__('Layout 1', 'unlock-addons-for-elementor'),
					'layout-2' => esc_html__('Layout 2', 'unlock-addons-for-elementor'),
					'layout-3' => esc_html__('Layout 3', 'unlock-addons-for-elementor'),
				],
				'default' => 'layout-1',
			]
		);

		$this->end_controls_section();

		// Offcanvas Controls
		$this->start_controls_section(
			'wpr_offcanvas_section',
			[
				'label' => esc_html__('Offcanvas', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'toggle_image',
			[
				'label' => esc_html__('Choose Toggle Image', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
				'condition' => ['wpr_design_style' => ['layout-10']]
			]
		);

		$this->add_control(
			'wpr_menubar_text',
			[
				'label' => esc_html__('ManuBar Text', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Menu', 'unlock-addons-for-elementor'),
				'title' => esc_html__('Enter manubar text', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'separator' => 'before',
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$nav_menus = $this->get_available_menus();

		if (!empty($nav_menus)) {
			$initial_menu = array_keys($nav_menus);
			$this->add_control(
				'wpr_offcanvas_menu',
				[
					'label' => esc_html__('Select Menu', 'unlock-addons-for-elementor'),
					'type' => Controls_Manager::SELECT,
					'options' => $nav_menus,
					'default' => $initial_menu[0],
					'label_block' => true,
				]
			);
		} else {
			$this->add_control(
				'wpr_offcanvas_menu_warning',
				[
					'type' => Controls_Manager::RAW_HTML,
					'raw' => sprintf(
						esc_html__('No menus found. Please create one under %1$sAppearance → Menus%2$s.', 'unlock-addons-for-elementor'),
						'<strong>',
						'</strong>'
					),
					'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
				]
			);
		}

		$this->add_responsive_control(
			'wpr_menu_visibility',
			[
				'label' => esc_html__('Menu Visibility', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Show', 'unlock-addons-for-elementor'),
				'label_off' => esc_html__('Hide', 'unlock-addons-for-elementor'),
				'return_value' => 'yes',
				'default' => 'yes',
				'separator' => 'before',
				'prefix_class' => 'unlockafe-menu-visibility-',
			]
		);

		$this->add_control(
			'wpr_offcanvas_logo',
			[
				'label' => esc_html__('Choose Offcanvas Logo', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				]
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'wpr_offcanvas_logo_size',
				'label' => __('Image Size', 'unlock-addons-for-elementor'),
				'default' => 'medium',
			]
		);

		$this->add_control(
			'wpr_offcanvas_footer_logo',
			[
				'label' => esc_html__('Choose Footer Logo', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->add_control(
			'offcanvas_title',
			[
				'label' => esc_html__('Offcanvas Title', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__('Offcanvas Title', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Hello There!', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->add_control(
			'offcanvas_description',
			[
				'label' => esc_html__('Offcanvas Description', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__('Description', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Your Text', 'unlock-addons-for-elementor'),
				'label_block' => true,
			]
		);

		$this->add_control(
			'offcanvas_copyright',
			[
				'label' => esc_html__('Offcanvas Copyright', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__('© 2025. All rights reserved.', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Your Copyright', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-1', 'layout-2', 'layout-3']
				]
			]
		);

		$this->add_control(
			'offcanvas_contact_title',
			[
				'label' => esc_html__('Offcanvas Contact Title', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => esc_html__('Contact Title', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Contact Title', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->add_control(
			'offcanvas_social_title',
			[
				'label' => esc_html__('Social Title', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::TEXTAREA,
				'default' => esc_html__('Connect Us On', 'unlock-addons-for-elementor'),
				'placeholder' => esc_html__('Your Social Title', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->add_control(
			'wpr_offcanvas_type',
			[
				'label' => esc_html__('Select Type', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'default' => esc_html__('Default', 'unlock-addons-for-elementor'),
				],
				'default' => 'default',
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$offcanvas = array(
			'post_type' => 'wpr-offcanvas',
			'posts_per_page' => -1,
		);
		$offcanvas_loop = get_posts($offcanvas);

		$offcanvas_obj = array();
		foreach ($offcanvas_loop as $post) {
			$offcanvas_obj[$post->ID] = $post->post_title;
		}

		$this->add_control(
			'wpr_offcanvas_template',
			[
				'label' => esc_html__('Select Template', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => $offcanvas_obj,
				'default' => 'default',
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'wpr_sidebar_gallery',
			[
				'label' => esc_html__('Sidebar Gallery', 'unlock-addons-for-elementor'),
				'description' => esc_html__('Sidebar Gallery', 'unlock-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'wpr_sidebar_gallery_image',
			[
				'label' => esc_html__('Upload Image', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				]
			]
		);

		$this->add_control(
			'sidebar_gallery_list',
			[
				'label' => esc_html__('Gallery List', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'wpr_sidebar_gallery_image' => esc_html__('Slider Image 1', 'unlock-addons-for-elementor')
					],
					[
						'wpr_sidebar_gallery_image' => esc_html__('Slider Image 2', 'unlock-addons-for-elementor')
					],
					[
						'wpr_sidebar_gallery_image' => esc_html__('Slider Image 3', 'unlock-addons-for-elementor')
					],
				],
				'title_field' => '{{{ wpr_sidebar_gallery_image }}}',
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'wpr_contact_box_section',
			[
				'label' => esc_html__('Contact Repeater', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'wpr_contact_label',
			[
				'label' => esc_html__('Contact Label', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Contact Label', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$repeater->add_control(
			'wpr_contact_value',
			[
				'label' => esc_html__('Contact Value', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => esc_html__('Contact Value', 'unlock-addons-for-elementor'),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'wpr_contact_url',
			[
				'label' => esc_html__('Contact URL', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXTAREA,
				'default' => 'Url Here',
				'label_block' => true,
				'description' => __("We recommended to put with tel: and mailto:", 'unlock-addons-for-elementor')
			]
		);

		$repeater->add_control(
			'wpr_rep_style_options',
			[
				'label' => esc_html__('Enable Style Option', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::SWITCHER,
				'label_on' => esc_html__('Yes', 'unlock-addons-for-elementor'),
				'label_off' => esc_html__('No', 'unlock-addons-for-elementor'),
				'return_value' => 'yes',
				'default' => 'no',
				'separator' => 'before',
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$repeater->add_control(
			'wpr_icon_box_bg',
			[
				'label' => esc_html__('Repeater Title Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} {{CURRENT_ITEM}} .contact-thumb' => 'background-color: {{VALUE}}',
				],
				'separator' => 'before',
				'condition' => [
					'wpr_rep_style_options' => 'yes',
				]
			]
		);

		$this->add_control(
			'wpr_contact_list',
			[
				'label' => esc_html__('Text List', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'wpr_contact_value' => esc_html__('+2230 6965 119', 'unlock-addons-for-elementor'),
					],
					[
						'wpr_contact_value' => esc_html__('example@gmail.com', 'unlock-addons-for-elementor'),
					],
					[
						'wpr_contact_value' => esc_html__('123 Main Street, City', 'unlock-addons-for-elementor'),
					],
				],
				'title_field' => '{{{ wpr_contact_label }}}',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'wpr_offcanvas_social_section',
			[
				'label' => esc_html__('Offcanvas Social Repeater', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'show_social',
			[
				'label' => __('Show Social Links?', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __('Yes', 'unlock-addons-for-elementor'),
				'label_off' => __('No', 'unlock-addons-for-elementor'),
				'return_value' => 'yes',
				'style_transfer' => true,
			]
		);

		$repeater->add_control(
			'web_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Website Address', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your profile link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'email_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Email', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your email link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'phone_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Phone', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your phone link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'facebook_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Facebook', 'unlock-addons-for-elementor'),
				'default' => __('#', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your facebook link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'twitter_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('X', 'unlock-addons-for-elementor'),
				'default' => __('#', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your X link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'instagram_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Instagram', 'unlock-addons-for-elementor'),
				'default' => __('#', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your instagram link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'linkedin_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('LinkedIn', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your linkedin link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'youtube_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Youtube', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your youtube link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'googleplus_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Google Plus', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your Google Plus link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'flickr_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Flickr', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your flickr link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'vimeo_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Vimeo', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your vimeo link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'behance_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Behance', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your behance link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'dribble_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Dribbble', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your dribbble link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'pinterest_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Pinterest', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your pinterest link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$repeater->add_control(
			'gitub_title',
			[
				'type' => Controls_Manager::TEXT,
				'label_block' => false,
				'label' => __('Github', 'unlock-addons-for-elementor'),
				'placeholder' => __('Add your github link', 'unlock-addons-for-elementor'),
				'dynamic' => [
					'active' => true,
				]
			]
		);

		$this->add_control(
			'wpr_social_repeater',
			[
				'show_label' => false,
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'title_field' => esc_html__('Social List', 'unlock-addons-for-elementor'),
				'default' => [
					[
						'facebook_title' => __('', 'unlock-addons-for-elementor')
					]
				]
			]
		);

		$this->end_controls_section();

		// Header Right
		$this->start_controls_section(
			'wpr_header_sidebar_button',
			[
				'label' => esc_html__('Sidebar Button', 'unlock-addons-for-elementor'),
				'condition' => [
					'wpr_design_style' => ['layout-10']
				]
			]
		);

		$this->add_control(
			'tp_theme_btn_text',
			[
				'label' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Lets Talk', 'unlock-addons-for-elementor'),
				'title' => esc_html__('Enter button text', 'unlock-addons-for-elementor'),
				'label_block' => true,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'tp_theme_btn_link_type',
			[
				'label' => esc_html__('Button Link Type', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'1' => 'Custom Link',
					'2' => 'Internal Page',
				],
				'default' => '1',
				'label_block' => true,
			]
		);
		$this->add_control(
			'tp_theme_btn_link',
			[
				'label' => esc_html__('Button link', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::URL,
				'dynamic' => [
					'active' => true,
				],
				'placeholder' => esc_html__('https://your-link.com', 'unlock-addons-for-elementor'),
				'show_external' => false,
				'default' => [
					'url' => '#',
					'is_external' => false,
					'nofollow' => false,
				],
				'condition' => [
					'tp_theme_btn_link_type' => '1',
				],
				'label_block' => true,
			]
		);
		$this->add_control(
			'tp_theme_btn_page_link',
			[
				'label' => esc_html__('Select Button Link Page', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT2,
				'label_block' => true,
				'options' => $this->tp_get_all_types_post('page'),
				'condition' => [
					'tp_theme_btn_link_type' => '2',
				]
			]
		);

		$this->end_controls_section();
	}

	// style_tab_content
	protected function style_tab_content()
	{
		// Toggle Button Style Section
		$this->start_controls_section(
			'wpr_toggle_button_style_section',
			[
				'label' => esc_html__('Toggle Button', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'wpr_toggle_button_icon_size',
			[
				'label' => esc_html__('Icon Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem'],
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.5,
						'max' => 5,
						'step' => 0.1,
					],
					'rem' => [
						'min' => 0.5,
						'max' => 5,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu i' => 'font-size: {{SIZE}}{{UNIT}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar i' => 'font-size: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->start_controls_tabs('toggle_button_style_tabs');

		$this->start_controls_tab(
			'toggle_button_style_normal',
			[
				'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_toggle_button_icon_color',
			[
				'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .hamburger-menu i' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar i' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_toggle_button_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'background-color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'wpr_toggle_button_bg',
				'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .hamburger-menu, {{WRAPPER}} .wpr-toggle-menubar',
			]
		);

		$this->add_responsive_control(
			'wpr_toggle_button_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_toggle_button_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_toggle_button_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .hamburger-menu, {{WRAPPER}} .wpr-toggle-menubar',
			]
		);

		$this->add_control(
			'wpr_toggle_button_border_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'border-color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'border-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_toggle_button_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .hamburger-menu, {{WRAPPER}} .wpr-toggle-menubar',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'toggle_button_style_hover',
			[
				'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_icon_color',
			[
				'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .hamburger-menu:hover i' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover i' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'background-color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'wpr_toggle_button_hover_bg',
				'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .hamburger-menu:hover, {{WRAPPER}} .wpr-toggle-menubar:hover',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_toggle_button_hover_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .hamburger-menu:hover, {{WRAPPER}} .wpr-toggle-menubar:hover',
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_border_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'border-color: {{VALUE}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'border-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_toggle_button_hover_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_toggle_button_hover_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .hamburger-menu:hover, {{WRAPPER}} .wpr-toggle-menubar:hover',
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_transform',
			[
				'label' => esc_html__('Hover Effect', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => esc_html__('None', 'unlock-addons-for-elementor'),
					'scale' => esc_html__('Scale', 'unlock-addons-for-elementor'),
					'rotate' => esc_html__('Rotate', 'unlock-addons-for-elementor'),
					'translate' => esc_html__('Translate', 'unlock-addons-for-elementor'),
				],
				'default' => 'none',
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_transform_scale',
			[
				'label' => esc_html__('Scale Amount', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0.5,
						'max' => 2,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 1.1,
				],
				'condition' => [
					'wpr_toggle_button_hover_transform' => 'scale',
				],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'transform: scale({{SIZE}}) !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'transform: scale({{SIZE}}) !important;',
				],
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_transform_rotate',
			[
				'label' => esc_html__('Rotate Degree', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => -360,
						'max' => 360,
						'step' => 1,
					],
				],
				'default' => [
					'size' => 90,
				],
				'condition' => [
					'wpr_toggle_button_hover_transform' => 'rotate',
				],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'transform: rotate({{SIZE}}deg) !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'transform: rotate({{SIZE}}deg) !important;',
				],
			]
		);

		$this->add_control(
			'wpr_toggle_button_hover_transform_translate',
			[
				'label' => esc_html__('Translate Y', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => -50,
						'max' => 50,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => -5,
				],
				'condition' => [
					'wpr_toggle_button_hover_transform' => 'translate',
				],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu:hover' => 'transform: translateY({{SIZE}}{{UNIT}}) !important;',
					'{{WRAPPER}} .wpr-toggle-menubar:hover' => 'transform: translateY({{SIZE}}{{UNIT}}) !important;',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_responsive_control(
			'wpr_toggle_button_margin',
			[
				'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .hamburger-menu' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .wpr-toggle-menubar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
				'separator' => 'before',
			]
		);

		$this->end_controls_section();

		// Close Btn style
		$this->start_controls_section(
			'wpr_mobile_close_btn_style_section',
			[
				'label' => esc_html__('Close Button', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'wpr_mobile_close_btn_typography',
				'label' => esc_html__('Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .offcanvas__close-btn',
			]
		);

		$this->start_controls_tabs(
			'close_button_style_tabs'
		);

		$this->start_controls_tab(
			'close_button_style_normal_tab',
			[
				'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_close_button_menu_title_color',
			[
				'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn svg' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_close_button_menu_toggle_color',
			[
				'label' => esc_html__('Bg Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_close_button_border_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn svg, {{WRAPPER}} .offcanvas__close-btn i' => 'border-color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'close_button_style_hover_tab',
			[
				'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_close_button_menu_title_hvr_color',
			[
				'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn:hover' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_close_button_menu_title_hvrbg_color',
			[
				'label' => esc_html__('Bg Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn:hover' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_close_button_border_hvr_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .offcanvas__close-btn:hover svg, {{WRAPPER}} .offcanvas__close-btn:hover i' => 'border-color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		// offcanvas style
		$this->start_controls_section(
			'wpr_offcanvas_style_section',
			[
				'label' => esc_html__('Offcanvas Style', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'wpr_offcanvas_togglebar_color',
			[
				'label' => esc_html__('Togglebar Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-toggle-menubar' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_toggtext_color',
			[
				'label' => esc_html__('Toggle text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-toggle-menubar i' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_bg_color',
			[
				'label' => esc_html__('Offcanvas BG Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-bg' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_title',
			[
				'label' => esc_html__('Offcanvas Title', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-title' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_desc',
			[
				'label' => esc_html__('Offcanvas Description', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-desc' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_copyright',
			[
				'label' => esc_html__('Offcanvas Copyright', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-copyright' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_contact_title',
			[
				'label' => esc_html__('Offcanvas Contact Title', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-contact-title' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_offcanvas_social_title',
			[
				'label' => esc_html__('Offcanvas Social Title', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-offcanvas-social-title' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_section();

		// Sidebar Menu Container Style Section
		$this->start_controls_section(
			'wpr_sidebar_menu_container_section',
			[
				'label' => esc_html__('Sidebar Menu Container', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'wpr_sidebar_menu_container_bg',
				'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .offcanvas-menu',
			]
		);

		$this->add_responsive_control(
			'wpr_sidebar_menu_container_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .offcanvas-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_sidebar_menu_container_margin',
			[
				'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .offcanvas-menu' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_sidebar_menu_container_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .offcanvas-menu',
			]
		);

		$this->add_responsive_control(
			'wpr_sidebar_menu_container_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .offcanvas-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_sidebar_menu_container_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .offcanvas-menu',
			]
		);

		$this->end_controls_section();

		// Menu Style Section
		$this->start_controls_section(
			'wpr_menu_style_section',
			[
				'label' => esc_html__('Menu Style', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'wpr_menu_alignment',
			[
				'label' => esc_html__('Menu Alignment', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-right',
					],
				],
				'default' => 'left',
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list' => 'text-align: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'wpr_menu_item_typography',
				'label' => esc_html__('Menu Item Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a',
			]
		);

		$this->add_responsive_control(
			'wpr_menu_item_spacing',
			[
				'label' => esc_html__('Menu Item Spacing', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 6,
				],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list' => 'gap: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_menu_margin_top',
			[
				'label' => esc_html__('Menu Top Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
						'step' => 1,
					],
					'em' => [
						'min' => 0,
						'max' => 10,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 40,
				],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav' => 'margin-top: {{SIZE}}{{UNIT}} !important;',
				],
				'separator' => 'before',
			]
		);

		$this->start_controls_tabs('menu_item_tabs');

		// Normal State Tab
		$this->start_controls_tab(
			'menu_item_normal',
			[
				'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_menu_item_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#0f172a',
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_menu_item_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_menu_item_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_menu_item_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_menu_item_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a',
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_menu_item_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a',
			]
		);

		$this->end_controls_tab();

		// Hover State Tab
		$this->start_controls_tab(
			'menu_item_hover',
			[
				'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_menu_item_hover_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a:hover' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_menu_item_hover_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => 'rgba(15, 23, 42, 0.08)',
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a:hover' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_menu_item_hover_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a:hover',
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_menu_item_hover_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li > a:hover',
			]
		);

		$this->end_controls_tab();

		// Active/Current State Tab
		$this->start_controls_tab(
			'menu_item_active',
			[
				'label' => esc_html__('Active', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_menu_item_active_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-item > a' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-ancestor > a' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_menu_item_active_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-item > a' => 'background-color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-ancestor > a' => 'background-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_menu_item_active_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-item > a, {{WRAPPER}} .unlockafe-offcanvas-nav-list > li.current-menu-ancestor > a',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		// Submenu Style
		$this->add_control(
			'wpr_submenu_heading',
			[
				'label' => esc_html__('Submenu', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'wpr_submenu_item_typography',
				'label' => esc_html__('Submenu Item Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul li a, {{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu li a',
			]
		);

		$this->add_control(
			'wpr_submenu_item_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => 'rgba(15, 23, 42, 0.9)',
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul li a' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu li a' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children li a' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_submenu_item_hover_color',
			[
				'label' => esc_html__('Hover Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul li a:hover' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu li a:hover' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children li a:hover' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'wpr_submenu_border_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => 'rgba(15, 23, 42, 0.08)',
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul' => 'border-left-color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu' => 'border-left-color: {{VALUE}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children' => 'border-left-color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_submenu_item_padding',
			[
				'label' => esc_html__('Submenu Item Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_submenu_item_spacing',
			[
				'label' => esc_html__('Submenu Item Spacing', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 30,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 4,
				],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul' => 'gap: {{SIZE}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu' => 'gap: {{SIZE}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children' => 'gap: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_submenu_left_padding',
			[
				'label' => esc_html__('Submenu Left Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 14,
				],
				'selectors' => [
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li ul' => 'padding-left: {{SIZE}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .sub-menu' => 'padding-left: {{SIZE}}{{UNIT}} !important;',
					'{{WRAPPER}} .unlockafe-offcanvas-nav-list li .children' => 'padding-left: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->end_controls_section();

		// Header Social
		$this->start_controls_section(
			'wpr_header_social_section',
			[
				'label' => esc_html__('Header Social', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		// Typography for Header Social Icons
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'wpr_header_social_typography',
				'label' => esc_html__('Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .wpr-header-social ul li a',
			]
		);

		$this->start_controls_tabs('header_social_style_tabs');

		// Normal State
		$this->start_controls_tab(
			'header_social_style_normal_tab',
			[
				'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_header_social_icon_color',
			[
				'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_header_social_icon_bg_color',
			[
				'label' => esc_html__('Bg Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_tab();

		// Hover State
		$this->start_controls_tab(
			'header_social_style_hover_tab',
			[
				'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'wpr_header_social_icon_hover_color',
			[
				'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a:hover' => 'color: {{VALUE}} !important',
				],
			]
		);

		$this->add_control(
			'wpr_header_social_icon_hover_bg_color',
			[
				'label' => esc_html__('Bg Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a:hover' => 'background-color: {{VALUE}} !important',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		// Additional Styling Controls for Header Social

		// Padding
		$this->add_responsive_control(
			'wpr_header_social_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Margin
		$this->add_responsive_control(
			'wpr_header_social_margin',
			[
				'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		// Border
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'wpr_header_social_border',
				'label' => esc_html__('Border', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .wpr-header-social ul li a',
			]
		);

		// Border Radius
		$this->add_responsive_control(
			'wpr_header_social_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
					'%' => [
						'min' => 0,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-header-social ul li a' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
			]
		);

		// Box Shadow
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'wpr_header_social_box_shadow',
				'label' => esc_html__('Box Shadow', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .wpr-header-social ul li a',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'tp_theme_btn_style_sec',
			[
				'label' => esc_html__('Button Style', 'unlock-addons-for-elementor'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'tp_theme_btn_typography',
				'label' => esc_html__('Typography', 'unlock-addons-for-elementor'),
				'selector' => '{{WRAPPER}} .wpr-el-theme-btn, {{WRAPPER}} .wpr-el-theme-circle-btn .rotate',
			]
		);

		$this->add_control(
			'tp_theme_btn_icon_image_size',
			[
				'label' => esc_html__('Icon Image Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100000,
						'step' => 10,
					],
					'em' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'tp_theme_btn_icon_show' => 'yes',
					'tp_theme_btn_icon_type' => 'image'
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_icon_size',
			[
				'label' => esc_html__('Icon Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1000,
						'step' => 1,
					],
					'em' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'tp_theme_btn_icon_show' => 'yes',
					'tp_theme_btn_icon_type' => 'icon'
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_icon_svg_size',
			[
				'label' => esc_html__('Icon SVG Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1000,
						'step' => 1,
					],
					'em' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'tp_theme_btn_icon_show' => 'yes',
					'tp_theme_btn_icon_type' => 'svg'
				],
			]
		);

		$this->start_controls_tabs(
			'tp_theme_btn_state_tabs',
		);

		// button normal state
		$this->start_controls_tab(
			'tp_theme_btn_normal_tab',
			[
				'label' => esc_html__('Normal', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'tp_theme_btn_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn, .wpr-el-theme-circle-btn .rotate' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'tp_theme_btn_icon_color',
			[
				'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon' => 'color: {{VALUE}};',
				],
				'condition' => [
					'tp_theme_btn_icon_show' => 'yes',
					'tp_theme_btn_icon_type' => 'icon'
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_line_color',
			[
				'label' => esc_html__('Button Line Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-line-btn:before' => 'background: {{VALUE}};',
				],
				'condition' => [
					'tp_theme_btn_line_effect' => 'yes'
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'tp_theme_btn_border',
				'selector' => '{{WRAPPER}} .wpr-el-theme-btn',
			]
		);

		$this->add_control(
			'tp_theme_btn_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'tp_theme_btn_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-el-theme-btn',
			]
		);

		$this->end_controls_tab();
		// end normal state

		// button hover state
		$this->start_controls_tab(
			'tp_theme_btn_hover_tab',
			[
				'label' => esc_html__('Hover', 'unlock-addons-for-elementor'),
			]
		);

		$this->add_control(
			'tp_theme_btn_hover_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_hover_icon_color',
			[
				'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn:hover .theme-btn-icon' => 'color: {{VALUE}};',
				],
				'condition' => [
					'tp_theme_btn_icon_show' => 'yes',
					'tp_theme_btn_icon_type' => 'icon'
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_hover_bg_color',
			[
				'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_line_hvr_color',
			[
				'label' => esc_html__('Line Hover Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-line-btn:after' => 'background: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'tp_theme_btn_hover_border',
				'selector' => '{{WRAPPER}} .wpr-el-theme-btn:hover',
			]
		);

		$this->add_control(
			'tp_theme_btn_hover_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'tp_theme_btn_hover_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-el-theme-btn:hover',
			]
		);

		$this->end_controls_tab();
		// end hover state

		$this->end_controls_tabs();
		// end button state tabs

		$this->add_control(
			'tp_theme_btn_margin',
			[
				'label' => esc_html__('Button Margin', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'tp_theme_btn_padding',
			[
				'label' => esc_html__('Button Padding', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_control(
			'tp_theme_btn_icon_margin',
			[
				'label' => esc_html__('Icon Margin', 'unlock-addons-for-elementor'),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'selectors' => [
					'{{WRAPPER}} .wpr-el-theme-btn .theme-btn-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render()
	{
		$settings = $this->get_settings_for_display();

		$thisSettings = $this->get_settings();

		// Get the button link type
		$btn_link_type = $settings['tp_theme_btn_link_type'] ?? '1';

		// Default URL
		$url = '#';

		// Handle Custom Link
		if ($btn_link_type == '1' && !empty($settings['tp_theme_btn_link']['url'])) {
			$url = $settings['tp_theme_btn_link']['url'];
		}
		// Handle Internal Page Link
		elseif ($btn_link_type == '2' && !empty($settings['tp_theme_btn_page_link'])) {
			$page_id = $settings['tp_theme_btn_page_link'];
			$url = get_permalink($page_id);
		}

		$offcanvas_image_size = $this->tp_get_img_size($settings, 'wpr_offcanvas_logo_size');

		if (!empty($settings['wpr_offcanvas_logo']['url'])) {
			$offcanvas_logo = !empty($settings['wpr_offcanvas_logo']['id']) ? wp_get_attachment_image_url($settings['wpr_offcanvas_logo']['id'], $offcanvas_image_size) : $settings['wpr_offcanvas_logo']['url'];
			$offcanvas_logo_alt = !empty($settings['wpr_offcanvas_logo']['id']) ? get_post_meta($settings["wpr_offcanvas_logo"]["id"], "_wp_attachment_image_alt", true) : '';
		}

		if (!empty($settings['wpr_offcanvas_footer_logo']['url'])) {
			$offcanvas_footer_logo = !empty($settings['wpr_offcanvas_footer_logo']['id']) ? wp_get_attachment_image_url($settings['wpr_offcanvas_footer_logo']['id'], 'full') : $settings['wpr_offcanvas_footer_logo']['url'];
			$offcanvas_footer_logo_alt = !empty($settings['wpr_offcanvas_footer_logo']['id']) ? get_post_meta($settings["wpr_offcanvas_footer_logo"]["id"], "_wp_attachment_image_alt", true) : '';
		}

		// Make settings available to template
		$menu_markup = '';
		if (!empty($settings['wpr_offcanvas_menu'])) {
			$menu_markup = wp_nav_menu(
				[
					'menu' => $settings['wpr_offcanvas_menu'],
					'echo' => false,
					'container' => false,
					'menu_class' => 'unlockafe-offcanvas-nav-list',
					'fallback_cb' => '__return_false',
				]
			);
		}

		if (empty($menu_markup) || trim($menu_markup) === '') {
            $page_list = wp_list_pages(
                [
                    'title_li' => '',
                    'echo' => false,
                ]
            );

			if (!empty($page_list)) {
				$menu_markup = sprintf('<ul class="unlockafe-offcanvas-nav-list">%s</ul>', $page_list);
			} else {
				$menu_markup = '';
            }
        }

		$template_settings = $settings;
		$offcanvas_menu_markup = $menu_markup;
        $offcanvas_menu_notice = esc_html__('No menu or pages available to display.', 'unlock-addons-for-elementor');
		$offcanvas_id = 'unlockafe-offcanvas-' . $this->get_id();
		
		// Get menu visibility settings - check all possible keys
		$menu_visibility = !empty($settings['wpr_menu_visibility']) ? $settings['wpr_menu_visibility'] : 'yes';
		// For responsive, check if the key exists (even if empty)
		$menu_visibility_tablet = '';
		if (isset($settings['wpr_menu_visibility_tablet'])) {
			$menu_visibility_tablet = $settings['wpr_menu_visibility_tablet'];
		} else {
			$menu_visibility_tablet = $menu_visibility; // Inherit from desktop
		}
		
		$menu_visibility_mobile = '';
		if (isset($settings['wpr_menu_visibility_mobile'])) {
			$menu_visibility_mobile = $settings['wpr_menu_visibility_mobile'];
		} else {
			$menu_visibility_mobile = $menu_visibility_tablet; // Inherit from tablet or desktop
		}
		
		// Generate responsive CSS for menu visibility
		$widget_id = $this->get_id();
		$visibility_css = '';
		
		// Always generate CSS for all breakpoints to ensure proper control
		// Desktop (min-width: 1025px)
		if ($menu_visibility === 'yes') {
			$visibility_css .= "
			@media (min-width: 1025px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: block !important;
				}
			}
			";
		} else {
			$visibility_css .= "
			@media (min-width: 1025px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: none !important;
				}
			}
			";
		}
		
		// Tablet (min-width: 768px and max-width: 1024px)
		if ($menu_visibility_tablet === 'yes') {
			$visibility_css .= "
			@media (min-width: 768px) and (max-width: 1024px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: block !important;
				}
			}
			";
		} else {
			$visibility_css .= "
			@media (min-width: 768px) and (max-width: 1024px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: none !important;
				}
			}
			";
		}
		
		// Mobile (max-width: 767px)
		if ($menu_visibility_mobile === 'yes') {
			$visibility_css .= "
			@media (max-width: 767px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: block !important;
				}
			}
			";
		} else {
			$visibility_css .= "
			@media (max-width: 767px) {
				.elementor-element-{$widget_id} .offcanvas-menu,
				.elementor-element-{$widget_id} .offcanvas .offcanvas-menu {
					display: none !important;
				}
			}
			";
		}
		
		// Add inline CSS with unique handle and also output directly
		if (!empty($visibility_css)) {
			$style_handle = 'unlockafe-header-sidebar-menu-visibility-' . $widget_id;
			wp_add_inline_style('unlockafe-global', $visibility_css);
			// Also output directly as inline style to ensure it loads
			echo '<style id="' . esc_attr($style_handle) . '">' . $visibility_css . '</style>';
		}
	?>

		<?php if ($settings['wpr_design_style'] == 'layout-3') : ?>

			<div class="header__main-menu v2">
				<div class="menu-btns">
					<button
						class="hamburger-menu"
						type="button"
						data-offcanvas-trigger="<?php echo esc_attr($offcanvas_id); ?>"
						aria-controls="<?php echo esc_attr($offcanvas_id); ?>"
						aria-expanded="false">
						<i class="fa-solid fa-bars"></i>
					</button>
				</div>
			</div>

			<!-- Header sidebar -->
			<?php
			$settings = $template_settings;
			include(UNLOCKAFE_INCLUDE_PATH . 'Skins/header-side/header-side-3.php');
			?>

		<?php elseif ($settings['wpr_design_style'] == 'layout-2') :
			$this->tp_link_attributes_render('theme_btn', 'common-btn wpr-el-theme-btn', $this->get_settings());
		?>

			<div class="header__main-menu v3">
				<div class="menu-btns">
					<button
						class="hamburger-menu"
						type="button"
						data-offcanvas-trigger="<?php echo esc_attr($offcanvas_id); ?>"
						aria-controls="<?php echo esc_attr($offcanvas_id); ?>"
						aria-expanded="false">
						<i class="fa-solid fa-bars"></i>
					</button>
				</div>
			</div>

			<!-- Header sidebar -->
			<?php
			$settings = $template_settings;
			include(UNLOCKAFE_INCLUDE_PATH . 'Skins/header-side/header-side-2.php');
			?>

		<?php else :
			$this->tp_link_attributes_render('theme_btn', 'common-btn wpr-el-theme-btn', $this->get_settings());
		?>

			<div class="header__menu-btns">
				<button
					class="hamburger-menu"
					type="button"
					data-offcanvas-trigger="<?php echo esc_attr($offcanvas_id); ?>"
					aria-controls="<?php echo esc_attr($offcanvas_id); ?>"
					aria-expanded="false">
					<i class="fa-solid fa-bars"></i>
				</button>
			</div>

			<!-- Header sidebar -->
			<?php
			$settings = $template_settings;
			include(UNLOCKAFE_INCLUDE_PATH . 'Skins/header-side/header-side-1.php');
			?>

		<?php endif; ?>

		<div class="unlockafe-offcanvas-backdrop" data-offcanvas-backdrop-for="<?php echo esc_attr($offcanvas_id); ?>" data-offcanvas-close="<?php echo esc_attr($offcanvas_id); ?>"></div>

		<script>
		(function() {
			const widget = document.querySelector('.elementor-element-<?php echo esc_js($this->get_id()); ?>');
			if (!widget) {
				return;
			}

			const panel = widget.querySelector('#<?php echo esc_js($offcanvas_id); ?>');
			const backdrop = widget.querySelector('[data-offcanvas-backdrop-for="<?php echo esc_js($offcanvas_id); ?>"]');
			const triggers = widget.querySelectorAll('[data-offcanvas-trigger="<?php echo esc_js($offcanvas_id); ?>"]');
			const closers = widget.querySelectorAll('[data-offcanvas-close="<?php echo esc_js($offcanvas_id); ?>"]');
			if (!panel || triggers.length === 0) {
				return;
			}

			const body = document.body;
			const openPanel = () => {
				panel.classList.add('is-open');
				panel.setAttribute('aria-hidden', 'false');
				if (backdrop) {
					backdrop.classList.add('is-visible');
				}
				triggers.forEach(btn => btn.setAttribute('aria-expanded', 'true'));
				body.classList.add('unlockafe-offcanvas-open');
			};

			const closePanel = () => {
				panel.classList.remove('is-open');
				panel.setAttribute('aria-hidden', 'true');
				if (backdrop) {
					backdrop.classList.remove('is-visible');
				}
				triggers.forEach(btn => btn.setAttribute('aria-expanded', 'false'));
				body.classList.remove('unlockafe-offcanvas-open');
			};

			triggers.forEach(btn => {
				btn.addEventListener('click', function(event) {
					event.preventDefault();
					openPanel();
				});
			});

			closers.forEach(btn => {
				btn.addEventListener('click', function(event) {
					event.preventDefault();
					closePanel();
				});
			});

			if (backdrop) {
				backdrop.addEventListener('click', closePanel);
			}

			document.addEventListener('keydown', function(event) {
				if (event.key === 'Escape') {
					closePanel();
				}
			});
		})();
		</script>
<?php
	}
}


