<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;

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

/**
 * Header Menu Widget
 *
 * @since 1.0.0
 */
class Header_Menu extends Widget_Base
{
	use Widget_helper;
	use Utils;

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

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

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

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * @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', 'unlockafe-header-menu-style'];
	}

	public function get_script_depends()
	{
		return [];
	}

	protected $nav_menu_index = 1;

	protected function get_nav_menu_index()
	{
		return $this->nav_menu_index++;
	}

	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'),
					'layout-4' => esc_html__('Layout 4', 'unlock-addons-for-elementor'),
					'layout-5' => esc_html__('Layout 5', 'unlock-addons-for-elementor'),
					'layout-6' => esc_html__('Layout 6', 'unlock-addons-for-elementor'),
					'layout-7' => esc_html__('Layout 7', 'unlock-addons-for-elementor'),
				],
				'default' => 'layout-1',
			]
		);

		$this->end_controls_section();

		// Menu Section
		$this->start_controls_section(
			'section_menu',
			[
				'label' => __('Menu Settings', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$menus = $this->get_available_menus();

		if (!empty($menus)) {
			$this->add_control(
				'menu',
				[
					'label' => __('Select Menu', 'unlock-addons-for-elementor'),
					'type' => Controls_Manager::SELECT,
					'options' => $menus,
					'default' => array_keys($menus)[0],
					'save_default' => true,
					'description' => sprintf(__('Manage your menus in the <a href="%s" target="_blank">WordPress Menus screen</a>.', 'unlock-addons-for-elementor'), admin_url('nav-menus.php')),
				]
			);
		} else {
			$this->add_control(
				'menu',
				[
					'type' => Controls_Manager::RAW_HTML,
					'raw' => sprintf(__('<strong>No menus found.</strong><br>Go to the <a href="%s" target="_blank">Menus screen</a> to create one.', 'unlock-addons-for-elementor'), admin_url('nav-menus.php?action=edit&menu=0')),
					'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
				]
			);
		}

		$this->add_control(
			'menu_last_item',
			[
				'label' => __('Last Menu Item', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => __('Default', 'unlock-addons-for-elementor'),
					'cta' => __('Button', 'unlock-addons-for-elementor'),
				],
				'default' => 'none',
			]
		);

		$this->add_responsive_control(
			'menu_alignment',
			[
				'label' => __('Menu Alignment', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => __('Left', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => __('Center', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-center',
					],
					'flex-end' => [
						'title' => __('Right', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-text-align-right',
					],
					'space-between' => [
						'title' => __('Space Between', 'unlock-addons-for-elementor'),
						'icon' => 'eicon-justify-space-between-h',
					],
				],
				'default' => 'space-between',
				'toggle' => true,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu' => 'justify-content: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_item_gap',
			[
				'label' => __('Menu Item Gap', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0,
						'max' => 5,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 4,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list' => 'gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'enable_animations',
			[
				'label' => __('Enable Animations', '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',
				'default' => 'yes',
			]
		);

		$this->add_control(
			'animation_speed',
			[
				'label' => __('Animation Speed', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'slow' => __('Slow', 'unlock-addons-for-elementor'),
					'normal' => __('Normal', 'unlock-addons-for-elementor'),
					'fast' => __('Fast', 'unlock-addons-for-elementor'),
				],
				'default' => 'normal',
				'condition' => [
					'enable_animations' => 'yes',
				],
			]
		);

		$this->add_control(
			'menu_item_separator',
			[
				'label' => __('Show Item Separator', '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',
				'default' => 'no',
			]
		);

		$this->add_control(
			'separator_style',
			[
				'label' => __('Separator Style', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'line' => __('Line', 'unlock-addons-for-elementor'),
					'dot' => __('Dot', 'unlock-addons-for-elementor'),
					'circle' => __('Circle', 'unlock-addons-for-elementor'),
				],
				'default' => 'line',
				'condition' => [
					'menu_item_separator' => 'yes',
				],
			]
		);

		$this->add_control(
			'separator_color',
			[
				'label' => __('Separator Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#cccccc',
				'condition' => [
					'menu_item_separator' => 'yes',
				],
			]
		);

		$this->add_control(
			'enable_sticky_menu',
			[
				'label' => __('Sticky Menu', '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',
				'default' => 'no',
			]
		);

		$this->add_control(
			'sticky_offset',
			[
				'label' => __('Sticky Offset (px)', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::NUMBER,
				'default' => 0,
				'min' => 0,
				'max' => 500,
				'step' => 10,
				'condition' => [
					'enable_sticky_menu' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		// Advanced Settings Section
		$this->start_controls_section(
			'section_advanced',
			[
				'label' => __('Advanced Settings', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'submenu_direction',
			[
				'label' => __('Submenu Direction', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'down' => __('Down', 'unlock-addons-for-elementor'),
					'up' => __('Up', 'unlock-addons-for-elementor'),
					'left' => __('Left', 'unlock-addons-for-elementor'),
					'right' => __('Right', 'unlock-addons-for-elementor'),
				],
				'default' => 'down',
			]
		);

		$this->add_control(
			'submenu_animation',
			[
				'label' => __('Submenu Animation', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'fade' => __('Fade', 'unlock-addons-for-elementor'),
					'slide' => __('Slide', 'unlock-addons-for-elementor'),
					'zoom' => __('Zoom', 'unlock-addons-for-elementor'),
					'none' => __('None', 'unlock-addons-for-elementor'),
				],
				'default' => 'fade',
			]
		);

		$this->add_control(
			'menu_width',
			[
				'label' => __('Menu Width', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'auto' => __('Auto', 'unlock-addons-for-elementor'),
					'full' => __('Full Width', 'unlock-addons-for-elementor'),
					'custom' => __('Custom', 'unlock-addons-for-elementor'),
				],
				'default' => 'auto',
			]
		);

		$this->add_responsive_control(
			'menu_custom_width',
			[
				'label' => __('Custom Width', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%', 'vw'],
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 2000,
						'step' => 10,
					],
					'%' => [
						'min' => 10,
						'max' => 100,
					],
					'vw' => [
						'min' => 10,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1200,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_container' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'menu_width' => 'custom',
				],
			]
		);

		$this->add_control(
			'hover_effect',
			[
				'label' => __('Hover Effect', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => __('None', 'unlock-addons-for-elementor'),
					'underline' => __('Underline', 'unlock-addons-for-elementor'),
					'background' => __('Background', 'unlock-addons-for-elementor'),
					'scale' => __('Scale', 'unlock-addons-for-elementor'),
					'slide' => __('Slide', 'unlock-addons-for-elementor'),
				],
				'default' => 'background',
			]
		);

		$this->end_controls_section();
	}

	protected function style_tab_content()
	{
		// Container Styling
		$this->start_controls_section(
			'wpr_menu_container_style_section',
			[
				'label' => esc_html__('Menu Container', 'unlock-addons-for-elementor'),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'wpr_menu_container_background',
				'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .unlock_addon_menu_container',
				'fields_options' => [
					'background' => [
						'default' => 'classic',
					],
					'color' => [
						'default' => '#f5f5f5',
					],
				],
			]
		);

		$this->add_responsive_control(
			'wpr_menu_container_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'default' => [
					'top' => '10',
					'right' => '20',
					'bottom' => '10',
					'left' => '20',
					'unit' => 'px',
					'isLinked' => true,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

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

		$this->add_responsive_control(
			'wpr_menu_container_border_radius',
			[
				'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'default' => [
					'top' => '50',
					'right' => '50',
					'bottom' => '50',
					'left' => '50',
					'unit' => 'px',
					'isLinked' => true,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

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

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

		$this->add_responsive_control(
			'wpr_menu_container_alignment',
			[
				'label' => esc_html__('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}} .unlock_addon_menu_container' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

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

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

		$this->add_responsive_control(
			'wpr_main_menu_font_size',
			[
				'label' => esc_html__('Font Size', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em', 'rem'],
				'range' => [
					'px' => [
						'min' => 8,
						'max' => 100,
						'step' => 1,
					],
					'em' => [
						'min' => 0.5,
						'max' => 6,
						'step' => 0.1,
					],
					'rem' => [
						'min' => 0.5,
						'max' => 6,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 15,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a' => 'font-size: {{SIZE}}{{UNIT}} !important;',
				],
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'wpr_main_menu_item_spacing',
			[
				'label' => esc_html__('Item Spacing', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', 'em'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->start_controls_tabs('main_menu_item_tabs');

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

		$this->add_control(
			'wpr_main_menu_text_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'default' => '#333333',
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a' => 'color: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_main_menu_item_border_radius',
			[
				'label' => esc_html__('Item Border Radius', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%', 'em'],
				'default' => [
					'top' => '50',
					'right' => '50',
					'bottom' => '50',
					'left' => '50',
					'unit' => 'px',
					'isLinked' => true,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

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

		$this->add_responsive_control(
			'wpr_main_menu_item_padding',
			[
				'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'default' => [
					'top' => '12',
					'right' => '20',
					'bottom' => '12',
					'left' => '20',
					'unit' => 'px',
					'isLinked' => false,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

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

		$this->end_controls_tab();

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

		$this->add_control(
			'wpr_main_menu_text_hover_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .unlock_addon_menu_list > li:hover > a' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->add_control(
			'wpr_main_menu_item_hover_border_color',
			[
				'label' => esc_html__('Border Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a:hover' => 'border-color: {{VALUE}};',
					'{{WRAPPER}} .unlock_addon_menu_list > li:hover > a' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'wpr_main_menu_item_hover_transition',
			[
				'label' => esc_html__('Transition Duration', 'unlock-addons-for-elementor') . ' (s)',
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 3,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 0.3,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li > a' => 'transition: all {{SIZE}}s ease-in-out;',
				],
			]
		);

		$this->end_controls_tab();

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

		$this->add_control(
			'wpr_main_menu_text_active_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_menu_list > li.current-menu-item > a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .unlock_addon_menu_list > li.current_page_item > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'wpr_main_menu_item_active_background',
				'label' => esc_html__('Background', 'unlock-addons-for-elementor'),
				'types' => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} .unlock_addon_menu_list > li.current-menu-item > a, {{WRAPPER}} .unlock_addon_menu_list > li.current_page_item > a',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

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

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

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

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

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

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

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

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

		$this->add_responsive_control(
			'wpr_sub_menu_item_spacing',
			[
				'label' => esc_html__('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' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_submenu li:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
				],
			]
		);

		$this->start_controls_tabs('sub_menu_item_tabs');

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

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

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

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

		$this->end_controls_tab();

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

		$this->add_control(
			'wpr_sub_menu_text_hover_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_submenu li a:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .unlock_addon_submenu li:hover > a' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->add_responsive_control(
			'wpr_sub_menu_item_hover_transition',
			[
				'label' => esc_html__('Transition Duration', 'unlock-addons-for-elementor') . ' (s)',
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 3,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 0.3,
				],
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_submenu li a' => 'transition: all {{SIZE}}s ease-in-out;',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

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

		$this->add_control(
			'wpr_mobile_menu_breakpoint',
			[
				'label' => esc_html__('Mobile Breakpoint', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::SELECT,
				'default' => '768',
				'options' => [
					'480' => esc_html__('480px', 'unlock-addons-for-elementor'),
					'768' => esc_html__('768px', 'unlock-addons-for-elementor'),
					'992' => esc_html__('992px', 'unlock-addons-for-elementor'),
				],
			]
		);

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

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

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

		$this->start_controls_tabs('mobile_menu_item_tabs');

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

		$this->add_control(
			'wpr_mobile_menu_text_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_mobile_menu li a' => 'color: {{VALUE}};',
				],
			]
		);

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

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

		$this->end_controls_tab();

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

		$this->add_control(
			'wpr_mobile_menu_text_hover_color',
			[
				'label' => esc_html__('Text Color', 'unlock-addons-for-elementor'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .unlock_addon_mobile_menu li a:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .unlock_addon_mobile_menu li:hover > a' => 'color: {{VALUE}};',
				],
			]
		);

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

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$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();
		$menu = !empty($settings['menu']) ? $settings['menu'] : '';
		$layout = !empty($settings['wpr_design_style']) ? $settings['wpr_design_style'] : 'layout-1';
		$widget_id = $this->get_id();
		
		// Get all settings values
		$menu_alignment = !empty($settings['menu_alignment']) ? $settings['menu_alignment'] : 'space-between';
		$menu_alignment_tablet = !empty($settings['menu_alignment_tablet']) ? $settings['menu_alignment_tablet'] : $menu_alignment;
		$menu_alignment_mobile = !empty($settings['menu_alignment_mobile']) ? $settings['menu_alignment_mobile'] : $menu_alignment;
		$menu_item_gap = !empty($settings['menu_item_gap']['size']) ? $settings['menu_item_gap']['size'] : 4;
		$menu_item_gap_unit = !empty($settings['menu_item_gap']['unit']) ? $settings['menu_item_gap']['unit'] : 'px';
		$menu_item_gap_tablet = !empty($settings['menu_item_gap_tablet']['size']) ? $settings['menu_item_gap_tablet']['size'] : $menu_item_gap;
		$menu_item_gap_tablet_unit = !empty($settings['menu_item_gap_tablet']['unit']) ? $settings['menu_item_gap_tablet']['unit'] : $menu_item_gap_unit;
		$menu_item_gap_mobile = !empty($settings['menu_item_gap_mobile']['size']) ? $settings['menu_item_gap_mobile']['size'] : $menu_item_gap;
		$menu_item_gap_mobile_unit = !empty($settings['menu_item_gap_mobile']['unit']) ? $settings['menu_item_gap_mobile']['unit'] : $menu_item_gap_unit;
		$menu_width = !empty($settings['menu_width']) ? $settings['menu_width'] : 'auto';
		$menu_custom_width = !empty($settings['menu_custom_width']['size']) ? $settings['menu_custom_width']['size'] : 1200;
		$menu_custom_width_unit = !empty($settings['menu_custom_width']['unit']) ? $settings['menu_custom_width']['unit'] : 'px';
		$menu_custom_width_tablet = !empty($settings['menu_custom_width_tablet']['size']) ? $settings['menu_custom_width_tablet']['size'] : $menu_custom_width;
		$menu_custom_width_tablet_unit = !empty($settings['menu_custom_width_tablet']['unit']) ? $settings['menu_custom_width_tablet']['unit'] : $menu_custom_width_unit;
		$menu_custom_width_mobile = !empty($settings['menu_custom_width_mobile']['size']) ? $settings['menu_custom_width_mobile']['size'] : $menu_custom_width;
		$menu_custom_width_mobile_unit = !empty($settings['menu_custom_width_mobile']['unit']) ? $settings['menu_custom_width_mobile']['unit'] : $menu_custom_width_unit;
		
		// Get submenu and hover effect settings
		$submenu_direction = !empty($settings['submenu_direction']) ? $settings['submenu_direction'] : 'down';
		$submenu_animation = !empty($settings['submenu_animation']) ? $settings['submenu_animation'] : 'fade';
		$hover_effect = !empty($settings['hover_effect']) ? $settings['hover_effect'] : 'background';
		
		// Debug: Log layout value (remove in production)
		if (defined('WP_DEBUG') && WP_DEBUG) {
			error_log('Header Menu Layout: ' . $layout . ' for widget ID: ' . $widget_id);
		}
		
		// Ensure CSS file is loaded
		if (!wp_style_is('unlockafe-header-menu-style', 'enqueued')) {
			wp_enqueue_style(
				'unlockafe-header-menu-style',
				UNLOCKAFE_ASSETS . 'front-end/css/header-menu.css',
				['unlockafe-global'],
				UNLOCKAFE_VERSION
			);
		}
		
		// Calculate menu width CSS values
		$menu_width_value = '100%';
		$menu_max_width_value = '100%';
		if ($menu_width === 'full') {
			$menu_width_value = '100%';
			$menu_max_width_value = '100%';
		} elseif ($menu_width === 'custom') {
			$menu_width_value = $menu_custom_width . $menu_custom_width_unit;
			$menu_max_width_value = $menu_custom_width . $menu_custom_width_unit;
		} else {
			$menu_width_value = 'auto';
			$menu_max_width_value = '100%';
		}
		
		// Add widget-specific inline styles using wp_add_inline_style
		$inline_css = "
		.elementor-element-{$widget_id} .unlock_addon_menu_container {
			position: relative !important;
			width: {$menu_width_value} !important;
			max-width: {$menu_max_width_value} !important;
			background-color: #ffffff !important;
			border-radius: 50px !important;
			padding: 8px !important;
			display: block !important;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
			/* Allow submenus to overflow above/side of the container (needed for UP/LEFT/RIGHT directions) */
			overflow: visible !important;
			box-sizing: border-box !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu {
			position: relative !important;
			width: 100% !important;
			/* Allow submenus to be visible outside the nav element */
			overflow: visible !important;
			box-sizing: border-box !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list {
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
			display: flex !important;
			flex-direction: row !important;
			flex-wrap: wrap !important;
			align-items: center !important;
			justify-content: {$menu_alignment} !important;
			gap: {$menu_item_gap}{$menu_item_gap_unit} !important;
			width: 100% !important;
			max-width: 100% !important;
			background-color: transparent !important;
			/* Keep items wrapping but don't clip submenus */
			overflow: visible !important;
			box-sizing: border-box !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
			position: relative !important;
			margin: 0 !important;
			list-style: none !important;
			display: inline-block !important;
			flex: 0 1 auto !important;
			text-align: center !important;
			width: auto !important;
			min-width: 0 !important;
			max-width: 100% !important;
			background-color: transparent !important;
			box-sizing: border-box !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li.menu-item-has-children,
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li.unlock_addon_menu_has_children {
			position: relative !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
			display: block !important;
			text-decoration: none !important;
			position: relative !important;
			white-space: normal !important;
			word-wrap: break-word !important;
			overflow-wrap: break-word !important;
			color: #333333 !important;
			font-weight: 500 !important;
			padding: 12px 20px !important;
			transition: all 0.3s ease !important;
			border-radius: 50px !important;
			background-color: transparent !important;
			box-sizing: border-box !important;
			max-width: 100% !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a:hover,
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > a {
			color: #000 !important;
			background-color: #f5f5f5 !important;
		}
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li.current-menu-item > a,
		.elementor-element-{$widget_id} .unlock_addon_menu_list > li.current_page_item > a {
			background-color: #f0f0f0 !important;
			color: #000 !important;
			font-weight: 600 !important;
		}
		@media (min-width: 481px) {
			.elementor-element-{$widget_id} .unlock_addon_menu_list {
				flex-direction: row !important;
				flex-wrap: wrap !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
				display: inline-block !important;
				width: auto !important;
				flex: 0 1 auto !important;
				min-width: 0 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
				white-space: nowrap !important;
			}
		}
		";
		
		// Add inline style to the enqueued style
		if (wp_style_is('unlockafe-header-menu-style', 'enqueued') || wp_style_is('unlockafe-header-menu-style', 'registered')) {
			wp_add_inline_style('unlockafe-header-menu-style', $inline_css);
		} else {
			// If style is not registered, register it first
			wp_register_style('unlockafe-header-menu-style', UNLOCKAFE_ASSETS . 'front-end/css/header-menu.css', ['unlockafe-global'], UNLOCKAFE_VERSION);
			wp_enqueue_style('unlockafe-header-menu-style');
			wp_add_inline_style('unlockafe-header-menu-style', $inline_css);
		}

		if (file_exists(get_parent_theme_file_path('/inc/class-navwalker.php'))) {
			require_once get_parent_theme_file_path('/inc/class-navwalker.php');
		}

		// Add custom menu walker to add prefixes
		$menu_args = [
			'echo' => false,
			'menu' => $menu,
			'menu_class' => 'unlock_addon_menu_list',
			'menu_id' => 'unlock_addon_menu_' . $widget_id,
			'fallback_cb' => 'wp_page_menu',
			'container' => false,
			'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
		];

		if (class_exists('orvio_Navwalker_Class')) {
			$menu_args['walker'] = new \orvio_Navwalker_Class();
		}

		$menu_html = wp_nav_menu($menu_args);

		// Add prefixes to submenu classes
		if (!empty($menu_html)) {
			$menu_html = str_replace('sub-menu', 'unlock_addon_submenu', $menu_html);
			$menu_html = str_replace('children', 'unlock_addon_submenu', $menu_html);
			$menu_html = str_replace('menu-item-has-children', 'unlock_addon_menu_has_children', $menu_html);
		}

		// Layout classes
		$layout_classes = [
			'layout-1' => 'unlock_addon_menu_layout_1',
			'layout-2' => 'unlock_addon_menu_layout_2',
			'layout-3' => 'unlock_addon_menu_layout_3',
			'layout-4' => 'unlock_addon_menu_layout_4',
			'layout-5' => 'unlock_addon_menu_layout_5',
			'layout-6' => 'unlock_addon_menu_layout_6',
			'layout-7' => 'unlock_addon_menu_layout_7',
		];

		$container_class = 'unlock_addon_menu_container ' . (!empty($layout_classes[$layout]) ? $layout_classes[$layout] : $layout_classes['layout-1']);
		$menu_class = 'unlock_addon_menu ' . (!empty($layout_classes[$layout]) ? $layout_classes[$layout] : $layout_classes['layout-1']);
		
		// Set default justify-content based on layout
		$menu_justify = 'space-between';
		if ($layout === 'layout-1') {
			$menu_justify = 'flex-start';
		} elseif ($layout === 'layout-2' || $layout === 'layout-4' || $layout === 'layout-7') {
			$menu_justify = 'center';
		} elseif ($layout === 'layout-3') {
			$menu_justify = 'flex-end';
		} elseif ($layout === 'layout-5') {
			$menu_justify = 'space-between';
		} elseif ($layout === 'layout-6') {
			$menu_justify = 'flex-start';
		}
		
		// Get layout-specific inline styles
		$container_inline_style = '';
		if ($layout === 'layout-1') {
			$container_inline_style = 'background-color: #e3f2fd !important; border-radius: 50px !important; padding: 10px 20px !important; box-shadow: 0 12px 30px rgba(33, 150, 243, 0.2) !important;';
		} elseif ($layout === 'layout-2') {
			$container_inline_style = 'background-color: linear-gradient(90deg, #ED411F 0%, #a5d6a7 100%) !important; border-radius: 8px !important; padding: 12px 20px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;';
		} elseif ($layout === 'layout-3') {
			$container_inline_style = 'background: linear-gradient(90deg, #c8e6c9 0%, #a5d6a7 100%) !important; border-radius: 0 !important; padding: 20px 30px !important; box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.1) !important; border-left: 5px solid #4caf50 !important;';
		} elseif ($layout === 'layout-4') {
			$container_inline_style = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; border-radius: 25px !important; padding: 8px !important; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;';
		} elseif ($layout === 'layout-5') {
			$container_inline_style = 'background: linear-gradient(45deg, #fff3e0 25%, #ffe0b2 25%, #ffe0b2 50%, #fff3e0 50%, #fff3e0 75%, #ffe0b2 75%, #ffe0b2) !important; background-size: 20px 20px !important; border: 4px solid #ff6f00 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: 0 6px 15px rgba(255, 111, 0, 0.4) !important;';
		} elseif ($layout === 'layout-6') {
			$container_inline_style = 'background: #fce4ec !important; border-radius: 30px !important; padding: 10px !important; box-shadow: 0 8px 30px rgba(233, 30, 99, 0.3), inset 0 2px 5px rgba(255,255,255,0.5) !important;';
		} elseif ($layout === 'layout-7') {
			$container_inline_style = 'background: #b2dfdb !important; border-radius: 0 !important; padding: 18px 30px !important; box-shadow: none !important; border-bottom: 4px solid #00796b !important;';
		}
		
		// Add cache-busting version
		$style_version = time(); // Force refresh on every render
		
		// Initialize animation and separator variables
		$animation_duration = '0.6s';
		$animation_speed = !empty($settings['animation_speed']) ? $settings['animation_speed'] : 'normal';
		if ($animation_speed === 'slow') {
			$animation_duration = '1s';
		} elseif ($animation_speed === 'fast') {
			$animation_duration = '0.3s';
		}
		
		// Separator CSS
		$separator_css = '';
		$menu_item_separator = !empty($settings['menu_item_separator']) && $settings['menu_item_separator'] === 'yes';
		if ($menu_item_separator) {
			$separator_style = !empty($settings['separator_style']) ? $settings['separator_style'] : 'line';
			$separator_color = !empty($settings['separator_color']) ? $settings['separator_color'] : '#cccccc';
			$separator_content = '';
			if ($separator_style === 'dot') {
				$separator_content = 'content: "•";';
			} elseif ($separator_style === 'circle') {
				$separator_content = 'content: "○";';
			} else {
				$separator_content = 'content: ""; width: 1px; height: 20px; background: ' . $separator_color . ';';
			}
			
			$separator_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:not(:last-child)::after {
				{$separator_content}
				display: inline-block;
				margin: 0 10px;
				color: {$separator_color};
				vertical-align: middle;
			}
			";
		}
		
		// Animation disable CSS
		$animation_disable_css = '';
		$enable_animations = !empty($settings['enable_animations']) && $settings['enable_animations'] === 'yes';
		if (!$enable_animations) {
			$animation_disable_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_container,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
				animation: none !important;
			}
			";
		}
		
		// Build all layout-specific CSS
		$layout_css = "
			/* Keyframe Animations */
			@keyframes fadeInDown {
				from {
					opacity: 0;
					transform: translateY(-20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			@keyframes slideInLeft {
				from {
					opacity: 0;
					transform: translateX(-30px);
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
			@keyframes slideInRight {
				from {
					opacity: 0;
					transform: translateX(30px);
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
			@keyframes zoomIn {
				from {
					opacity: 0;
					transform: scale(0.8);
				}
				to {
					opacity: 1;
					transform: scale(1);
				}
			}
			@keyframes bounceIn {
				0% {
					opacity: 0;
					transform: scale(0.3);
				}
				50% {
					opacity: 1;
					transform: scale(1.05);
				}
				70% {
					transform: scale(0.9);
				}
				100% {
					transform: scale(1);
				}
			}
			@keyframes fadeInUp {
				from {
					opacity: 0;
					transform: translateY(20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			@keyframes pulse {
				0%, 100% {
					box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
				}
				50% {
					box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
				}
			}
			@keyframes slideInUp {
				from {
					opacity: 0;
					transform: translateY(20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			@keyframes rotateIn {
				from {
					opacity: 0;
					transform: rotate(-10deg) scale(0.8);
				}
				to {
					opacity: 1;
					transform: rotate(0) scale(1);
				}
			}
			@keyframes flipInX {
				from {
					opacity: 0;
					transform: perspective(400px) rotateX(90deg);
				}
				40% {
					transform: perspective(400px) rotateX(-20deg);
				}
				60% {
					transform: perspective(400px) rotateX(10deg);
				}
				80% {
					transform: perspective(400px) rotateX(-5deg);
				}
				to {
					opacity: 1;
					transform: perspective(400px) rotateX(0);
				}
			}
			@keyframes shake {
				0%, 100% {
					transform: translateX(0);
				}
				10%, 30%, 50%, 70%, 90% {
					transform: translateX(-5px);
				}
				20%, 40%, 60%, 80% {
					transform: translateX(5px);
				}
			}
			@keyframes glow {
				0%, 100% {
					box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
				}
				50% {
					box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(102, 126, 234, 0.6);
				}
			}
			/* Base styles - applied to all layouts */
			.elementor-element-{$widget_id} .unlock_addon_menu_container {
				position: relative !important;
				width: auto !important;
				max-width: 100% !important;
				display: inline-flex !important;
				align-items: center !important;
				overflow: visible !important;
				z-index: 999 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu {
				position: relative !important;
				width: 100% !important;
				display: flex !important;
				align-items: center !important;
				overflow: visible !important;
				z-index: 999 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list,
			.elementor-element-{$widget_id} ul.unlock_addon_menu_list,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list {
				list-style: none !important;
				margin: 0 !important;
				padding: 0 !important;
				display: inline-flex !important;
				flex-wrap: wrap !important;
				align-items: center !important;
				width: auto !important;
				background-color: transparent !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li,
			.elementor-element-{$widget_id} ul.unlock_addon_menu_list > li,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li {
				position: relative !important;
				margin: 0 !important;
				list-style: none !important;
				display: inline-flex !important;
				flex: 0 0 auto !important;
				text-align: center !important;
				width: auto !important;
				min-width: 0 !important;
				background-color: transparent !important;
				float: none !important;
				vertical-align: top !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
				display: block !important;
				text-decoration: none !important;
				position: relative !important;
				white-space: nowrap !important;
				font-weight: 500 !important;
				transition: all 0.3s ease !important;
			}
			/* Force white text for Layout 2 - Black Background */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 ul.unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 nav .unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} [data-layout=\"layout-2\"] .unlock_addon_menu_list > li > a {
				color: #ffffff !important;
			}
			/* Layout 1 - Default Pill Design - Light Blue Theme */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_container {
				background-color: #e3f2fd !important;
				border-radius: 50px !important;
				padding: 10px 20px !important;
				box-shadow: 0 12px 30px rgba(33, 150, 243, 0.2) !important;
				animation: slideInLeft 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu {
				justify-content: flex-start !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list {
				justify-content: flex-start !important;
				gap: 8px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li {
				animation: slideInUp 0.5s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li > a {
				color: #0d47a1 !important;
				padding: 14px 26px !important;
				border-radius: 40px !important;
				background-color: transparent !important;
				font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
				font-weight: 600 !important;
				letter-spacing: 0.5px !important;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
				position: relative !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li > a::after {
				content: '' !important;
				position: absolute !important;
				bottom: 0 !important;
				left: 50% !important;
				width: 0 !important;
				height: 2px !important;
				background: #1976d2 !important;
				transition: all 0.3s ease !important;
				transform: translateX(-50%) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li:hover > a {
				color: #ffffff !important;
				background-color: #1976d2 !important;
				transform: translateY(-2px) scale(1.05) !important;
				box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li > a:hover::after {
				width: 80% !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_1 .unlock_addon_menu_list > li.current_page_item > a {
				background-color: #1565c0 !important;
				color: #ffffff !important;
				font-weight: 700 !important;
				animation: pulse 2s ease-in-out infinite !important;
			}
			/* Layout 2 - Center Bordered Boxes - Dark Theme with White Text */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2.unlock_addon_menu_container,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_container {
				background-color: #000000 !important;
				border-radius: 8px !important;
				padding: 12px 20px !important;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
				animation: fadeInDown 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2.unlock_addon_menu,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu {
				justify-content: center !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 ul.unlock_addon_menu_list,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 nav .unlock_addon_menu_list {
				justify-content: center !important;
				gap: 12px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li {
				animation: fadeInDown 0.5s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 ul.unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 nav .unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_submenu li a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li.current_page_item > a {
				border-radius: 4px !important;
				padding: 12px 20px !important;
				border: 2px solid rgba(255,255,255,0.3) !important;
				background: transparent !important;
				color: #ffffff !important;
				font-family: 'Roboto', 'Arial', sans-serif !important;
				font-weight: 500 !important;
				text-transform: uppercase !important;
				letter-spacing: 1px !important;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
				position: relative !important;
				overflow: hidden !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li > a::before {
				content: '' !important;
				position: absolute !important;
				top: 0 !important;
				left: -100% !important;
				width: 100% !important;
				height: 100% !important;
				background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
				transition: left 0.5s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li > a:hover::before {
				left: 100% !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li:hover > a {
				background: #ffffff !important;
				color: #000000 !important;
				border-color: #ffffff !important;
				transform: translateY(-2px) scale(1.05) !important;
				box-shadow: 0 4px 12px rgba(255,255,255,0.3) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_2 .unlock_addon_menu_list > li.current_page_item > a {
				background: #ffffff !important;
				color: #000000 !important;
				border-color: #ffffff !important;
				animation: pulse 2s ease-in-out infinite !important;
			}
			/* Layout 3 - Right Aligned Underline - Green Theme with Side Border */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_container {
				background: linear-gradient(90deg, #c8e6c9 0%, #a5d6a7 100%) !important;
				border-radius: 0 !important;
				padding: 20px 30px !important;
				box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.1) !important;
				border-left: 5px solid #4caf50 !important;
				animation: slideInRight 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu {
				justify-content: flex-end !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list {
				justify-content: flex-end !important;
				gap: 30px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li {
				animation: slideInRight 0.5s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li > a {
				position: relative !important;
				padding: 18px 8px !important;
				border-radius: 0 !important;
				color: #1b5e20 !important;
				background-color: transparent !important;
				font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
				font-weight: 700 !important;
				border-left: 3px solid transparent !important;
				padding-left: 15px !important;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li > a::after {
				content: '' !important;
				position: absolute !important;
				left: 0 !important;
				bottom: 0 !important;
				width: 100% !important;
				height: 4px !important;
				background: transparent !important;
				transition: all 0.3s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li:hover > a {
				color: #0d4f1c !important;
				background-color: rgba(76, 175, 80, 0.1) !important;
				border-left-color: #4caf50 !important;
				transform: translateX(-5px) !important;
				padding-left: 20px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li > a:hover::after,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li.current-menu-item > a::after,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li.current_page_item > a::after {
				background: #4caf50 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_3 .unlock_addon_menu_list > li.current_page_item > a {
				color: #0d4f1c !important;
				background-color: rgba(76, 175, 80, 0.15) !important;
				border-left-color: #4caf50 !important;
			}
			/* Layout 4 - Gradient Background with Glass Effect - Purple Theme with Icon Style */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_container {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
				border-radius: 25px !important;
				padding: 8px !important;
				box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
				animation: zoomIn 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu {
				justify-content: center !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list {
				justify-content: center !important;
				gap: 4px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li > a {
				border-radius: 18px !important;
				padding: 14px 26px !important;
				color: #ffffff !important;
				background: rgba(255, 255, 255, 0.1) !important;
				font-family: 'Montserrat', 'Verdana', sans-serif !important;
				font-weight: 700 !important;
				text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
				border: 1px solid rgba(255,255,255,0.2) !important;
				position: relative !important;
				overflow: hidden !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li > a::before {
				content: '' !important;
				position: absolute !important;
				top: 0 !important;
				left: -100% !important;
				width: 100% !important;
				height: 100% !important;
				background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
				transition: left 0.5s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li > a:hover::before {
				left: 100% !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_4 .unlock_addon_menu_list > li.current_page_item > a {
				background: rgba(255, 255, 255, 0.35) !important;
				color: #ffffff !important;
				backdrop-filter: blur(15px) !important;
				box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
				transform: translateY(-2px) !important;
				animation: glow 2s ease-in-out infinite !important;
			}
			/* Layout 5 - Boxed with Dividers - Orange Theme with Diagonal Design */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_container {
				background: linear-gradient(45deg, #fff3e0 25%, #ffe0b2 25%, #ffe0b2 50%, #fff3e0 50%, #fff3e0 75%, #ffe0b2 75%, #ffe0b2) !important;
				background-size: 20px 20px !important;
				border: 4px solid #ff6f00 !important;
				border-radius: 0 !important;
				padding: 0 !important;
				box-shadow: 0 6px 15px rgba(255, 111, 0, 0.4) !important;
				animation: bounceIn 0.8s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu {
				justify-content: space-between !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list {
				justify-content: space-between !important;
				gap: 0 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li {
				animation: bounceIn 0.6s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li {
				border-right: 3px solid #ff6f00 !important;
				position: relative !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li:last-child {
				border-right: none !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li > a {
				border-radius: 0 !important;
				padding: 18px 32px !important;
				color: #e65100 !important;
				background: rgba(255, 255, 255, 0.8) !important;
				font-family: 'Open Sans', 'Arial', sans-serif !important;
				font-weight: 700 !important;
				text-transform: uppercase !important;
				letter-spacing: 0.5px !important;
				position: relative !important;
				z-index: 1 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_5 .unlock_addon_menu_list > li.current_page_item > a {
				background: #ff6f00 !important;
				color: #ffffff !important;
				box-shadow: inset 0 0 20px rgba(0,0,0,0.1) !important;
				transform: scale(1.05) !important;
				transition: all 0.3s ease !important;
			}
			/* Layout 6 - Rounded with Gradient Hover - Pink Theme with Badge Style */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_container {
				background: #fce4ec !important;
				border-radius: 30px !important;
				padding: 10px !important;
				box-shadow: 0 8px 30px rgba(233, 30, 99, 0.3), inset 0 2px 5px rgba(255,255,255,0.5) !important;
				animation: fadeInUp 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu {
				justify-content: flex-start !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list {
				justify-content: flex-start !important;
				gap: 10px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li {
				animation: fadeInUp 0.5s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li > a {
				border-radius: 20px !important;
				padding: 13px 28px !important;
				color: #880e4f !important;
				background: #ffffff !important;
				font-family: 'Nunito', 'Trebuchet MS', sans-serif !important;
				font-weight: 600 !important;
				box-shadow: 0 2px 8px rgba(233, 30, 99, 0.2) !important;
				border: 2px solid #f8bbd0 !important;
				position: relative !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li > a::before {
				content: '●' !important;
				position: absolute !important;
				left: 10px !important;
				top: 50% !important;
				transform: translateY(-50%) !important;
				color: #e91e63 !important;
				font-size: 8px !important;
				opacity: 0 !important;
				transition: opacity 0.3s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li.current_page_item > a {
				background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%) !important;
				color: #ffffff !important;
				box-shadow: 0 6px 18px rgba(233, 30, 99, 0.6) !important;
				transform: translateY(-3px) scale(1.05) !important;
				border-color: #e91e63 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li > a:hover::before,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li.current-menu-item > a::before,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_6 .unlock_addon_menu_list > li.current_page_item > a::before {
				opacity: 1 !important;
				color: #ffffff !important;
			}
			/* Layout 7 - Minimalist with Animated Underline - Teal Theme */
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7.unlock_addon_menu_container,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_container,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_container {
				background: #b2dfdb !important;
				border-radius: 0 !important;
				padding: 18px 30px !important;
				box-shadow: none !important;
				border-bottom: 4px solid #00796b !important;
				animation: fadeIn 0.6s ease-out !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7.unlock_addon_menu,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu {
				justify-content: center !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 ul.unlock_addon_menu_list,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_list {
				justify-content: center !important;
				gap: 40px !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li {
				animation: flipInX 0.6s ease-out backwards !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(1) {
				animation-delay: 0.1s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(2) {
				animation-delay: 0.2s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(3) {
				animation-delay: 0.3s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(4) {
				animation-delay: 0.4s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(5) {
				animation-delay: 0.5s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li:nth-child(6) {
				animation-delay: 0.6s !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 ul.unlock_addon_menu_list > li > a,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_list > li > a {
				border-radius: 0 !important;
				padding: 18px 12px !important;
				color: #004d40 !important;
				background: transparent !important;
				position: relative !important;
				font-family: 'Lato', 'Georgia', serif !important;
				font-weight: 500 !important;
				font-style: italic !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li > a::after,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 ul.unlock_addon_menu_list > li > a::after,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_list > li > a::after {
				content: '' !important;
				position: absolute !important;
				left: 50% !important;
				bottom: 0 !important;
				width: 0 !important;
				height: 4px !important;
				background: #00796b !important;
				transform: translateX(-50%) !important;
				transition: width 0.4s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li > a:hover,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li.current-menu-item > a,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li.current_page_item > a,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_list > li > a:hover {
				color: #00251a !important;
				background: transparent !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li > a:hover::after,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li.current-menu-item > a::after,
			.elementor-element-{$widget_id} .unlock_addon_menu_layout_7 .unlock_addon_menu_list > li.current_page_item > a::after,
			.elementor-element-{$widget_id} [data-layout=\"layout-7\"] .unlock_addon_menu_list > li > a:hover::after {
				width: 90% !important;
			}
			/* Submenu - Base Styles (Direction and Animation will be added dynamically) */
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				list-style: none !important;
				margin: 0 !important;
				padding: 0 !important;
				position: absolute !important;
				min-width: 200px !important;
				z-index: 999 !important;
				opacity: 0 !important;
				visibility: hidden !important;
				background-color: #ffffff !important;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
				border-radius: 8px !important;
				padding: 10px 0 !important;
				display: flex !important;
				flex-direction: column !important;
				align-items: stretch !important;
				white-space: nowrap !important;
			}
			/* Ensure parent li has relative positioning for submenu */
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
				position: relative !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_submenu li {
				position: relative !important;
				margin: 0 !important;
				list-style: none !important;
				display: inline-block !important;
				width: auto !important;
				flex: 0 0 auto !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_submenu li a {
				display: block !important;
				text-decoration: none !important;
				padding: 12px 20px !important;
				width: auto !important;
				color: #333 !important;
				transition: all 0.3s ease !important;
				white-space: nowrap !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_submenu li a:hover {
				background-color: #f5f5f5 !important;
				color: #000 !important;
			}
			/* Force horizontal layout - Override any other styles */
			.elementor-element-{$widget_id} .unlock_addon_menu_list,
			.elementor-element-{$widget_id} ul.unlock_addon_menu_list,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list {
				flex-direction: row !important;
				flex-wrap: nowrap !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li,
			.elementor-element-{$widget_id} ul.unlock_addon_menu_list > li,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li {
				display: inline-flex !important;
				width: auto !important;
				flex: 0 0 auto !important;
				float: none !important;
				align-items: center !important;
			}
			@media (min-width: 481px) {
				.elementor-element-{$widget_id} .unlock_addon_menu_list {
					flex-direction: row !important;
					flex-wrap: nowrap !important;
				}
				.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
					display: inline-block !important;
					width: auto !important;
					flex: 1 1 auto !important;
					float: none !important;
				}
			}
			/* Burger Menu Button */
			.elementor-element-{$widget_id} .unlock_addon_menu_toggle {
				display: none !important;
				background: transparent !important;
				border: 2px solid #333 !important;
				border-radius: 4px !important;
				padding: 8px 12px !important;
				cursor: pointer !important;
				flex-direction: column !important;
				justify-content: space-around !important;
				width: 40px !important;
				height: 40px !important;
				position: relative !important;
				z-index: 1000 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_toggle span {
				display: block !important;
				width: 100% !important;
				height: 3px !important;
				background-color: #333 !important;
				border-radius: 2px !important;
				transition: all 0.3s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_toggle.active span:nth-child(1) {
				transform: rotate(45deg) translate(8px, 8px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_toggle.active span:nth-child(2) {
				opacity: 0 !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_toggle.active span:nth-child(3) {
				transform: rotate(-45deg) translate(7px, -7px) !important;
			}
			@media (max-width: 768px) {
				.elementor-element-{$widget_id} .unlock_addon_menu_toggle {
					display: flex !important;
				}
				.elementor-element-{$widget_id} .unlock_addon_menu {
					justify-content: flex-end !important;
				}
				.elementor-element-{$widget_id} .unlock_addon_menu_list {
					display: none !important;
					flex-direction: column !important;
					width: 100% !important;
					position: absolute !important;
					top: calc(100% + 8px) !important;
					left: 0 !important;
					background: rgba(255,255,255,0.95) !important;
					box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35) !important;
					border-radius: 8px !important;
					padding: 12px 0 !important;
					margin-top: 10px !important;
					z-index: 9999 !important;
					backdrop-filter: blur(8px);
					border: 1px solid rgba(255,255,255,0.6);
				}
				.elementor-element-{$widget_id} .unlock_addon_menu_list.menu-open {
					display: flex !important;
				}
				.elementor-element-{$widget_id} .unlock_addon_menu_list > li {
					width: 100% !important;
					display: block !important;
					flex: none !important;
					text-align: left !important;
				}
				.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
					width: 100% !important;
					padding: 12px 20px !important;
					border-radius: 0 !important;
				}
			}
		";
		
		// Ensure variables are initialized (fallback if not set earlier)
		if (!isset($separator_css)) {
			$separator_css = '';
		}
		if (!isset($animation_disable_css)) {
			$animation_disable_css = '';
		}
		if (!isset($animation_speed)) {
			$animation_speed = 'normal';
		}
		if (!isset($animation_duration)) {
			$animation_duration = '0.6s';
		}
		
		// Build submenu direction CSS - Must override base CSS file styles
		$submenu_direction_css = '';
		if ($submenu_direction === 'down') {
			$submenu_direction_css = "
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				top: calc(100% + 10px) !important;
				left: 50% !important;
				right: auto !important;
				bottom: auto !important;
				transform: translateX(-50%) translateY(-10px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul {
				opacity: 1 !important;
				visibility: visible !important;
				transform: translateX(-50%) translateY(0) !important;
			}
			";
		} elseif ($submenu_direction === 'up') {
			$submenu_direction_css = "
			/* Override base CSS for UP direction - Must override base CSS file */
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul,
			.elementor-element-{$widget_id} nav .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_container .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_container .unlock_addon_menu_list > li > ul {
				top: auto !important;
				bottom: calc(100% + 10px) !important;
				left: 50% !important;
				right: auto !important;
				transform: translateX(-50%) translateY(10px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_container .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_container .unlock_addon_menu_list > li:hover > ul {
				opacity: 1 !important;
				visibility: visible !important;
				top: auto !important;
				bottom: calc(100% + 10px) !important;
				transform: translateX(-50%) translateY(0) !important;
			}
			";
		} elseif ($submenu_direction === 'left') {
			$submenu_direction_css = "
			/* Override base CSS for LEFT direction */
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul,
			.elementor-element-{$widget_id} nav .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li > ul {
				top: 0 !important;
				right: calc(100% + 10px) !important;
				left: auto !important;
				bottom: auto !important;
				transform: translateX(10px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul {
				opacity: 1 !important;
				visibility: visible !important;
				transform: translateX(0) !important;
			}
			";
		} elseif ($submenu_direction === 'right') {
			$submenu_direction_css = "
			/* Override base CSS for RIGHT direction */
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul,
			.elementor-element-{$widget_id} nav .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li > ul {
				top: 0 !important;
				left: calc(100% + 10px) !important;
				right: auto !important;
				bottom: auto !important;
				transform: translateX(-10px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover ul,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul {
				opacity: 1 !important;
				visibility: visible !important;
				transform: translateX(0) !important;
			}
			";
		}
		
		// Build submenu animation CSS (only if not already handled by direction CSS)
		$submenu_animation_css = '';
		$submenu_transition = 'all 0.3s ease-in-out';
		if ($submenu_animation === 'fade') {
			$submenu_animation_css = "
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out !important;
			}
			";
		} elseif ($submenu_animation === 'slide') {
			$submenu_animation_css = "
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				transition: all 0.3s ease-in-out !important;
			}
			";
		} elseif ($submenu_animation === 'zoom') {
			// Zoom animation needs to work with direction transforms
			$zoom_scale = 'scale(0.8)';
			$zoom_scale_hover = 'scale(1)';
			
			// Adjust based on direction
			if ($submenu_direction === 'down') {
				$zoom_transform = 'translateX(-50%) translateY(-10px) ' . $zoom_scale;
				$zoom_transform_hover = 'translateX(-50%) translateY(0) ' . $zoom_scale_hover;
			} elseif ($submenu_direction === 'up') {
				$zoom_transform = 'translateX(-50%) translateY(10px) ' . $zoom_scale;
				$zoom_transform_hover = 'translateX(-50%) translateY(0) ' . $zoom_scale_hover;
			} elseif ($submenu_direction === 'left') {
				$zoom_transform = 'translateX(10px) ' . $zoom_scale;
				$zoom_transform_hover = 'translateX(0) ' . $zoom_scale_hover;
			} else {
				$zoom_transform = 'translateX(-10px) ' . $zoom_scale;
				$zoom_transform_hover = 'translateX(0) ' . $zoom_scale_hover;
			}
			
			$submenu_animation_css = "
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				transform-origin: center !important;
				transition: all 0.3s ease-in-out !important;
				transform: {$zoom_transform} !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu {
				opacity: 1 !important;
				visibility: visible !important;
				transform: {$zoom_transform_hover} !important;
			}
			";
		} else {
			// None - instant show
			$submenu_animation_css = "
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list ul {
				transition: none !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover .unlock_addon_submenu {
				opacity: 1 !important;
				visibility: visible !important;
			}
			";
		}
		
		// Build hover effect CSS
		$hover_effect_css = '';
		if ($hover_effect === 'background') {
			$hover_effect_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a:hover {
				background-color: rgba(0, 0, 0, 0.05) !important;
			}
			";
		} elseif ($hover_effect === 'underline') {
			$hover_effect_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
				position: relative !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a::after {
				content: '' !important;
				position: absolute !important;
				bottom: 0 !important;
				left: 50% !important;
				width: 0 !important;
				height: 2px !important;
				background-color: currentColor !important;
				transition: all 0.3s ease !important;
				transform: translateX(-50%) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a:hover::after {
				width: 80% !important;
			}
			";
		} elseif ($hover_effect === 'scale') {
			$hover_effect_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a {
				transition: transform 0.3s ease !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a:hover {
				transform: scale(1.1) !important;
			}
			";
		} elseif ($hover_effect === 'color') {
			$hover_effect_css = "
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > a:hover {
				color: #0073aa !important;
			}
			";
		}
		
		// Add all layout CSS via wp_add_inline_style (not in page content)
		// Order matters: direction CSS must come after base CSS to override it
		$all_css = $inline_css . $layout_css . $separator_css . $animation_disable_css . $submenu_direction_css . $submenu_animation_css . $hover_effect_css;
		
		// Additional override to ensure base CSS file styles are overridden
		if (!empty($submenu_direction_css)) {
			$override_css = "
			/* Override base CSS file submenu styles with higher specificity */
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul.unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul {
				opacity: 1 !important;
				visibility: visible !important;
			}
			";
			$all_css = $all_css . $override_css;
		}
		
		// Force override base CSS file for UP direction specifically
		if ($submenu_direction === 'up') {
			$up_override_css = "
			/* Force override base CSS file top property for UP direction */
			.elementor-element-{$widget_id} .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li > ul,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li > ul {
				top: auto !important;
				bottom: calc(100% + 10px) !important;
			}
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} .unlock_addon_menu_list > li:hover > ul,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > .unlock_addon_submenu,
			.elementor-element-{$widget_id} nav .unlock_addon_menu_list > li:hover > ul {
				top: auto !important;
				bottom: calc(100% + 10px) !important;
			}
			";
			$all_css = $all_css . $up_override_css;
		}
		
		// Replace animation durations if speed is customized
		if ($animation_speed !== 'normal') {
			$all_css = str_replace('0.6s ease-out', $animation_duration . ' ease-out', $all_css);
			$all_css = str_replace('0.5s ease-out', $animation_duration . ' ease-out', $all_css);
			$all_css = str_replace('0.8s ease-out', $animation_duration . ' ease-out', $all_css);
		}
		if (wp_style_is('unlockafe-header-menu-style', 'enqueued') || wp_style_is('unlockafe-header-menu-style', 'registered')) {
			wp_add_inline_style('unlockafe-header-menu-style', $all_css);
		} else {
			wp_register_style('unlockafe-header-menu-style', UNLOCKAFE_ASSETS . 'front-end/css/header-menu.css', ['unlockafe-global'], UNLOCKAFE_VERSION);
			wp_enqueue_style('unlockafe-header-menu-style');
			wp_add_inline_style('unlockafe-header-menu-style', $all_css);
		}
		?>

		<?php
		// Apply menu alignment from settings (override layout default)
		$final_menu_justify = !empty($settings['menu_alignment']) ? $settings['menu_alignment'] : $menu_justify;
		?>
		<div class="<?php echo esc_attr($container_class); ?>" data-layout="<?php echo esc_attr($layout); ?>" data-widget-id="<?php echo esc_attr($widget_id); ?>" data-layout-style="<?php echo esc_attr($layout); ?>" data-sticky="<?php echo esc_attr($enable_sticky ? 'yes' : 'no'); ?>" data-sticky-offset="<?php echo esc_attr($sticky_offset); ?>" style="display: block !important; width: 100% !important; position: relative !important; <?php echo esc_attr($container_inline_style); ?>">
			<nav class="<?php echo esc_attr($menu_class); ?>" role="navigation" aria-label="<?php echo esc_attr__('Main Menu', 'unlock-addons-for-elementor'); ?>" data-layout-nav="<?php echo esc_attr($layout); ?>" style="display: flex !important; align-items: center !important; justify-content: <?php echo esc_attr($final_menu_justify); ?> !important; width: 100% !important; position: relative !important;">
				<input type="checkbox" id="unlock_addon_menu_toggle_<?php echo esc_attr($widget_id); ?>" class="unlock_addon_menu_toggle_input" aria-label="<?php echo esc_attr__('Toggle Menu', 'unlock-addons-for-elementor'); ?>" />
				<label class="unlock_addon_menu_toggle" for="unlock_addon_menu_toggle_<?php echo esc_attr($widget_id); ?>">
					<span></span>
					<span></span>
					<span></span>
				</label>
				<?php 
				if (!empty($menu_html)) {
					echo $menu_html;
				} else {
					echo '<p class="unlock_addon_menu_no_menu">' . esc_html__('No menu assigned. Please select a menu from the widget settings.', 'unlock-addons-for-elementor') . '</p>';
				}
				?>
			</nav>
		</div>
		
		<?php
		// Add responsive breakpoint CSS via wp_add_inline_style
		$mobile_breakpoint = !empty($settings['wpr_mobile_menu_breakpoint']) ? intval($settings['wpr_mobile_menu_breakpoint']) : 768;
		$mobile_breakpoint_max = $mobile_breakpoint;
		$mobile_breakpoint_min = $mobile_breakpoint + 1;
		
		$responsive_css = "
		@media (max-width: {$mobile_breakpoint_max}px) {
			.elementor-element-{$widget_id} .unlock_addon_menu {
				display: none;
			}
			.elementor-element-{$widget_id} .unlock_addon_mobile_menu {
				display: block;
			}
		}
		@media (min-width: {$mobile_breakpoint_min}px) {
			.elementor-element-{$widget_id} .unlock_addon_mobile_menu {
				display: none;
			}
		}
		";
		
		if (wp_style_is('unlockafe-header-menu-style', 'enqueued') || wp_style_is('unlockafe-header-menu-style', 'registered')) {
			wp_add_inline_style('unlockafe-header-menu-style', $responsive_css);
		}
		?>
		
		<script type="text/javascript">
		(function() {
			// Force apply layout styles in Elementor editor - Cache Busting
			var widgetId = '<?php echo esc_js($widget_id); ?>';
			var layout = '<?php echo esc_js($layout); ?>';
			var version = '<?php echo isset($style_version) ? esc_js($style_version) : esc_js(time()); ?>';
			var menuAlignment = '<?php echo esc_js($menu_alignment); ?>';
			var enableSticky = <?php echo isset($enable_sticky) && $enable_sticky ? 'true' : 'false'; ?>;
			var stickyOffset = <?php echo isset($sticky_offset) ? intval($sticky_offset) : 0; ?>;
			
			// Mobile Menu Toggle Functionality
			var mobileMenuToggle = document.getElementById('unlock_addon_menu_toggle_' + widgetId);
			if (mobileMenuToggle) {
				// Close menu when clicking outside
				document.addEventListener('click', function(event) {
					var menuContainer = document.querySelector('.elementor-element-' + widgetId + ' .unlock_addon_menu_container');
					var menuList = document.querySelector('.elementor-element-' + widgetId + ' .unlock_addon_menu_list');
					var toggle = document.querySelector('.elementor-element-' + widgetId + ' .unlock_addon_menu_toggle');
					
					if (menuContainer && menuList && toggle && mobileMenuToggle.checked) {
						// Check if click is outside menu
						if (!menuContainer.contains(event.target) && !toggle.contains(event.target)) {
							mobileMenuToggle.checked = false;
						}
					}
				});
				
				// Close menu on window resize if going from mobile to desktop
				window.addEventListener('resize', function() {
					if (window.innerWidth > 768 && mobileMenuToggle.checked) {
						mobileMenuToggle.checked = false;
					}
				});
			}
			
			// Function to apply menu alignment
			function applyMenuAlignment() {
				var nav = document.querySelector('.elementor-element-' + widgetId + ' nav.unlock_addon_menu');
				var menuList = document.querySelector('.elementor-element-' + widgetId + ' .unlock_addon_menu_list');
				if (nav && menuAlignment) {
					nav.style.justifyContent = menuAlignment + ' !important';
					if (menuList) {
						menuList.style.justifyContent = menuAlignment + ' !important';
					}
				}
			}
			
			// Sticky Menu Functionality
			if (enableSticky) {
				var menuContainer = document.querySelector('.elementor-element-' + widgetId + ' .unlock_addon_menu_container');
				if (menuContainer) {
					var originalTop = menuContainer.getBoundingClientRect().top + window.pageYOffset;
					
					window.addEventListener('scroll', function() {
						if (window.pageYOffset >= originalTop - stickyOffset) {
							menuContainer.style.position = 'fixed';
							menuContainer.style.top = stickyOffset + 'px';
							menuContainer.style.left = '0';
							menuContainer.style.right = '0';
							menuContainer.style.zIndex = '9999';
							menuContainer.style.width = '100%';
							menuContainer.classList.add('unlockafe-sticky-menu');
						} else {
							menuContainer.style.position = 'relative';
							menuContainer.style.top = 'auto';
							menuContainer.style.left = 'auto';
							menuContainer.style.right = 'auto';
							menuContainer.classList.remove('unlockafe-sticky-menu');
						}
					});
				}
			}
			
			function applyLayoutStyles() {
				var container = document.querySelector('.elementor-element-' + widgetId + ' [data-layout="' + layout + '"]');
				if (container) {
					container.setAttribute('data-layout-applied', version);
					// Force style recalculation
					var display = container.style.display;
					container.style.display = 'none';
					container.offsetHeight; // Trigger reflow
					container.style.display = display || 'block';
				}
				// Apply menu alignment
				applyMenuAlignment();
			}
			
			// Apply immediately
			applyLayoutStyles();
			applyMenuAlignment();
			
			// Apply on Elementor editor ready
			if (typeof elementorFrontend !== 'undefined') {
				if (elementorFrontend.isEditMode && elementorFrontend.isEditMode()) {
					setTimeout(applyLayoutStyles, 100);
					setTimeout(applyLayoutStyles, 500);
					setTimeout(applyMenuAlignment, 100);
					setTimeout(applyMenuAlignment, 500);
					
					// Listen for Elementor settings changes
					if (typeof elementor !== 'undefined' && elementor.on) {
						elementor.on('preview:loaded', function() {
							setTimeout(applyMenuAlignment, 100);
						});
					}
					
					// Listen for widget settings changes
					if (typeof jQuery !== 'undefined') {
						jQuery(document).on('change', '.elementor-control-menu_alignment select', function() {
							var newAlignment = jQuery(this).val();
							menuAlignment = newAlignment;
							setTimeout(applyMenuAlignment, 50);
						});
						
						// Also listen for any control changes in this widget
						jQuery(document).on('elementor/populated', function() {
							setTimeout(applyMenuAlignment, 100);
						});
					}
				}
			}
			
			// Apply on DOM ready
			if (document.readyState === 'loading') {
				document.addEventListener('DOMContentLoaded', function() {
					applyLayoutStyles();
					applyMenuAlignment();
				});
			} else {
				setTimeout(function() {
					applyLayoutStyles();
					applyMenuAlignment();
				}, 50);
			}
			
			// Watch for changes in Elementor editor
			if (typeof MutationObserver !== 'undefined') {
				var observer = new MutationObserver(function(mutations) {
					mutations.forEach(function(mutation) {
						if (mutation.type === 'attributes' || mutation.addedNodes.length > 0) {
							setTimeout(applyMenuAlignment, 50);
						}
					});
				});
				
				var targetNode = document.querySelector('.elementor-element-' + widgetId);
				if (targetNode) {
					observer.observe(targetNode, {
						attributes: true,
						childList: true,
						subtree: true
					});
				}
			}
		})();
		</script>
		<?php
	}
}


