<?php
namespace Softech_Addons_for_Elementor\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Utils;
use Elementor\Icons_Manager;

if (!defined('ABSPATH'))
    exit;

class sitsel_mega_menu_widget extends Widget_Base
{

    public function get_name()
    {
        return 'sitsel_mega_menu_widget';
    }
    public function get_title()
    {
        return __('SITS Mega Menu', 'softech-addons-for-elementor');
    }
    public function get_icon()
    {
        return 'eicon-mega-menu';
    }
    public function get_categories()
    {
        return ['sits-category'];
    }
    public function __construct($data = [], $args = null) {
        parent::__construct($data, $args);
        $this->register_widget_assets();
    }

    public function get_script_depends()
    {
        $this->register_widget_assets();
        return ['sitsel-frontend-mega-menu-js'];
    }
    public function get_style_depends()
    {
        $this->register_widget_assets();
        return ['sitsel-frontend-mega-menu-css'];
    }

    private function register_widget_assets()
    {
        $plugin_url = SITS_ELEMENTOR_ADDONS_PLUGIN_URL;
        $version    = SITS_ELEMENTOR_ADDONS_VERSION;

        if (!wp_script_is('sitsel-frontend-mega-menu-js', 'registered')) {
            wp_register_script('sitsel-frontend-mega-menu-js', $plugin_url . 'assets/js/mega-menu-frontend.js', ['jquery'], $version, true);
        }

        if (!wp_style_is('sitsel-frontend-mega-menu-css', 'registered')) {
            wp_register_style('sitsel-frontend-mega-menu-css', $plugin_url . 'assets/css/mega-menu-frontend.css', [], $version);
            wp_enqueue_style('sitsel-frontend-mega-menu-css');
        }
    }

    protected function _register_controls()
    {
        // ─────────────────────────────────────────────
        // CONTENT TAB
        // ─────────────────────────────────────────────

        $menus   = wp_get_nav_menus();
        $options = ['' => esc_html__('Select menu', 'softech-addons-for-elementor')];
        foreach ($menus as $m) {
            $options[$m->term_id] = $m->name;
        }

        /* General -------------------------------------------------- */
        $this->start_controls_section('content_section', [
            'label' => esc_html__('General', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('menu_select', [
            'label'   => esc_html__('Select Menu', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => $options,
            'default' => '',
        ]);

        $this->end_controls_section();

        /* Menu Layout ---------------------------------------------- */
        $this->start_controls_section('menu_layout_section', [
            'label' => esc_html__('Menu Layout', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('menu_layout', [
            'label'   => esc_html__('Layout', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'horizontal' => esc_html__('Horizontal', 'softech-addons-for-elementor'),
                'vertical'   => esc_html__('Vertical', 'softech-addons-for-elementor'),
            ],
            'default' => 'horizontal',
        ]);
        
         $this->add_control('dropdown_position_from', [
            'label' => esc_html__('Dropdown Position From', 'softech-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'options' => [
                'header' => esc_html__('Header Bottom', 'softech-addons-for-elementor'),
                'menu'   => esc_html__('Menu Item Bottom', 'softech-addons-for-elementor'),
            ],
            'default' => 'menu',
              'condition' => [
                'menu_layout' => 'horizontal',
            ],
        ]);


        $this->add_control('menu_align', [
            'label'   => esc_html__('Alignment', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'left'   => esc_html__('Left', 'softech-addons-for-elementor'),
                'center' => esc_html__('Center', 'softech-addons-for-elementor'),
                'right'  => esc_html__('Right', 'softech-addons-for-elementor'),
            ],
            'default' => 'left',
        ]);

        $this->end_controls_section();

        /* Menu Items ----------------------------------------------- */
        $this->start_controls_section('menu_items_section', [
            'label' => esc_html__('Menu Items', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_control('hover_effect', [
            'label'   => esc_html__('Hover Effect', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'none'      => esc_html__('None', 'softech-addons-for-elementor'),
                'underline' => esc_html__('Underline', 'softech-addons-for-elementor'),
                'grow'      => esc_html__('Grow', 'softech-addons-for-elementor'),
            ],
            'default' => 'none',
        ]);
         $this->add_control('underline_offset', [
            'label' => esc_html__('Underline Offset', 'softech-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px'],
            'default' => [
                'unit' => 'px',
                'size' => 0,
            ],
            'condition' => [
                'hover_effect' => 'underline',
            ],
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main .sits-menu-item > a .sitsel-menu-item-label:after' => 
                    'bottom: {{SIZE}}{{UNIT}};',
            ],
        ]);


        $this->add_control('submenu_icon', [
            'label'   => esc_html__('Submenu Indicator Icon', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::ICONS,
            'default' => [
                'value'   => 'fas fa-angle-down',
                'library' => 'fa-solid',
            ],
        ]);

        $this->add_control('submenu_display', [
            'label'   => esc_html__('Open Submenu On', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'hover' => esc_html__('Mouse Hover', 'softech-addons-for-elementor'),
                'click' => esc_html__('Click', 'softech-addons-for-elementor'),
            ],
            'default' => 'hover',
        ]);

        $this->end_controls_section();

        /* Layout / Breakpoint -------------------------------------- */
        $this->start_controls_section('layout_section', [
            'label' => esc_html__('Layout', 'softech-addons-for-elementor'),
        ]);

        $breakpoints        = \Elementor\Plugin::$instance->breakpoints->get_breakpoints();
        $breakpoint_options = ['' => __('None', 'softech-addons-for-elementor')];
        foreach ($breakpoints as $key => $breakpoint) {
            $breakpoint_options[$key] = ucfirst($key) . ' (' . $breakpoint->get_value() . 'px)';
        }

        $this->add_control('mobile_breakpoint', [
            'label'   => esc_html__('Mobile Breakpoint', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => $breakpoint_options,
            'default' => 'mobile',
        ]);

        $this->add_control('menu_toggle_style', [
            'label'   => esc_html__('Toggle Button Style', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'default' => 'style1',
            'options' => [
                'style1' => esc_html__('Separate Open / Close Icons', 'softech-addons-for-elementor'),
                'style2' => esc_html__('Single Icon (Always Same)', 'softech-addons-for-elementor'),
            ],
        ]);

        $this->add_control('hamburger_icon_open', [
            'label'     => esc_html__('Open Menu Icon', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::ICONS,
            'default'   => ['value' => 'fas fa-bars', 'library' => 'fa-solid'],
            'condition' => ['menu_toggle_style' => 'style1'],
        ]);

        $this->add_control('hamburger_icon_close', [
            'label'     => esc_html__('Close Menu Icon', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::ICONS,
            'default'   => ['value' => 'fas fa-times', 'library' => 'fa-solid'],
            'condition' => ['menu_toggle_style' => 'style1'],
        ]);

        $this->add_control('hamburger_icon_single', [
            'label'     => esc_html__('Toggle Icon', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::ICONS,
            'default'   => ['value' => 'fas fa-bars', 'library' => 'fa-solid'],
            'condition' => ['menu_toggle_style' => 'style2'],
        ]);

        $this->end_controls_section();

        /* Mobile Menu Options -------------------------------------- */
        $this->start_controls_section('mobile_section_options', [
            'label' => esc_html__('Mobile Menu', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_control('mobile_display_as', [
            'label'   => esc_html__('Display Style', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'dropdown'   => esc_html__('Dropdown', 'softech-addons-for-elementor'),
                'off_canvas' => esc_html__('Off-Canvas Panel', 'softech-addons-for-elementor'),
            ],
            'default' => 'dropdown',
        ]);

        $this->add_control('mobile_stretch', [
            'label'     => esc_html__('Panel Width', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::SELECT,
            'options'   => [
                'custom' => esc_html__('Custom Width', 'softech-addons-for-elementor'),
                'full'   => esc_html__('Full Width', 'softech-addons-for-elementor'),
            ],
            'default'   => 'custom',
            'condition' => ['mobile_display_as' => 'off_canvas'],
        ]);

        $this->add_responsive_control('mobile_panel_width', [
            'label'      => esc_html__('Width', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::SLIDER,
            'size_units' => ['px', '%', 'rem', 'em'],
            'range'      => [
                'px'  => ['min' => 100, 'max' => 800],
                '%'   => ['min' => 10,  'max' => 100],
                'rem' => ['min' => 5,   'max' => 50],
                'em'  => ['min' => 5,   'max' => 50],
            ],
            'default'    => ['size' => 320, 'unit' => 'px'],
            'condition'  => [
                'mobile_display_as' => 'off_canvas',
                'mobile_stretch'    => 'custom',
            ],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mm-offcanvas.sitsel-mobile-version .sitsel-mega-menu-main-wrapper' => 'width: {{SIZE}}{{UNIT}} !important; max-width: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_control('offcanvas_direction', [
            'label'   => esc_html__('Open From', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'left'  => esc_html__('Left', 'softech-addons-for-elementor'),
                'right' => esc_html__('Right', 'softech-addons-for-elementor'),
            ],
            'default'   => 'left',
            'condition' => ['mobile_display_as' => 'off_canvas'],
        ]);

        $this->add_control('mobile_back_menu', [
            'label'   => esc_html__('Submenu Navigation Style', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'default' => 'default',
            'options' => [
                'default' => esc_html__('Accordion (expand in place)', 'softech-addons-for-elementor'),
                'back'    => esc_html__('Slide with Back Button', 'softech-addons-for-elementor'),
            ],
        ]);

        $this->add_control('show_offcanvas_close', [
            'label'        => esc_html__('Show Close Button', 'softech-addons-for-elementor'),
            'type'         => Controls_Manager::SWITCHER,
            'label_on'     => esc_html__('Yes', 'softech-addons-for-elementor'),
            'label_off'    => esc_html__('No', 'softech-addons-for-elementor'),
            'return_value' => 'yes',
            'default'      => 'yes',
            'condition'    => ['mobile_display_as' => 'off_canvas'],
        ]);

        $this->add_control('offcanvas_close_icon', [
            'label'     => esc_html__('Close Button Icon', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::ICONS,
            'default'   => ['value' => 'fas fa-times', 'library' => 'fa-solid'],
            'condition' => [
                'mobile_display_as'    => 'off_canvas',
                'show_offcanvas_close' => 'yes',
            ],
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 1. MENU BAR
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_menu_bar', [
            'label' => esc_html__('Menu Bar', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_responsive_control('menu_item_spacing', [
            'label'   => esc_html__('Item Gap', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::NUMBER,
            'default' => 10,
            'min'     => 0,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main' => 'gap: {{VALUE}}px;',
            ],
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 2. TOP-LEVEL MENU ITEM
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_menu_item', [
            'label' => esc_html__('Menu Item', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_responsive_control('menu_item_min_height', [
            'label' => esc_html__('Min Height (px)', 'softech-addons-for-elementor'),
            'type'  => Controls_Manager::NUMBER,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-mega-menu-main > .sits-menu-item > a' => 'min-height: {{VALUE}}px;',
            ],
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name'     => 'menu_typography',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a',
        ]);

        $this->start_controls_tabs('menu_item_tabs');

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

        $this->add_control('menu_item_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#fff',
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_item_background', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#0f3d4a',
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a' => 'background-color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

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

        $this->add_control('menu_item_hover_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a:hover' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_item_hover_background', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a:hover' => 'background-color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

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

        $active_menu_item_selector = '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.sitsel-active-menu-item > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-item > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-parent > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-ancestor > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_item > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_parent > a, {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_ancestor > a';

        $this->add_control('menu_item_active_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                $active_menu_item_selector => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_item_active_background', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                $active_menu_item_selector => 'background-color: {{VALUE}};',
            ],
        ]);

        $this->add_responsive_control('menu_item_active_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors'  => [
                $active_menu_item_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'menu_item_active_border',
            'selector' => $active_menu_item_selector,
        ]);

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

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_responsive_control('menu_item_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'default'    => ['top' => 10, 'right' => 10, 'bottom' => 10, 'left' => 10, 'unit' => 'px'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'menu_border',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a',
        ]);

        $this->add_responsive_control('menu_items_radius', [
            'label'      => esc_html__('Border Radius', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 3. DROPDOWN CONTAINER (Desktop)
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_dropdown_container', [
            'label' => esc_html__('Dropdown Container', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('dropdown_container_notice', [
            'type'            => Controls_Manager::RAW_HTML,
            'raw'             => '<small style="color:#999;">' . esc_html__('Controls the desktop submenu & mega-menu dropdown box.', 'softech-addons-for-elementor') . '</small>',
            'content_classes' => 'elementor-descriptor',
        ]);

        $this->add_group_control(Group_Control_Background::get_type(), [
            'name'          => 'dropdown_background',
            'label'         => esc_html__('Background', 'softech-addons-for-elementor'),
            'types'         => ['classic', 'gradient'],
            'exclude_fields'=> ['image', 'video'],
            'fields_options'=> [
                'background' => ['default' => 'classic'],
                'color'      => ['default' => '#1a5968'],
            ],
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-sub-menu',
        ]);

        $this->add_responsive_control('dropdown_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'default'    => ['top' => 10, 'right' => 10, 'bottom' => 10, 'left' => 10, 'unit' => 'px'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-sub-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator'  => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'          => 'dropdown_border',
            'selector'      => '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-sub-menu',
            'fields_options'=> [
                'border' => ['default' => 'solid'],
                'width'  => ['default' => ['top' => 1, 'right' => 1, 'bottom' => 1, 'left' => 1]],
                'color'  => ['default' => '#CCCCCC'],
            ],
            'separator' => 'before',
        ]);

        $this->add_responsive_control('dropdown_radius', [
            'label'      => esc_html__('Border Radius', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-sub-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_group_control(\Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'     => 'dropdown_shadow',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-widget:not(.sitsel-mobile-version) .sitsel-sub-menu',
            'separator'=> 'before',
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 4. SUBMENU ITEM
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_submenu_item', [
            'label' => esc_html__('Submenu Item', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name'     => 'submenu_typography',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu li > a',
        ]);

        $this->start_controls_tabs('submenu_item_tabs');

        /* Normal */
        $this->start_controls_tab('submenu_item_normal', [
            'label' => esc_html__('Normal', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('submenu_item_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#fff',
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main .sitsel-sub-menu li a' => 'color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Hover */
        $this->start_controls_tab('submenu_item_hover', [
            'label' => esc_html__('Hover', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('submenu_item_hover_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-main .sitsel-sub-menu li a:hover' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_hover_bg_color', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#dfdfdf',
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu > .sits-menu-item > a:hover' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Active */
        $this->start_controls_tab('submenu_item_active', [
            'label' => esc_html__('Active', 'softech-addons-for-elementor'),
        ]);

        $submenu_active_selector = '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.sitsel-active-menu-item > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current-menu-item > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current-menu-parent > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current-menu-ancestor > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current_page_item > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current_page_parent > a, {{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item.current_page_ancestor > a';

        $this->add_control('submenu_item_active_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                $submenu_active_selector => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_item_active_background', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                $submenu_active_selector => 'background-color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_item_active_hierarchy', [
            'label'        => esc_html__('Enable Hierarchy Active', 'softech-addons-for-elementor'),
            'type'         => Controls_Manager::SWITCHER,
            'label_on'     => esc_html__('Yes', 'softech-addons-for-elementor'),
            'label_off'    => esc_html__('No', 'softech-addons-for-elementor'),
            'return_value' => 'yes',
            'default'      => 'no',
            'description'  => esc_html__('When enabled, parent submenu items also receive the active class.', 'softech-addons-for-elementor'),
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_responsive_control('submenu_item_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'default'    => ['top' => 5, 'right' => 5, 'bottom' => 5, 'left' => 5, 'unit' => 'px'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator'  => 'before',
        ]);

        $this->add_responsive_control('submenu_item_margin', [
            'label'      => esc_html__('Margin', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'default'    => ['top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, 'unit' => 'px'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'      => 'submenu_border',
            'selector'  => '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item a',
            'separator' => 'before',
        ]);

        $this->add_responsive_control('submenu_items_radius', [
            'label'      => esc_html__('Border Radius', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mega-menu-widget .sitsel-sub-menu .sits-menu-item a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 5. SUBMENU INDICATOR ICON
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_submenu_icon', [
            'label' => esc_html__('Submenu Indicator Icon', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_responsive_control('submenu_icon_size', [
            'label'     => esc_html__('Size (px)', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::NUMBER,
            'default'   => 12,
            'selectors' => [
                '{{WRAPPER}} .sitsel-submenu-icon svg' => 'width: {{VALUE}}px;',
            ],
        ]);

        $this->start_controls_tabs('submenu_icon_tabs');

        /* Normal */
        $this->start_controls_tab('submenu_icon_normal', [
            'label' => esc_html__('Normal', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('submenu_icon_color', [
            'label'     => esc_html__('Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#fff',
            'selectors' => [
                '{{WRAPPER}} .sitsel-submenu-icon svg'      => 'fill: {{VALUE}};',
               
            ],
        ]);

        $this->end_controls_tab();

        /* Hover */
        /* Hover */
        $this->start_controls_tab('submenu_icon_hover', [
            'label' => esc_html__('Hover', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('submenu_icon_hover_color', [
            'label'     => esc_html__('Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sits-menu-item > a:hover .sitsel-submenu-icon svg'      => 'fill: {{VALUE}};',
                '{{WRAPPER}} .sits-menu-item > a:hover .sitsel-submenu-icon svg path' => 'fill: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Active */
        $this->start_controls_tab('submenu_icon_active', [
            'label' => esc_html__('Active', 'softech-addons-for-elementor'),
        ]);

        $active_icon_selector = '{{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.sitsel-active-menu-item > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-item > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-parent > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current-menu-ancestor > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_item > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_parent > a .sitsel-submenu-icon svg,
            {{WRAPPER}} .sitsel-mega-menu-main > .sits-menu-item.current_page_ancestor > a .sitsel-submenu-icon svg';

        $this->add_control('submenu_icon_active_color', [
            'label'     => esc_html__('Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                $active_icon_selector              => 'fill: {{VALUE}};',
                $active_icon_selector . ' path'    => 'fill: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 6. MOBILE MENU CONTAINER
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_mobile_container', [
            'label' => esc_html__('Mobile Menu Container', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('mobile_container_notice', [
            'type'            => Controls_Manager::RAW_HTML,
            'raw'             => '<small style="color:#999;">' . esc_html__('Styles apply to the mobile nav panel (dropdown or off-canvas).', 'softech-addons-for-elementor') . '</small>',
            'content_classes' => 'elementor-descriptor',
        ]);

        /* Nav panel (outer wrapper) background */
        $this->add_group_control(Group_Control_Background::get_type(), [
            'name'          => 'mobile_wrapper_background',
            'label'         => esc_html__('Panel Background', 'softech-addons-for-elementor'),
            'types'         => ['classic', 'gradient'],
            'exclude_fields'=> ['image', 'video'],
            'fields_options'=> [
                'background' => ['default' => 'classic'],
                'color'      => ['default' => '#0f3d4a'],
            ],
            'selector'  => '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main-wrapper',
        ]);
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'mobile_wrapper_border',
                'label' => esc_html__('Border', 'softech-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main-wrapper',
            ]
        );
        $this->add_responsive_control(
            'mobile_wrapper_border_radius',
            [
                'label' => esc_html__('Border Radius', 'softech-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main-wrapper' =>
                        'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        
        $this->add_group_control(\Elementor\Group_Control_Box_Shadow::get_type(), [
           'name' => 'mobile_wrapper_box_shadow',
        'label' => esc_html__('Box Shadow', 'softech-addons-for-elementor'),
        'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main-wrapper',
        ]);
        

        $this->add_responsive_control('mobile_wrapper_padding', [
            'label'     => esc_html__('Panel Padding', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::DIMENSIONS,
            'default'   => ['top' => 10, 'right' => 10, 'bottom' => 10, 'left' => 10, 'unit' => 'px'],
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        /* Submenu / mega template background (inside the panel) */
        $this->add_group_control(Group_Control_Background::get_type(), [
            'name'          => 'mobile_submenu_background',
            'label'         => esc_html__('Submenu Box Background', 'softech-addons-for-elementor'),
            'types'         => ['classic', 'gradient'],
            'exclude_fields'=> ['image', 'video'],
            'fields_options'=> [
                'background' => ['default' => 'classic'],
                'color'      => ['default' => '#ffffff'],
            ],
            'selector' => '{{WRAPPER}} .sitsel-mobile-version.sitsel-mega-menu-widget .sitsel-sub-menu,
                           {{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template',
            'separator' => 'before',
        ]);

        $this->add_responsive_control('mobile_submenu_padding', [
            'label'     => esc_html__('Submenu Box Padding', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::DIMENSIONS,
            'default'   => ['top' => 10, 'right' => 10, 'bottom' => 10, 'left' => 10, 'unit' => 'px'],
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version.sitsel-mega-menu-widget .sitsel-sub-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template'                  => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->end_controls_section();
        
        // ─────────────────────────────────────────────
        // STYLE TAB — 6b. MOBILE MENU ITEMS
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_mobile_menu_items', [
            'label' => esc_html__('Mobile Menu Items', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('mobile_menu_items_notice', [
            'type'            => Controls_Manager::RAW_HTML,
            'raw'             => '<small style="color:#999;">' . esc_html__('Styles apply only in mobile view (below the breakpoint).', 'softech-addons-for-elementor') . '</small>',
            'content_classes' => 'elementor-descriptor',
        ]);

        // ── TOP-LEVEL ITEMS ───────────────────────────
        $this->add_control('mobile_top_items_heading', [
            'label'     => esc_html__('Top-Level Items', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::HEADING,
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name'     => 'mobile_top_item_typography',
            'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a',
        ]);

        $this->start_controls_tabs('mobile_top_item_tabs');

        $this->start_controls_tab('mobile_top_item_normal', ['label' => esc_html__('Normal', 'softech-addons-for-elementor')]);
        $this->add_control('mobile_top_item_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a' => 'color: {{VALUE}};'],
        ]);
        $this->add_control('mobile_top_item_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a' => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->start_controls_tab('mobile_top_item_hover', ['label' => esc_html__('Hover', 'softech-addons-for-elementor')]);
        $this->add_control('mobile_top_item_hover_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a:hover' => 'color: {{VALUE}};'],
        ]);
        $this->add_control('mobile_top_item_hover_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a:hover' => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->start_controls_tab('mobile_top_item_active', ['label' => esc_html__('Active', 'softech-addons-for-elementor')]);
        $mob_top_active = '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item.sitsel-active-menu-item > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item.current-menu-item > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item.current-menu-parent > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item.current_page_item > a';
        $this->add_control('mobile_top_item_active_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [$mob_top_active => 'color: {{VALUE}};'],
        ]);
        $this->add_control('mobile_top_item_active_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [$mob_top_active => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_responsive_control('mobile_top_item_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors'  => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
            'separator'  => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'mobile_top_item_border',
            'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a',
        ]);

        $this->add_responsive_control('mobile_top_item_radius', [
            'label'      => esc_html__('Border Radius', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors'  => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
        ]);

        // ── SUBMENU ITEMS ─────────────────────────────
        $this->add_control('mobile_sub_items_heading', [
            'label'     => esc_html__('Submenu Items', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::HEADING,
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name'     => 'mobile_sub_item_typography',
            'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a,
                           {{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template a',
        ]);

        $this->start_controls_tabs('mobile_sub_item_tabs');

        $this->start_controls_tab('mobile_sub_item_normal', ['label' => esc_html__('Normal', 'softech-addons-for-elementor')]);
        $this->add_control('mobile_sub_item_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a' => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template a'            => 'color: {{VALUE}};',
            ],
        ]);
        $this->add_control('mobile_sub_item_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a' => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->start_controls_tab('mobile_sub_item_hover', ['label' => esc_html__('Hover', 'softech-addons-for-elementor')]);
        $this->add_control('mobile_sub_item_hover_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a:hover' => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template a:hover'            => 'color: {{VALUE}};',
            ],
        ]);
        $this->add_control('mobile_sub_item_hover_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a:hover' => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->start_controls_tab('mobile_sub_item_active', ['label' => esc_html__('Active', 'softech-addons-for-elementor')]);
        $mob_sub_active = '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item.sitsel-active-menu-item > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item.current-menu-item > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item.current-menu-parent > a,
            {{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item.current_page_item > a';
        $this->add_control('mobile_sub_item_active_color', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [$mob_sub_active => 'color: {{VALUE}};'],
        ]);
        $this->add_control('mobile_sub_item_active_bg', [
            'label'     => esc_html__('Background', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [$mob_sub_active => 'background-color: {{VALUE}};'],
        ]);
        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_responsive_control('mobile_sub_item_padding', [
            'label'      => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-template a'            => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'mobile_sub_item_border',
            'selector' => '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a',
        ]);

        $this->add_responsive_control('mobile_sub_item_radius', [
            'label'      => esc_html__('Border Radius', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', '%', 'em'],
            'selectors'  => ['{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
        ]);

        // ── ITEM DIVIDER ──────────────────────────────
        $this->add_control('mobile_item_divider_heading', [
            'label'     => esc_html__('Item Divider', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::HEADING,
            'separator' => 'before',
        ]);
        $this->add_control('mobile_item_divider', [
            'label'        => esc_html__('Show Divider', 'softech-addons-for-elementor'),
            'type'         => Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'default'      => 'no',
        ]);
        $this->add_control('mobile_item_divider_color', [
            'label'     => esc_html__('Divider Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#ffffff33',
            'condition' => ['mobile_item_divider' => 'yes'],
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item:not(:last-child) > a' => 'border-bottom: 1px solid {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item:not(:last-child) > a'         => 'border-bottom: 1px solid {{VALUE}};',
            ],
        ]);
        $this->add_control('mobile_item_divider_weight', [
            'label'      => esc_html__('Divider Weight', 'softech-addons-for-elementor'),
            'type'       => Controls_Manager::SLIDER,
            'size_units' => ['px'],
            'range'      => ['px' => ['min' => 1, 'max' => 5]],
            'default'    => ['size' => 1, 'unit' => 'px'],
            'condition'  => ['mobile_item_divider' => 'yes'],
            'selectors'  => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mega-menu-main > .sits-menu-item:not(:last-child) > a' => 'border-bottom-width: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-sub-menu .sits-menu-item:not(:last-child) > a'         => 'border-bottom-width: {{SIZE}}{{UNIT}};',
            ],
        ]);

        // ── SUBMENU INDICATOR ICON (mobile) ───────────
        $this->add_control('mobile_icon_heading', [
            'label'     => esc_html__('Submenu Indicator Icon', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::HEADING,
            'separator' => 'before',
        ]);
        $this->add_responsive_control('mobile_submenu_icon_size', [
            'label'     => esc_html__('Size (px)', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::NUMBER,
            'default'   => 12,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-submenu-icon svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-submenu-icon i'   => 'font-size: {{VALUE}}px;',
            ],
        ]);
        $this->add_control('mobile_submenu_icon_color', [
            'label'     => esc_html__('Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-submenu-icon svg'      => 'fill: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-submenu-icon svg path' => 'fill: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-submenu-icon i'        => 'color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 7. TOGGLE / HAMBURGER BUTTON
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_toggle_button', [
            'label' => esc_html__('Toggle Button', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_responsive_control('hamburger_size', [
            'label'     => esc_html__('Open Icon Size', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::SLIDER,
            'range'     => ['px' => ['min' => 8, 'max' => 80]],
            'default'   => ['size' => 24],
            'selectors' => [
                '{{WRAPPER}} .sitsel-icon-open i'    => 'font-size: {{SIZE}}px;',
                '{{WRAPPER}} .sitsel-icon-open svg'  => 'width: {{SIZE}}px; height: {{SIZE}}px;',
                '{{WRAPPER}} .sitsel-icon-single i'  => 'font-size: {{SIZE}}px;',
                '{{WRAPPER}} .sitsel-icon-single svg'=> 'width: {{SIZE}}px; height: {{SIZE}}px;',
            ],
        ]);

        $this->add_responsive_control('hamburger_close_size', [
            'label'     => esc_html__('Close Icon Size', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::SLIDER,
            'range'     => ['px' => ['min' => 8, 'max' => 80]],
            'default'   => ['size' => 24],
            'selectors' => [
                '{{WRAPPER}} .sitsel-icon-close i'   => 'font-size: {{SIZE}}px;',
                '{{WRAPPER}} .sitsel-icon-close svg' => 'width: {{SIZE}}px; height: {{SIZE}}px;',
            ],
        ]);

        $this->add_responsive_control('hamburger_padding', [
            'label'     => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::DIMENSIONS,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->start_controls_tabs('hamburger_style_tabs');

        /* Normal */
        $this->start_controls_tab('hamburger_normal', [
            'label' => esc_html__('Normal', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('hamburger_color_normal', [
            'label'     => esc_html__('Icon Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle i'          => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mega-menu-toggle svg path'   => 'fill: {{VALUE}} !important; stroke: {{VALUE}} !important;',
            ],
        ]);

        $this->add_control('hamburger_bg_normal', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'hamburger_border',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-toggle',
        ]);

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

        $this->end_controls_tab();

        /* Hover */
        $this->start_controls_tab('hamburger_hover', [
            'label' => esc_html__('Hover', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('hamburger_color_hover', [
            'label'     => esc_html__('Icon Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle:hover i'        => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mega-menu-toggle:hover svg path' => 'fill: {{VALUE}} !important; stroke: {{VALUE}} !important;',
            ],
        ]);

        $this->add_control('hamburger_bg_hover', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle:hover' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'hamburger_hover_border',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-toggle:hover',
        ]);

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

        $this->end_controls_tab();

        /* Focus */
        $this->start_controls_tab('hamburger_focus', [
            'label' => esc_html__('Focus', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('hamburger_color_focus', [
            'label'     => esc_html__('Icon Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle:focus i'        => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mega-menu-toggle:focus svg path' => 'fill: {{VALUE}} !important; stroke: {{VALUE}} !important;',
                '{{WRAPPER}} .sitsel-mega-menu-toggle:focus svg rect' => 'stroke: {{VALUE}};',
            ],
        ]);

        $this->add_control('hamburger_bg_focus', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mega-menu-toggle:focus' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'hamburger_focus_border',
            'selector' => '{{WRAPPER}} .sitsel-mega-menu-toggle:focus',
        ]);

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

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 8. OFF-CANVAS CLOSE BUTTON
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_offcanvas_close', [
            'label'     => esc_html__('Off-Canvas Close Button', 'softech-addons-for-elementor'),
            'tab'       => Controls_Manager::TAB_STYLE,
            'condition' => [
                'mobile_display_as'    => 'off_canvas',
                'show_offcanvas_close' => 'yes',
            ],
        ]);

        $this->add_control('offcanvas_close_position', [
            'label'   => esc_html__('Position', 'softech-addons-for-elementor'),
            'type'    => Controls_Manager::SELECT,
            'options' => [
                'top-right' => esc_html__('Top Right', 'softech-addons-for-elementor'),
                'top-left'  => esc_html__('Top Left', 'softech-addons-for-elementor'),
            ],
            'default' => 'top-right',
        ]);

        $this->add_responsive_control('offcanvas_close_size', [
            'label'     => esc_html__('Icon Size', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::SLIDER,
            'range'     => ['px' => ['min' => 16, 'max' => 80]],
            'default'   => ['size' => 24],
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close i'   => 'font-size: {{SIZE}}px;',
                '{{WRAPPER}} .sitsel-offcanvas-close svg' => 'width: {{SIZE}}px; height: {{SIZE}}px;',
            ],
            'separator' => 'before',
        ]);

        $this->add_responsive_control('offcanvas_close_padding', [
            'label'     => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::DIMENSIONS,
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->start_controls_tabs('offcanvas_close_tabs');

        /* Normal */
        $this->start_controls_tab('offcanvas_close_normal', [
            'label' => esc_html__('Normal', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('offcanvas_close_color_normal', [
            'label'     => esc_html__('Icon Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'default'   => '#333',
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close i'        => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-offcanvas-close svg path' => 'fill: {{VALUE}}; stroke: {{VALUE}};',
            ],
        ]);

        $this->add_control('offcanvas_close_bg_normal', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Hover */
        $this->start_controls_tab('offcanvas_close_hover', [
            'label' => esc_html__('Hover', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('offcanvas_close_color_hover', [
            'label'     => esc_html__('Icon Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close:hover i'        => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-offcanvas-close:hover svg path' => 'fill: {{VALUE}};',
            ],
        ]);

        $this->add_control('offcanvas_close_bg_hover', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-offcanvas-close:hover' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'      => 'offcanvas_close_border',
            'selector'  => '{{WRAPPER}} .sitsel-offcanvas-close',
            'separator' => 'before',
        ]);

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

        $this->end_controls_section();

        // ─────────────────────────────────────────────
        // STYLE TAB — 9. BACK BUTTON
        // ─────────────────────────────────────────────
        $this->start_controls_section('style_back_button', [
            'label' => esc_html__('Back Button', 'softech-addons-for-elementor'),
            'tab'   => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_group_control(\Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'back_button_typography',
            'selector' => '{{WRAPPER}} .sitsel-mobile-back, {{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu',
        ]);

        $this->add_responsive_control('back_button_padding', [
            'label'     => esc_html__('Padding', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::DIMENSIONS,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back'                                       => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu'         => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'separator' => 'before',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name'     => 'back_button_border',
            'selector' => '{{WRAPPER}} .sitsel-mobile-back, {{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu',
        ]);

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

        $this->start_controls_tabs('back_button_tabs');

        /* Normal */
        $this->start_controls_tab('back_button_normal', [
            'label' => esc_html__('Normal', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('back_button_color_normal', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back'                                => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('back_button_bg_normal', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back'                                => 'background: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Hover */
        $this->start_controls_tab('back_button_hover', [
            'label' => esc_html__('Hover', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('back_button_color_hover', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back:hover'                                => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu:hover' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('back_button_bg_hover', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back:hover'                                => 'background: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu:hover' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        /* Focus */
        $this->start_controls_tab('back_button_focus', [
            'label' => esc_html__('Focus', 'softech-addons-for-elementor'),
        ]);

        $this->add_control('back_button_color_focus', [
            'label'     => esc_html__('Text Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back:focus'                                => 'color: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu:focus' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('back_button_bg_focus', [
            'label'     => esc_html__('Background Color', 'softech-addons-for-elementor'),
            'type'      => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .sitsel-mobile-back:focus'                                => 'background: {{VALUE}};',
                '{{WRAPPER}} .sitsel-mobile-version .sitsel-mobile-back-submenu:focus' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();
    }

    // ─────────────────────────────────────────────
    // RENDER  (unchanged from original)
    // ─────────────────────────────────────────────

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

        $menu_id = !empty($settings['menu_select']) ? (int) $settings['menu_select'] : 0;
        if (!$menu_id) {
            if (class_exists('\Elementor\Plugin') && \Elementor\Plugin::instance()->editor->is_edit_mode()) {
                echo '<div class="sitsel-mega-menu-placeholder">' . esc_html__('Select a menu in widget settings', 'softech-addons-for-elementor') . '</div>';
            } else {
                echo '<p>' . esc_html__('Please select a menu in widget settings.', 'softech-addons-for-elementor') . '</p>';
            }
            return;
        }

        $menu_items = wp_get_nav_menu_items($menu_id);
        if (empty($menu_items)) {
            echo '<p>' . esc_html__('Menu is empty.', 'softech-addons-for-elementor') . '</p>';
            return;
        }

        $menu_item_ids = wp_list_pluck($menu_items, 'ID');
        update_meta_cache('post', $menu_item_ids);

        $items_by_id   = [];
        $items_children = [];
        foreach ($menu_items as $item) {
            $item->template_id = (int) get_post_meta($item->ID, '_softech_mega_menu_template_id', true);
            $item->mm_enable   = get_post_meta($item->ID, '_softech_mm_enable', true) ? true : false;
            $items_by_id[$item->ID]                      = $item;
            $items_children[$item->menu_item_parent][]   = $item->ID;
        }

        $submenu_active_hierarchy = ($settings['submenu_item_active_hierarchy'] ?? 'no') === 'yes';
        $active_menu_item_ids = $this->sitsel_get_active_menu_item_ids($menu_items, $submenu_active_hierarchy);

        $widget_id    = 'sitsel-mega-menu-' . esc_attr($this->get_id());
        $mobile_bp_key = $settings['mobile_breakpoint'] ?? '';
        $mobile_breakpoint = 0;
        if (!empty($mobile_bp_key)) {
            $bps = \Elementor\Plugin::instance()->breakpoints->get_breakpoints();
            if (isset($bps[$mobile_bp_key]) && method_exists($bps[$mobile_bp_key], 'get_value')) {
                $mobile_breakpoint = absint($bps[$mobile_bp_key]->get_value());
            } else {
                $mobile_breakpoint = absint($mobile_bp_key);
            }
        }

        $show_mobile           = 'yes';
        $layout                = $settings['menu_layout']             ?? 'horizontal';
        $align                 = $settings['menu_align']              ?? 'left';
        $hover_effect          = $settings['hover_effect']            ?? 'none';
        $submenu_display       = $settings['submenu_display']         ?? 'hover';
        $mobile_display        = $settings['mobile_display_as']       ?? 'dropdown';
        $dropdown_position_from       = $settings['dropdown_position_from']         ?? 'header';
        $mobile_stretch        = $settings['mobile_stretch']        ?? 'custom';
        $offcanvas_direction   = $settings['offcanvas_direction']   ?? 'left';
        $show_offcanvas_close  = ($settings['show_offcanvas_close']   ?? 'yes') === 'yes';
        $offcanvas_close_position = $settings['offcanvas_close_position'] ?? 'top-right';

        echo '<div class="sitsel-mega-menu-widget" id="' . esc_attr($widget_id) . '"
            data-mobile-breakpoint="'      . esc_attr($mobile_breakpoint)  . '"
            data-show-mobile="'            . esc_attr($show_mobile ? 'yes' : 'no') . '"
            data-mobile-display="'         . esc_attr($mobile_display)     . '"
            data-mobile-stretch="'    . esc_attr($mobile_stretch)          . '"
            data-offcanvas-direction="' . esc_attr($offcanvas_direction)   . '"
            data-mobile-back-menu="'       . esc_attr($settings['mobile_back_menu'] ?? 'default') . '"
            data-submenu-trigger="'        . esc_attr($submenu_display)    . '"
            data-layout="'                 . esc_attr($layout)             . '"
            data-dropdown_position_from="'        . esc_attr($dropdown_position_from)    . '"
            data-align="'                  . esc_attr($align)              . '"
            data-hover-effect="'           . esc_attr($hover_effect)       . '"
            data-show-offcanvas-close="'   . esc_attr($show_offcanvas_close ? 'yes' : 'no') . '"
            data-offcanvas-close-position="' . esc_attr($offcanvas_close_position) . '">';

        $render_toggle = ($mobile_breakpoint > 0);
        if ($show_mobile && $render_toggle) {
            echo '<button class="sitsel-mega-menu-toggle" aria-label="Toggle menu" aria-expanded="false">';

            if ($settings['menu_toggle_style'] === 'style1') {
                if (!empty($settings['hamburger_icon_open']['value'])) {
                    echo '<span class="sitsel-icon-open">';
                    Icons_Manager::render_icon($settings['hamburger_icon_open'], ['aria-hidden' => 'true']);
                    echo '</span>';
                }
                if (!empty($settings['hamburger_icon_close']['value'])) {
                    echo '<span class="sitsel-icon-close" style="display:none;">';
                    Icons_Manager::render_icon($settings['hamburger_icon_close'], ['aria-hidden' => 'true']);
                    echo '</span>';
                }
            } else {
                if (!empty($settings['hamburger_icon_single']['value'])) {
                    echo '<span class="sitsel-icon-single">';
                    Icons_Manager::render_icon($settings['hamburger_icon_single'], ['aria-hidden' => 'true']);
                    echo '</span>';
                }
            }

            echo '</button>';
        }

        echo '<div class="sitsel-mega-menu-main-wrapper">';

        if ($mobile_display === 'off_canvas' && $show_offcanvas_close) {
            echo '<button class="sitsel-offcanvas-close sitsel-close-' . esc_attr($offcanvas_close_position) . '" aria-label="Close menu">';
            if (!empty($settings['offcanvas_close_icon']['value'])) {
                Icons_Manager::render_icon($settings['offcanvas_close_icon'], ['aria-hidden' => 'true']);
            } else {
                echo '<i class="fas fa-times"></i>';
            }
            echo '</button>';
        }

        echo '<ul class="sitsel-mega-menu-main"
            data-layout="' . esc_attr($layout) . '"
            data-align="'  . esc_attr($align)  . '">';

        foreach ($menu_items as $item) {
            if ($item->menu_item_parent != 0) continue;
            $this->render_menu_item_recursive($item, $items_by_id, $items_children, $settings, 0, $submenu_active_hierarchy, $active_menu_item_ids);
        }

        echo '</ul>';

        if ($mobile_breakpoint) {
            echo '<style>
                @media (max-width: ' . esc_attr($mobile_breakpoint) . 'px) {
                    #' . esc_attr($widget_id) . ' .sitsel-mega-menu-toggle { display: block; }
                    #' . esc_attr($widget_id) . ' .sitsel-mega-menu-main-wrapper { display: none; }
                }
                @media (min-width: ' . esc_attr($mobile_breakpoint + 1) . 'px) {
                    #' . esc_attr($widget_id) . ' .sitsel-mega-menu-toggle { display: none; }
                    #' . esc_attr($widget_id) . ' .sitsel-mega-menu-main-wrapper { display: block; padding-top: 0 !important; }
                    #' . esc_attr($widget_id) . ' .sitsel-offcanvas-close { display: none !important; }
                }
            </style>';
        } else {
            echo '<style>
                #' . esc_attr($widget_id) . ' .sitsel-mega-menu-toggle { display: none !important; }
                #' . esc_attr($widget_id) . ' .sitsel-offcanvas-close { display: none !important; }
            </style>';
        }

        echo '</div>';
        echo '</div>';
    }

    private function sitsel_normalize_path($path)
    {
        $path = trim((string) $path);

        if ('' === $path) {
            return '';
        }

        $path = preg_replace('/[#?].*$/', '', $path);
        $path = '/' . ltrim($path, '/');
        $path = untrailingslashit($path);

        return '/' === $path ? '' : $path;
    }

    private function sitsel_get_site_path()
    {
        $site_path = wp_parse_url(home_url('/'), PHP_URL_PATH);

        return $this->sitsel_normalize_path($site_path);
    }

    private function sitsel_strip_site_path($path)
    {
        $path = $this->sitsel_normalize_path($path);
        $site_path = $this->sitsel_get_site_path();

        if ('' === $site_path || '' === $path) {
            return $path;
        }

        if ($path === $site_path) {
            return '';
        }

        $prefix = $site_path . '/';
        if (0 === strpos($path, $prefix)) {
            return substr($path, strlen($site_path));
        }

        return $path;
    }

    private function sitsel_get_current_path()
    {
        $request_uri = isset($_SERVER['REQUEST_URI']) ? wp_unslash($_SERVER['REQUEST_URI']) : '';

        if ('' === $request_uri) {
            return '';
        }

        $path = wp_parse_url($request_uri, PHP_URL_PATH);

        return $this->sitsel_strip_site_path($path ?: $request_uri);
    }

    private function sitsel_get_menu_item_path($item)
    {
        return $this->sitsel_strip_site_path($item->url ?? '');
    }

    private function sitsel_is_current_menu_item($item)
    {
        $current_path = $this->sitsel_get_current_path();
        $item_path    = $this->sitsel_get_menu_item_path($item);

        if ('' !== $current_path && '' !== $item_path && $current_path === $item_path) {
            return true;
        }

        $queried_object_id = absint(get_queried_object_id());
        $item_object_id    = !empty($item->object_id) ? absint($item->object_id) : 0;

        if ($queried_object_id && $item_object_id && $queried_object_id === $item_object_id) {
            return true;
        }

        if ($queried_object_id && !empty($item->url) && function_exists('url_to_postid')) {
            $linked_post_id = absint(url_to_postid($item->url));
            if ($linked_post_id && $linked_post_id === $queried_object_id) {
                return true;
            }
        }

        if (
            !empty($item->type)
            && 'post_type_archive' === $item->type
            && !empty($item->object)
        ) {
            $archive_link = get_post_type_archive_link($item->object);
            if ('' !== $archive_link && $this->sitsel_get_menu_item_path((object) ['url' => $archive_link]) === $current_path) {
                return true;
            }
        }

        return false;
    }

    private function sitsel_get_active_menu_item_ids($menu_items, $include_hierarchy = false)
    {
        $parent_lookup = [];
        $current_item_id = 0;

        foreach ($menu_items as $item) {
            $item_id = absint($item->ID);
            $parent_lookup[$item_id] = absint($item->menu_item_parent);

            if (!$current_item_id && $this->sitsel_is_current_menu_item($item)) {
                $current_item_id = $item_id;
            }
        }

        if (!$current_item_id) {
            return [];
        }

        if (!$include_hierarchy) {
            return [$current_item_id];
        }

        $active_item_ids = [$current_item_id];
        $parent_id = $parent_lookup[$current_item_id] ?? 0;

        while ($parent_id && !in_array($parent_id, $active_item_ids, true)) {
            $active_item_ids[] = $parent_id;
            $parent_id = $parent_lookup[$parent_id] ?? 0;
        }

        return $active_item_ids;
    }

    private function render_menu_item_recursive($item, $items_by_id, $items_children, $settings = [], $depth = 0, $include_hierarchy = false, $active_menu_item_ids = [])
    {
        $has_children  = !empty($items_children[$item->ID]);
        $is_mega       = (!empty($item->template_id) && $item->mm_enable);
        $normal_submenu = ($has_children && !$is_mega);
        $menu_item_classes = ['sits-menu-item'];
        $wp_menu_item_classes = [];
        $is_current_menu_item = in_array(absint($item->ID), $active_menu_item_ids, true) && !empty($active_menu_item_ids) && absint($item->ID) === absint($active_menu_item_ids[0]);
        $is_active_menu_item = in_array(absint($item->ID), $active_menu_item_ids, true);
        $current_state_classes = [
            'current-menu-item',
            'current-menu-parent',
            'current-menu-ancestor',
            'current_page_item',
            'current_page_parent',
            'current_page_ancestor',
        ];

        if (!empty($item->classes) && is_array($item->classes)) {
            $wp_menu_item_classes = array_filter(array_map('sanitize_html_class', $item->classes));
        }

        if ($normal_submenu) {
            $menu_item_classes[] = 'sitsel-has-children';
        }

        if ($is_current_menu_item) {
            $menu_item_classes[] = 'sitsel-active-menu-item';
            $menu_item_classes[] = 'current-menu-item';
            $menu_item_classes[] = 'current_page_item';
        }

        if ($is_active_menu_item && !$is_current_menu_item) {
            $menu_item_classes[] = 'sitsel-active-menu-item';
            $menu_item_classes[] = 'current-menu-parent';
            $menu_item_classes[] = 'current-menu-ancestor';
            $menu_item_classes[] = 'current_page_parent';
            $menu_item_classes[] = 'current_page_ancestor';
        }

        if (!$include_hierarchy && !$is_current_menu_item) {
            $wp_menu_item_classes = array_values(array_diff($wp_menu_item_classes, $current_state_classes));
        }

        $menu_item_classes = array_values(array_unique(array_filter(array_merge($menu_item_classes, $wp_menu_item_classes))));

        echo '<li class="' . esc_attr(implode(' ', $menu_item_classes)) . '" data-menu-item-id="' . esc_attr($item->ID) . '">';

        echo '<a href="' . esc_url($item->url) . '"' . ($is_current_menu_item ? ' aria-current="page"' : '') . '>';
        echo esc_html($item->title);

        if (($has_children || $is_mega) && !empty($settings['submenu_icon']['value'])) {
            echo '<span class="sitsel-submenu-icon">';
            \Elementor\Icons_Manager::render_icon($settings['submenu_icon'], ['aria-hidden' => 'true']);
            echo '</span>';
        }

        echo '</a>';

        if ($has_children && !$item->mm_enable) {
            echo '<ul class="sitsel-sub-menu" data-parent-id="' . esc_attr($item->ID) . '">';
            foreach ($items_children[$item->ID] as $child_id) {
                $this->render_menu_item_recursive(
                    $items_by_id[$child_id],
                    $items_by_id,
                    $items_children,
                    $settings,
                    $depth + 1,
                    $include_hierarchy,
                    $active_menu_item_ids
                );
            }
            echo '</ul>';
        }

      
        
        if ($is_mega && class_exists('\Elementor\Plugin')) {
    echo '<ul class="sitsel-sub-menu sitsel-mega-sub-menu" data-parent-id="' . esc_attr($item->ID) . '">';
    try {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        // Reason: Elementor's get_builder_content_for_display() returns fully
        // sanitized HTML including inline <style> tags required for rendering.
        // wp_kses_post() strips <style> tags breaking the template output.
        // template_id is cast to absint() making it safe from injection.
        $content = \Elementor\Plugin::instance()->frontend
            ->get_builder_content_for_display(absint($item->template_id), true);
        echo '<li class="" data-template-id="' . esc_attr($item->template_id) . '">';
        echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo '</li>';
    } catch (\Exception $e) {
        // silent
    }
    echo '</ul>';
}

        echo '</li>';
    }
}
