<?php
namespace Softech_Addons_for_Elementor\Widgets;

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

if ( ! class_exists( '\\Softech_Addons_for_Elementor\\Includes\\Softech_Post_Query_Manager' ) ) {
	require_once SITS_ELEMENTOR_ADDONS_PLUGIN_PATH . 'includes/class-post-query-manager.php';
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Softech_Addons_for_Elementor\Includes\Softech_Post_Query_Manager;

class sitsel_tabs extends Widget_Base {

	public function get_name()       { return 'sitsel_tabs'; }
	public function get_title()      { return __( 'SITS Tabs & Accordion', 'softech-addons-for-elementor' ); }
	public function get_icon()       { return 'eicon-tabs'; }
	public function get_categories() { return [ 'sits-category' ]; }
	public function get_style_depends(): array  { return [ 'sitsel-tabs-css' ]; }
	public function get_script_depends(): array { return [ 'sitsel-tabs-js' ]; }
	public function is_dynamic_content(): bool  { return true; }

	public function __construct( $data = [], $args = null ) {
		parent::__construct( $data, $args );
		$this->register_widget_assets();
	}

	private function register_widget_assets(): void {
		$url = SITS_ELEMENTOR_ADDONS_PLUGIN_URL;
		$ver = SITS_ELEMENTOR_ADDONS_VERSION;

		if ( ! wp_style_is( 'sitsel-tabs-css', 'registered' ) ) {
			wp_register_style( 'sitsel-tabs-css', $url . 'assets/css/sitsel-tabs.css', [], $ver );
		}
		if ( ! wp_script_is( 'sitsel-tabs-js', 'registered' ) ) {
			wp_register_script( 'sitsel-tabs-js', $url . 'assets/js/sitsel-tabs.js', [ 'jquery' ], $ver, true );
		}
	}

	// =========================================================================
	// CONTROLS
	// =========================================================================

	protected function register_controls() {

		// ── Content Source ────────────────────────────────────────────────────
		$this->start_controls_section( 'content_section', [
			'label' => __( 'Content', 'softech-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'display_mode', [
			'label'   => __( 'Display Mode', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'tabs',
			'options' => [
				'tabs'      => __( 'Tabs', 'softech-addons-for-elementor' ),
				'accordion' => __( 'Accordion', 'softech-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'content_source_type', [
			'label'   => __( 'Content Source', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'manual',
			'options' => [
				'manual'  => __( 'Manual Input', 'softech-addons-for-elementor' ),
				'dynamic' => __( 'Dynamic (Posts)', 'softech-addons-for-elementor' ),
			],
		] );

		$this->end_controls_section();

		// ── Dynamic: Query ────────────────────────────────────────────────────
		Softech_Post_Query_Manager::register_controls( $this, [
			'source_control' => 'content_source_type',
			'section_id'     => 'section_tabs_query',
			'section_label'  => __( 'Query', 'softech-addons-for-elementor' ),
			'mode'           => 'post_only',
		] );

		// ── Dynamic: Display Options ──────────────────────────────────────────
		$this->start_controls_section( 'dynamic_display_section', [
			'label'     => __( 'Dynamic Display', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'content_source_type' => 'dynamic' ],
		] );

		$this->add_control( 'dynamic_tab_title_source', [
			'label'   => __( 'Tab Title From', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'post_title',
			'options' => [
				'post_title' => __( 'Post Title', 'softech-addons-for-elementor' ),
				'meta'       => __( 'Custom Meta Field', 'softech-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'dynamic_tab_title_meta_key', [
			'label'       => __( 'Meta Key for Title', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'placeholder' => 'tab_title',
			'condition'   => [
				'content_source_type'      => 'dynamic',
				'dynamic_tab_title_source' => 'meta',
			],
		] );

		$this->add_control( 'dynamic_content_source', [
			'label'   => __( 'Tab Content From', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'post_content',
			'options' => [
				'post_content' => __( 'Post Content', 'softech-addons-for-elementor' ),
				'post_excerpt' => __( 'Post Excerpt', 'softech-addons-for-elementor' ),
				'meta'         => __( 'Custom Meta Field', 'softech-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'dynamic_content_meta_key', [
			'label'       => __( 'Meta Key for Content', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'placeholder' => 'tab_content',
			'condition'   => [
				'content_source_type'    => 'dynamic',
				'dynamic_content_source' => 'meta',
			],
		] );

		$this->end_controls_section();

		// ── Manual Items (Repeater) ───────────────────────────────────────────
		$this->start_controls_section( 'section_tabs', [
			'label'     => __( 'Items', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'content_source_type' => 'manual' ],
		] );

		$repeater = new Repeater();

		$repeater->add_control( 'tab_title', [
			'label'       => __( 'Title', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'default'     => __( 'Tab Title', 'softech-addons-for-elementor' ),
			'label_block' => true,
		] );

		$repeater->add_control( 'tab_icon', [
			'label' => __( 'Icon', 'softech-addons-for-elementor' ),
			'type'  => Controls_Manager::ICONS,
		] );

		$repeater->add_control( 'tab_content_source', [
			'label'   => __( 'Content Source', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::CHOOSE,
			'options' => [
				'content'   => [ 'title' => __( 'Content', 'softech-addons-for-elementor' ),   'icon' => 'eicon-editor-paragraph' ],
				'shortcode' => [ 'title' => __( 'Shortcode', 'softech-addons-for-elementor' ), 'icon' => 'eicon-shortcode' ],
				'template'  => [ 'title' => __( 'Template', 'softech-addons-for-elementor' ),  'icon' => 'eicon-folder' ],
			],
			'default' => 'content',
			'toggle'  => false,
		] );

		$repeater->add_control( 'tab_content', [
			'label'      => __( 'Content', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::WYSIWYG,
			'default'    => __( 'Content goes here. Edit this text to add your own content.', 'softech-addons-for-elementor' ),
			'show_label' => false,
			'condition'  => [ 'tab_content_source' => 'content' ],
		] );

		$repeater->add_control( 'tab_shortcode', [
			'label'       => __( 'Shortcode', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXTAREA,
			'placeholder' => '[my-shortcode param="value"]',
			'description' => __( 'Enter any valid WordPress shortcode.', 'softech-addons-for-elementor' ),
			'rows'        => 3,
			'condition'   => [ 'tab_content_source' => 'shortcode' ],
		] );

		$repeater->add_control( 'tab_template_id', [
			'label'       => __( 'Select Template', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::SELECT2,
			'label_block' => true,
			'options'     => $this->get_elementor_templates(),
			'default'     => '',
			'description' => __( 'Select a published Elementor template.', 'softech-addons-for-elementor' ),
			'condition'   => [ 'tab_content_source' => 'template' ],
		] );

		$this->add_control( 'tabs', [
			'label'       => __( 'Items', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::REPEATER,
			'fields'      => $repeater->get_controls(),
			'default'     => [
				[ 'tab_title' => __( 'Item #1', 'softech-addons-for-elementor' ), 'tab_content_source' => 'content', 'tab_content' => __( 'Content for the first item.', 'softech-addons-for-elementor' ) ],
				[ 'tab_title' => __( 'Item #2', 'softech-addons-for-elementor' ), 'tab_content_source' => 'content', 'tab_content' => __( 'Content for the second item.', 'softech-addons-for-elementor' ) ],
				[ 'tab_title' => __( 'Item #3', 'softech-addons-for-elementor' ), 'tab_content_source' => 'content', 'tab_content' => __( 'Content for the third item.', 'softech-addons-for-elementor' ) ],
			],
			'title_field' => '{{{ tab_title }}}',
		] );

		$this->end_controls_section();

		// ── Layout (Tabs only) ────────────────────────────────────────────────
		$this->start_controls_section( 'section_layout', [
			'label'     => __( 'Layout', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'display_mode' => 'tabs' ],
		] );

		$this->add_control( 'tab_layout', [
			'label'   => __( 'Tab Layout', 'softech-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'horizontal',
			'options' => [
				'horizontal' => __( 'Horizontal', 'softech-addons-for-elementor' ),
				'vertical'   => __( 'Vertical', 'softech-addons-for-elementor' ),
			],
		] );
		$this->add_control( 'vertical_tab_position', [
            'label'     => __( 'Vertical Tab Position', 'softech-addons-for-elementor' ),
            'type'      => Controls_Manager::CHOOSE,
            'options'   => [
                'left'  => [ 'title' => __( 'Left', 'softech-addons-for-elementor' ),  'icon' => 'eicon-h-align-left' ],
                'right' => [ 'title' => __( 'Right', 'softech-addons-for-elementor' ), 'icon' => 'eicon-h-align-right' ],
            ],
            'default'   => 'left',
            'toggle'    => false,
            'condition' => [ 'display_mode' => 'tabs', 'tab_layout' => 'vertical' ],
        ] );

		$this->add_control( 'tab_alignment', [
			'label'     => __( 'Tab Alignment', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::CHOOSE,
			'options'   => [
				'flex-start' => [ 'title' => __( 'Left', 'softech-addons-for-elementor' ),   'icon' => 'eicon-text-align-left' ],
				'center'     => [ 'title' => __( 'Center', 'softech-addons-for-elementor' ), 'icon' => 'eicon-text-align-center' ],
				'flex-end'   => [ 'title' => __( 'Right', 'softech-addons-for-elementor' ),  'icon' => 'eicon-text-align-right' ],
			],
			'default'   => 'flex-start',
			'condition' => [ 'display_mode' => 'tabs', 'tab_layout!' => 'vertical' ],
			'selectors' => [ '{{WRAPPER}} .sitsel-tabs-nav' => 'justify-content: {{VALUE}};' ],
		] );

		$this->add_control( 'tab_icon_position', [
			'label'     => __( 'Icon Position', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::CHOOSE,
			'options'   => [
				'left'  => [ 'title' => __( 'Left', 'softech-addons-for-elementor' ),  'icon' => 'eicon-h-align-left' ],
				'top'   => [ 'title' => __( 'Top', 'softech-addons-for-elementor' ),   'icon' => 'eicon-v-align-top' ],
				'right' => [ 'title' => __( 'Right', 'softech-addons-for-elementor' ), 'icon' => 'eicon-h-align-right' ],
			],
			'default'   => 'left',
			'toggle'    => false,
			'condition' => [ 'display_mode' => 'tabs', 'content_source_type' => 'manual' ],
		] );

		$this->end_controls_section();

		// ── Accordion Settings ────────────────────────────────────────────────
		$this->start_controls_section( 'section_accordion_settings', [
			'label'     => __( 'Accordion Settings', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'display_mode' => 'accordion' ],
		] );

        	$this->add_control( 'accordion_default_open', [
            'label'   => __( 'Default Open State', 'softech-addons-for-elementor' ),
            'type'    => Controls_Manager::SELECT,
            'default' => 'first',
            'options' => [
                'first'  => __( 'Open First Item', 'softech-addons-for-elementor' ),
                'all'    => __( 'Open All Items', 'softech-addons-for-elementor' ),
                'index'  => __( 'Open by Index', 'softech-addons-for-elementor' ),
                'none'   => __( 'Close All Items', 'softech-addons-for-elementor' ),
            ],
        ] );
        
        $this->add_control( 'accordion_open_index', [
            'label'       => __( 'Item Index (0 = first)', 'softech-addons-for-elementor' ),
            'type'        => Controls_Manager::NUMBER,
            'default'     => 0,
            'min'         => 0,
            'step'        => 1,
            'description' => __( 'Enter 0 for first item, 1 for second, and so on.', 'softech-addons-for-elementor' ),
            'condition'   => [ 'accordion_default_open' => 'index' ],
        ] );
        
        $this->add_control( 'accordion_allow_multiple', [
            'label'        => __( 'Allow Multiple Open', 'softech-addons-for-elementor' ),
            'type'         => Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'default'      => '',
            'description'  => __( 'Allow more than one panel to be open at once.', 'softech-addons-for-elementor' ),
        ] );

		$this->add_control( 'accordion_icon_type', [
			'label'     => __( 'Toggle Icon', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'default'   => 'plus_minus',
			'separator' => 'before',
			'options'   => [
				'none'       => __( 'None', 'softech-addons-for-elementor' ),
				'plus_minus' => __( 'Plus / Minus', 'softech-addons-for-elementor' ),
				'arrow'      => __( 'Arrow / Chevron', 'softech-addons-for-elementor' ),
				'custom'     => __( 'Custom Icon', 'softech-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'accordion_icon_custom', [
			'label'     => __( 'Closed Icon', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::ICONS,
			'condition' => [ 'display_mode' => 'accordion', 'accordion_icon_type' => 'custom' ],
		] );

		$this->add_control( 'accordion_icon_active', [
			'label'       => __( 'Open Icon (optional)', 'softech-addons-for-elementor' ),
			'type'        => Controls_Manager::ICONS,
			'description' => __( 'If empty, the closed icon is reused.', 'softech-addons-for-elementor' ),
			'condition'   => [ 'display_mode' => 'accordion', 'accordion_icon_type' => 'custom' ],
		] );

		$this->add_control( 'accordion_icon_position', [
			'label'     => __( 'Icon Position', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::CHOOSE,
			'options'   => [
				'left'  => [ 'title' => __( 'Left', 'softech-addons-for-elementor' ),  'icon' => 'eicon-h-align-left' ],
				'right' => [ 'title' => __( 'Right', 'softech-addons-for-elementor' ), 'icon' => 'eicon-h-align-right' ],
			],
			'default'   => 'right',
			'toggle'    => false,
			'condition' => [ 'display_mode' => 'accordion', 'accordion_icon_type!' => 'none' ],
		] );

		$this->add_control( 'accordion_item_gap', [
			'label'     => __( 'Gap Between Items', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
			'default'   => [ 'size' => 6 ],
			'separator' => 'before',
			'selectors' => [ '{{WRAPPER}} .sitsel-accordion-wrapper' => 'gap: {{SIZE}}{{UNIT}};' ],
		] );

		$this->end_controls_section();

		// ── Additional Settings (Tabs only) ───────────────────────────────────
		$this->start_controls_section( 'section_additional_settings', [
			'label'     => __( 'Responsive & Autoplay', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'display_mode' => 'tabs' ],
		] );

		// ── Responsive Breakpoint ─────────────────────────────────────────────
		$this->add_control( 'responsive_breakpoint', [
			'label'     => __( 'Collapse at Breakpoint', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'default'   => '767',
			'options'   => [
				'none' => __( 'None (never collapse)', 'softech-addons-for-elementor' ),
				'1024' => __( 'Tablet Landscape (≤ 1024px)', 'softech-addons-for-elementor' ),
				'1023' => __( 'Tablet Portrait (≤ 1023px)', 'softech-addons-for-elementor' ),
				'767'  => __( 'Mobile (≤ 767px)', 'softech-addons-for-elementor' ),
				'480'  => __( 'Mobile Small (≤ 480px)', 'softech-addons-for-elementor' ),
			],
			'condition' => [ 'display_mode' => 'tabs',  ],
		] );

		// ── Mobile Behavior ───────────────────────────────────────────────────
		$this->add_control( 'breakpoint_behavior', [
			'label'     => __( 'Mobile Behavior', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'default'   => 'accordion',
			'options'   => [
				'scroll'    => __( 'Horizontal Scroll', 'softech-addons-for-elementor' ),
				'collapse'  => __( 'Collapsed Tabs (wrap)', 'softech-addons-for-elementor' ),
				'accordion' => __( 'Convert to Accordion', 'softech-addons-for-elementor' ),
			],
			'condition' => [
				'display_mode'           => 'tabs',
				'responsive_breakpoint!' => 'none',
			],
			'description' => __( 'How tabs behave at the selected breakpoint.', 'softech-addons-for-elementor' ),
		] );

		// ── Autoplay (tabs – all behaviors) ──────────────────────────────────
		$this->add_control( 'autoplay', [
			'label'        => __( 'Autoplay', 'softech-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => '',
			'separator'    => 'before',
			'condition'    => [ 'display_mode' => 'tabs' ],
		] );

		$this->add_control( 'autoplay_interval', [
			'label'     => __( 'Interval (ms)', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 4000,
			'min'       => 1000,
			'max'       => 30000,
			'step'      => 500,
			'condition' => [ 'display_mode' => 'tabs', 'autoplay' => 'yes' ],
		] );

		$this->add_control( 'autoplay_pause_on_hover', [
			'label'        => __( 'Pause on Hover', 'softech-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
			'condition'    => [ 'display_mode' => 'tabs', 'autoplay' => 'yes' ],
		] );

		$this->end_controls_section();

		// ── Accordion Autoplay ────────────────────────────────────────────────
		$this->start_controls_section( 'section_accordion_autoplay', [
			'label'     => __( 'Autoplay', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_CONTENT,
			'condition' => [ 'display_mode' => 'accordion' ],
		] );

		$this->add_control( 'acc_autoplay', [
			'label'        => __( 'Enable Autoplay', 'softech-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => '',
		] );

		$this->add_control( 'acc_autoplay_interval', [
			'label'     => __( 'Interval (ms)', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 4000,
			'min'       => 1000,
			'max'       => 30000,
			'step'      => 500,
			'condition' => [ 'display_mode' => 'accordion', 'acc_autoplay' => 'yes' ],
		] );

		$this->add_control( 'acc_autoplay_pause_on_hover', [
			'label'        => __( 'Pause on Hover', 'softech-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
			'condition'    => [ 'display_mode' => 'accordion', 'acc_autoplay' => 'yes' ],
		] );

		$this->end_controls_section();

		// =========================================================================
		// STYLE TAB
		// =========================================================================

		// ── Tab Nav Container ─────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_nav_wrap', [
			'label'     => __( 'Tab Nav Wrap', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_STYLE,
			'condition' => [ 'display_mode' => 'tabs' ],
		] );
		$this->add_responsive_control( 'nav_wrap_width', [
    'label'      => __( 'Nav Width', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::SLIDER,
    'size_units' => [ 'px', 'em', 'rem', '%' ],
    'range'      => [
        'px'  => [ 'min' => 0, 'max' => 1200 ],
        'em'  => [ 'min' => 0, 'max' => 100 ],
        'rem' => [ 'min' => 0, 'max' => 100 ],
        '%'   => [ 'min' => 0, 'max' => 100 ],
    ],
    'default'    => [ 'size' => 40, 'unit' => '%' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tabs-nav'                         => 'width: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-layout-vertical .sitsel-tabs-nav' => 'min-width: unset; width: {{SIZE}}{{UNIT}};',
    ],
      'condition' => [ 'display_mode' => 'tabs', 'tab_layout' => 'vertical' ],
] );

		$this->add_control( 'nav_wrap_bg', [
			'label'     => __( 'Background', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [ '{{WRAPPER}} .sitsel-tabs-nav' => 'background-color: {{VALUE}};' ],
		] );

		$this->add_responsive_control( 'nav_wrap_padding', [
			'label'      => __( 'Padding', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em', '%' ],
			'selectors'  => [ '{{WRAPPER}} .sitsel-tabs-nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'nav_wrap_border',
			'selector' => '{{WRAPPER}} .sitsel-tabs-nav',
		] );

		$this->add_control( 'nav_wrap_border_radius', [
			'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'selectors'  => [ '{{WRAPPER}} .sitsel-tabs-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_control( 'nav_gap', [
			'label'     => __( 'Gap Between Tabs', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
			'default'   => [ 'size' => 4 ],
			'separator' => 'before',
			'selectors' => [ '{{WRAPPER}} .sitsel-tabs-nav' => 'gap: {{SIZE}}{{UNIT}};' ],
		] );

		$this->end_controls_section();

		// ── Tab Buttons ───────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_nav', [
			'label'     => __( 'Tab Buttons', 'softech-addons-for-elementor' ),
			'tab'       => Controls_Manager::TAB_STYLE,
			'condition' => [ 'display_mode' => 'tabs' ],
		] );

		$this->start_controls_tabs( 'nav_tabs_style' );

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

		$this->add_control( 'nav_text_color', [
			'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#555555',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn'                                    => 'color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn'         => 'color: {{VALUE}};',
			],
		] );

		$this->add_control( 'nav_bg_color', [
			'label'     => __( 'Background', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#f0f0f0',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn'                                    => 'background-color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn'         => 'background-color: {{VALUE}};',
			],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'     => 'nav_typography',
			'selector' => '{{WRAPPER}} .sitsel-tab-btn, {{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn',
		] );

		$this->add_responsive_control( 'nav_padding', [
			'label'      => __( 'Padding', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em', '%' ],
			'default'    => [ 'top' => '10', 'right' => '20', 'bottom' => '10', 'left' => '20', 'unit' => 'px' ],
			'selectors'  => [
				'{{WRAPPER}} .sitsel-tab-btn'                                    => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn'         => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'nav_border',
			'selector' => '{{WRAPPER}} .sitsel-tab-btn, {{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn',
		] );

		$this->add_control( 'nav_border_radius', [
			'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'selectors'  => [
				'{{WRAPPER}} .sitsel-tab-btn'                                    => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn'         => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'nav_box_shadow',
			'selector' => '{{WRAPPER}} .sitsel-tab-btn, {{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn',
		] );

		$this->end_controls_tab();

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

		$this->add_control( 'nav_active_text_color', [
			'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#ffffff',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn.sitsel-active'                                                           => 'color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn'       => 'color: {{VALUE}};',
			],
		] );

		$this->add_control( 'nav_active_bg_color', [
			'label'     => __( 'Background', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#6c63ff',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn.sitsel-active'                                                           => 'background-color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn'       => 'background-color: {{VALUE}};',
			],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'nav_active_border',
			'selector' => '{{WRAPPER}} .sitsel-tab-btn.sitsel-active, {{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn',
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'nav_active_box_shadow',
			'selector' => '{{WRAPPER}} .sitsel-tab-btn.sitsel-active, {{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn',
		] );

		$this->end_controls_tab();

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

		$this->add_control( 'nav_hover_text_color', [
			'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#6c63ff',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn:hover'                              => 'color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn:hover'   => 'color: {{VALUE}};',
			],
		] );

		$this->add_control( 'nav_hover_bg_color', [
			'label'     => __( 'Background', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#e8e6ff',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-btn:hover'                              => 'background-color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-bp-accordion .sitsel-accordion-btn:hover'   => 'background-color: {{VALUE}};',
			],
		] );

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

		// ── Tab Icon Style ────────────────────────────────────────────────────
		$this->start_controls_section( 'section_style_icon', [
    'label'      => __( 'Tab Icon', 'softech-addons-for-elementor' ),
    'tab'        => Controls_Manager::TAB_STYLE,
    'conditions' => [
        'relation' => 'and',
        'terms'    => [
            [
                'name'     => 'content_source_type',
                'operator' => '==',
                'value'    => 'manual',
            ],
            [
                'relation' => 'or',
                'terms'    => [
                    [ 'name' => 'display_mode', 'operator' => '==', 'value' => 'tabs' ],
                    [ 'name' => 'display_mode', 'operator' => '==', 'value' => 'accordion' ],
                ],
            ],
        ],
    ],
] );

$this->add_responsive_control( 'icon_size', [
    'label'      => __( 'Size', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::SLIDER,
    'size_units' => [ 'px', 'em' ],
    'range'      => [ 'px' => [ 'min' => 8, 'max' => 80 ] ],
    'default'    => [ 'size' => 16, 'unit' => 'px' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tab-icon, {{WRAPPER}} .sitsel-accordion-tab-icon'             => 'font-size: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-tab-icon svg, {{WRAPPER}} .sitsel-accordion-tab-icon svg'     => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
    ],
] );

$this->add_responsive_control( 'icon_spacing', [
    'label'      => __( 'Spacing', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::SLIDER,
    'size_units' => [ 'px' ],
    'range'      => [ 'px' => [ 'min' => 0, 'max' => 30 ] ],
    'default'    => [ 'size' => 6 ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-icon-left  .sitsel-tab-icon'      => 'margin-right: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-icon-right .sitsel-tab-icon'      => 'margin-left: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-icon-top   .sitsel-tab-icon'      => 'margin-bottom: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon'        => 'margin-right: {{SIZE}}{{UNIT}};',
    ],
] );

$this->start_controls_tabs( 'icon_tabs_style' );

// ── Normal ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'icon_tab_normal', [ 'label' => __( 'Normal', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'icon_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn .sitsel-tab-icon'                         => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-tab-btn .sitsel-tab-icon svg'                     => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon'         => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon svg'     => 'fill: {{VALUE}};',
    ],
] );

$this->add_control( 'icon_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn .sitsel-tab-icon'                     => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon'     => 'background-color: {{VALUE}};',
    ],
] );

$this->add_responsive_control( 'icon_bg_padding', [
    'label'      => __( 'Padding', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', 'em' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tab-btn .sitsel-tab-icon'                     => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon'     => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    ],
] );

$this->add_control( 'icon_border_radius', [
    'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', '%' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tab-btn .sitsel-tab-icon'                     => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-accordion-btn .sitsel-accordion-tab-icon'     => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    ],
] );

$this->end_controls_tab();

// ── Active ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'icon_tab_active', [ 'label' => __( 'Active', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'icon_active_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-active .sitsel-tab-icon'                                         => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-active .sitsel-tab-icon svg'                                     => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-tab-icon'      => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-tab-icon svg'  => 'fill: {{VALUE}};',
    ],
] );

$this->add_control( 'icon_active_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn.sitsel-active .sitsel-tab-icon'                                         => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-tab-icon'      => 'background-color: {{VALUE}};',
    ],
] );

$this->end_controls_tab();

// ── Hover ─────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'icon_tab_hover', [ 'label' => __( 'Hover', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'icon_hover_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn:hover .sitsel-tab-icon'                     => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-tab-btn:hover .sitsel-tab-icon svg'                 => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-tab-icon'     => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-tab-icon svg' => 'fill: {{VALUE}};',
    ],
] );

$this->add_control( 'icon_hover_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-tab-btn:hover .sitsel-tab-icon'                     => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-tab-icon'     => 'background-color: {{VALUE}};',
    ],
] );

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

		// ── Accordion Header Style ────────────────────────────────────────────

$this->start_controls_section( 'section_style_accordion_header', [
    'label'     => __( 'Accordion Header', 'softech-addons-for-elementor' ),
    'tab'       => Controls_Manager::TAB_STYLE,
    'condition' => [ 'display_mode' => 'accordion' ],
] );

$this->start_controls_tabs( 'acc_header_tabs_style' );

// ── Normal ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_header_tab_normal', [ 'label' => __( 'Normal', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_header_text_color', [
    'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#333333',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-btn' => 'color: {{VALUE}};' ],
] );

$this->add_control( 'acc_header_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#f0f0f0',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-btn' => 'background-color: {{VALUE}};' ],
] );

$this->add_group_control( Group_Control_Typography::get_type(), [
    'name'     => 'acc_header_typography',
    'selector' => '{{WRAPPER}} .sitsel-accordion-btn',
] );

$this->add_responsive_control( 'acc_header_padding', [
    'label'      => __( 'Padding', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', 'em', '%' ],
    'default'    => [ 'top' => '14', 'right' => '20', 'bottom' => '14', 'left' => '20', 'unit' => 'px' ],
    'selectors'  => [ '{{WRAPPER}} .sitsel-accordion-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );

$this->add_group_control( Group_Control_Border::get_type(), [
    'name'     => 'acc_header_border',
    'selector' => '{{WRAPPER}} .sitsel-accordion-btn',
] );

$this->add_control( 'acc_header_border_radius', [
    'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', '%' ],
    'selectors'  => [ '{{WRAPPER}} .sitsel-accordion-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );

$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
    'name'     => 'acc_header_normal_shadow',
    'selector' => '{{WRAPPER}} .sitsel-accordion-btn',
] );

$this->end_controls_tab();

// ── Active ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_header_tab_active', [ 'label' => __( 'Active', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_header_active_text_color', [
    'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#ffffff',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn' => 'color: {{VALUE}};' ],
] );

$this->add_control( 'acc_header_active_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#6c63ff',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn' => 'background-color: {{VALUE}};' ],
] );

$this->add_group_control( Group_Control_Border::get_type(), [
    'name'     => 'acc_header_active_border',
    'selector' => '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn',
] );

$this->add_control( 'acc_header_active_border_radius', [
    'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', '%' ],
    'selectors'  => [ '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );

$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
    'name'     => 'acc_header_active_shadow',
    'selector' => '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn',
] );

$this->end_controls_tab();

// ── Hover ─────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_header_tab_hover', [ 'label' => __( 'Hover', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_header_hover_text_color', [
    'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#6c63ff',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-btn:hover' => 'color: {{VALUE}};' ],
] );

$this->add_control( 'acc_header_hover_bg_color', [
    'label'     => __( 'Background', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'default'   => '#e8e6ff',
    'selectors' => [ '{{WRAPPER}} .sitsel-accordion-btn:hover' => 'background-color: {{VALUE}};' ],
] );

$this->add_group_control( Group_Control_Border::get_type(), [
    'name'     => 'acc_header_hover_border',
    'selector' => '{{WRAPPER}} .sitsel-accordion-btn:hover',
] );

$this->add_control( 'acc_header_hover_border_radius', [
    'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', '%' ],
    'selectors'  => [ '{{WRAPPER}} .sitsel-accordion-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
] );

$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
    'name'     => 'acc_header_hover_shadow',
    'selector' => '{{WRAPPER}} .sitsel-accordion-btn:hover',
] );

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

		// Toggle Icon styling
		// Toggle Icon styling
$this->add_control( 'acc_icon_heading', [
    'label'     => __( 'Toggle Icon', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::HEADING,
    'separator' => 'before',
    'condition' => [ 'accordion_icon_type!' => 'none' ],
] );

$this->add_responsive_control( 'acc_icon_size', [
    'label'      => __( 'Icon Size', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::SLIDER,
    'size_units' => [ 'px', 'em' ],
    'range'      => [ 'px' => [ 'min' => 8, 'max' => 60 ] ],
    'default'    => [ 'size' => 18, 'unit' => 'px' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-accordion-icon'     => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-accordion-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
    ],
    'condition'  => [ 'accordion_icon_type!' => 'none' ],
] );

$this->start_controls_tabs( 'acc_icon_color_tabs', [
    'condition' => [ 'accordion_icon_type!' => 'none' ],
] );

// ── Normal ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_icon_tab_normal', [ 'label' => __( 'Normal', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_icon_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-accordion-icon'           => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-icon svg'       => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-icon::before'   => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-icon::after'    => 'background-color: {{VALUE}};',
    ],
] );

$this->end_controls_tab();

// ── Active ────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_icon_tab_active', [ 'label' => __( 'Active', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_icon_active_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-icon'           => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-icon svg'       => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-icon::before'   => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-item.sitsel-active > .sitsel-accordion-btn .sitsel-accordion-icon::after'    => 'background-color: {{VALUE}};',
    ],
] );

$this->end_controls_tab();

// ── Hover ─────────────────────────────────────────────────────────────────────
$this->start_controls_tab( 'acc_icon_tab_hover', [ 'label' => __( 'Hover', 'softech-addons-for-elementor' ) ] );

$this->add_control( 'acc_icon_hover_color', [
    'label'     => __( 'Color', 'softech-addons-for-elementor' ),
    'type'      => Controls_Manager::COLOR,
    'selectors' => [
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-icon'           => 'color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-icon svg'       => 'fill: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-icon::before'   => 'background-color: {{VALUE}};',
        '{{WRAPPER}} .sitsel-accordion-btn:hover .sitsel-accordion-icon::after'    => 'background-color: {{VALUE}};',
    ],
] );

$this->end_controls_tab();

$this->end_controls_tabs();

		// Item Box
		$this->add_control( 'acc_item_heading', [
			'label'     => __( 'Item Box', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'           => 'acc_item_border',
			'selector'       => '{{WRAPPER}} .sitsel-accordion-item',
			'fields_options' => [
				'border' => [ 'default' => 'solid' ],
				'width'  => [ 'default' => [ 'top' => '1', 'right' => '1', 'bottom' => '1', 'left' => '1', 'unit' => 'px' ] ],
				'color'  => [ 'default' => '#e0e0e0' ],
			],
		] );

		$this->add_control( 'acc_item_border_radius', [
			'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%' ],
			'default'    => [ 'top' => '4', 'right' => '4', 'bottom' => '4', 'left' => '4', 'unit' => 'px' ],
			'selectors'  => [ '{{WRAPPER}} .sitsel-accordion-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;' ],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'acc_item_box_shadow',
			'selector' => '{{WRAPPER}} .sitsel-accordion-item',
		] );

		$this->end_controls_section();

		// ── Content Panel (shared) ────────────────────────────────────────────
		$this->start_controls_section( 'section_style_content', [
			'label' => __( 'Content Panel', 'softech-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'content_bg_color', [
			'label'     => __( 'Background', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#ffffff',
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-content'             => 'background-color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-accordion-content-inner' => 'background-color: {{VALUE}};',
			],
		] );

		$this->add_control( 'content_text_color', [
			'label'     => __( 'Text Color', 'softech-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} .sitsel-tab-content'             => 'color: {{VALUE}};',
				'{{WRAPPER}} .sitsel-accordion-content-inner' => 'color: {{VALUE}};',
			],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'     => 'content_typography',
			'selector' => '{{WRAPPER}} .sitsel-tab-content, {{WRAPPER}} .sitsel-accordion-content-inner',
		] );

		$this->add_responsive_control( 'content_padding', [
			'label'      => __( 'Padding', 'softech-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', 'em', '%' ],
			'default'    => [ 'top' => '20', 'right' => '20', 'bottom' => '20', 'left' => '20', 'unit' => 'px' ],
			'selectors'  => [
				'{{WRAPPER}} .sitsel-tab-content'             => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				'{{WRAPPER}} .sitsel-accordion-content-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
    'name'     => 'content_border',
    'selector' => '{{WRAPPER}} .sitsel-tab-content, {{WRAPPER}} .sitsel-accordion-content',
] );

$this->add_control( 'content_border_radius', [
    'label'      => __( 'Border Radius', 'softech-addons-for-elementor' ),
    'type'       => Controls_Manager::DIMENSIONS,
    'size_units' => [ 'px', '%' ],
    'selectors'  => [
        '{{WRAPPER}} .sitsel-tab-content'        => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        '{{WRAPPER}} .sitsel-accordion-content'  => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    ],
] );

$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
    'name'     => 'content_box_shadow',
    'selector' => '{{WRAPPER}} .sitsel-tab-content, {{WRAPPER}} .sitsel-accordion-content',
] );
		$this->end_controls_section();
	}

	// =========================================================================
	// HELPERS
	// =========================================================================

	private function get_elementor_templates(): array {
		if ( ! class_exists( '\Elementor\Plugin' ) ) return [];

		$query = new \WP_Query( [
			'post_type'      => 'elementor_library',
			'post_status'    => 'publish',
			'posts_per_page' => 100,
			'fields'         => 'ids',
			'orderby'        => 'title',
			'order'          => 'ASC',
			'no_found_rows'  => true,
		] );

		$templates = [];
		foreach ( $query->posts as $post_id ) {
			$post = get_post( $post_id );
			if ( $post && 'Default Kit' !== $post->post_title ) {
				$templates[ $post_id ] = $post->post_title;
			}
		}

		wp_reset_postdata();
		return $templates;
	}

	private function render_elementor_template( int $template_id ): void {
		if ( ! class_exists( '\Elementor\Plugin' ) || ! $template_id ) return;
		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( absint( $template_id ), false );
	}

	/** Render content for a single repeater item. */
	private function render_item_content( array $item ): void {
		$source = $item['tab_content_source'] ?? 'content';

		switch ( $source ) {
			case 'shortcode':
				$shortcode = trim( $item['tab_shortcode'] ?? '' );
				if ( $shortcode ) {
					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
					echo do_shortcode( $shortcode );
				}
				break;

			case 'template':
				$tpl_id = absint( $item['tab_template_id'] ?? 0 );
				if ( $tpl_id ) {
					echo '<div class="sitsel-tab-template-wrap">';
					$this->render_elementor_template( $tpl_id );
					echo '</div>';
				} else {
					echo '<p class="sitsel-notice">' . esc_html__( 'Please select an Elementor template.', 'softech-addons-for-elementor' ) . '</p>';
				}
				break;

			default:
				echo wp_kses_post( $item['tab_content'] ?? '' );
				break;
		}
	}

	/** Render the accordion toggle icon. */
	private function render_accordion_icon( array $settings ): void {
		$icon_type = $settings['accordion_icon_type'] ?? 'plus_minus';
		if ( 'none' === $icon_type ) return;

		$class = 'sitsel-accordion-icon sitsel-acc-icon-' . esc_attr( str_replace( '_', '-', $icon_type ) );
		echo '<span class="' . esc_attr( $class ) . '" aria-hidden="true">';

		if ( 'custom' === $icon_type ) {
			if ( ! empty( $settings['accordion_icon_custom']['value'] ) ) {
				echo '<span class="sitsel-acc-icon-closed">';
				\Elementor\Icons_Manager::render_icon( $settings['accordion_icon_custom'], [ 'aria-hidden' => 'true' ] );
				echo '</span>';
			}
			if ( ! empty( $settings['accordion_icon_active']['value'] ) ) {
				echo '<span class="sitsel-acc-icon-open">';
				\Elementor\Icons_Manager::render_icon( $settings['accordion_icon_active'], [ 'aria-hidden' => 'true' ] );
				echo '</span>';
			}
		}

		echo '</span>';
	}

	/** Fetch and normalise dynamic posts into a flat array. */
	private function get_dynamic_items( array $settings, string $id_prefix ): array {
		$title_from   = $settings['dynamic_tab_title_source']   ?? 'post_title';
		$content_from = $settings['dynamic_content_source']     ?? 'post_content';
		$title_meta   = $settings['dynamic_tab_title_meta_key'] ?? '';
		$content_meta = $settings['dynamic_content_meta_key']   ?? '';

		$paged      = Softech_Post_Query_Manager::get_paged();
		$query_args = Softech_Post_Query_Manager::build_query_args( $settings, $paged );
		$query_args['post_type']      = $query_args['post_type']      ?: 'post';
		$query_args['post_status']    = 'publish';
		$query_args['posts_per_page'] = ( ! isset( $query_args['posts_per_page'] ) || -1 === (int) $query_args['posts_per_page'] ) ? 6 : $query_args['posts_per_page'];

		$query = new \WP_Query( $query_args );
		if ( ! $query->have_posts() ) {
			wp_reset_postdata();
			return [];
		}

		update_meta_cache( 'post', wp_list_pluck( $query->posts, 'ID' ) );

		$items = [];
		$index = 0;

		while ( $query->have_posts() ) {
			$query->the_post();
			$post = get_post();

			// Title
			$title = ( 'meta' === $title_from && $title_meta )
				? ( get_post_meta( $post->ID, $title_meta, true ) ?: get_the_title() )
				: get_the_title();

			// Content
			if ( 'meta' === $content_from && $content_meta ) {
				$content = wpautop( get_post_meta( $post->ID, $content_meta, true ) );
			} elseif ( 'post_excerpt' === $content_from ) {
				$content = wpautop( get_the_excerpt() );
			} else {
				$is_elementor = class_exists( '\Elementor\Plugin' ) &&
				                \Elementor\Plugin::instance()->db->is_built_with_elementor( $post->ID );
				$is_current   = ( $post->ID === get_the_ID() );

				if ( $is_elementor && ! $is_current ) {
					try {
						$content = \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $post->ID, false );
						if ( empty( trim( $content ) ) ) {
							$content = apply_filters( 'the_content', get_the_content() );
						}
					} catch ( \Exception $e ) {
						$content = apply_filters( 'the_content', get_the_content() );
					}
				} else {
					$content = apply_filters( 'the_content', get_the_content() );
				}
			}

			$items[] = [
				'id'      => $id_prefix . $index,
				'title'   => $title,
				'content' => $content,
			];
			$index++;
		}

		wp_reset_postdata();
		return $items;
	}

	// =========================================================================
	// RENDER
	// =========================================================================

	protected function render() {
		$settings     = $this->get_settings_for_display();
		$display_mode = $settings['display_mode']        ?? 'tabs';
		$source_type  = $settings['content_source_type'] ?? 'manual';
		$is_dynamic   = ( 'dynamic' === $source_type );

		if ( 'accordion' === $display_mode ) {
			$is_dynamic ? $this->render_dynamic_accordion( $settings ) : $this->render_manual_accordion( $settings );
		} else {
			$is_dynamic ? $this->render_dynamic_tabs( $settings ) : $this->render_manual_tabs( $settings );
		}
	}

	// ── Tabs Wrapper Attributes ────────────────────────────────────────────────

	private function tabs_wrapper_atts( array $settings, string $widget_id ): string {
		$layout     = $settings['tab_layout']             ?? 'horizontal';
		$behavior   = $settings['breakpoint_behavior']    ?? 'scroll';
		$breakpoint = $settings['responsive_breakpoint']  ?? '767';
     	$h_scroll = '';
        $vertical_pos = ( 'vertical' === $layout )? ' sitsel-vertical-' . esc_attr( $settings['vertical_tab_position'] ?? 'left' ) : '';

		$autoplay  = $settings['autoplay']              ?? '';
		$interval  = $settings['autoplay_interval']     ?? 4000;
		$pause     = $settings['autoplay_pause_on_hover'] ?? 'yes';

		return sprintf(
			'class="sitsel-tabs-wrapper sitsel-layout-%s%s%s" id="sitsel-tabs-%s" ' .
			'data-breakpoint="%s" data-breakpoint-behavior="%s" ' .
			'data-autoplay="%s" data-autoplay-interval="%s" data-autoplay-pause="%s"',
	    	esc_attr( $layout ),
            esc_attr( $h_scroll ),
            esc_attr( $vertical_pos ),
			esc_attr( $widget_id ),
			esc_attr( $breakpoint ),
			esc_attr( $behavior ),
			esc_attr( $autoplay ),
			esc_attr( $interval ),
			esc_attr( $pause )
		);
	}

	// ── Manual Tabs ───────────────────────────────────────────────────────────

	private function render_manual_tabs( array $settings ): void {
		$tabs          = $settings['tabs']              ?? [];
		$icon_position = $settings['tab_icon_position'] ?? 'left';
		$widget_id     = $this->get_id();

		if ( empty( $tabs ) ) return;
		?>
		<div <?php echo $this->tabs_wrapper_atts( $settings, $widget_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
			<div class="sitsel-tabs-nav" role="tablist">
				<?php foreach ( $tabs as $index => $tab ) :
					$tab_id   = 'sitsel-tab-' . $widget_id . '-' . $index;
					$is_first = ( 0 === $index );
					$has_icon = ! empty( $tab['tab_icon']['value'] );
					$icon_pos = $has_icon ? $icon_position : 'left';
				?>
					<button class="sitsel-tab-btn<?php echo $is_first ? ' sitsel-active' : ''; ?> sitsel-icon-<?php echo esc_attr( $icon_pos ); ?>"
					        role="tab"
					        data-tab="<?php echo esc_attr( $tab_id ); ?>"
					        aria-controls="<?php echo esc_attr( $tab_id ); ?>"
					        aria-selected="<?php echo $is_first ? 'true' : 'false'; ?>"
					        id="btn-<?php echo esc_attr( $tab_id ); ?>">

						<?php if ( $has_icon && 'right' !== $icon_position ) : ?>
							<span class="sitsel-tab-icon" aria-hidden="true">
								<?php \Elementor\Icons_Manager::render_icon( $tab['tab_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</span>
						<?php endif; ?>

						<?php if ( 'top' === $icon_position && $has_icon ) : ?>
							</span><?php // close icon, open label — icon-top needs column flex ?>
						<?php endif; ?>

						<span class="sitsel-tab-label"><?php echo esc_html( $tab['tab_title'] ); ?></span>

						<?php if ( $has_icon && 'right' === $icon_position ) : ?>
							<span class="sitsel-tab-icon" aria-hidden="true">
								<?php \Elementor\Icons_Manager::render_icon( $tab['tab_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</span>
						<?php endif; ?>
					</button>
				<?php endforeach; ?>
			</div>

			<div class="sitsel-tabs-content-wrap">
				<?php foreach ( $tabs as $index => $tab ) :
					$tab_id   = 'sitsel-tab-' . $widget_id . '-' . $index;
					$is_first = ( 0 === $index );
				?>
					<div class="sitsel-tab-content<?php echo $is_first ? ' sitsel-active' : ''; ?>"
					     id="<?php echo esc_attr( $tab_id ); ?>"
					     role="tabpanel"
					     aria-labelledby="btn-<?php echo esc_attr( $tab_id ); ?>">
						<?php $this->render_item_content( $tab ); ?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

	// ── Manual Accordion ─────────────────────────────────────────────────────

	private function render_manual_accordion( array $settings ): void {
		$tabs      = $settings['tabs']                    ?? [];
		$widget_id = $this->get_id();

		if ( empty( $tabs ) ) return;

		$this->render_accordion_wrapper_open( $settings, $widget_id );

		foreach ( $tabs as $index => $tab ) {
			$item_id = 'sitsel-acc-' . $widget_id . '-' . $index;
			$is_open = $this->resolve_accordion_open_state( $settings, $index );
	     	$this->render_accordion_item_open( $settings, $item_id, $tab['tab_title'], $is_open, $tab['tab_icon'] ?? [] );
			$this->render_item_content( $tab );
			$this->render_accordion_item_close();
		}

		$this->render_accordion_wrapper_close();
	}

	// ── Dynamic Tabs ─────────────────────────────────────────────────────────

	private function render_dynamic_tabs( array $settings ): void {
		$widget_id = $this->get_id();
		$items     = $this->get_dynamic_items( $settings, 'sitsel-tab-' . $widget_id . '-' );

		if ( empty( $items ) ) {
			echo '<p class="sitsel-notice">' . esc_html( $settings['not_found_text'] ?? __( 'No posts found.', 'softech-addons-for-elementor' ) ) . '</p>';
			return;
		}
		?>
		<div <?php echo $this->tabs_wrapper_atts( $settings, $widget_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
			<div class="sitsel-tabs-nav" role="tablist">
				<?php foreach ( $items as $idx => $item ) :
					$is_first = ( 0 === $idx );
				?>
					<button class="sitsel-tab-btn<?php echo $is_first ? ' sitsel-active' : ''; ?>"
					        role="tab"
					        data-tab="<?php echo esc_attr( $item['id'] ); ?>"
					        aria-controls="<?php echo esc_attr( $item['id'] ); ?>"
					        aria-selected="<?php echo $is_first ? 'true' : 'false'; ?>"
					        id="btn-<?php echo esc_attr( $item['id'] ); ?>">
						<span class="sitsel-tab-label"><?php echo esc_html( $item['title'] ); ?></span>
					</button>
				<?php endforeach; ?>
			</div>

			<div class="sitsel-tabs-content-wrap">
				<?php foreach ( $items as $idx => $item ) :
					$is_first = ( 0 === $idx );
				?>
					<div class="sitsel-tab-content<?php echo $is_first ? ' sitsel-active' : ''; ?>"
					     id="<?php echo esc_attr( $item['id'] ); ?>"
					     role="tabpanel"
					     aria-labelledby="btn-<?php echo esc_attr( $item['id'] ); ?>">
						<?php
						// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
						echo $item['content'];
						?>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

	// ── Dynamic Accordion ────────────────────────────────────────────────────

	private function render_dynamic_accordion( array $settings ): void {
		$widget_id = $this->get_id();
		$items     = $this->get_dynamic_items( $settings, 'sitsel-acc-' . $widget_id . '-' );

		if ( empty( $items ) ) {
			echo '<p class="sitsel-notice">' . esc_html( $settings['not_found_text'] ?? __( 'No posts found.', 'softech-addons-for-elementor' ) ) . '</p>';
			return;
		}

		$this->render_accordion_wrapper_open( $settings, $widget_id );

		foreach ( $items as $idx => $item ) {
			$is_open = $this->resolve_accordion_open_state( $settings, $idx );
			$this->render_accordion_item_open( $settings, $item['id'], $item['title'], $is_open );
			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
			echo $item['content'];
			$this->render_accordion_item_close();
		}

		$this->render_accordion_wrapper_close();
	}

	// ── Shared Accordion Partials ─────────────────────────────────────────────

	private function render_accordion_wrapper_open( array $settings, string $widget_id ): void {
		$allow_multiple = $settings['accordion_allow_multiple']   ?? '';
		$autoplay       = $settings['acc_autoplay']               ?? '';
		$interval       = $settings['acc_autoplay_interval']      ?? 4000;
		$pause          = $settings['acc_autoplay_pause_on_hover'] ?? 'yes';
		?>
		<div class="sitsel-accordion-wrapper"
		     id="sitsel-accordion-<?php echo esc_attr( $widget_id ); ?>"
		     data-multiple="<?php echo esc_attr( $allow_multiple ); ?>"
		     data-autoplay="<?php echo esc_attr( $autoplay ); ?>"
		     data-autoplay-interval="<?php echo esc_attr( $interval ); ?>"
		     data-autoplay-pause="<?php echo esc_attr( $pause ); ?>">
		<?php
	}

	private function render_accordion_wrapper_close(): void {
		echo '</div>';
	}
	private function resolve_accordion_open_state( array $settings, int $index ): bool {
    $mode = $settings['accordion_default_open'] ?? 'first';

    switch ( $mode ) {
        case 'all':
            return true;
        case 'none':
            return false;
        case 'index':
            return ( $index === (int) ( $settings['accordion_open_index'] ?? 0 ) );
        case 'first':
        default:
            return ( 0 === $index );
    }
}

	// Change signature:
private function render_accordion_item_open( array $settings, string $item_id, string $title, bool $is_open, array $icon = [] ): void {
		$icon_type = $settings['accordion_icon_type']     ?? 'plus_minus';
		$icon_pos  = $settings['accordion_icon_position'] ?? 'right';
		?>
		<div class="sitsel-accordion-item<?php echo $is_open ? ' sitsel-active' : ''; ?>">
			<button class="sitsel-accordion-btn sitsel-acc-icon-pos-<?php echo esc_attr( $icon_pos ); ?>"
			        aria-expanded="<?php echo $is_open ? 'true' : 'false'; ?>"
			        aria-controls="<?php echo esc_attr( $item_id ); ?>"
			        id="btn-<?php echo esc_attr( $item_id ); ?>">

				<?php if ( 'none' !== $icon_type && 'left' === $icon_pos ) : ?>
					<?php $this->render_accordion_icon( $settings ); ?>
				<?php endif; ?>
				
				<?php if ( ! empty( $icon['value'] ) ) : ?>
                    <span class="sitsel-accordion-tab-icon" aria-hidden="true">
                        <?php \Elementor\Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true' ] ); ?>
                    </span>
                <?php endif; ?>

				<span class="sitsel-accordion-label"><?php echo esc_html( $title ); ?></span>

				<?php if ( 'none' !== $icon_type && 'right' === $icon_pos ) : ?>
					<?php $this->render_accordion_icon( $settings ); ?>
				<?php endif; ?>

			</button>

			<div class="sitsel-accordion-content"
			     id="<?php echo esc_attr( $item_id ); ?>"
			     role="region"
			     aria-labelledby="btn-<?php echo esc_attr( $item_id ); ?>">
				<div class="sitsel-accordion-content-inner">
		<?php
	}

	private function render_accordion_item_close(): void {
		echo '</div></div></div>';
	}
}