<?php
/**
 * MenuX Free — Style Panel
 * Color field helper and full style configuration panel.
 * @package MenuX
 */

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

function menux_color_field($field, $value) {
    $has     = ($value !== '' && $value !== null);
    $hex     = $has ? $value : '#333333';
    $opacity = $has ? '1' : '0.35';
    echo '<div class="menux-color-row" style="display:flex;align-items:center;gap:8px;">';
    echo '<input type="checkbox" name="menux_style_use[' . esc_attr($field) . ']" value="1"'
        . ($has ? ' checked' : '') . ' onchange="menux_toggleColor(this)">';
    echo '<input type="color" name="menux_style[' . esc_attr($field) . ']" value="' . esc_attr($hex) . '"'
        . ' style="cursor:pointer;opacity:' . esc_attr($opacity) . ';width:42px;height:30px;padding:2px;border:1px solid #c3c4c7;border-radius:3px;"'
        . ' onchange="menux_liveStylePreview()">';
    echo '<span style="color:#999;font-size:12px;">' . ($has ? esc_html($value) : esc_html__( 'not set', 'giuliomax-menu-builder' )) . '</span>';
    echo '</div>';
}

function menux_render_style_panel($style) {
    $s  = wp_parse_args((array) $style, menux_style_defaults());
    $td = esc_attr( 'padding:7px 12px 7px 0; font-size:13px; font-weight:500; width:200px; vertical-align:top;' );
    $tv = esc_attr( 'padding:7px 0;' );
    $tabs = array(
        'themes'    => '✨ ' . esc_html__( 'Themes', 'giuliomax-menu-builder' ),
        'colors'    => '🎨 ' . esc_html__( 'Colors', 'giuliomax-menu-builder' ),
        'typo'      => '🔤 ' . esc_html__( 'Typography', 'giuliomax-menu-builder' ),
        'layout'    => '📐 ' . esc_html__( 'Layout', 'giuliomax-menu-builder' ),
        'mobile'    => '📱 ' . esc_html__( 'Mobile', 'giuliomax-menu-builder' ),
    );
    ?>
    <div class="bm-card menux-style-panel">
        <div class="bm-card-header">
            <span class="bm-card-icon bm-card-icon-amber">🎨</span>
            <div class="bm-card-titles">
                <h2 class="bm-card-title"><?php esc_html_e( 'Menu Style', 'giuliomax-menu-builder' ); ?></h2>
                <p class="bm-card-subtitle"><?php esc_html_e( 'Customize colors, typography, layout and behavior', 'giuliomax-menu-builder' ); ?></p>
            </div>
        </div>

        <!-- TAB NAV -->
        <div id="bm-style-tabs" class="bm-tabs-nav">
            <?php foreach ($tabs as $key => $label): ?>
            <button type="button" class="bm-tab-btn" data-tab="bm-tab-<?php echo esc_attr( $key ); ?>"
                onclick="menux_switchTab('bm-tab-<?php echo esc_js( $key ); ?>')">
                <?php echo esc_html( $label ); ?>
            </button>
            <?php endforeach; ?>
        </div>

        <div class="bm-card-body bm-tabs-body">

        <!-- ===== TAB: THEMES ===== -->
        <div id="bm-tab-themes" class="bm-tab-pane">
            <p style="margin:0 0 14px;font-size:13px;color:#6b7280;line-height:1.6;"><?php esc_html_e( 'Choose a ready-made theme — colors, typography, layout and animations are applied automatically. Filter by style below, then fine-tune any setting in the other tabs afterwards.', 'giuliomax-menu-builder' ); ?></p>
            <div id="bm-theme-filters" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;"></div>
            <div id="bm-inline-theme-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;"></div>
        </div>

        <!-- ===== TAB: COLORI ===== -->
        <div id="bm-tab-colors" class="bm-tab-pane">
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px; flex-wrap:wrap;">
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Container', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <?php foreach (array('container_bg'=>esc_html__( 'Solid background', 'giuliomax-menu-builder' ),'container_border'=>esc_html__( 'Bottom border', 'giuliomax-menu-builder' )) as $f=>$l): ?>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php echo esc_html( $l );?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field($f,$s[$f]);?></td></tr>
            <?php endforeach; ?>
            </tbody></table>

            <!-- Gradient background picker widget -->
            <div style="margin-top:12px;">
                <div style="font-size:11px;font-weight:600;color:#374151;margin-bottom:6px;"><?php esc_html_e( 'Gradient background', 'giuliomax-menu-builder' ); ?> <span style="font-size:10px;font-weight:400;color:#9ca3af;"><?php esc_html_e( '(overrides solid colour)', 'giuliomax-menu-builder' ); ?></span></div>
                <!-- Real input posted with the form — updated by the picker -->
                <input type="hidden" id="bm-container-bg-gradient" name="menux_style[container_bg_gradient]"
                       value="<?php echo esc_attr($s['container_bg_gradient'] ?? ''); ?>">
                <div id="bm-gp-widget" data-value="<?php echo esc_attr($s['container_bg_gradient'] ?? ''); ?>"></div>
            </div>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;"><?php esc_html_e( 'Normal links', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Text color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_color',$s['link_color']);?></td></tr>
            </tbody></table>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;"><?php esc_html_e( 'Links on hover', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Text color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_hover_color',$s['link_hover_color']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Background', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_hover_bg',$s['link_hover_bg']);?></td></tr>
            </tbody></table>
        </div>
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Active link (current page)', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Text color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_active_color',$s['link_active_color']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Background', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_active_bg',$s['link_active_bg']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Bottom border', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('link_active_border',$s['link_active_border']);?></td></tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Active font weight', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[link_active_font_weight]" onchange="menux_liveStylePreview()">
                        <option value="" <?php selected($s['link_active_font_weight'],'');?>><?php esc_html_e( 'Inherit', 'giuliomax-menu-builder' ); ?></option>
                        <option value="400" <?php selected($s['link_active_font_weight'],'400');?>><?php esc_html_e( 'Regular (400)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="500" <?php selected($s['link_active_font_weight'],'500');?>><?php esc_html_e( 'Medium (500)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="600" <?php selected($s['link_active_font_weight'],'600');?>><?php esc_html_e( 'Semibold (600)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="700" <?php selected($s['link_active_font_weight'],'700');?>><?php esc_html_e( 'Bold (700)', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            </tbody></table>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;"><?php esc_html_e( 'Last menu item', 'giuliomax-menu-builder' ); ?></div>
            <p style="font-size:11px;color:#6b7280;margin:0 0 8px;"><?php esc_html_e( 'Useful for a "Logout" button or final CTA.', 'giuliomax-menu-builder' ); ?></p>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Push right', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>"><label><input type="checkbox" name="menux_style[push_last_item]" value="1" <?php checked($s['push_last_item'],'1');?> onchange="menux_liveStylePreview()"> <code>margin-left: auto</code></label></td>
            </tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Text color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('last_item_color',$s['last_item_color']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Hover color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('last_item_hover_color',$s['last_item_hover_color']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Background', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('last_item_bg',$s['last_item_bg']);?></td></tr>
            </tbody></table>
        </div>
        </div>

        <!-- Submenu colors -->
        <div style="margin-top:20px; padding-top:16px; border-top:1px solid #e5e7eb;">
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;"><?php esc_html_e( 'Submenu', 'giuliomax-menu-builder' ); ?></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;">
                <?php foreach ( array(
                    'submenu_bg'              => esc_html__( 'Background', 'giuliomax-menu-builder' ),
                    'submenu_border'          => esc_html__( 'Border', 'giuliomax-menu-builder' ),
                    'submenu_link_color'      => esc_html__( 'Link color', 'giuliomax-menu-builder' ),
                    'submenu_hover_bg'        => esc_html__( 'Hover background', 'giuliomax-menu-builder' ),
                    'submenu_hover_link_color'=> esc_html__( 'Hover link color', 'giuliomax-menu-builder' ),
                ) as $f => $l ) : ?>
                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="font-size:12px;color:#374151;min-width:120px;"><?php echo esc_html( $l ); ?></span>
                    <?php menux_color_field( $f, $s[ $f ] ); ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Hidden fields for link gradient values — set by applyTheme(), posted with the form -->
        <input type="hidden" name="menux_style[link_hover_bg_gradient]"  value="<?php echo esc_attr( $s['link_hover_bg_gradient']  ?? '' ); ?>">
        <input type="hidden" name="menux_style[link_active_bg_gradient]" value="<?php echo esc_attr( $s['link_active_bg_gradient'] ?? '' ); ?>">

        </div><!-- end tab colors -->

        <!-- ===== TAB: TIPOGRAFIA ===== -->
        <div id="bm-tab-typo" class="bm-tab-pane" style="display:none;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Font', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Google Font', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <div class="menux-fp-wrap">
                        <input type="hidden" name="menux_style[google_font]" value="<?php echo esc_attr($s['google_font']);?>" id="menux-fp-input">
                        <button type="button" class="menux-fp-trigger" id="menux-fp-trigger" onclick="menuxFontPicker.toggle()">
                            <span class="menux-fp-label" id="menux-fp-label" style="<?php echo $s['google_font'] ? "font-family:'" . esc_attr($s['google_font']) . "',sans-serif;" : ''; ?>"><?php echo esc_html($s['google_font'] ?: esc_html__( '— No font selected —', 'giuliomax-menu-builder' )); ?></span>
                            <span class="menux-fp-caret">&#9662;</span>
                        </button>
                        <div class="menux-fp-panel" id="menux-fp-panel">
                            <div class="menux-fp-search-wrap">
                                <input type="text" class="menux-fp-search" id="menux-fp-search" placeholder="<?php esc_attr_e( 'Search fonts…', 'giuliomax-menu-builder' ); ?>" oninput="menuxFontPicker.filter(this.value)" autocomplete="off">
                            </div>
                            <div class="menux-fp-list" id="menux-fp-list"></div>
                            <button type="button" class="menux-fp-clear" onclick="menuxFontPicker.clear()">&#10005; <?php esc_html_e( 'Clear (use system font)', 'giuliomax-menu-builder' ); ?></button>
                        </div>
                    </div>
                    <p class="description" style="font-size:11px;margin:3px 0 0;"><?php
                        printf(
                            /* translators: 1: opening anchor tag to Google Fonts, 2: closing anchor tag */
                            esc_html__( 'Loaded from %1$sGoogle Fonts%2$s. Leave empty for system font.', 'giuliomax-menu-builder' ),
                            '<a href="https://fonts.google.com" target="_blank">',
                            '</a>'
                        );
                    ?></p>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Font fallback', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <input type="text" name="menux_style[font_family]" value="<?php echo esc_attr($s['font_family']);?>" placeholder="<?php esc_attr_e( 'es. Arial, sans-serif', 'giuliomax-menu-builder' ); ?>" style="width:100%;max-width:260px;" oninput="menux_liveStylePreview()">
                    <p class="description" style="font-size:11px;margin:3px 0 0;"><?php esc_html_e( 'Used if Google Font is empty.', 'giuliomax-menu-builder' ); ?></p>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Size (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[font_size]" value="<?php echo esc_attr($s['font_size']);?>" min="8" max="48" style="width:80px;" onchange="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Weight (font-weight)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[font_weight]" onchange="menux_liveStylePreview()">
                        <option value="" <?php selected($s['font_weight'],'');?>><?php esc_html_e( 'Normal', 'giuliomax-menu-builder' ); ?></option>
                        <option value="300" <?php selected($s['font_weight'],'300');?>><?php esc_html_e( 'Light (300)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="400" <?php selected($s['font_weight'],'400');?>><?php esc_html_e( 'Regular (400)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="500" <?php selected($s['font_weight'],'500');?>><?php esc_html_e( 'Medium (500)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="600" <?php selected($s['font_weight'],'600');?>><?php esc_html_e( 'Semibold (600)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="700" <?php selected($s['font_weight'],'700');?>><?php esc_html_e( 'Bold (700)', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Letter spacing (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[letter_spacing]" value="<?php echo esc_attr($s['letter_spacing']);?>" step="0.5" min="-2" max="10" style="width:80px;" oninput="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Text transform', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[text_transform]" onchange="menux_liveStylePreview()">
                        <option value="none"       <?php selected($s['text_transform'],'none');?>><?php esc_html_e( 'None', 'giuliomax-menu-builder' ); ?></option>
                        <option value="uppercase"  <?php selected($s['text_transform'],'uppercase');?>>UPPERCASE</option>
                        <option value="lowercase"  <?php selected($s['text_transform'],'lowercase');?>>lowercase</option>
                        <option value="capitalize" <?php selected($s['text_transform'],'capitalize');?>>Capitalize</option>
                    </select>
                </td>
            </tr>
            </tbody></table>
        </div>
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Animations & Transitions', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Hover effect', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[link_animation]" onchange="menux_liveStylePreview()">
                        <option value="none"      <?php selected($s['link_animation'],'none');?>><?php esc_html_e( 'None', 'giuliomax-menu-builder' ); ?></option>
                        <option value="lift"      <?php selected($s['link_animation'],'lift');?>>🚀 <?php esc_html_e( 'Lift', 'giuliomax-menu-builder' ); ?></option>
                        <option value="scale"     <?php selected($s['link_animation'],'scale');?>>🔍 <?php esc_html_e( 'Scale', 'giuliomax-menu-builder' ); ?></option>
                        <option value="pulse"     <?php selected($s['link_animation'],'pulse');?>>💓 <?php esc_html_e( 'Pulse', 'giuliomax-menu-builder' ); ?></option>
                        <option value="bounce"    <?php selected($s['link_animation'],'bounce');?>>🏀 <?php esc_html_e( 'Bounce', 'giuliomax-menu-builder' ); ?></option>
                        <option value="shake"     <?php selected($s['link_animation'],'shake');?>>📳 <?php esc_html_e( 'Shake', 'giuliomax-menu-builder' ); ?></option>
                        <option value="glow"      <?php selected($s['link_animation'],'glow');?>>✨ <?php esc_html_e( 'Glow', 'giuliomax-menu-builder' ); ?></option>
                        <option value="underline" <?php selected($s['link_animation'],'underline');?>>〰️ <?php esc_html_e( 'Animated underline', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Transition duration (s)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <input type="number" name="menux_style[link_transition]" value="<?php echo esc_attr($s['link_transition'] ?? '0.3');?>" step="0.1" min="0" max="2" style="width:80px;" oninput="menux_liveStylePreview()">
                    <p class="description" style="font-size:11px;margin:3px 0 0;"><?php esc_html_e( 'Hover animation speed (e.g. 0.3 = 300ms)', 'giuliomax-menu-builder' ); ?></p>
                </td>
            </tr>
            </tbody></table>

        </div>
        </div>
        </div><!-- end tab typo -->

        <!-- ===== TAB: LAYOUT ===== -->
        <div id="bm-tab-layout" class="bm-tab-pane" style="display:none;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Spacing', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Items alignment', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[nav_justify]" onchange="menux_liveStylePreview()">
                        <option value="flex-start"   <?php selected($s['nav_justify'] ?? 'flex-end','flex-start');?>>⬅️ <?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?></option>
                        <option value="center"       <?php selected($s['nav_justify'] ?? 'flex-end','center');?>>↔️ <?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                        <option value="flex-end"     <?php selected($s['nav_justify'] ?? 'flex-end','flex-end');?>>➡️ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?></option>
                        <option value="space-between"<?php selected($s['nav_justify'] ?? 'flex-end','space-between');?>>⟺ <?php esc_html_e( 'Space between', 'giuliomax-menu-builder' ); ?></option>
                        <option value="space-evenly" <?php selected($s['nav_justify'] ?? 'flex-end','space-evenly');?>>⠿ <?php esc_html_e( 'Space evenly', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Item gap (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[gap]" value="<?php echo esc_attr($s['gap']);?>" min="0" style="width:80px;" onchange="menux_liveStylePreview()"></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Link horizontal padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[padding_x]" value="<?php echo esc_attr($s['padding_x']);?>" min="0" style="width:80px;" onchange="menux_liveStylePreview()"></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Link vertical padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[padding_y]" value="<?php echo esc_attr($s['padding_y']);?>" min="0" style="width:80px;" onchange="menux_liveStylePreview()"></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Container border radius (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[container_border_radius]" value="<?php echo esc_attr($s['container_border_radius'] ?? '');?>" min="0" max="100" placeholder="0" style="width:80px;" onchange="menux_liveStylePreview()"></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Link border radius (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[link_border_radius]" value="<?php echo esc_attr($s['link_border_radius'] ?? '');?>" min="0" max="50" placeholder="0" style="width:80px;" onchange="menux_liveStylePreview()"><p class="description" style="font-size:11px;margin:3px 0 0;"><?php esc_html_e( 'E.g. 20 for pill, 8 for rounded tab', 'giuliomax-menu-builder' ); ?></p></td></tr>
            </tbody></table>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;"><?php esc_html_e( 'Submenu dropdown', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Open animation', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>">
                    <select name="menux_style[submenu_animation]" onchange="menux_liveStylePreview()">
                        <option value="fade"  <?php selected( $s['submenu_animation'], 'fade'  ); ?>><?php esc_html_e( 'Fade + slide', 'giuliomax-menu-builder' ); ?></option>
                        <option value="slide" <?php selected( $s['submenu_animation'], 'slide' ); ?>><?php esc_html_e( 'Slide accordion', 'giuliomax-menu-builder' ); ?></option>
                        <option value="none"  <?php selected( $s['submenu_animation'], 'none'  ); ?>><?php esc_html_e( 'None', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Drop shadow', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>"><label><input type="checkbox" name="menux_style[submenu_shadow]" value="1" <?php checked( $s['submenu_shadow'], '1' ); ?> onchange="menux_liveStylePreview()"> <?php esc_html_e( 'Enable', 'giuliomax-menu-builder' ); ?></label></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Border radius (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_style[submenu_border_radius]" value="<?php echo esc_attr( $s['submenu_border_radius'] ?? '10' ); ?>" min="0" max="32" style="width:80px;" onchange="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Min width (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_style[submenu_min_width]" value="<?php echo esc_attr( $s['submenu_min_width'] ?? '200' ); ?>" min="80" max="600" style="width:80px;" onchange="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Item padding H / V (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>">
                    <input type="number" name="menux_style[submenu_padding_x]" value="<?php echo esc_attr( $s['submenu_padding_x'] ?? '16' ); ?>" min="0" max="48" style="width:70px;" onchange="menux_liveStylePreview()">
                    <span style="color:#9ca3af;margin:0 4px;">/</span>
                    <input type="number" name="menux_style[submenu_padding_y]" value="<?php echo esc_attr( $s['submenu_padding_y'] ?? '9' ); ?>" min="0" max="32" style="width:70px;" onchange="menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Font size (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_style[submenu_font_size]" value="<?php echo esc_attr( $s['submenu_font_size'] ?? '14' ); ?>" min="10" max="22" style="width:80px;" onchange="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Font weight', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv ); ?>">
                    <select name="menux_style[submenu_font_weight]" onchange="menux_liveStylePreview()">
                        <option value="300" <?php selected( $s['submenu_font_weight'] ?? '400', '300' ); ?>><?php esc_html_e( 'Light (300)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="400" <?php selected( $s['submenu_font_weight'] ?? '400', '400' ); ?>><?php esc_html_e( 'Regular (400)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="500" <?php selected( $s['submenu_font_weight'] ?? '400', '500' ); ?>><?php esc_html_e( 'Medium (500)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="600" <?php selected( $s['submenu_font_weight'] ?? '400', '600' ); ?>><?php esc_html_e( 'Semi-bold (600)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="700" <?php selected( $s['submenu_font_weight'] ?? '400', '700' ); ?>><?php esc_html_e( 'Bold (700)', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            </tbody></table>
        </div>
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;"><?php esc_html_e( 'Dropdown Indicator', 'giuliomax-menu-builder' ); ?></div>
            <?php
            $ind_style  = $s['dropdown_indicator']        ?? 'triangle';
            $ind_color  = $s['dropdown_indicator_color']  ?? '';
            $ind_size   = $s['dropdown_indicator_size']   ?? '10';
            $ind_rotate = ($s['dropdown_indicator_rotate'] ?? '1') === '1';
            $ind_cards  = array(
                'triangle' => array('icon' => '▾',  'label' => esc_html__( 'Triangle', 'giuliomax-menu-builder' )),
                'chevron'  => array('icon' => '⌄',  'label' => esc_html__( 'Chevron', 'giuliomax-menu-builder' )),
                'dot'      => array('icon' => '•',  'label' => esc_html__( 'Dot', 'giuliomax-menu-builder' )),
                'none'     => array('icon' => '—',  'label' => esc_html__( 'None', 'giuliomax-menu-builder' )),
            );
            ?>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;">
            <?php foreach ($ind_cards as $val => $info): ?>
                <label style="display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:2px solid <?php echo esc_attr($ind_style===$val?'#667eea':'#e5e7eb'); ?>;border-radius:8px;cursor:pointer;background:<?php echo esc_attr($ind_style===$val?'#f0f4ff':'#fff'); ?>;text-align:center;" onclick="this.querySelector('input').click()">
                    <input type="radio" name="menux_style[dropdown_indicator]" value="<?php echo esc_attr($val); ?>" <?php checked($ind_style,$val); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview();else menux_liveStylePreview();" style="display:none;">
                    <span style="font-size:18px;line-height:1;"><?php echo esc_html($info['icon']); ?></span>
                    <span style="font-size:11px;font-weight:600;color:#374151;"><?php echo esc_html($info['label']); ?></span>
                </label>
            <?php endforeach; ?>
            </div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Color', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>"><?php menux_color_field('dropdown_indicator_color', $ind_color); ?></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Size (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="number" name="menux_style[dropdown_indicator_size]"
                        value="<?php echo esc_attr($ind_size); ?>" min="6" max="24" style="width:70px;"
                        oninput="menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Rotate on open', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <label><input type="checkbox" name="menux_style[dropdown_indicator_rotate]" value="1"
                        <?php checked($ind_rotate); ?> onchange="menux_liveStylePreview()">
                        <?php esc_html_e( 'Animate indicator when submenu opens', 'giuliomax-menu-builder' ); ?></label>
                </td>
            </tr>
            </tbody></table>
        </div>

        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;"><?php esc_html_e( 'Sticky Menu', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Enable sticky', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><label><input type="checkbox" name="menux_style[sticky]" value="1" <?php checked($s['sticky'],'1');?> onchange="menux_liveStylePreview()"> <?php esc_html_e( 'Keep menu fixed at top on scroll', 'giuliomax-menu-builder' ); ?></label></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Match main menu', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><label><input type="checkbox" name="menux_style[sticky_mirror]" id="menux_sticky_mirror" value="1" <?php checked($s['sticky_mirror'] ?? '1','1');?> onchange="menuxToggleStickyMirror(this.checked);menux_liveStylePreview()"> <?php esc_html_e( 'Use the same style as the main menu', 'giuliomax-menu-builder' ); ?></label></td></tr>
            <tr id="menux-sticky-row-bg" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Sticky background', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('sticky_bg',$s['sticky_bg']);?></td></tr>
            <tr id="menux-sticky-row-shadow" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Shadow sticky', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><label><input type="checkbox" name="menux_style[sticky_shadow]" value="1" <?php checked($s['sticky_shadow'],'1');?> onchange="menux_liveStylePreview()"> <?php esc_html_e( 'Enable', 'giuliomax-menu-builder' ); ?></label></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Z-Index', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[sticky_z_index]" value="<?php echo esc_attr($s['sticky_z_index']);?>" min="100" max="99999" style="width:90px;" oninput="menux_liveStylePreview()"></td></tr>
            <tr id="menux-sticky-row-justify" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Horizontal alignment', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[sticky_justify]" onchange="menux_liveStylePreview()">
                        <option value="flex-start"    <?php selected($s['sticky_justify'] ?? 'flex-start','flex-start');?>>⬅️ <?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?></option>
                        <option value="center"        <?php selected($s['sticky_justify'] ?? 'flex-start','center');?>>↔️ <?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                        <option value="flex-end"      <?php selected($s['sticky_justify'] ?? 'flex-start','flex-end');?>>➡️ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?></option>
                        <option value="space-between" <?php selected($s['sticky_justify'] ?? 'flex-start','space-between');?>>↔️ <?php esc_html_e( 'Space-between', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr id="menux-sticky-row-align" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Vertical alignment', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[sticky_align_items]" onchange="menux_liveStylePreview()">
                        <option value="flex-start" <?php selected($s['sticky_align_items'] ?? 'center','flex-start');?>>⬆️ <?php esc_html_e( 'Top', 'giuliomax-menu-builder' ); ?></option>
                        <option value="center"     <?php selected($s['sticky_align_items'] ?? 'center','center');?>>⏺️ <?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                        <option value="flex-end"   <?php selected($s['sticky_align_items'] ?? 'center','flex-end');?>>⬇️ <?php esc_html_e( 'Bottom', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr id="menux-sticky-row-padx" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Horizontal padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[sticky_padding_x]" value="<?php echo esc_attr($s['sticky_padding_x'] ?? '');?>" min="0" max="200" style="width:80px;" placeholder="auto" oninput="menux_liveStylePreview()"></td></tr>
            <tr id="menux-sticky-row-pady" <?php if (($s['sticky_mirror'] ?? '1') === '1') echo 'style="display:none"'; ?>><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Vertical padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[sticky_padding_y]" value="<?php echo esc_attr($s['sticky_padding_y'] ?? '');?>" min="0" max="100" style="width:80px;" placeholder="auto" oninput="menux_liveStylePreview()"></td></tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Transition duration (s)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <input type="number" name="menux_style[sticky_transition]" value="<?php echo esc_attr($s['sticky_transition'] ?? '0.3');?>" min="0" max="2" step="0.05" style="width:80px;" oninput="menux_liveStylePreview()">
                    <span style="font-size:11px;color:#6b7280;margin-left:6px;"><?php esc_html_e( 'Smooth background + shadow fade when menu becomes sticky', 'giuliomax-menu-builder' ); ?></span>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Shrink on sticky', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <label style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" name="menux_style[sticky_shrink]" value="1" <?php checked($s['sticky_shrink'] ?? '0','1');?> onchange="menux_liveStylePreview()">
                        <?php esc_html_e( 'Reduce height, font size and logo when sticky', 'giuliomax-menu-builder' ); ?>
                    </label>
                </td>
            </tr>
            </tbody></table>

            <!-- Progress bar -->
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;">📊 <?php esc_html_e( 'Scroll Progress Bar', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Enable', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <label style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" name="menux_style[progress_bar_enabled]" value="1" <?php checked($s['progress_bar_enabled'] ?? '0','1');?> onchange="menux_liveStylePreview()">
                        <?php esc_html_e( 'Show page reading progress bar on the menu', 'giuliomax-menu-builder' ); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Color', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('progress_bar_color', $s['progress_bar_color'] ?? '#667eea');?></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Height (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>"><input type="number" name="menux_style[progress_bar_height]" value="<?php echo esc_attr($s['progress_bar_height'] ?? '3');?>" min="1" max="10" style="width:70px;" oninput="menux_liveStylePreview()"></td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Position', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[progress_bar_position]" onchange="menux_liveStylePreview()">
                        <option value="bottom" <?php selected($s['progress_bar_position'] ?? 'bottom','bottom');?>><?php esc_html_e( 'Bottom of menu', 'giuliomax-menu-builder' ); ?></option>
                        <option value="top"    <?php selected($s['progress_bar_position'] ?? 'bottom','top');?>><?php esc_html_e( 'Top of menu', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            </tbody></table>
        </div>
        </div>

            <!-- Scroll Spy -->
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;">🎯 <?php esc_html_e( 'Scroll Spy', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Enable', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <label style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" name="menux_style[scroll_spy]" value="1" id="menux-spy-toggle" <?php checked($s['scroll_spy'] ?? '0','1');?> onchange="document.getElementById('menux-spy-settings').style.display=this.checked?'':'none'">
                        <?php esc_html_e( 'Highlight the nav link for the currently visible page section', 'giuliomax-menu-builder' ); ?>
                    </label>
                    <div style="margin-top:4px;font-size:11px;color:#9ca3af;"><?php
                        printf(
                            /* translators: 1: code snippet id="section-id", 2: code snippet #section-id */
                            esc_html__( 'Add %1$s to your page sections and link to %2$s from the menu.', 'giuliomax-menu-builder' ),
                            '<code>id="section-id"</code>',
                            '<code>#section-id</code>'
                        );
                    ?></div>
                </td>
            </tr>
            </tbody></table>
            <div id="menux-spy-settings" style="<?php echo ( $s['scroll_spy'] ?? '0' ) === '1' ? '' : 'display:none;'; ?>">
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Trigger offset (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <input type="number" name="menux_style[scroll_spy_offset]" value="<?php echo esc_attr($s['scroll_spy_offset'] ?? '80');?>" min="0" max="500" style="width:80px;">
                    <span style="font-size:11px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'Distance from top of viewport. Auto-adds sticky nav height.', 'giuliomax-menu-builder' ); ?></span>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Smooth scroll', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <label style="display:flex;align-items:center;gap:6px;">
                        <input type="checkbox" name="menux_style[scroll_spy_smooth]" value="1" <?php checked($s['scroll_spy_smooth'] ?? '1','1');?>>
                        <?php esc_html_e( 'Smooth-scroll to sections when clicking anchor links', 'giuliomax-menu-builder' ); ?>
                    </label>
                </td>
            </tr>
            </tbody></table>
            </div>

        <!-- ── Entrance Animation ── -->
        <div style="margin-top:24px;border-top:1px solid #f1f3f5;padding-top:20px;">
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">✨ <?php esc_html_e( 'Page Load Animation', 'giuliomax-menu-builder' ); ?></div>
            <div style="font-size:12px;color:#6b7280;margin-bottom:12px;"><?php esc_html_e( 'Animates the menu bar when the page first loads.', 'giuliomax-menu-builder' ); ?></div>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:14px;" id="bm-entrance-grid">
            <?php
            $entrance_opts = array(
                'none'       => array('label'=>esc_html__( 'None', 'giuliomax-menu-builder' ),        'icon'=>'⛔'),
                'fadeIn'     => array('label'=>esc_html__( 'Fade in', 'giuliomax-menu-builder' ),     'icon'=>'🌅'),
                'slideDown'  => array('label'=>esc_html__( 'Slide down', 'giuliomax-menu-builder' ),  'icon'=>'⬇️'),
                'slideUp'    => array('label'=>esc_html__( 'Slide up', 'giuliomax-menu-builder' ),    'icon'=>'⬆️'),
                'slideLeft'  => array('label'=>esc_html__( 'Slide left', 'giuliomax-menu-builder' ),  'icon'=>'⬅️'),
                'slideRight' => array('label'=>esc_html__( 'Slide right', 'giuliomax-menu-builder' ), 'icon'=>'➡️'),
                'zoomIn'     => array('label'=>esc_html__( 'Zoom in', 'giuliomax-menu-builder' ),     'icon'=>'🔍'),
                'flipX'      => array('label'=>esc_html__( 'Flip X', 'giuliomax-menu-builder' ),      'icon'=>'🔄'),
            );
            $cur_entrance = $s['entrance_animation'] ?? 'none';
            foreach ($entrance_opts as $val => $opt): ?>
                <label style="display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:2px solid <?php echo esc_attr( $cur_entrance===$val ? '#667eea' : '#e5e7eb' ); ?>;border-radius:10px;cursor:pointer;background:<?php echo esc_attr( $cur_entrance===$val ? '#eef2ff' : '#fff' ); ?>;transition:all .15s;font-size:12px;text-align:center;" class="bm-entrance-card">
                    <input type="radio" name="menux_style[entrance_animation]" value="<?php echo esc_attr($val); ?>" <?php checked($cur_entrance, $val); ?> style="display:none;" onchange="menux_updateEntranceCard(this); menux_liveStylePreview(); menuxToggleEntranceControls(this.value);">
                    <span style="font-size:20px;"><?php echo esc_html( $opt['icon'] ); ?></span>
                    <span style="font-weight:500;color:#374151;"><?php echo esc_html($opt['label']); ?></span>
                </label>
            <?php endforeach; ?>
            </div>
            <div id="menux-entrance-controls" style="<?php echo $cur_entrance === 'none' ? 'display:none;' : ''; ?>display:flex;flex-wrap:wrap;align-items:center;gap:16px;">
                <label style="font-size:12px;color:#374151;display:flex;align-items:center;gap:6px;">
                    <?php esc_html_e( 'Duration (s)', 'giuliomax-menu-builder' ); ?>
                    <input type="number" name="menux_style[entrance_duration]" value="<?php echo esc_attr($s['entrance_duration'] ?? '0.5'); ?>" min="0.1" max="3" step="0.1" style="width:70px;" oninput="menux_liveStylePreview()">
                </label>
                <label style="font-size:12px;color:#374151;display:flex;align-items:center;gap:6px;">
                    <?php esc_html_e( 'Delay (s)', 'giuliomax-menu-builder' ); ?>
                    <input type="number" name="menux_style[entrance_delay]" value="<?php echo esc_attr($s['entrance_delay'] ?? '0'); ?>" min="0" max="5" step="0.1" style="width:70px;" oninput="menux_liveStylePreview()">
                </label>
                <label style="font-size:12px;color:#374151;display:flex;align-items:center;gap:6px;" title="<?php esc_attr_e( 'Each item animates with this extra delay', 'giuliomax-menu-builder' ); ?>">
                    <?php esc_html_e( 'Stagger (s)', 'giuliomax-menu-builder' ); ?>
                    <input type="number" name="menux_style[entrance_stagger]" value="<?php echo esc_attr($s['entrance_stagger'] ?? '0'); ?>" min="0" max="1" step="0.05" style="width:70px;" oninput="menux_liveStylePreview()">
                </label>
                <button type="button" onclick="menux_previewEntrance()" style="padding:6px 14px;font-size:12px;background:#eef2ff;border:1px solid #c7d2fe;color:#4f46e5;border-radius:6px;cursor:pointer;font-weight:500;">▶ <?php esc_html_e( 'Preview', 'giuliomax-menu-builder' ); ?></button>
            </div>
        </div>

        </div><!-- end tab layout -->

        <!-- ===== TAB: MOBILE ===== -->
        <div id="bm-tab-mobile" class="bm-tab-pane" style="display:none;">

        <div style="display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:start;">
        <div><!-- settings col -->

        <!-- Mobile Presets strip -->
        <div style="margin-bottom:22px;padding:16px 18px 18px;background:linear-gradient(135deg,#f0f4ff 0%,#faf5ff 100%);border:1px solid #e0e7ff;border-radius:12px;">
            <div style="font-size:13px;font-weight:700;color:#1e1b4b;margin-bottom:3px;">📱 <?php esc_html_e( 'Mobile Presets', 'giuliomax-menu-builder' ); ?></div>
            <p style="font-size:11px;color:#6b7280;margin:0 0 12px;"><?php esc_html_e( 'One-click mobile style — desktop theme settings are untouched. Fine-tune below afterwards.', 'giuliomax-menu-builder' ); ?></p>
            <div id="bm-mobile-preset-grid"></div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">

        <!-- Colonna sinistra: Hamburger -->
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;">🍔 <?php esc_html_e( 'Hamburger', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Icon style', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[hamburger_style]" onchange="menux_liveStylePreview()">
                        <option value="classic" <?php selected($s['hamburger_style'],'classic');?>><?php esc_html_e( 'Classic (3 lines)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="modern"  <?php selected($s['hamburger_style'],'modern');?>><?php esc_html_e( 'Modern (rounded)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="minimal" <?php selected($s['hamburger_style'],'minimal');?>><?php esc_html_e( 'Minimal (thin)', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Alignment', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <select name="menux_style[hamburger_align]" onchange="menux_liveStylePreview()">
                        <option value="flex-start" <?php selected($s['hamburger_align'],'flex-start');?>><?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?></option>
                        <option value="center"     <?php selected($s['hamburger_align'],'center');?>><?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                        <option value="flex-end"   <?php selected($s['hamburger_align'],'flex-end');?>><?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Icon color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('hamburger_color',$s['hamburger_color']);?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Button background', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('hamburger_bg',$s['hamburger_bg']);?><span style="font-size:10px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'Empty = transparent', 'giuliomax-menu-builder' ); ?></span></td></tr>
            </tbody></table>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:18px 0 10px;">🔤 <?php esc_html_e( 'Mobile link text', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Normal color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('mobile_link_color', $s['mobile_link_color'] ?? '');?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Hover color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('mobile_link_hover_color', $s['mobile_link_hover_color'] ?? '');?></td></tr>
            <tr><td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Active color', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv );?>"><?php menux_color_field('mobile_link_active_color', $s['mobile_link_active_color'] ?? '');?></td></tr>
            </tbody></table>

            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:18px 0 10px;">📐 <?php esc_html_e( 'When it appears', 'giuliomax-menu-builder' ); ?></div>
            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Breakpoint mode', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <div style="display:flex;flex-direction:column;gap:8px;margin-top:2px;">
                        <label style="display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:2px solid <?php echo esc_attr( ($s['mobile_breakpoint_mode']??'manual')==='auto'?'#667eea':'#e5e7eb' ); ?>;border-radius:8px;cursor:pointer;background:<?php echo esc_attr( ($s['mobile_breakpoint_mode']??'manual')==='auto'?'#f0f4ff':'#fff' ); ?>;">
                            <input type="radio" name="menux_style[mobile_breakpoint_mode]" value="auto" <?php checked($s['mobile_breakpoint_mode']??'manual','auto'); ?> onchange="menux_liveStylePreview();bmToggleBreakpointMode(this.value)" style="margin-top:3px;flex-shrink:0;">
                            <div>
                                <strong style="font-size:13px;color:#111827;">✨ <?php esc_html_e( 'Automatic', 'giuliomax-menu-builder' ); ?></strong>
                                <p style="font-size:11px;color:#6b7280;margin:2px 0 0;"><?php esc_html_e( 'The hamburger appears when items no longer fit in the row. No px to choose.', 'giuliomax-menu-builder' ); ?></p>
                            </div>
                        </label>
                        <label style="display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:2px solid <?php echo esc_attr( ($s['mobile_breakpoint_mode']??'manual')==='manual'?'#667eea':'#e5e7eb' ); ?>;border-radius:8px;cursor:pointer;background:<?php echo esc_attr( ($s['mobile_breakpoint_mode']??'manual')==='manual'?'#f0f4ff':'#fff' ); ?>;">
                            <input type="radio" name="menux_style[mobile_breakpoint_mode]" value="manual" <?php checked($s['mobile_breakpoint_mode']??'manual','manual'); ?> onchange="menux_liveStylePreview();bmToggleBreakpointMode(this.value)" style="margin-top:3px;flex-shrink:0;">
                            <div>
                                <strong style="font-size:13px;color:#111827;">🎚️ <?php esc_html_e( 'Manual', 'giuliomax-menu-builder' ); ?></strong>
                                <p style="font-size:11px;color:#6b7280;margin:2px 0 0;"><?php esc_html_e( 'Specify the width (px) below which the hamburger appears.', 'giuliomax-menu-builder' ); ?></p>
                            </div>
                        </label>
                    </div>
                </td>
            </tr>
            <tr id="bm-bp-manual-row" style="<?php echo esc_attr( ($s['mobile_breakpoint_mode']??'manual')==='auto'?'display:none':'' ); ?>">
                <td style="<?php echo esc_attr( $td );?>"><?php esc_html_e( 'Breakpoint (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr( $tv );?>">
                    <input type="number" name="menux_style[mobile_breakpoint]" value="<?php echo esc_attr($s['mobile_breakpoint']);?>" min="320" max="2560" style="width:90px;" onchange="menux_liveStylePreview()">
                    <p class="description" style="font-size:11px;margin:3px 0 0;"><?php esc_html_e( 'Below this px → hamburger. Typical: 768 or 1024.', 'giuliomax-menu-builder' ); ?></p>
                </td>
            </tr>
            </tbody></table>
        </div>

        <!-- Colonna destra: Opening mode -->
        <div>
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;">📱 <?php esc_html_e( 'Opening mode', 'giuliomax-menu-builder' ); ?></div>

            <?php
            $open_styles = array(
                'dropdown'     => array('icon'=>'⬇️',  'label'=>esc_html__( 'Dropdown', 'giuliomax-menu-builder' ),      'desc'=>esc_html__( 'Classic dropdown below the menu', 'giuliomax-menu-builder' )),
                'fullscreen'   => array('icon'=>'⛶',   'label'=>esc_html__( 'Fullscreen', 'giuliomax-menu-builder' ),     'desc'=>esc_html__( '100% screen overlay with large centered items', 'giuliomax-menu-builder' )),
                'drawer-left'  => array('icon'=>'◀️',  'label'=>esc_html__( 'Drawer Left', 'giuliomax-menu-builder' ),'desc'=>esc_html__( 'Side panel that slides from the left', 'giuliomax-menu-builder' )),
                'drawer-right' => array('icon'=>'▶️',  'label'=>esc_html__( 'Drawer Right', 'giuliomax-menu-builder' ),  'desc'=>esc_html__( 'Side panel that slides from the right', 'giuliomax-menu-builder' )),
            );
            $cur_open = $s['mobile_open_style'] ?? 'dropdown';
            ?>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
            <?php foreach ($open_styles as $val => $info): ?>
                <label style="display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:2px solid <?php echo esc_attr( $cur_open===$val?'#667eea':'#e5e7eb' ); ?>;border-radius:8px;cursor:pointer;background:<?php echo esc_attr( $cur_open===$val?'#f0f4ff':'#fff' ); ?>;" onclick="this.querySelector('input').click()">
                    <input type="radio" name="menux_style[mobile_open_style]" value="<?php echo esc_attr( $val ); ?>" <?php checked($cur_open,$val); ?> onchange="menux_liveStylePreview();bmToggleOpenStyle(this.value)" style="margin-top:3px;flex-shrink:0;">
                    <div>
                        <strong style="font-size:13px;color:#111827;"><?php echo esc_html( $info['icon'] ) . ' ' . esc_html( $info['label'] ); ?></strong>
                        <p style="font-size:11px;color:#6b7280;margin:2px 0 0;"><?php echo esc_html( $info['desc'] ); ?></p>
                    </div>
                </label>
            <?php endforeach; ?>
            </div>

            <!-- Mode-specific options -->
            <div style="border:1px solid #e5e7eb;border-radius:10px;padding:14px;background:#fafbfc;">

                <!-- Comuni a fullscreen + drawer -->
                <div id="bm-mob-overlay-opts" style="<?php echo esc_attr( $cur_open==='dropdown'?'display:none':'' ); ?>">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Background overlay', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;margin-bottom:10px;"><tbody>
                    <tr><td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;width:130px;"><?php esc_html_e( 'Color', 'giuliomax-menu-builder' ); ?></td><td style="padding:4px 0;"><input type="color" name="menux_style[mobile_overlay_bg]" value="<?php echo esc_attr($s['mobile_overlay_bg']??'#000000'); ?>" style="width:42px;height:30px;padding:2px;border:1px solid #c3c4c7;border-radius:3px;cursor:pointer;" oninput="menux_liveStylePreview()"></td></tr>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;"><?php esc_html_e( 'Opacity', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;">
                            <input type="range" name="menux_style[mobile_overlay_opacity]" min="0" max="1" step="0.05"
                                value="<?php echo esc_attr($s['mobile_overlay_opacity']??'0.9'); ?>"
                                oninput="this.nextElementSibling.textContent=Math.round(this.value*100)+'%';menux_liveStylePreview()"
                                style="width:120px;vertical-align:middle;">
                            <span style="font-size:12px;color:#6b7280;margin-left:6px;"><?php echo absint( round( ($s['mobile_overlay_opacity']??0.9)*100 ) ); ?>%</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;"><?php esc_html_e( 'Background blur (px)', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;"><input type="number" name="menux_style[mobile_overlay_blur]" value="<?php echo esc_attr($s['mobile_overlay_blur']??'0'); ?>" min="0" max="20" style="width:60px;" oninput="menux_liveStylePreview()"><span style="font-size:11px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( '0 = no blur', 'giuliomax-menu-builder' ); ?></span></td>
                    </tr>
                    </tbody></table>
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:12px 0 8px;">✕ <?php esc_html_e( 'Close button (×)', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;width:130px;"><?php esc_html_e( 'Icon color', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;"><?php menux_color_field('close_btn_color', $s['close_btn_color'] ?? ''); ?></td>
                    </tr>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;"><?php esc_html_e( 'Button background', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;">
                            <?php menux_color_field('close_btn_bg', $s['close_btn_bg'] ?? ''); ?>
                            <span style="font-size:10px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'If set, adds border-radius: 50%', 'giuliomax-menu-builder' ); ?></span>
                        </td>
                    </tr>
                    </tbody></table>
                </div>

                <!-- Solo fullscreen -->
                <div id="bm-mob-fullscreen-opts" style="<?php echo esc_attr( $cur_open!=='fullscreen'?'display:none':'' ); ?>">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Fullscreen', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;width:130px;"><?php esc_html_e( 'Items alignment', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;">
                            <select name="menux_style[mobile_fullscreen_align]" onchange="menux_liveStylePreview()">
                                <option value="center"     <?php selected($s['mobile_fullscreen_align']??'center','center'); ?>>⏺️ <?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                                <option value="flex-start" <?php selected($s['mobile_fullscreen_align']??'center','flex-start'); ?>>⬅️ <?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?></option>
                                <option value="flex-end"   <?php selected($s['mobile_fullscreen_align']??'center','flex-end'); ?>>➡️ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?></option>
                            </select>
                        </td>
                    </tr>
                    </tbody></table>
                </div>

                <!-- Solo drawer -->
                <div id="bm-mob-drawer-opts" style="<?php echo esc_attr( !in_array($cur_open,array('drawer-left','drawer-right'),true)?'display:none':'' ); ?>">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Drawer', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr>
                        <td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;width:130px;"><?php esc_html_e( 'Width (px)', 'giuliomax-menu-builder' ); ?></td>
                        <td style="padding:4px 0;"><input type="number" name="menux_style[mobile_drawer_width]" value="<?php echo esc_attr($s['mobile_drawer_width']??'280'); ?>" min="200" max="600" style="width:80px;" oninput="menux_liveStylePreview()"></td>
                    </tr>
                    </tbody></table>
                </div>

                <!-- Dropdown opzioni -->
                <div id="bm-mob-dropdown-opts" style="<?php echo esc_attr( $cur_open!=='dropdown'?'display:none':'' ); ?>">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Dropdown', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr><td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;"><?php esc_html_e( 'Padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="padding:4px 0;"><input type="number" name="menux_style[mobile_menu_pad]" value="<?php echo esc_attr($s['mobile_menu_pad']);?>" min="0" style="width:80px;" onchange="menux_liveStylePreview()"></td></tr>
                    <tr><td style="font-size:12px;color:#374151;padding:4px 12px 4px 0;"><?php esc_html_e( 'Shadow', 'giuliomax-menu-builder' ); ?></td><td style="padding:4px 0;"><label><input type="checkbox" name="menux_style[mobile_menu_shadow]" value="1" <?php checked($s['mobile_menu_shadow'],'1');?> onchange="menux_liveStylePreview()"> <?php esc_html_e( 'Enable', 'giuliomax-menu-builder' ); ?></label></td></tr>
                    </tbody></table>
                </div>

                <!-- Accordion mode -->
                <div style="border-top:1px solid #f1f5f9;margin-top:12px;padding-top:12px;">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Accordion', 'giuliomax-menu-builder' ); ?></div>
                    <label style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#374151;cursor:pointer;">
                        <input type="checkbox" name="menux_style[mobile_accordion]" value="1"
                            <?php checked( $s['mobile_accordion'] ?? '0', '1' ); ?>
                            onchange="menux_liveStylePreview()" style="margin-top:2px;flex-shrink:0;">
                        <span><?php esc_html_e( 'Close other submenus when one opens', 'giuliomax-menu-builder' ); ?><br>
                            <span style="font-size:11px;color:#6b7280;"><?php esc_html_e( 'One open submenu at a time — recommended for long menus', 'giuliomax-menu-builder' ); ?></span>
                        </span>
                    </label>
                </div>

                <!-- Open animation (all modes) -->
                <div style="border-top:1px solid #f1f5f9;margin-top:12px;padding-top:12px;">
                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;"><?php esc_html_e( 'Open animation', 'giuliomax-menu-builder' ); ?></div>
                    <select name="menux_style[mobile_open_animation]" onchange="menux_liveStylePreview()" style="font-size:12px;">
                        <option value="fade"  <?php selected($s['mobile_open_animation']??'fade','fade'); ?>>✨ <?php esc_html_e( 'Fade', 'giuliomax-menu-builder' ); ?></option>
                        <option value="slide" <?php selected($s['mobile_open_animation']??'fade','slide'); ?>>⬇️ <?php esc_html_e( 'Slide', 'giuliomax-menu-builder' ); ?></option>
                        <option value="scale" <?php selected($s['mobile_open_animation']??'fade','scale'); ?>>🔍 <?php esc_html_e( 'Scale', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </div>
            </div>
        </div>
        </div><!-- end inner 2-col grid -->
        </div><!-- end settings col -->

        <!-- Live phone preview column -->
        <div style="position:sticky;top:32px;">
            <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;">📱 <?php esc_html_e( 'Live Preview', 'giuliomax-menu-builder' ); ?></div>
            <div style="width:180px;margin:0 auto;background:#18181b;border-radius:36px;padding:14px 8px 20px;box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08);">
                <div style="width:60px;height:7px;background:#000;border-radius:4px;margin:0 auto 8px;"></div>
                <div id="bm-mob-phone-screen" style="background:#f8fafc;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:300px;position:relative;"></div>
                <div style="width:48px;height:4px;background:rgba(255,255,255,.3);border-radius:3px;margin:10px auto 0;"></div>
            </div>
        </div>

        </div><!-- end outer grid: settings + phone -->

        <?php /* bmToggleBreakpointMode() and bmToggleOpenStyle() are in admin/js/admin.js */ ?>

        </div><!-- end tab mobile -->

        </div><!-- end bm-card-body bm-tabs-body -->
    </div><!-- end bm-card menux-style-panel -->

    <?php /* All admin JS moved to admin/js/admin.js */ ?>
    <?php
}
