<?php
/**
 * Customer Account Widget - Style Controls (TAB_STYLE)
 *
 * Included via require inside GGM_Commerce_Widget_Customer_Account::register_controls().
 * $this refers to the widget instance.
 *
 * Professional Styling Implementation:
 * - Uses add_responsive_control for spacing, dimensions, and layout controls
 * - Uses add_control for colors and non-responsive properties
 * - Follows three-layer styling architecture
 */

// If this file is called directly, abort.
if (!defined('ABSPATH')) {
    exit;
}

// =========================================================
// Dashboard Container
// =========================================================

$this->start_controls_section(
    'general_style',
    [
        'label' => __('Dashboard Container', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_control(
    'dashboard_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .ggmc-account-dashboard' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'dashboard_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-account-dashboard' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'dashboard_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-account-dashboard',
    ]
);

$this->add_responsive_control(
    'dashboard_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .ggmc-account-dashboard' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'dashboard_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .ggmc-account-dashboard',
    ]
);

$this->add_responsive_control(
    'section_spacing',
    [
        'label' => __('Section Spacing', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 100,
            ],
            'em' => [
                'min' => 0,
                'max' => 10,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .account-welcome' => 'margin-bottom: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .account-tabs' => 'margin-bottom: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .tab-content h3' => 'margin-bottom: {{SIZE}}{{UNIT}};',
        ],
        'separator' => 'before',
    ]
);

$this->end_controls_section();

// =========================================================
// Welcome Section
// =========================================================

$this->start_controls_section(
    'welcome_style',
    [
        'label' => __('Welcome Section', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Background::get_type(),
    [
        'name' => 'welcome_background',
        'label' => __('Background', 'ggm-commerce'),
        'types' => ['classic', 'gradient'],
        'selector' => '{{WRAPPER}} .account-welcome',
    ]
);

$this->add_control(
    'welcome_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .account-welcome h2' => 'color: {{VALUE}};',
            '{{WRAPPER}} .account-welcome p' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'welcome_heading_typography',
        'label' => __('Heading Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .account-welcome h2',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'welcome_text_typography',
        'label' => __('Text Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .account-welcome p',
    ]
);

$this->add_responsive_control(
    'welcome_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors' => [
            '{{WRAPPER}} .account-welcome' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'welcome_margin',
    [
        'label' => __('Margin', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', '%'],
        'selectors' => [
            '{{WRAPPER}} .account-welcome' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'welcome_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .account-welcome' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'welcome_text_align',
    [
        'label' => __('Text Alignment', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::CHOOSE,
        'options' => [
            'left' => [
                'title' => __('Left', 'ggm-commerce'),
                'icon' => 'eicon-text-align-left',
            ],
            'center' => [
                'title' => __('Center', 'ggm-commerce'),
                'icon' => 'eicon-text-align-center',
            ],
            'right' => [
                'title' => __('Right', 'ggm-commerce'),
                'icon' => 'eicon-text-align-right',
            ],
        ],
        'default' => 'center',
        'selectors' => [
            '{{WRAPPER}} .account-welcome' => 'text-align: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Tab Navigation
// =========================================================

$this->start_controls_section(
    'tabs_style',
    [
        'label' => __('Tab Navigation', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_control(
    'tab_nav_background_color',
    [
        'label' => __('Navigation Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-nav' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'tab_nav_padding',
    [
        'label' => __('Navigation Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .tab-nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'tab_gap',
    [
        'label' => __('Tab Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .tab-nav' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'tab_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .tab-link',
    ]
);

// Tab Normal / Hover / Active states
$this->start_controls_tabs('tabs_normal_active');

$this->start_controls_tab(
    'tabs_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'tab_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_button_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'border-bottom-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'tabs_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'tab_hover_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_hover_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_hover_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link:hover' => 'border-bottom-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'tabs_active',
    [
        'label' => __('Active', 'ggm-commerce'),
    ]
);

$this->add_control(
    'tab_active_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link.active' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_active_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link.active' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'tab_active_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-link.active' => 'border-bottom-color: {{VALUE}};',
        ],
    ]
);

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

$this->add_responsive_control(
    'tab_padding',
    [
        'label' => __('Tab Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
        'separator' => 'before',
    ]
);

$this->add_responsive_control(
    'tab_border_width',
    [
        'label' => __('Border Width', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 10,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'border-bottom-width: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'tab_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .tab-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// Tab Content
$this->add_control(
    'tab_content_heading',
    [
        'label' => __('Tab Content', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'tab_content_background',
    [
        'label' => __('Content Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-content' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'tab_content_padding',
    [
        'label' => __('Content Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'tab_content_heading_typography',
        'label' => __('Heading Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .tab-content h3',
    ]
);

$this->add_control(
    'tab_content_heading_color',
    [
        'label' => __('Heading Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .tab-content h3' => 'color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Forms
// =========================================================

$this->start_controls_section(
    'forms_style',
    [
        'label' => __('Forms', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

// Labels
$this->add_control(
    'form_labels_heading',
    [
        'label' => __('Labels', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
    ]
);

$this->add_control(
    'form_label_color',
    [
        'label' => __('Label Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group label' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'form_label_typography',
        'label' => __('Label Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .form-group label',
    ]
);

$this->add_responsive_control(
    'form_label_spacing',
    [
        'label' => __('Label Spacing', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 30,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .form-group label' => 'margin-bottom: {{SIZE}}{{UNIT}};',
        ],
    ]
);

// Inputs
$this->add_control(
    'form_inputs_heading',
    [
        'label' => __('Input Fields', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'form_input_typography',
        'label' => __('Input Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .form-group input, {{WRAPPER}} .form-group select',
    ]
);

$this->add_control(
    'form_input_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'color: {{VALUE}};',
            '{{WRAPPER}} .form-group select' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'form_input_placeholder_color',
    [
        'label' => __('Placeholder Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group input::placeholder' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'form_input_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .form-group select' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'form_input_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .form-group select' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'form_input_focus_color',
    [
        'label' => __('Focus Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .form-group input:focus' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .form-group select:focus' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'form_input_padding',
    [
        'label' => __('Input Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .form-group select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'form_input_border_width',
    [
        'label' => __('Border Width', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 5,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'border-width: {{SIZE}}{{UNIT}}; border-style: solid;',
            '{{WRAPPER}} .form-group select' => 'border-width: {{SIZE}}{{UNIT}}; border-style: solid;',
        ],
    ]
);

$this->add_responsive_control(
    'form_input_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .form-group input' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .form-group select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// Form Layout
$this->add_control(
    'form_layout_heading',
    [
        'label' => __('Form Layout', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_responsive_control(
    'form_row_gap',
    [
        'label' => __('Row Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .form-group' => 'margin-bottom: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'form_column_gap',
    [
        'label' => __('Column Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .form-row' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Buttons
// =========================================================

$this->start_controls_section(
    'buttons_style',
    [
        'label' => __('Buttons', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'button_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} button[class*="btn-"], {{WRAPPER}} .btn-logout, {{WRAPPER}} a[class*="btn-"]',
    ]
);

$this->start_controls_tabs('button_normal_hover');

$this->start_controls_tab(
    'button_normal',
    [
        'label' => __('Normal', 'ggm-commerce'),
    ]
);

$this->add_control(
    'button_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]' => 'color: {{VALUE}};',
            '{{WRAPPER}} .btn-logout' => 'color: {{VALUE}};',
            '{{WRAPPER}} a[class*="btn-"]' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'button_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .btn-logout' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} a[class*="btn-"]' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'button_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} button[class*="btn-"], {{WRAPPER}} .btn-logout, {{WRAPPER}} a[class*="btn-"]',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'button_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} button[class*="btn-"], {{WRAPPER}} .btn-logout, {{WRAPPER}} a[class*="btn-"]',
    ]
);

$this->end_controls_tab();

$this->start_controls_tab(
    'button_hover',
    [
        'label' => __('Hover', 'ggm-commerce'),
    ]
);

$this->add_control(
    'button_hover_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]:hover' => 'color: {{VALUE}};',
            '{{WRAPPER}} .btn-logout:hover' => 'color: {{VALUE}};',
            '{{WRAPPER}} a[class*="btn-"]:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'button_hover_background_color',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]:hover' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .btn-logout:hover' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} a[class*="btn-"]:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'button_hover_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]:hover' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .btn-logout:hover' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} a[class*="btn-"]:hover' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'button_hover_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} button[class*="btn-"]:hover, {{WRAPPER}} .btn-logout:hover, {{WRAPPER}} a[class*="btn-"]:hover',
    ]
);

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

$this->add_responsive_control(
    'button_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .btn-logout' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} a[class*="btn-"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
        'separator' => 'before',
    ]
);

$this->add_responsive_control(
    'button_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} button[class*="btn-"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .btn-logout' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} a[class*="btn-"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// Secondary/Outline Buttons
$this->add_control(
    'secondary_buttons_heading',
    [
        'label' => __('Secondary Buttons', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
        'description' => __('Styles for View Order, Set Default buttons', 'ggm-commerce'),
    ]
);

$this->add_control(
    'secondary_button_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-view-order' => 'color: {{VALUE}};',
            '{{WRAPPER}} .btn-set-default' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'secondary_button_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-view-order' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .btn-set-default' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'secondary_button_hover_text_color',
    [
        'label' => __('Hover Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-view-order:hover' => 'color: {{VALUE}};',
            '{{WRAPPER}} .btn-set-default:hover' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'secondary_button_hover_background',
    [
        'label' => __('Hover Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-view-order:hover' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .btn-set-default:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Orders Table
// =========================================================

$this->start_controls_section(
    'table_style',
    [
        'label' => __('Orders Table', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

// Table Header
$this->add_control(
    'table_header_heading',
    [
        'label' => __('Table Header', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
    ]
);

$this->add_control(
    'table_header_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table th' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_header_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table th' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'table_header_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .orders-table th',
    ]
);

$this->add_responsive_control(
    'table_header_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .orders-table th' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// Table Body
$this->add_control(
    'table_body_heading',
    [
        'label' => __('Table Body', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'table_row_background',
    [
        'label' => __('Row Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table td' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_row_alt_background',
    [
        'label' => __('Alternate Row Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table tbody tr:nth-child(even) td' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_row_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table td' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'table_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .orders-table th' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .orders-table td' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'table_body_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .orders-table td',
    ]
);

$this->add_responsive_control(
    'table_cell_padding',
    [
        'label' => __('Cell Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .orders-table td' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'table_border_width',
    [
        'label' => __('Border Width', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 5,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .orders-table th' => 'border-width: {{SIZE}}{{UNIT}}; border-style: solid;',
            '{{WRAPPER}} .orders-table td' => 'border-width: {{SIZE}}{{UNIT}}; border-style: solid;',
        ],
    ]
);

// Order Status Badges
$this->add_control(
    'order_status_heading',
    [
        'label' => __('Order Status Badges', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'order_status_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .order-status',
    ]
);

$this->add_responsive_control(
    'order_status_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .order-status' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'order_status_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .order-status' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Address Cards
// =========================================================

$this->start_controls_section(
    'address_cards_style',
    [
        'label' => __('Address Cards', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

// Section Header
$this->add_control(
    'address_section_heading',
    [
        'label' => __('Section Header', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'address_section_title_typography',
        'label' => __('Title Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .address-type-header h4',
    ]
);

$this->add_control(
    'address_section_title_color',
    [
        'label' => __('Title Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .address-type-header h4' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'address_section_spacing',
    [
        'label' => __('Section Spacing', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 80,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .address-type-section' => 'margin-bottom: {{SIZE}}{{UNIT}};',
        ],
    ]
);

// Card Styling
$this->add_control(
    'address_card_heading',
    [
        'label' => __('Card Styling', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'address_card_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .address-card' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'address_card_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .address-card',
    ]
);

$this->add_responsive_control(
    'address_card_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .address-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'address_card_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .address-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'address_card_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .address-card',
    ]
);

$this->add_responsive_control(
    'address_card_gap',
    [
        'label' => __('Card Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .address-list' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

// Card Header
$this->add_control(
    'address_card_header_heading',
    [
        'label' => __('Card Header', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'address_card_title_typography',
        'label' => __('Title Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .address-card-header h5',
    ]
);

$this->add_control(
    'address_card_title_color',
    [
        'label' => __('Title Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .address-card-header h5' => 'color: {{VALUE}};',
        ],
    ]
);

// Default Badge
$this->add_control(
    'default_badge_heading',
    [
        'label' => __('Default Badge', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'default_badge_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge-default' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'default_badge_text_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .badge-default' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'default_badge_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .badge-default' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'default_badge_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .badge-default' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

// Card Body
$this->add_control(
    'address_card_body_heading',
    [
        'label' => __('Card Body', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'address_card_body_color',
    [
        'label' => __('Text Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .address-card-body' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'address_card_body_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .address-card-body',
    ]
);

// Action Buttons
$this->add_control(
    'address_action_buttons_heading',
    [
        'label' => __('Action Buttons', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'address_action_button_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-edit-address' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .btn-delete-address' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'address_action_button_border_color',
    [
        'label' => __('Border Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-edit-address' => 'border-color: {{VALUE}};',
            '{{WRAPPER}} .btn-delete-address' => 'border-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'address_action_button_icon_color',
    [
        'label' => __('Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-edit-address .dashicons' => 'color: {{VALUE}};',
            '{{WRAPPER}} .btn-delete-address .dashicons' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'address_delete_hover_background',
    [
        'label' => __('Delete Hover Background', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-delete-address:hover' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_control(
    'address_delete_hover_color',
    [
        'label' => __('Delete Hover Icon Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .btn-delete-address:hover .dashicons' => 'color: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();

// =========================================================
// Login/Register Forms
// =========================================================

$this->start_controls_section(
    'auth_forms_style',
    [
        'label' => __('Login/Register Forms', 'ggm-commerce'),
        'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
);

// Container Layout
$this->add_control(
    'auth_container_heading',
    [
        'label' => __('Container Layout', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
    ]
);

$this->add_responsive_control(
    'auth_forms_gap',
    [
        'label' => __('Forms Gap', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .auth-forms-container' => 'gap: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'auth_forms_max_width',
    [
        'label' => __('Max Width', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', '%'],
        'range' => [
            'px' => [
                'min' => 400,
                'max' => 1200,
            ],
            '%' => [
                'min' => 50,
                'max' => 100,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .auth-forms-container' => 'max-width: {{SIZE}}{{UNIT}};',
        ],
    ]
);

// Form Container
$this->add_control(
    'auth_form_container_heading',
    [
        'label' => __('Form Container', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_control(
    'auth_form_background',
    [
        'label' => __('Background Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .login-form-container' => 'background-color: {{VALUE}};',
            '{{WRAPPER}} .register-form-container' => 'background-color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'auth_form_padding',
    [
        'label' => __('Padding', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em'],
        'selectors' => [
            '{{WRAPPER}} .login-form-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .register-form-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Border::get_type(),
    [
        'name' => 'auth_form_border',
        'label' => __('Border', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .login-form-container, {{WRAPPER}} .register-form-container',
    ]
);

$this->add_responsive_control(
    'auth_form_border_radius',
    [
        'label' => __('Border Radius', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', '%'],
        'selectors' => [
            '{{WRAPPER}} .login-form-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            '{{WRAPPER}} .register-form-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
        ],
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Box_Shadow::get_type(),
    [
        'name' => 'auth_form_box_shadow',
        'label' => __('Box Shadow', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .login-form-container, {{WRAPPER}} .register-form-container',
    ]
);

// Form Headings
$this->add_control(
    'auth_form_title_heading',
    [
        'label' => __('Form Titles', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::HEADING,
        'separator' => 'before',
    ]
);

$this->add_group_control(
    \Elementor\Group_Control_Typography::get_type(),
    [
        'name' => 'auth_form_title_typography',
        'label' => __('Typography', 'ggm-commerce'),
        'selector' => '{{WRAPPER}} .login-form-container h3, {{WRAPPER}} .register-form-container h3',
    ]
);

$this->add_control(
    'auth_form_title_color',
    [
        'label' => __('Title Color', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .login-form-container h3' => 'color: {{VALUE}};',
            '{{WRAPPER}} .register-form-container h3' => 'color: {{VALUE}};',
        ],
    ]
);

$this->add_responsive_control(
    'auth_form_title_spacing',
    [
        'label' => __('Title Spacing', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::SLIDER,
        'size_units' => ['px', 'em'],
        'range' => [
            'px' => [
                'min' => 0,
                'max' => 50,
            ],
        ],
        'selectors' => [
            '{{WRAPPER}} .login-form-container h3' => 'margin-bottom: {{SIZE}}{{UNIT}};',
            '{{WRAPPER}} .register-form-container h3' => 'margin-bottom: {{SIZE}}{{UNIT}};',
        ],
    ]
);

$this->add_responsive_control(
    'auth_form_title_align',
    [
        'label' => __('Title Alignment', 'ggm-commerce'),
        'type' => \Elementor\Controls_Manager::CHOOSE,
        'options' => [
            'left' => [
                'title' => __('Left', 'ggm-commerce'),
                'icon' => 'eicon-text-align-left',
            ],
            'center' => [
                'title' => __('Center', 'ggm-commerce'),
                'icon' => 'eicon-text-align-center',
            ],
            'right' => [
                'title' => __('Right', 'ggm-commerce'),
                'icon' => 'eicon-text-align-right',
            ],
        ],
        'default' => 'center',
        'selectors' => [
            '{{WRAPPER}} .login-form-container h3' => 'text-align: {{VALUE}};',
            '{{WRAPPER}} .register-form-container h3' => 'text-align: {{VALUE}};',
        ],
    ]
);

$this->end_controls_section();
