<?php
/**
 * Design Settings Tab - Comprehensive Wheel-Type Specific Settings
 *
 * @package Spin_Wheel
 */

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

// Variables in this template are scoped to the including render method (not truly
// global); the plugin's established "swp" prefix is part of its data schema and hook API.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals

$swp_wheel_design_type = isset($wheel_type) ? $wheel_type : 'big_wheel';
?>

<div class="swp-settings-section">
    <h2 class="swp-section-title">
        <span class="dashicons dashicons-art"></span>
        <?php esc_html_e('Wheel Design & Styling', 'spin-wheel'); ?>
    </h2>

    <!-- Preset Styles Section -->
    <div class="swp-accordion-item active">
        <div class="swp-accordion-header" data-target="preset-styles-settings">
            <h3>
                <span class="dashicons dashicons-admin-appearance"></span>
                <?php esc_html_e('Preset Styles', 'spin-wheel'); ?>
            </h3>
            <span class="swp-accordion-icon">
                <span class="dashicons dashicons-arrow-down-alt2"></span>
            </span>
        </div>
        <div class="swp-accordion-body" id="preset-styles-settings">
            <p class="swp-preset-description">
                <?php esc_html_e('Choose a pre-designed style to quickly customize your wheel. Each preset includes colors, sizes, fonts, animations, and image positioning. You can add your own images after applying. Presets listed here match the wheel type selected in the General tab (big wheel vs nine-square grid).', 'spin-wheel'); ?>
            </p>

            <div class="swp-preset-grid">
                <!-- Default (Free) — all layout types -->
                <div class="swp-preset-card default" data-preset="default" data-swp-preset-layout="any">
                    <span class="swp-preset-checkmark dashicons dashicons-yes"></span>
                    <div class="swp-preset-preview swp-preset-preview--default">
                        <div class="swp-preset-default-thumb swp-preset-default-thumb--big-wheel"
                            <?php echo ($swp_wheel_design_type === 'nine_squares') ? 'style="display:none;"' : ''; ?>
                            role="img"
                            aria-label="<?php echo esc_attr__('Default big wheel: warm orange wheel preview', 'spin-wheel'); ?>">
                            <img src="<?php echo esc_url(SPIN_WHEEL_URL . 'assets/images/default-preview.png'); ?>"
                                alt="" class="swp-preset-image">
                            <img class="swp-preview-btn"
                                src="<?php echo esc_url(SPIN_WHEEL_URL . 'assets/images/default-preset-arrow.png'); ?>"
                                alt="">
                        </div>
                        <div class="swp-preset-default-thumb swp-preset-default-thumb--nine-squares"
                            <?php echo ($swp_wheel_design_type === 'nine_squares') ? '' : 'style="display:none;"'; ?>
                            role="img"
                            aria-label="<?php echo esc_attr__('Default nine-square grid: square cells and center spin', 'spin-wheel'); ?>">
                            <div class="swp-preset-default-grid-stage">
                                <div class="swp-preset-default-grid-mock" aria-hidden="true">
                                    <?php for ($swp_i = 0; $swp_i < 9; $swp_i++) : ?>
                                        <span class="<?php echo (4 === $swp_i) ? 'is-center' : ''; ?>">
                                            <?php
                                            if (4 === $swp_i) {
                                                echo esc_html(_x('SPIN', 'Default preset center cell in thumbnail', 'spin-wheel'));
                                            }
                                            ?>
                                        </span>
                                    <?php endfor; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swp-preset-info">
                        <h4><?php esc_html_e('Default', 'spin-wheel'); ?></h4>
                        <p><?php esc_html_e('Classic orange for the big nine-square grid. Note: It will be include maximum first 8 prizes.', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <!-- External Spin — lucky-canvas-style blocks + HTML spin below grid (preset key: grid2x3) -->
                <div class="swp-preset-card swp-preset-grid-2x3" data-preset="grid2x3" data-swp-preset-layout="nine_squares">
                    <span class="swp-preset-checkmark dashicons dashicons-yes"></span>
                    <div class="swp-preset-preview swp-preset-preview--grid-2x3">
                        <div class="swp-preset-grid-2x3-mock" role="img"
                            aria-label="<?php echo esc_attr__('External Spin: grid of prize cells', 'spin-wheel'); ?>">
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                            <span class="swp-preset-grid-2x3-mock__cell"></span>
                        </div>
                        <div class="swp-preset-grid-2x3-mock__go" aria-hidden="true"><?php echo esc_html(_x('SPIN', 'External Spin preset thumbnail', 'spin-wheel')); ?></div>
                    </div>
                    <div class="swp-preset-info">
                        <h4><?php esc_html_e('External Spin', 'spin-wheel'); ?></h4>
                        <p><?php esc_html_e('Prize grid in a frame; spin sits on its own button below the cells, not inside them.', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <!-- Ring Grid — official 3×3 LuckyGrid ring (eight cells + center button) -->
                <div class="swp-preset-card swp-preset-ring-grid" data-preset="ringGrid" data-swp-preset-layout="nine_squares">
                    <span class="swp-preset-checkmark dashicons dashicons-yes"></span>
                    <div class="swp-preset-preview swp-preset-preview--ring-grid">
                        <div class="swp-preset-ring-grid-mock" role="img"
                            aria-label="<?php echo esc_attr__('Ring Grid: eight prizes around a center spin cell', 'spin-wheel'); ?>">
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell swp-preset-ring-grid-mock__cell--btn"><?php echo esc_html(_x('SPIN', 'Ring Grid preset center thumbnail', 'spin-wheel')); ?></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                            <span class="swp-preset-ring-grid-mock__cell"></span>
                        </div>
                    </div>
                    <div class="swp-preset-info">
                        <h4><?php esc_html_e('Ring Grid', 'spin-wheel'); ?></h4>
                        <p><?php esc_html_e('Prize ring around the grid with spin in the center cell. Note: It will be include maximum first 8 prizes.', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <?php
                /**
                 * Pro injects its preset-style cards here when the Spin Wheel Pro
                 * add-on is active.
                 *
                 * @param array $settings Per-wheel settings.
                 */
                do_action('swp_design_preset_cards', $settings);
                ?>

                <!-- Circle Style — radial preview: center control + ring of prize slots (matches live circle layout) -->
                <div class="swp-preset-card swp-preset-circle-style" data-preset="circleStyle" data-swp-preset-layout="nine_squares">
                    <span class="swp-preset-checkmark dashicons dashicons-yes"></span>
                    <div class="swp-preset-preview swp-preset-preview--circle-style">
                        <div class="swp-preset-circle-thumb" role="img"
                            aria-label="<?php echo esc_attr__('Circle Style: circular dial with prize slots around a center start control', 'spin-wheel'); ?>">
                            <div class="swp-preset-circle-dial" aria-hidden="true">
                                <div class="swp-preset-circle-dial__orbit">
                                    <?php for ($swp_i = 0; $swp_i < 12; $swp_i++) : ?>
                                        <span class="swp-preset-circle-dial__slot" style="--swp-slot-i: <?php echo (int) $swp_i; ?>"></span>
                                    <?php endfor; ?>
                                </div>
                                <div class="swp-preset-circle-dial__center">
                                    <?php echo esc_html(_x('SPIN', 'Circle Style preset center control in thumbnail', 'spin-wheel')); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swp-preset-info">
                        <h4><?php esc_html_e('Circle Style', 'spin-wheel'); ?></h4>
                        <p><?php esc_html_e('Soft periwinkle with round prize slots around a round spin control; clean flat style.', 'spin-wheel'); ?></p>
                    </div>
                </div>

            </div>

            <!-- Hidden field to store active preset for persistence -->
            <input type="hidden" name="swp_styles[active_preset]" id="swp_active_preset"
                value="<?php echo esc_attr($styles['active_preset'] ?? 'default'); ?>">

            <!-- Default cell fill for Ring Grid preset (LuckyGrid defaultStyle.background) -->
            <input type="hidden" name="swp_styles[grid_default_background]" id="swp_grid_default_background"
                value="<?php echo esc_attr($styles['grid_default_background'] ?? ''); ?>">

            <!-- Hidden fields for blocks and buttons configuration (set by presets) -->
            <input type="hidden" name="swp_styles[blocks_config]" id="swp_blocks_config"
                value="<?php echo esc_attr($styles['blocks_config'] ?? ''); ?>">
            <input type="hidden" name="swp_styles[buttons_config]" id="swp_buttons_config"
                value="<?php echo esc_attr($styles['buttons_config'] ?? ''); ?>">
        </div>
    </div>
    <!-- End Preset Styles -->

    <!-- Accordion Container -->
    <div class="swp-accordion-container">

        <!-- Common Settings (All Wheel Types) -->
        <div class="swp-accordion-item swp-design-common active">
            <div class="swp-accordion-header" data-target="basic-settings">
                <h3>
                    <span class="dashicons dashicons-admin-settings"></span>
                    <?php esc_html_e('Basic Settings', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="basic-settings">

                <!-- Size for Big Wheel (Circular) -->
                <div class="swp-form-row swp-size-big-wheel" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <label class="swp-label" for="swp_size">
                        <?php esc_html_e('Size (px)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" id="swp_size" value="<?php echo esc_attr($styles['width'] ?? 460); ?>"
                            class="swp-input swp-trigger-preview" min="200" max="800" step="10">
                        <input type="range" class="swp-range-slider" min="200" max="800" step="10"
                            value="<?php echo esc_attr($styles['width'] ?? 460); ?>" data-target="#swp_size">
                        <span class="swp-slider-value"><?php echo esc_attr($styles['width'] ?? 460); ?>px</span>
                    </div>
                    <p class="swp-hint"><?php esc_html_e('Diameter of the circular wheel', 'spin-wheel'); ?></p>
                </div>

                <!-- Width & Height for Other Wheels -->
                <div class="swp-size-other-wheels" <?php echo ($swp_wheel_design_type === 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_width">
                            <?php esc_html_e('Width (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[width]" id="swp_width"
                                value="<?php echo esc_attr($styles['width'] ?? 460); ?>"
                                class="swp-input swp-trigger-preview" min="200" max="800" step="10">
                            <input type="range" class="swp-range-slider" min="200" max="800" step="10"
                                value="<?php echo esc_attr($styles['width'] ?? 460); ?>" data-target="#swp_width">
                            <span class="swp-slider-value"><?php echo esc_attr($styles['width'] ?? 460); ?>px</span>
                        </div>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_height">
                            <?php esc_html_e('Height (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[height]" id="swp_height"
                                value="<?php echo esc_attr($styles['height'] ?? 460); ?>"
                                class="swp-input swp-trigger-preview" min="200" max="800" step="10">
                            <input type="range" class="swp-range-slider" min="200" max="800" step="10"
                                value="<?php echo esc_attr($styles['height'] ?? 460); ?>" data-target="#swp_height">
                            <span class="swp-slider-value"><?php echo esc_attr($styles['height'] ?? 460); ?>px</span>
                        </div>
                    </div>
                </div>

                <!-- Hidden inputs: only submitted for big wheel (see updateDesignSections). Otherwise they duplicate swp_width/swp_height and overwrite saved dimensions. -->
                <input type="hidden" name="swp_styles[width]" id="swp_hidden_width"
                    value="<?php echo esc_attr($styles['width'] ?? 460); ?>"
                    <?php echo ($swp_wheel_design_type === 'big_wheel') ? '' : 'disabled'; ?>>
                <input type="hidden" name="swp_styles[height]" id="swp_hidden_height"
                    value="<?php echo esc_attr($styles['height'] ?? 460); ?>"
                    <?php echo ($swp_wheel_design_type === 'big_wheel') ? '' : 'disabled'; ?>>

                <div class="swp-form-row" data-visible-on="default">
                    <label class="swp-label" for="swp_background_color">
                        <?php esc_html_e('Background Color', 'spin-wheel'); ?>
                    </label>
                    <input type="text" name="swp_styles[background_color]" id="swp_background_color"
                        value="<?php echo esc_attr($styles['background_color'] ?? '#ffffff'); ?>"
                        class="swp-color-picker swp-trigger-preview">
                </div>

                <div class="swp-form-row" data-visible-on="default">
                    <label class="swp-label" for="swp_padding">
                        <?php esc_html_e('Padding (px)', 'spin-wheel'); ?>
                    </label>
                    <input type="number" name="swp_styles[padding]" id="swp_padding"
                        value="<?php echo esc_attr($styles['padding'] ?? 0); ?>" class="swp-input swp-trigger-preview"
                        min="0" max="100" step="1">
                    <p class="swp-hint"><?php esc_html_e('Inner padding around the wheel content', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-form-row swp-design-field-big-wheel" data-visible-off="default" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <label class="swp-label" for="swp_wheel_border_padding">
                        <?php esc_html_e('Wheel Border Padding (px)', 'spin-wheel'); ?>
                    </label>
                    <input type="number" name="swp_styles[wheel_border_padding]" id="swp_wheel_border_padding"
                        value="<?php echo esc_attr($styles['wheel_border_padding'] ?? 62); ?>"
                        class="swp-input swp-trigger-preview" min="0" max="200" step="1">
                    <p class="swp-hint">
                        <?php esc_html_e('Padding inside the wheel border (for Classic preset)', 'spin-wheel'); ?>
                    </p>
                </div>

            </div>
        </div>

        <!-- Big Wheel Specific Settings -->
        <div class="swp-accordion-item swp-design-big-wheel swp-wheel-specific" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="big-wheel-config">
                <h3>
                    <span class="dashicons dashicons-chart-pie"></span>
                    <?php esc_html_e('Big Wheel Configuration', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="big-wheel-config">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_wheel_gutter">
                            <?php esc_html_e('Prize Gap (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[gutter]" id="swp_wheel_gutter"
                            value="<?php echo esc_attr($styles['gutter'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="20" step="1">
                        <p class="swp-hint"><?php esc_html_e('Gap between prize segments', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_wheel_offset_degree">
                            <?php esc_html_e('Offset Angle (degrees)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[offset_degree]" id="swp_wheel_offset_degree"
                            value="<?php echo esc_attr($styles['offset_degree'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="-360" max="360" step="1">
                        <p class="swp-hint"><?php esc_html_e('Rotate the starting position of the wheel', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_wheel_stop_range">
                        <?php esc_html_e('Stop Range', 'spin-wheel'); ?>
                    </label>
                    <input type="number" name="swp_styles[stop_range]" id="swp_wheel_stop_range"
                        value="<?php echo esc_attr($styles['stop_range'] ?? 0); ?>"
                        class="swp-input swp-trigger-preview" min="0" max="1" step="0.01">
                    <p class="swp-hint">
                        <?php esc_html_e('Pointer stop position within prize segment (0=start, 1=end)', 'spin-wheel'); ?>
                    </p>
                </div>

            </div>
        </div>

        <!-- Prize Label Typography Settings -->
        <div class="swp-accordion-item swp-design-common">
            <div class="swp-accordion-header" data-target="prize-label-typography">
                <h3>
                    <span class="dashicons dashicons-editor-textcolor"></span>
                    <?php esc_html_e('Prize Label Typography', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="prize-label-typography">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_prize_font_size">
                            <?php esc_html_e('Font Size (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[prize_font_size]" id="swp_prize_font_size"
                                value="<?php echo esc_attr($styles['prize_font_size'] ?? 16); ?>"
                                class="swp-input swp-trigger-preview" min="8" max="32" step="1">
                            <input type="range" class="swp-range-slider" min="8" max="32" step="1"
                                value="<?php echo esc_attr($styles['prize_font_size'] ?? 16); ?>"
                                data-target="#swp_prize_font_size">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['prize_font_size'] ?? 16); ?>px</span>
                        </div>
                        <p class="swp-hint"><?php esc_html_e('Font size for prize labels on the wheel', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_prize_font_color">
                            <?php esc_html_e('Font Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[prize_font_color]" id="swp_prize_font_color"
                            value="<?php echo esc_attr($styles['prize_font_color'] ?? '#000000'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                        <p class="swp-hint"><?php esc_html_e('Text color for prize labels', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_font_weight">
                        <?php esc_html_e('Font Weight', 'spin-wheel'); ?>
                    </label>
                    <select name="swp_styles[prize_font_weight]" id="swp_prize_font_weight"
                        class="swp-select swp-trigger-preview">
                        <option value="300" <?php selected($styles['prize_font_weight'] ?? '600', '300'); ?>>
                            <?php esc_html_e('Light (300)', 'spin-wheel'); ?>
                        </option>
                        <option value="400" <?php selected($styles['prize_font_weight'] ?? '600', '400'); ?>>
                            <?php esc_html_e('Normal (400)', 'spin-wheel'); ?>
                        </option>
                        <option value="500" <?php selected($styles['prize_font_weight'] ?? '600', '500'); ?>>
                            <?php esc_html_e('Medium (500)', 'spin-wheel'); ?>
                        </option>
                        <option value="600" <?php selected($styles['prize_font_weight'] ?? '600', '600'); ?>>
                            <?php esc_html_e('Semi-Bold (600)', 'spin-wheel'); ?>
                        </option>
                        <option value="700" <?php selected($styles['prize_font_weight'] ?? '', '700'); ?>>
                            <?php esc_html_e('Bold (700)', 'spin-wheel'); ?>
                        </option>
                        <option value="800" <?php selected($styles['prize_font_weight'] ?? '', '800'); ?>>
                            <?php esc_html_e('Extra Bold (800)', 'spin-wheel'); ?>
                        </option>
                    </select>
                    <p class="swp-hint"><?php esc_html_e('Text weight for prize labels', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_line_height">
                        <?php esc_html_e('Line Height (px)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" name="swp_styles[prize_line_height]" id="swp_prize_line_height"
                            value="<?php echo esc_attr($styles['prize_line_height'] ?? 14); ?>"
                            class="swp-input swp-trigger-preview" min="8" max="40" step="1">
                        <input type="range" class="swp-range-slider" min="8" max="40" step="1"
                            value="<?php echo esc_attr($styles['prize_line_height'] ?? 14); ?>"
                            data-target="#swp_prize_line_height">
                        <span
                            class="swp-slider-value"><?php echo esc_attr($styles['prize_line_height'] ?? 14); ?>px</span>
                    </div>
                    <p class="swp-hint"><?php esc_html_e('Line height for multi-line prize labels', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-design-field-big-wheel" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_prize_text_rotation">
                            <?php esc_html_e('Text Rotation (degrees)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[prize_text_rotation]" id="swp_prize_text_rotation"
                                value="<?php echo esc_attr($styles['prize_text_rotation'] ?? 0); ?>"
                                class="swp-input swp-trigger-preview" min="-180" max="180" step="1">
                            <input type="range" class="swp-range-slider" min="-180" max="180" step="1"
                                value="<?php echo esc_attr($styles['prize_text_rotation'] ?? 0); ?>"
                                data-target="#swp_prize_text_rotation">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['prize_text_rotation'] ?? 0); ?>°</span>
                        </div>
                        <p class="swp-hint"><?php esc_html_e('Rotate prize label text (positive = clockwise, negative = counter-clockwise)', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-field-row-group">
                        <div class="swp-form-row">
                            <label class="swp-label" for="swp_prize_text_offset_x">
                                <?php esc_html_e('Text X Offset (px)', 'spin-wheel'); ?>
                            </label>
                            <div class="swp-input-with-slider-inline">
                                <input type="number" name="swp_styles[prize_text_offset_x]" id="swp_prize_text_offset_x"
                                    value="<?php echo esc_attr($styles['prize_text_offset_x'] ?? 0); ?>"
                                    class="swp-input swp-trigger-preview" min="-100" max="100" step="1">
                                <input type="range" class="swp-range-slider" min="-100" max="100" step="1"
                                    value="<?php echo esc_attr($styles['prize_text_offset_x'] ?? 0); ?>"
                                    data-target="#swp_prize_text_offset_x">
                                <span
                                    class="swp-slider-value"><?php echo esc_attr($styles['prize_text_offset_x'] ?? 0); ?>px</span>
                            </div>
                            <p class="swp-hint"><?php esc_html_e('Horizontal position offset (positive = right, negative = left)', 'spin-wheel'); ?></p>
                        </div>

                        <div class="swp-form-row">
                            <label class="swp-label" for="swp_prize_text_offset_y">
                                <?php esc_html_e('Text Y Offset (px)', 'spin-wheel'); ?>
                            </label>
                            <div class="swp-input-with-slider-inline">
                                <input type="number" name="swp_styles[prize_text_offset_y]" id="swp_prize_text_offset_y"
                                    value="<?php echo esc_attr($styles['prize_text_offset_y'] ?? 0); ?>"
                                    class="swp-input swp-trigger-preview" min="-100" max="100" step="1">
                                <input type="range" class="swp-range-slider" min="-100" max="100" step="1"
                                    value="<?php echo esc_attr($styles['prize_text_offset_y'] ?? 0); ?>"
                                    data-target="#swp_prize_text_offset_y">
                                <span
                                    class="swp-slider-value"><?php echo esc_attr($styles['prize_text_offset_y'] ?? 0); ?>px</span>
                            </div>
                            <p class="swp-hint"><?php esc_html_e('Vertical position offset (positive = down, negative = up)', 'spin-wheel'); ?></p>
                        </div>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_prize_text_top_no_image">
                            <?php esc_html_e('Text Top Position (no image) (%)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[prize_text_top_no_image]" id="swp_prize_text_top_no_image"
                                value="<?php echo esc_attr($styles['prize_text_top_no_image'] ?? 30); ?>"
                                class="swp-input swp-trigger-preview" min="0" max="100" step="1">
                            <input type="range" class="swp-range-slider" min="0" max="100" step="1"
                                value="<?php echo esc_attr($styles['prize_text_top_no_image'] ?? 30); ?>"
                                data-target="#swp_prize_text_top_no_image">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['prize_text_top_no_image'] ?? 30); ?>%</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Vertical position when no image is present (centers text)', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <!-- Prize Image Settings -->
        <div class="swp-accordion-item swp-design-common">
            <div class="swp-accordion-header" data-target="prize-image-settings">
                <h3>
                    <span class="dashicons dashicons-format-image"></span>
                    <?php esc_html_e('Prize Image Settings', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="prize-image-settings">

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_image_size">
                        <?php esc_html_e('Image Size (px)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" id="swp_prize_image_size"
                            value="<?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_width'] ?? 70); ?>"
                            class="swp-input swp-trigger-preview" min="20" max="150" step="5">
                        <input type="range" class="swp-range-slider" min="20" max="150" step="5"
                            value="<?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_width'] ?? 70); ?>"
                            data-target="#swp_prize_image_size">
                        <span
                            class="swp-slider-value"><?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_width'] ?? 70); ?>px</span>
                    </div>
                    <p class="swp-hint"><?php esc_html_e('Width and height of prize images (square)', 'spin-wheel'); ?></p>
                </div>

                <!-- Hidden fields to store width and height separately -->
                <input type="hidden" name="swp_styles[prize_image_width]" id="swp_prize_image_width_hidden"
                    value="<?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_width'] ?? 70); ?>">
                <input type="hidden" name="swp_styles[prize_image_height]" id="swp_prize_image_height_hidden"
                    value="<?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_height'] ?? 70); ?>">
                <input type="hidden" name="swp_styles[prize_image_size]" id="swp_prize_image_size_value"
                    value="<?php echo esc_attr($styles['prize_image_size'] ?? $styles['prize_image_width'] ?? 70); ?>">

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_image_left">
                        <?php esc_html_e('Image X offset (px)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" name="swp_styles[prize_image_left]" id="swp_prize_image_left"
                            value="<?php echo esc_attr($styles['prize_image_left'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="-120" max="120" step="1">
                        <input type="range" class="swp-range-slider" min="-120" max="120" step="1"
                            value="<?php echo esc_attr($styles['prize_image_left'] ?? 0); ?>"
                            data-target="#swp_prize_image_left">
                        <span class="swp-slider-value"><?php echo esc_attr($styles['prize_image_left'] ?? 0); ?>px</span>
                    </div>
                    <p class="swp-hint"><?php esc_html_e('Horizontal offset in pixels (positive = right). Grid layouts add this to the default slot position.', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_image_top">
                        <?php esc_html_e('Image Y offset (px)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" name="swp_styles[prize_image_top]" id="swp_prize_image_top"
                            value="<?php echo esc_attr($styles['prize_image_top'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="-120" max="120" step="1">
                        <input type="range" class="swp-range-slider" min="-120" max="120" step="1"
                            value="<?php echo esc_attr($styles['prize_image_top'] ?? 0); ?>"
                            data-target="#swp_prize_image_top">
                        <span class="swp-slider-value"><?php echo esc_attr($styles['prize_image_top'] ?? 0); ?>px</span>
                    </div>
                    <p class="swp-hint">
                        <?php esc_html_e('Vertical offset in pixels (positive = down). Grid layouts add this to the default slot position.', 'spin-wheel'); ?>
                    </p>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_prize_image_rotation">
                        <?php esc_html_e('Image rotation (°)', 'spin-wheel'); ?>
                    </label>
                    <div class="swp-input-with-slider-inline">
                        <input type="number" name="swp_styles[prize_image_rotation]" id="swp_prize_image_rotation"
                            value="<?php echo esc_attr($styles['prize_image_rotation'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="-180" max="180" step="1">
                        <input type="range" class="swp-range-slider" min="-180" max="180" step="1"
                            value="<?php echo esc_attr($styles['prize_image_rotation'] ?? 0); ?>"
                            data-target="#swp_prize_image_rotation">
                        <span class="swp-slider-value"><?php echo esc_attr($styles['prize_image_rotation'] ?? 0); ?>°</span>
                    </div>
                    <p class="swp-hint"><?php esc_html_e('Rotation of prize images (0° = upright).', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-design-field-big-wheel" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_prize_text_top">
                            <?php esc_html_e('Text Top Position (with image) (%)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[prize_text_top]" id="swp_prize_text_top"
                                value="<?php echo esc_attr($styles['prize_text_top'] ?? 15); ?>"
                                class="swp-input swp-trigger-preview" min="0" max="100" step="1">
                            <input type="range" class="swp-range-slider" min="0" max="100" step="1"
                                value="<?php echo esc_attr($styles['prize_text_top'] ?? 15); ?>"
                                data-target="#swp_prize_text_top">
                            <span class="swp-slider-value"><?php echo esc_attr($styles['prize_text_top'] ?? 15); ?>%</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Vertical position of label text when image is present', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <div class="swp-accordion-item swp-design-spin-controls swp-wheel-specific" <?php echo (!in_array($swp_wheel_design_type, array('big_wheel', 'nine_squares'), true)) ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="spin-button-settings">
                <h3>
                    <span class="dashicons dashicons-controls-play"></span>
                    <?php esc_html_e('Spin Button Settings', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="spin-button-settings">

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_button_text">
                        <?php esc_html_e('Button Text', 'spin-wheel'); ?>
                    </label>
                    <input type="text" name="swp_styles[button_text]" id="swp_button_text"
                        value="<?php echo esc_attr($styles['button_text'] ?? 'SPIN'); ?>"
                        class="swp-input swp-trigger-preview" placeholder="SPIN">
                </div>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_font_size">
                            <?php esc_html_e('Button Font Size (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[button_font_size]" id="swp_button_font_size"
                                value="<?php echo esc_attr($styles['button_font_size'] ?? 18); ?>"
                                class="swp-input swp-trigger-preview" min="10" max="40" step="1">
                            <input type="range" class="swp-range-slider" min="10" max="40" step="1"
                                value="<?php echo esc_attr($styles['button_font_size'] ?? 18); ?>"
                                data-target="#swp_button_font_size">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['button_font_size'] ?? 18); ?>px</span>
                        </div>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_text_top">
                            <?php esc_html_e('Button Text Top Spacing', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[button_text_top]" id="swp_button_text_top"
                                value="<?php echo esc_attr($styles['button_text_top'] ?? -10); ?>"
                                class="swp-input swp-trigger-preview" min="-50" max="50" step="1">
                            <input type="range" class="swp-range-slider" min="-50" max="50" step="1"
                                value="<?php echo esc_attr($styles['button_text_top'] ?? -10); ?>"
                                data-target="#swp_button_text_top">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['button_text_top'] ?? -10); ?>px</span>
                        </div>
                    </div>
                </div>

                <p class="swp-hint swp-button-text-top-hint-big" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <?php esc_html_e('Vertical offset for the label on the circular center button (pixels).', 'spin-wheel'); ?>
                </p>
                <p class="swp-hint swp-button-text-top-hint-grid" <?php echo ($swp_wheel_design_type !== 'nine_squares') ? 'style="display:none;"' : ''; ?>>
                    <?php esc_html_e('Fine-tune the spin label vertically in the center grid cell (pixels).', 'spin-wheel'); ?>
                </p>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_color">
                            <?php esc_html_e('Button Background', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[button_color]" id="swp_button_color"
                            value="<?php echo esc_attr($styles['button_color'] ?? '#ff6b6b'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_text_color">
                            <?php esc_html_e('Button Text Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[button_text_color]" id="swp_button_text_color"
                            value="<?php echo esc_attr($styles['button_text_color'] ?? '#ffffff'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                    </div>
                </div>

                <div class="swp-spin-sub-big-wheel" <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
                    <div class="swp-field-row-group">
                        <div class="swp-form-row">
                            <label class="swp-label" for="swp_button_radius">
                                <?php esc_html_e('Button Size (px)', 'spin-wheel'); ?>
                            </label>
                            <input type="number" name="swp_styles[button_radius]" id="swp_button_radius"
                                value="<?php echo esc_attr($styles['button_radius'] ?? 50); ?>"
                                class="swp-input swp-trigger-preview" min="10" max="200" step="1">
                        </div>

                        <div class="swp-form-row">
                            <label class="swp-label">
                                <?php esc_html_e('Show Pointer', 'spin-wheel'); ?>
                            </label>
                            <label class="swp-toggle-label">
                                <input type="checkbox" name="swp_styles[show_pointer]" value="1"
                                    class="swp-toggle-input swp-trigger-preview" <?php checked($styles['show_pointer'] ?? 0, 1); ?>>
                                <span class="swp-toggle-switch"></span>
                                <span class="swp-toggle-text"><?php esc_html_e('Display pointer indicator', 'spin-wheel'); ?></span>
                            </label>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Button Position Controls (Separate Accordion) -->
        <div class="swp-accordion-item swp-design-big-wheel swp-wheel-specific" data-visible-off="default"
            <?php echo ($swp_wheel_design_type !== 'big_wheel') ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="button-position-settings">
                <h3>
                    <span class="dashicons dashicons-move"></span>
                    <?php esc_html_e('Button Position Controls', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="button-position-settings">
                <p class="swp-form-description">
                    <?php esc_html_e('Fine-tune the vertical positioning of arrow and center buttons for preset wheel designs.', 'spin-wheel'); ?>
                </p>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_arrow_top">
                            <?php esc_html_e('Arrow Button Position (%)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[button_arrow_top]" id="swp_button_arrow_top"
                                value="<?php echo esc_attr($styles['button_arrow_top'] ?? -280); ?>"
                                class="swp-input swp-trigger-preview" min="-500" max="0" step="5">
                            <input type="range" class="swp-range-slider" min="-500" max="0" step="5"
                                value="<?php echo esc_attr($styles['button_arrow_top'] ?? -280); ?>"
                                data-target="#swp_button_arrow_top">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['button_arrow_top'] ?? -280); ?>%</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Adjust the vertical position of the arrow button (negative values move up)', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_button_center_top">
                            <?php esc_html_e('Center Button Position (%)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[button_center_top]" id="swp_button_center_top"
                                value="<?php echo esc_attr($styles['button_center_top'] ?? -90); ?>"
                                class="swp-input swp-trigger-preview" min="-300" max="0" step="5">
                            <input type="range" class="swp-range-slider" min="-300" max="0" step="5"
                                value="<?php echo esc_attr($styles['button_center_top'] ?? -90); ?>"
                                data-target="#swp_button_center_top">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['button_center_top'] ?? -90); ?>%</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Adjust the vertical position of the center button (negative values move up)', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Nine Squares Specific Settings -->
        <div class="swp-accordion-item swp-design-nine-squares swp-wheel-specific" <?php echo ($swp_wheel_design_type !== 'nine_squares') ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="grid-layout">
                <h3>
                    <span class="dashicons dashicons-grid-view"></span>
                    <?php esc_html_e('Grid Layout', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="grid-layout">

                <p class="description swp-hint swp-design-field-nine-squares swp-circle-radial-grid-hint" style="display:none;margin-top:0;">
                    <?php esc_html_e('Circle style uses the built-in radial ring layout. Rows and columns do not apply while this look is active (including when border radius is 48px or higher on presets other than Ring Grid or External Spin).', 'spin-wheel'); ?>
                </p>

                <p class="description swp-hint swp-design-field-nine-squares" data-visible-on="ringGrid" style="margin-top:0;">
                    <?php esc_html_e('Ring Grid uses every cell except the center (spin). 3×3 keeps the classic ring order; 5×5 and 7×7 fill rows left-to-right for predictable middle rows/columns. Size snaps to 3, 5, or 7.', 'spin-wheel'); ?>
                </p>

                <div class="swp-field-row-group swp-design-field-nine-squares swp-grid-layout-dimensions">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_grid_rows">
                            <?php esc_html_e('Rows', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[grid_rows]" id="swp_grid_rows"
                            value="<?php echo esc_attr($styles['grid_rows'] ?? 3); ?>"
                            class="swp-input swp-trigger-preview" min="3" max="7" step="2">
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_grid_cols">
                            <?php esc_html_e('Columns', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[grid_cols]" id="swp_grid_cols"
                            value="<?php echo esc_attr($styles['grid_cols'] ?? 3); ?>"
                            class="swp-input swp-trigger-preview" min="3" max="7" step="2">
                    </div>
                </div>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_grid_gutter">
                            <?php esc_html_e('Grid Gap (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[grid_gutter]" id="swp_grid_gutter"
                            value="<?php echo esc_attr($styles['grid_gutter'] ?? 5); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="20" step="1">
                        <p class="swp-hint"><?php esc_html_e('Space between grid cells', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_grid_border_radius">
                            <?php esc_html_e('Border Radius (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[grid_border_radius]" id="swp_grid_border_radius"
                            value="<?php echo esc_attr($styles['grid_border_radius'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="50" step="1">
                    </div>

                    <div class="swp-form-row swp-design-field-nine-squares" data-visible-on="ringGrid,grid2x3">
                        <label class="swp-label" for="swp_grid_panel_border_radius">
                            <?php esc_html_e('Panel / wrapper radius (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[grid_panel_border_radius]" id="swp_grid_panel_border_radius"
                            value="<?php echo esc_attr($styles['grid_panel_border_radius'] ?? ''); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="80" step="1" placeholder="0">
                        <p class="swp-hint"><?php esc_html_e('Corner radius for the outer block layers around the grid; cell radius is the field above.', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_grid_shadow">
                        <?php esc_html_e('Cell Shadow', 'spin-wheel'); ?>
                    </label>
                    <input type="text" name="swp_styles[grid_shadow]" id="swp_grid_shadow"
                        value="<?php echo esc_attr($styles['grid_shadow'] ?? ''); ?>"
                        class="swp-input swp-trigger-preview" placeholder="0 2px 8px rgba(0,0,0,0.1)">
                    <p class="swp-hint"><?php esc_html_e('CSS box-shadow value for grid cells', 'spin-wheel'); ?></p>
                </div>

            </div>
        </div>

        <div class="swp-accordion-item swp-design-nine-squares swp-wheel-specific" <?php echo ($swp_wheel_design_type !== 'nine_squares') ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="active-cell-style">
                <h3>
                    <span class="dashicons dashicons-star-filled"></span>
                    <?php esc_html_e('Active Cell Style', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="active-cell-style">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_active_background">
                            <?php esc_html_e('Active Background', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[active_background]" id="swp_active_background"
                            value="<?php echo esc_attr($styles['active_background'] ?? '#ffd700'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_active_font_color">
                            <?php esc_html_e('Active Text Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[active_font_color]" id="swp_active_font_color"
                            value="<?php echo esc_attr($styles['active_font_color'] ?? '#000000'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                    </div>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_active_shadow">
                        <?php esc_html_e('Active Shadow', 'spin-wheel'); ?>
                    </label>
                    <input type="text" name="swp_styles[active_shadow]" id="swp_active_shadow"
                        value="<?php echo esc_attr($styles['active_shadow'] ?? '0 4px 16px rgba(255,215,0,0.5)'); ?>"
                        class="swp-input swp-trigger-preview" placeholder="0 4px 16px rgba(255,215,0,0.5)">
                </div>

            </div>
        </div>

        <!-- Slot Machine Specific Settings -->
        <div class="swp-accordion-item swp-design-slot-machine swp-wheel-specific" <?php echo ($swp_wheel_design_type !== 'slot_machine') ? 'style="display:none;"' : ''; ?>>
            <div class="swp-accordion-header" data-target="slot-machine-config">
                <h3>
                    <span class="dashicons dashicons-tickets-alt"></span>
                    <?php esc_html_e('Slot Machine Configuration', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="slot-machine-config">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_slot_blocks">
                            <?php esc_html_e('Number of Slots', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[slot_blocks]" id="swp_slot_blocks"
                            value="<?php echo esc_attr($styles['slot_blocks'] ?? 3); ?>"
                            class="swp-input swp-trigger-preview" min="2" max="5" step="1">
                        <p class="swp-hint"><?php esc_html_e('Number of spinning columns/reels', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_slot_direction">
                            <?php esc_html_e('Spin Direction', 'spin-wheel'); ?>
                        </label>
                        <select name="swp_styles[slot_direction]" id="swp_slot_direction"
                            class="swp-select swp-trigger-preview">
                            <option value="down" <?php selected($styles['slot_direction'] ?? 'down', 'down'); ?>>
                                <?php esc_html_e('Down ↓', 'spin-wheel'); ?>
                            </option>
                            <option value="up" <?php selected($styles['slot_direction'] ?? '', 'up'); ?>>
                                <?php esc_html_e('Up ↑', 'spin-wheel'); ?>
                            </option>
                        </select>
                    </div>
                </div>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_slot_row_spacing">
                            <?php esc_html_e('Row Spacing (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[slot_row_spacing]" id="swp_slot_row_spacing"
                            value="<?php echo esc_attr($styles['slot_row_spacing'] ?? 0); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="50" step="1">
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_slot_col_spacing">
                            <?php esc_html_e('Column Spacing (px)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[slot_col_spacing]" id="swp_slot_col_spacing"
                            value="<?php echo esc_attr($styles['slot_col_spacing'] ?? 10); ?>"
                            class="swp-input swp-trigger-preview" min="0" max="50" step="1">
                    </div>
                </div>

            </div>
        </div>

        <!-- Animation Settings (Common for All) -->
        <?php if (!empty($settings['enable_animations'])): ?>
            <div class="swp-accordion-item swp-design-common">
                <div class="swp-accordion-header" data-target="animation-settings">
                    <h3>
                        <span class="dashicons dashicons-video-alt3"></span>
                        <?php esc_html_e('Animation Settings', 'spin-wheel'); ?>
                    </h3>
                    <span class="swp-accordion-icon">
                        <span class="dashicons dashicons-arrow-down-alt2"></span>
                    </span>
                </div>
                <div class="swp-accordion-body" id="animation-settings">

                    <div class="swp-field-row-group">
                        <div class="swp-form-row">
                            <label class="swp-label" for="swp_speed">
                                <?php esc_html_e('Speed Peak', 'spin-wheel'); ?>
                            </label>
                            <input type="number" name="swp_styles[speed]" id="swp_speed"
                                value="<?php echo esc_attr($styles['speed'] ?? 20); ?>"
                                class="swp-input swp-trigger-preview" min="5" max="50" step="1">
                            <p class="swp-hint"><?php esc_html_e('Maximum rotation/animation speed', 'spin-wheel'); ?></p>
                        </div>

                        <div class="swp-form-row">
                            <label class="swp-label" for="swp_acceleration_time">
                                <?php esc_html_e('Acceleration Time (ms)', 'spin-wheel'); ?>
                            </label>
                            <input type="number" name="swp_styles[acceleration_time]" id="swp_acceleration_time"
                                value="<?php echo esc_attr($styles['acceleration_time'] ?? 2500); ?>" class="swp-input"
                                min="500" max="5000" step="100">
                        </div>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_deceleration_time">
                            <?php esc_html_e('Deceleration Time (ms)', 'spin-wheel'); ?>
                        </label>
                        <input type="number" name="swp_styles[deceleration_time]" id="swp_deceleration_time"
                            value="<?php echo esc_attr($styles['deceleration_time'] ?? 2500); ?>" class="swp-input"
                            min="500" max="5000" step="100">
                        <p class="swp-hint"><?php esc_html_e('Time to gradually slow down before stopping', 'spin-wheel'); ?>
                        </p>
                    </div>

                </div>
            </div>
        <?php endif; ?>

        <!-- Popup Settings (Common for All) -->
        <div class="swp-accordion-item swp-design-common">
            <div class="swp-accordion-header" data-target="popup-settings">
                <h3>
                    <span class="dashicons dashicons-admin-site-alt3"></span>
                    <?php esc_html_e('Popup Settings', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="popup-settings">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_max_width">
                            <?php esc_html_e('Popup Max Width (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[popup_max_width]" id="swp_popup_max_width"
                                value="<?php echo esc_attr($styles['popup_max_width'] ?? 980); ?>"
                                class="swp-input swp-trigger-preview" min="400" max="1600" step="10">
                            <input type="range" class="swp-range-slider" min="400" max="1600" step="10"
                                value="<?php echo esc_attr($styles['popup_max_width'] ?? 980); ?>"
                                data-target="#swp_popup_max_width">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['popup_max_width'] ?? 980); ?>px</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Maximum width of the popup modal (400px - 1600px)', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_width_percent">
                            <?php esc_html_e('Popup Width (%)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[popup_width_percent]" id="swp_popup_width_percent"
                                value="<?php echo esc_attr($styles['popup_width_percent'] ?? 90); ?>"
                                class="swp-input swp-trigger-preview" min="50" max="100" step="5">
                            <input type="range" class="swp-range-slider" min="50" max="100" step="5"
                                value="<?php echo esc_attr($styles['popup_width_percent'] ?? 90); ?>"
                                data-target="#swp_popup_width_percent">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['popup_width_percent'] ?? 90); ?>%</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Width percentage of the popup relative to screen (50% - 100%)', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_background_color">
                            <?php esc_html_e('Background Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[popup_background_color]" id="swp_popup_background_color"
                            value="<?php echo esc_attr($styles['popup_background_color'] ?? '#ffffff'); ?>"
                            class="swp-color-picker swp-trigger-preview">
                        <p class="swp-hint"><?php esc_html_e('Background color of the popup content', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_background_image">
                            <?php esc_html_e('Background Image', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-image-upload-area" data-target="swp_popup_background_image">
                            <input type="hidden" name="swp_styles[popup_background_image]"
                                id="swp_popup_background_image"
                                value="<?php echo esc_attr($styles['popup_background_image'] ?? ''); ?>"
                                class="swp-trigger-preview">

                            <!-- Upload placeholder (shown when no image) -->
                            <div class="swp-upload-placeholder"
                                style="<?php echo !empty($styles['popup_background_image']) ? 'display: none;' : ''; ?>">
                                <span class="dashicons dashicons-cloud-upload"></span>
                                <p><?php esc_html_e('Click to upload image', 'spin-wheel'); ?></p>
                            </div>

                            <!-- Image preview with remove icon (shown when image exists) -->
                            <div class="swp-image-preview-container"
                                style="<?php echo empty($styles['popup_background_image']) ? 'display: none;' : ''; ?>">
                                <img src="<?php echo esc_url($styles['popup_background_image'] ?? ''); ?>"
                                    alt="Background" class="swp-preview-image">
                                <button type="button" class="swp-remove-image-icon"
                                    title="<?php esc_html_e('Remove image', 'spin-wheel'); ?>">
                                    <span class="dashicons dashicons-no-alt"></span>
                                </button>
                            </div>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Background image for the popup content. Click to change.', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_border_radius">
                            <?php esc_html_e('Border Radius (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[popup_border_radius]" id="swp_popup_border_radius"
                                value="<?php echo esc_attr($styles['popup_border_radius'] ?? 20); ?>"
                                class="swp-input swp-trigger-preview" min="0" max="50" step="1">
                            <input type="range" class="swp-range-slider" min="0" max="50" step="1"
                                data-target="#swp_popup_border_radius">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['popup_border_radius'] ?? 20); ?>px</span>
                        </div>
                        <p class="swp-hint"><?php esc_html_e('Corner radius of the popup (0px - 50px)', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_popup_padding">
                            <?php esc_html_e('Padding (px)', 'spin-wheel'); ?>
                        </label>
                        <div class="swp-input-with-slider-inline">
                            <input type="number" name="swp_styles[popup_padding]" id="swp_popup_padding"
                                value="<?php echo esc_attr($styles['popup_padding'] ?? 50); ?>"
                                class="swp-input swp-trigger-preview" min="10" max="100" step="5">
                            <input type="range" class="swp-range-slider" min="10" max="100" step="5"
                                data-target="#swp_popup_padding">
                            <span
                                class="swp-slider-value"><?php echo esc_attr($styles['popup_padding'] ?? 40); ?>px</span>
                        </div>
                        <p class="swp-hint">
                            <?php esc_html_e('Padding for popup content (10px - 100px). Mobile will auto-adjust to 50% of this value.', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <!-- Form Style Settings (Common for All) -->
        <div class="swp-accordion-item swp-design-common">
            <div class="swp-accordion-header" data-target="form-style-settings">
                <h3>
                    <span class="dashicons dashicons-edit"></span>
                    <?php esc_html_e('Form Style Settings', 'spin-wheel'); ?>
                </h3>
                <span class="swp-accordion-icon">
                    <span class="dashicons dashicons-arrow-down-alt2"></span>
                </span>
            </div>
            <div class="swp-accordion-body" id="form-style-settings">

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_title_color">
                            <?php esc_html_e('Title Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_title_color]" id="swp_form_title_color"
                            value="<?php echo esc_attr($styles['form_title_color'] ?? '#1d2327'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint"><?php esc_html_e('Color for form title ("Spin to Win!")', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_description_color">
                            <?php esc_html_e('Description Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_description_color]" id="swp_form_description_color"
                            value="<?php echo esc_attr($styles['form_description_color'] ?? '#50575e'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint"><?php esc_html_e('Color for form description text', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_label_color">
                            <?php esc_html_e('Input Label Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_label_color]" id="swp_form_label_color"
                            value="<?php echo esc_attr($styles['form_label_color'] ?? '#1d2327'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint">
                            <?php esc_html_e('Color for input field labels (Name, Email, Phone)', 'spin-wheel'); ?>
                        </p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_input_color">
                            <?php esc_html_e('Input Field Text Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_input_color]" id="swp_form_input_color"
                            value="<?php echo esc_attr($styles['form_input_color'] ?? '#2c3338'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint"><?php esc_html_e('Color for text inside input fields', 'spin-wheel'); ?></p>
                    </div>
                </div>

                <div class="swp-form-row">
                    <label class="swp-label" for="swp_form_input_background_color">
                        <?php esc_html_e('Input Background Color', 'spin-wheel'); ?>
                    </label>
                    <input type="text" name="swp_styles[form_input_background_color]"
                        id="swp_form_input_background_color"
                        value="<?php echo esc_attr($styles['form_input_background_color'] ?? '#ffffff'); ?>"
                        class="swp-color-picker">
                    <p class="swp-hint"><?php esc_html_e('Background color for input fields', 'spin-wheel'); ?></p>
                </div>

                <div class="swp-field-row-group">
                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_input_border_color">
                            <?php esc_html_e('Input Border Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_input_border_color]" id="swp_form_input_border_color"
                            value="<?php echo esc_attr($styles['form_input_border_color'] ?? '#e6e6e8'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint"><?php esc_html_e('Border color for input fields', 'spin-wheel'); ?></p>
                    </div>

                    <div class="swp-form-row">
                        <label class="swp-label" for="swp_form_input_focus_border_color">
                            <?php esc_html_e('Input Focus Border Color', 'spin-wheel'); ?>
                        </label>
                        <input type="text" name="swp_styles[form_input_focus_border_color]"
                            id="swp_form_input_focus_border_color"
                            value="<?php echo esc_attr($styles['form_input_focus_border_color'] ?? '#f24101'); ?>"
                            class="swp-color-picker">
                        <p class="swp-hint"><?php esc_html_e('Border color when input is focused/active', 'spin-wheel'); ?>
                        </p>
                    </div>
                </div>

            </div>
        </div>

    </div><!-- .swp-accordion-container -->
</div><!-- .swp-settings-section -->