<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
                <section class="nexdirectory-settings-panel" id="nexdirectory-tab-design" data-tab="design-maps" data-subtab="branding">
                    <h2><?php esc_html_e('Branding & Typography', 'nexdirectory'); ?></h2>
                    <p class="nexdirectory-settings-subheading"><?php esc_html_e('Tune accent colors, fallback visuals, and typography foundations used across archive, map, account, and listing pages.', 'nexdirectory'); ?></p>

                    <div class="nexdirectory-settings-grid">
                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-art" aria-hidden="true"></span><?php esc_html_e('Brand Defaults', 'nexdirectory'); ?></h3>
                            <div class="nexdirectory-settings-field">
                                <label for="nexdirectory_company_brand_name"><?php esc_html_e('Company / Event / Brand Name', 'nexdirectory'); ?></label>
                                <input type="text" id="nexdirectory_company_brand_name" name="nexdirectory_company_brand_name" value="<?php echo esc_attr((string) get_option('nexdirectory_company_brand_name', '')); ?>" placeholder="<?php echo esc_attr((string) get_option('blogname', get_bloginfo('name'))); ?>">
                                <p class="description"><?php esc_html_e('Global source-of-truth brand name used in emails, navigation, previews, and platform labels when a specific override is not set.', 'nexdirectory'); ?></p>
                            </div>
                            <div class="nexdirectory-settings-toggle-item" style="margin-bottom: 10px;">
                                <input type="hidden" name="nexdirectory_style_use_theme_defaults" value="0">
                                <label><input type="checkbox" name="nexdirectory_style_use_theme_defaults" value="1" <?php checked((string) get_option('nexdirectory_style_use_theme_defaults', '0'), '1'); ?>> <?php esc_html_e('Use website typography defaults', 'nexdirectory'); ?></label>
                                <p class="description"><?php esc_html_e('When enabled, the directory inherits your main WordPress theme fonts instead of custom selections below.', 'nexdirectory'); ?></p>
                            </div>
                            <div class="nexdirectory-settings-grid">
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_accent_color"><?php esc_html_e('Accent Color', 'nexdirectory'); ?></label>
                                    <div class="nexdirectory-settings-inline">
                                        <input type="color" id="nexdirectory_style_accent_color" name="nexdirectory_style_accent_color" value="<?php echo esc_attr((string) get_option('nexdirectory_style_accent_color', '#FF5E14')); ?>">
                                        <input type="text" readonly value="<?php echo esc_attr((string) get_option('nexdirectory_style_accent_color', '#FF5E14')); ?>">
                                    </div>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_accent_hover_color"><?php esc_html_e('Accent Hover Color', 'nexdirectory'); ?></label>
                                    <div class="nexdirectory-settings-inline">
                                        <input type="color" id="nexdirectory_style_accent_hover_color" name="nexdirectory_style_accent_hover_color" value="<?php echo esc_attr((string) get_option('nexdirectory_style_accent_hover_color', '#E04F0D')); ?>">
                                        <input type="text" readonly value="<?php echo esc_attr((string) get_option('nexdirectory_style_accent_hover_color', '#E04F0D')); ?>">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-format-image" aria-hidden="true"></span><?php esc_html_e('Favicon', 'nexdirectory'); ?></h3>
                            <p class="description"><?php esc_html_e('Recommended square image, ideally 512x512 for crisp browser tabs.', 'nexdirectory'); ?></p>

                            <input type="hidden" id="nexdirectory_style_favicon_url" name="nexdirectory_style_favicon_url" value="<?php echo esc_attr($favicon_url); ?>">
                            <div class="nexdirectory-media-picker" data-nexdirectory-media-picker data-nexdirectory-media-target="#nexdirectory_style_favicon_url" data-nexdirectory-media-multiple="0" data-nexdirectory-upload-target="cover">
                                <button type="button" class="nexdirectory-media-dropzone" data-nexdirectory-media-open>
                                    <span class="dashicons dashicons-format-image" aria-hidden="true"></span>
                                    <strong><?php esc_html_e('Drag and drop favicon here', 'nexdirectory'); ?></strong>
                                    <span><?php esc_html_e('or click to choose from Media Library', 'nexdirectory'); ?></span>
                                </button>
                                <input type="file" accept="image/*" hidden data-nexdirectory-media-file-input>

                                <div class="nexdirectory-fallback-preview-single nexdirectory-media-gallery" id="nexdirectory-favicon-preview">
                                    <?php if ($favicon_url !== '') : ?>
                                        <div class="nexdirectory-media-tile" data-nexdirectory-media-url="<?php echo esc_attr($favicon_url); ?>">
                                            <img src="<?php echo esc_url($favicon_url); ?>" alt="<?php esc_attr_e('Favicon', 'nexdirectory'); ?>">
                                            <button type="button" class="nexdirectory-media-remove" data-nexdirectory-media-remove aria-label="<?php esc_attr_e('Remove image', 'nexdirectory'); ?>">&times;</button>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <p class="description nexdirectory-media-feedback" data-nexdirectory-media-feedback></p>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-images-alt2" aria-hidden="true"></span><?php esc_html_e('Fallback Thumbnail Images', 'nexdirectory'); ?></h3>
                            <p class="description"><?php esc_html_e('If multiple are listed, fallback thumbnails rotate for variety.', 'nexdirectory'); ?></p>

                            <textarea id="nexdirectory_style_fallback_thumb_url" name="nexdirectory_style_fallback_thumb_url" rows="4" hidden><?php echo esc_textarea(implode("\n", $thumb_fallback_urls)); ?></textarea>
                            <div class="nexdirectory-media-picker nexdirectory-media-picker-multi" data-nexdirectory-media-picker data-nexdirectory-media-target="#nexdirectory_style_fallback_thumb_url" data-nexdirectory-media-multiple="1" data-nexdirectory-upload-target="gallery">
                                <button type="button" class="nexdirectory-media-dropzone" data-nexdirectory-media-open>
                                    <span class="dashicons dashicons-format-gallery" aria-hidden="true"></span>
                                    <strong><?php esc_html_e('Drag and drop images here', 'nexdirectory'); ?></strong>
                                    <span><?php esc_html_e('or click to choose from Media Library', 'nexdirectory'); ?></span>
                                </button>
                                <input type="file" accept="image/*" multiple hidden data-nexdirectory-media-file-input>

                                <div class="nexdirectory-fallback-preview-grid nexdirectory-media-gallery" id="nexdirectory-fallback-thumb-preview">
                                    <?php foreach ($thumb_fallback_urls as $thumb_url) : ?>
                                        <div class="nexdirectory-media-tile" data-nexdirectory-media-url="<?php echo esc_attr($thumb_url); ?>">
                                            <img src="<?php echo esc_url($thumb_url); ?>" alt="<?php esc_attr_e('Fallback thumbnail', 'nexdirectory'); ?>">
                                            <button type="button" class="nexdirectory-media-remove" data-nexdirectory-media-remove aria-label="<?php esc_attr_e('Remove image', 'nexdirectory'); ?>">&times;</button>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                                <p class="description nexdirectory-media-feedback" data-nexdirectory-media-feedback></p>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <details class="nexdirectory-settings-accordion" open>
                                <summary><?php esc_html_e('Advanced Typography, Spacing, and Radius Controls', 'nexdirectory'); ?></summary>
                                <div class="nexdirectory-settings-grid">
                                    <?php
                                    $adv_fields = [
                                        ['id' => 'nexdirectory_style_font_family', 'label' => __('Body Font Family', 'nexdirectory'), 'presets' => $font_presets, 'preset_val' => $body_font_preset, 'val' => $body_font_value, 'ph' => __('Custom font-family stack', 'nexdirectory')],
                                        ['id' => 'nexdirectory_style_display_font_family', 'label' => __('Display Font Family', 'nexdirectory'), 'presets' => $display_font_presets, 'preset_val' => $display_font_preset, 'val' => $display_font_value, 'ph' => __('Custom display font stack', 'nexdirectory')],
                                        ['id' => 'nexdirectory_style_font_size_base', 'label' => __('Base Font Size', 'nexdirectory'), 'presets' => $font_size_presets, 'preset_val' => $base_font_size_preset, 'val' => $base_font_size_value, 'ph' => '18px'],
                                        ['id' => 'nexdirectory_style_h2_size', 'label' => __('H2 Size', 'nexdirectory'), 'presets' => $h2_size_presets, 'preset_val' => $h2_size_preset, 'val' => $h2_size_value, 'ph' => '1.75rem'],
                                        ['id' => 'nexdirectory_style_h3_size', 'label' => __('H3 Size', 'nexdirectory'), 'presets' => $h3_size_presets, 'preset_val' => $h3_size_preset, 'val' => $h3_size_value, 'ph' => '1.35rem'],
                                        ['id' => 'nexdirectory_style_font_weight_body', 'label' => __('Body Font Weight', 'nexdirectory'), 'presets' => $font_weight_presets, 'preset_val' => $body_weight_preset, 'val' => $body_weight_value, 'ph' => '400'],
                                        ['id' => 'nexdirectory_style_font_weight_heading', 'label' => __('Heading Font Weight', 'nexdirectory'), 'presets' => $font_weight_presets, 'preset_val' => $heading_weight_preset, 'val' => $heading_weight_value, 'ph' => '700'],
                                        ['id' => 'nexdirectory_style_spacing_unit', 'label' => __('Base Spacing Unit', 'nexdirectory'), 'presets' => $spacing_unit_presets, 'preset_val' => $spacing_unit_preset, 'val' => $spacing_unit_value, 'ph' => '16px'],
                                        ['id' => 'nexdirectory_style_spacing_scale', 'label' => __('Global Spacing Scale', 'nexdirectory'), 'presets' => $spacing_scale_presets, 'preset_val' => $spacing_scale_preset, 'val' => $spacing_scale_value, 'ph' => '1', 'desc' => __('Controls overall spacing density across listing, map, and dashboard layouts.', 'nexdirectory')],
                                        ['id' => 'nexdirectory_style_radius_md', 'label' => __('Corner Radius (Standard)', 'nexdirectory'), 'presets' => $radius_presets, 'preset_val' => $radius_md_preset, 'val' => $radius_md_value, 'ph' => '12px'],
                                        ['id' => 'nexdirectory_style_radius_lg', 'label' => __('Corner Radius (Large)', 'nexdirectory'), 'presets' => $radius_presets, 'preset_val' => $radius_lg_preset, 'val' => $radius_lg_value, 'ph' => '24px'],
                                    ];
                                    ?>
                                    <?php foreach ($adv_fields as $f) : ?>
                                        <div class="nexdirectory-settings-field">
                                            <label for="<?php echo esc_attr($f['id']); ?>"><?php echo esc_html((string) $f['label']); ?></label>
                                            <div class="nexdirectory-settings-select-helper">
                                                <select data-nexdirectory-preset-target="#<?php echo esc_attr($f['id']); ?>">
                                                    <?php
                                                    $is_assoc = array_keys($f['presets']) !== range(0, count($f['presets']) - 1);
                                                    foreach ($f['presets'] as $k => $v) :
                                                        $opt_val = $is_assoc ? $k : $v;
                                                        $opt_lbl = $v;
                                                        ?>
                                                        <option value="<?php echo esc_attr((string) $opt_val); ?>" <?php selected((string) $f['preset_val'], (string) $opt_val); ?>><?php echo esc_html((string) $opt_lbl); ?></option>
                                                    <?php endforeach; ?>
                                                    <option value="custom" <?php selected((string) $f['preset_val'], 'custom'); ?>><?php esc_html_e('Custom', 'nexdirectory'); ?></option>
                                                </select>
                                                <input type="text" id="<?php echo esc_attr($f['id']); ?>" name="<?php echo esc_attr($f['id']); ?>" value="<?php echo esc_attr((string) $f['val']); ?>" placeholder="<?php echo esc_attr((string) $f['ph']); ?>">
                                            </div>
                                            <?php if (!empty($f['desc'])) : ?>
                                                <p class="description"><?php echo esc_html((string) $f['desc']); ?></p>
                                            <?php endif; ?>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </details>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel" id="nexdirectory-tab-heros" data-tab="design-maps" data-subtab="heros">
                    <h2><?php esc_html_e('Heroes', 'nexdirectory'); ?></h2>
                    <p class="nexdirectory-settings-subheading"><?php esc_html_e('Manage single listing hero defaults, motion behavior, and fallback hero imagery.', 'nexdirectory'); ?></p>

                    <div class="nexdirectory-settings-grid">
                        <div class="nexdirectory-settings-field">
                            <label for="nexdirectory_event_hero_kicker_text"><?php esc_html_e('Single Listing Hero Kicker Text', 'nexdirectory'); ?></label>
                            <p class="description"><?php esc_html_e('Small uppercase label shown above the listing title.', 'nexdirectory'); ?></p>
                            <input type="text" id="nexdirectory_event_hero_kicker_text" name="nexdirectory_event_hero_kicker_text" value="<?php echo esc_attr((string) $this->get_event_hero_kicker_text()); ?>">
                        </div>

                        <div class="nexdirectory-settings-field">
                            <input type="hidden" name="nexdirectory_enable_hero_parallax" value="0">
                            <label><input type="checkbox" name="nexdirectory_enable_hero_parallax" value="1" <?php checked((string) get_option('nexdirectory_enable_hero_parallax', '1'), '1'); ?>> <?php esc_html_e('Enable single-listing hero parallax motion', 'nexdirectory'); ?></label>
                            <p class="description"><?php esc_html_e('If disabled, hero images stay static on desktop and mobile.', 'nexdirectory'); ?></p>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <label for="nexdirectory_event_hero_layout"><?php esc_html_e('Single Listing Hero Layout', 'nexdirectory'); ?></label>
                            <select id="nexdirectory_event_hero_layout" name="nexdirectory_event_hero_layout" data-nexdirectory-visual-select="hero-layout">
                                <option value="cinematic" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'cinematic'); ?>><?php esc_html_e('Cinematic', 'nexdirectory'); ?></option>
                                <option value="compact" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'compact'); ?>><?php esc_html_e('Compact', 'nexdirectory'); ?></option>
                                <option value="split" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'split'); ?>><?php esc_html_e('Split Focus', 'nexdirectory'); ?></option>
                                <option value="minimal" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'minimal'); ?>><?php esc_html_e('Minimal', 'nexdirectory'); ?></option>
                                <option value="immersive" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'immersive'); ?>><?php esc_html_e('Immersive', 'nexdirectory'); ?></option>
                                <option value="spotlight" <?php selected((string) get_option('nexdirectory_event_hero_layout', 'cinematic'), 'spotlight'); ?>><?php esc_html_e('Spotlight', 'nexdirectory'); ?></option>
                            </select>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <label for="nexdirectory_style_fallback_hero_url"><?php esc_html_e('Fallback Hero Image', 'nexdirectory'); ?></label>
                            <input type="hidden" id="nexdirectory_style_fallback_hero_url" name="nexdirectory_style_fallback_hero_url" value="<?php echo esc_attr($hero_fallback_url); ?>">
                            <div class="nexdirectory-media-picker" data-nexdirectory-media-picker data-nexdirectory-media-target="#nexdirectory_style_fallback_hero_url" data-nexdirectory-media-multiple="0" data-nexdirectory-upload-target="cover">
                                <button type="button" class="nexdirectory-media-dropzone" data-nexdirectory-media-open>
                                    <span class="dashicons dashicons-format-image" aria-hidden="true"></span>
                                    <strong><?php esc_html_e('Drag and drop hero image here', 'nexdirectory'); ?></strong>
                                    <span><?php esc_html_e('or click to choose from Media Library', 'nexdirectory'); ?></span>
                                </button>
                                <input type="file" accept="image/*" hidden data-nexdirectory-media-file-input>
                                <div class="nexdirectory-fallback-preview-single nexdirectory-media-gallery" id="nexdirectory-fallback-hero-preview">
                                    <?php if ($hero_fallback_url !== '') : ?>
                                        <div class="nexdirectory-media-tile" data-nexdirectory-media-url="<?php echo esc_attr($hero_fallback_url); ?>">
                                            <img src="<?php echo esc_url($hero_fallback_url); ?>" alt="<?php esc_attr_e('Fallback hero', 'nexdirectory'); ?>">
                                            <button type="button" class="nexdirectory-media-remove" data-nexdirectory-media-remove aria-label="<?php esc_attr_e('Remove image', 'nexdirectory'); ?>">&times;</button>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <p class="description nexdirectory-media-feedback" data-nexdirectory-media-feedback></p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel" id="nexdirectory-tab-layouts" data-tab="design-maps" data-subtab="layouts">
                    <h2><?php esc_html_e('Page Layouts', 'nexdirectory'); ?></h2>
                    <p class="nexdirectory-settings-subheading"><?php esc_html_e('Configure single page layouts and global page spacing.', 'nexdirectory'); ?></p>

                    <div class="nexdirectory-settings-grid">
                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <label for="nexdirectory_design_preset_select"><?php esc_html_e('Visual Preset', 'nexdirectory'); ?></label>
                            <select id="nexdirectory_design_preset_select" data-nexdirectory-design-preset-select>
                                <option value=""><?php esc_html_e('Select a preset...', 'nexdirectory'); ?></option>
                                <option value="launchpad-modern"><?php esc_html_e('Launchpad Modern', 'nexdirectory'); ?></option>
                                <option value="minimal-focus"><?php esc_html_e('Minimal Focus', 'nexdirectory'); ?></option>
                                <option value="editorial-story"><?php esc_html_e('Editorial Story', 'nexdirectory'); ?></option>
                                <option value="executive-spotlight"><?php esc_html_e('Executive Spotlight', 'nexdirectory'); ?></option>
                                <option value="immersive-showcase"><?php esc_html_e('Immersive Showcase', 'nexdirectory'); ?></option>
                                <option value="compact-control"><?php esc_html_e('Compact Control', 'nexdirectory'); ?></option>
                                <option value="zen-clean"><?php esc_html_e('Zen Clean', 'nexdirectory'); ?></option>
                                <option value="bold-campaign"><?php esc_html_e('Bold Campaign', 'nexdirectory'); ?></option>
                                <option value="gallery-plus"><?php esc_html_e('Gallery Plus', 'nexdirectory'); ?></option>
                                <option value="professional-default"><?php esc_html_e('Professional Default', 'nexdirectory'); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e('Applies Hero Template, Page Layout, and Design Token values in one step. You can still fine-tune fields after applying.', 'nexdirectory'); ?></p>
                            <div class="nexdirectory-settings-preset-bar">
                                <button type="button" class="button button-secondary" data-nexdirectory-design-preset-apply><?php esc_html_e('Apply Preset', 'nexdirectory'); ?></button>
                                <span class="nexdirectory-settings-preset-status" data-nexdirectory-design-preset-status aria-live="polite"></span>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <label for="nexdirectory_event_page_layout"><?php esc_html_e('Single Listing Page Layout', 'nexdirectory'); ?></label>
                            <?php $single_page_layout_value = $this->sanitize_event_page_layout_option((string) get_option('nexdirectory_event_page_layout', 'modern')); ?>
                            <select id="nexdirectory_event_page_layout" name="nexdirectory_event_page_layout" data-nexdirectory-visual-select="single-layout">
                                <option value="modern" <?php selected($single_page_layout_value, 'modern'); ?>><?php esc_html_e('Modern (Default)', 'nexdirectory'); ?></option>
                                <option value="fifty-fifty" <?php selected($single_page_layout_value, 'fifty-fifty'); ?>><?php esc_html_e('50/50', 'nexdirectory'); ?></option>
                                <option value="single-column" <?php selected($single_page_layout_value, 'single-column'); ?>><?php esc_html_e('Single Column', 'nexdirectory'); ?></option>
                                <option value="editorial" <?php selected($single_page_layout_value, 'editorial'); ?>><?php esc_html_e('Editorial', 'nexdirectory'); ?></option>
                                <option value="left-sidebar" <?php selected($single_page_layout_value, 'left-sidebar'); ?>><?php esc_html_e('Left Sidebar', 'nexdirectory'); ?></option>
                                <option value="zig-zag" <?php selected($single_page_layout_value, 'zig-zag'); ?>><?php esc_html_e('Zig Zag', 'nexdirectory'); ?></option>
                                <option value="full3" <?php selected($single_page_layout_value, 'full3'); ?>><?php esc_html_e('Full 3', 'nexdirectory'); ?></option>
                                <option value="zen" <?php selected($single_page_layout_value, 'zen'); ?>><?php esc_html_e('Zen', 'nexdirectory'); ?></option>
                            </select>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <label for="nexdirectory_event_gallery_type"><?php esc_html_e('Single Listing Gallery Style', 'nexdirectory'); ?></label>
                            <?php $single_gallery_type_value = $this->sanitize_event_gallery_type_option((string) get_option('nexdirectory_event_gallery_type', 'default')); ?>
                            <select id="nexdirectory_event_gallery_type" name="nexdirectory_event_gallery_type">
                                <option value="default" <?php selected($single_gallery_type_value, 'default'); ?>><?php esc_html_e('Default', 'nexdirectory'); ?></option>
                                <option value="carousel" <?php selected($single_gallery_type_value, 'carousel'); ?>><?php esc_html_e('Carousel', 'nexdirectory'); ?></option>
                                <option value="wall" <?php selected($single_gallery_type_value, 'wall'); ?>><?php esc_html_e('Wall (Masonry)', 'nexdirectory'); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e('Controls the image gallery style on single listing pages.', 'nexdirectory'); ?></p>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-art" aria-hidden="true"></span><?php esc_html_e('Design Tokens (Quick Styling)', 'nexdirectory'); ?></h3>
                            <p class="description"><?php esc_html_e('These controls affect card styling, buttons, fields, spacing density, and overall content width across frontend pages.', 'nexdirectory'); ?></p>
                            <div class="nexdirectory-settings-grid">
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_box_style"><?php esc_html_e('Box / Card Style', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_box_style" name="nexdirectory_style_box_style">
                                        <option value="default" <?php selected($style_box_style_value, 'default'); ?>><?php esc_html_e('Default', 'nexdirectory'); ?></option>
                                        <option value="gradient" <?php selected($style_box_style_value, 'gradient'); ?>><?php esc_html_e('Gradient', 'nexdirectory'); ?></option>
                                        <option value="bold" <?php selected($style_box_style_value, 'bold'); ?>><?php esc_html_e('Bold Accent', 'nexdirectory'); ?></option>
                                        <option value="neumorphic" <?php selected($style_box_style_value, 'neumorphic'); ?>><?php esc_html_e('Neumorphic', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_box_style">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="default">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-box-default" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Default', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Clean white cards with subtle borders.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="gradient">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-box-gradient" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Gradient', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Soft brand-tinted card background.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="bold">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-box-bold" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Bold Accent', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Stronger border and highlight treatment.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="neumorphic">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-box-neumorphic" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Neumorphic', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Soft lifted cards with minimal border.', 'nexdirectory'); ?></span>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_button_style"><?php esc_html_e('Button Style', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_button_style" name="nexdirectory_style_button_style">
                                        <option value="solid" <?php selected($style_button_style_value, 'solid'); ?>><?php esc_html_e('Solid', 'nexdirectory'); ?></option>
                                        <option value="outline" <?php selected($style_button_style_value, 'outline'); ?>><?php esc_html_e('Outline', 'nexdirectory'); ?></option>
                                        <option value="soft" <?php selected($style_button_style_value, 'soft'); ?>><?php esc_html_e('Soft', 'nexdirectory'); ?></option>
                                        <option value="dark" <?php selected($style_button_style_value, 'dark'); ?>><?php esc_html_e('Dark', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_button_style">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="solid">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-btn-solid" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Solid', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Primary filled call-to-action buttons.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="outline">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-btn-outline" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Outline', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Transparent buttons with strong borders.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="soft">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-btn-soft" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Soft', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Muted filled buttons for calmer UI.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="dark">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-btn-dark" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Dark', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('High contrast dark action styling.', 'nexdirectory'); ?></span>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_button_radius_mode"><?php esc_html_e('Button Corner Shape', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_button_radius_mode" name="nexdirectory_style_button_radius_mode">
                                        <option value="inherit" <?php selected($style_button_radius_mode_value, 'inherit'); ?>><?php esc_html_e('Default', 'nexdirectory'); ?></option>
                                        <option value="pill" <?php selected($style_button_radius_mode_value, 'pill'); ?>><?php esc_html_e('Pill', 'nexdirectory'); ?></option>
                                        <option value="sharp" <?php selected($style_button_radius_mode_value, 'sharp'); ?>><?php esc_html_e('Sharp', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid nexdirectory-design-choice-grid-compact" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_button_radius_mode">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="inherit">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-radius-inherit" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Default', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="pill">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-radius-pill" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Pill', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="sharp">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-radius-sharp" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Sharp', 'nexdirectory'); ?></strong>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_input_style"><?php esc_html_e('Input Field Style', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_input_style" name="nexdirectory_style_input_style">
                                        <option value="outline" <?php selected($style_input_style_value, 'outline'); ?>><?php esc_html_e('Outline', 'nexdirectory'); ?></option>
                                        <option value="filled" <?php selected($style_input_style_value, 'filled'); ?>><?php esc_html_e('Filled', 'nexdirectory'); ?></option>
                                        <option value="underlined" <?php selected($style_input_style_value, 'underlined'); ?>><?php esc_html_e('Underlined', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid nexdirectory-design-choice-grid-compact" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_input_style">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="outline">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-input-outline" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Outline', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="filled">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-input-filled" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Filled', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="underlined">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-input-underlined" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Underlined', 'nexdirectory'); ?></strong>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_density_mode"><?php esc_html_e('Layout Density', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_density_mode" name="nexdirectory_style_density_mode">
                                        <option value="compact" <?php selected($style_density_mode_value, 'compact'); ?>><?php esc_html_e('Compact', 'nexdirectory'); ?></option>
                                        <option value="comfortable" <?php selected($style_density_mode_value, 'comfortable'); ?>><?php esc_html_e('Comfortable', 'nexdirectory'); ?></option>
                                        <option value="loose" <?php selected($style_density_mode_value, 'loose'); ?>><?php esc_html_e('Loose', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid nexdirectory-design-choice-grid-compact" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_density_mode">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="compact">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-density-compact" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Compact', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="comfortable">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-density-comfortable" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Comfortable', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="loose">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-density-loose" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Loose', 'nexdirectory'); ?></strong>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_border_mode"><?php esc_html_e('Border Emphasis', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_border_mode" name="nexdirectory_style_border_mode">
                                        <option value="minimal" <?php selected($style_border_mode_value, 'minimal'); ?>><?php esc_html_e('Minimal', 'nexdirectory'); ?></option>
                                        <option value="subtle" <?php selected($style_border_mode_value, 'subtle'); ?>><?php esc_html_e('Subtle', 'nexdirectory'); ?></option>
                                        <option value="strong" <?php selected($style_border_mode_value, 'strong'); ?>><?php esc_html_e('Strong', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid nexdirectory-design-choice-grid-compact" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_border_mode">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="minimal">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-border-minimal" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Minimal', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="subtle">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-border-subtle" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Subtle', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="strong">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-border-strong" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Strong', 'nexdirectory'); ?></strong>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_style_shadow_mode"><?php esc_html_e('Shadow Depth', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_shadow_mode" name="nexdirectory_style_shadow_mode">
                                        <option value="none" <?php selected($style_shadow_mode_value, 'none'); ?>><?php esc_html_e('None', 'nexdirectory'); ?></option>
                                        <option value="soft" <?php selected($style_shadow_mode_value, 'soft'); ?>><?php esc_html_e('Soft', 'nexdirectory'); ?></option>
                                        <option value="medium" <?php selected($style_shadow_mode_value, 'medium'); ?>><?php esc_html_e('Medium', 'nexdirectory'); ?></option>
                                        <option value="dramatic" <?php selected($style_shadow_mode_value, 'dramatic'); ?>><?php esc_html_e('Dramatic', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid nexdirectory-design-choice-grid-compact" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_shadow_mode">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="none">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-shadow-none" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('None', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="soft">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-shadow-soft" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Soft', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="medium">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-shadow-medium" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Medium', 'nexdirectory'); ?></strong>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="dramatic">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-shadow-dramatic" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Dramatic', 'nexdirectory'); ?></strong>
                                        </button>
                                    </div>
                                </div>

                                <div class="nexdirectory-settings-field nexdirectory-full">
                                    <label for="nexdirectory_style_content_width"><?php esc_html_e('Content Width', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_style_content_width" name="nexdirectory_style_content_width">
                                        <option value="narrow" <?php selected($style_content_width_value, 'narrow'); ?>><?php esc_html_e('Narrow', 'nexdirectory'); ?></option>
                                        <option value="standard" <?php selected($style_content_width_value, 'standard'); ?>><?php esc_html_e('Standard', 'nexdirectory'); ?></option>
                                        <option value="wide" <?php selected($style_content_width_value, 'wide'); ?>><?php esc_html_e('Wide', 'nexdirectory'); ?></option>
                                        <option value="full" <?php selected($style_content_width_value, 'full'); ?>><?php esc_html_e('Full Width', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="nexdirectory-design-choice-grid" data-nexdirectory-choice-grid data-nexdirectory-select="#nexdirectory_style_content_width">
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="narrow">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-width-narrow" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Narrow', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Reading-focused narrow content container.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="standard">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-width-standard" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Standard', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Balanced width for most event directories.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="wide">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-width-wide" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Wide', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('More horizontal room for cards and maps.', 'nexdirectory'); ?></span>
                                        </button>
                                        <button type="button" class="nexdirectory-design-choice" data-nexdirectory-choice-value="full">
                                            <span class="nexdirectory-design-choice-swatch nexdirectory-swatch-width-full" aria-hidden="true"></span>
                                            <strong><?php esc_html_e('Full Width', 'nexdirectory'); ?></strong>
                                            <span><?php esc_html_e('Maximum canvas with minimal container limits.', 'nexdirectory'); ?></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field">
                            <label for="nexdirectory_page_side_padding"><?php esc_html_e('Page Padding (Left/Right)', 'nexdirectory'); ?></label>
                            <input type="text" id="nexdirectory_page_side_padding" name="nexdirectory_page_side_padding" value="<?php echo esc_attr($page_side_padding_value); ?>" placeholder="10%">
                            <p class="description"><?php esc_html_e('Applies to every frontend page wrapper. Use percent values from 0% to 15% (example: 10%).', 'nexdirectory'); ?></p>
                        </div>

                        <div class="nexdirectory-settings-field">
                            <label for="nexdirectory_page_side_padding_mobile"><?php esc_html_e('Mobile Page Padding (Left/Right)', 'nexdirectory'); ?></label>
                            <input type="text" id="nexdirectory_page_side_padding_mobile" name="nexdirectory_page_side_padding_mobile" value="<?php echo esc_attr($page_side_padding_mobile_value); ?>" placeholder="<?php esc_attr_e('Leave blank to inherit desktop', 'nexdirectory'); ?>">
                            <p class="description"><?php esc_html_e('Separate mobile side padding value from 0% to 15% (example: 8%).', 'nexdirectory'); ?></p>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel" id="nexdirectory-tab-maps" data-tab="design-maps" data-subtab="maps">
                    <h2><?php esc_html_e('Maps', 'nexdirectory'); ?></h2>
                    <p class="nexdirectory-settings-subheading"><?php esc_html_e('Configure map views, providers, styles, and discovery behavior.', 'nexdirectory'); ?></p>

                    <div class="nexdirectory-settings-grid">
                        <?php $map_connected = !empty($settings_map_health['connected']); ?>
                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <div class="nexdirectory-settings-section-card nexdirectory-connection-card">
                                <div class="nexdirectory-connection-header">
                                    <h3><span class="dashicons dashicons-location-alt"></span><?php esc_html_e('Map Connection Status', 'nexdirectory'); ?></h3>
                                    <span class="nexdirectory-connection-badge <?php echo $map_connected ? 'is-connected' : 'is-disconnected'; ?>">
                                        <?php echo esc_html($map_connected ? __('Connected', 'nexdirectory') : __('Not connected', 'nexdirectory')); ?>
                                    </span>
                                </div>
                                <p class="description"><?php echo esc_html((string) ($settings_map_health['summary'] ?? __('Connects your configured provider API keys to render map tiles correctly.', 'nexdirectory'))); ?></p>
                                <div class="nexdirectory-settings-actions nexdirectory-connection-actions">
                                    <button type="submit" class="button button-secondary" form="nexdirectory-test-map-form"><?php esc_html_e('Test Map Connection', 'nexdirectory'); ?></button>
                                </div>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-screenoptions" aria-hidden="true"></span><?php esc_html_e('Layout & Region', 'nexdirectory'); ?></h3>
                            <div class="nexdirectory-settings-grid">
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_layout_default"><?php esc_html_e('Map Layout Template', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_layout_default" name="nexdirectory_map_layout_default">
                                        <option value="three-column" <?php selected($map_layout_value, 'three-column'); ?>><?php esc_html_e('Sidebar + Map (three-column)', 'nexdirectory'); ?></option>
                                        <option value="below-list" <?php selected($map_layout_value, 'below-list'); ?>><?php esc_html_e('Map below list', 'nexdirectory'); ?></option>
                                        <option value="below-grid" <?php selected($map_layout_value, 'below-grid'); ?>><?php esc_html_e('Map below grid', 'nexdirectory'); ?></option>
                                        <option value="below-grid-large" <?php selected($map_layout_value, 'below-grid-large'); ?>><?php esc_html_e('Map below large grid', 'nexdirectory'); ?></option>
                                        <option value="grid-no-map" <?php selected($map_layout_value, 'grid-no-map'); ?>><?php esc_html_e('Grid only (no map)', 'nexdirectory'); ?></option>
                                        <option value="grid-no-map-large" <?php selected($map_layout_value, 'grid-no-map-large'); ?>><?php esc_html_e('Large grid only (no map)', 'nexdirectory'); ?></option>
                                    </select>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_view_template"><?php esc_html_e('Default Map View', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_view_template" name="nexdirectory_map_view_template">
                                        <option value="default" <?php selected($map_view_template_value, 'default'); ?>><?php esc_html_e('Map Default View', 'nexdirectory'); ?></option>
                                        <option value="triple" <?php selected($map_view_template_value, 'triple'); ?>><?php esc_html_e('Triple View', 'nexdirectory'); ?></option>
                                    </select>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_focus_region"><?php esc_html_e('Map Focus Region', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_focus_region" name="nexdirectory_map_focus_region">
                                        <?php foreach ((array) $map_focus_region_options as $focus_region_id => $focus_region_label) : ?>
                                            <option value="<?php echo esc_attr((string) $focus_region_id); ?>" <?php selected($map_focus_region_value, (string) $focus_region_id); ?>>
                                                <?php echo esc_html((string) $focus_region_label); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <p class="description"><?php esc_html_e('Restricts pan/zoom bounds. Example: UK or Europe.', 'nexdirectory'); ?></p>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_results_density"><?php esc_html_e('Map Results Density', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_results_density" name="nexdirectory_map_results_density">
                                        <option value="comfortable" <?php selected((string) get_option('nexdirectory_map_results_density', 'comfortable'), 'comfortable'); ?>><?php esc_html_e('Comfortable', 'nexdirectory'); ?></option>
                                        <option value="compact" <?php selected((string) get_option('nexdirectory_map_results_density', 'comfortable'), 'compact'); ?>><?php esc_html_e('Compact', 'nexdirectory'); ?></option>
                                    </select>
                                </div>
                                <div class="nexdirectory-settings-field nexdirectory-full">
                                    <label for="nexdirectory_map_mobile_filter_mode"><?php esc_html_e('Mobile Map Filter UX', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_mobile_filter_mode" name="nexdirectory_map_mobile_filter_mode">
                                        <option value="drawer" <?php selected($map_mobile_filter_mode, 'drawer'); ?>><?php esc_html_e('Slide-in Drawer (Recommended)', 'nexdirectory'); ?></option>
                                        <option value="inline" <?php selected($map_mobile_filter_mode, 'inline'); ?>><?php esc_html_e('Inline Stack', 'nexdirectory'); ?></option>
                                    </select>
                                    <p class="description"><?php esc_html_e('Drawer keeps filters off-canvas on phones to save space.', 'nexdirectory'); ?></p>
                                </div>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-admin-site-alt3" aria-hidden="true"></span><?php esc_html_e('Provider & Styling', 'nexdirectory'); ?></h3>
                            <div class="nexdirectory-settings-grid">
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_provider"><?php esc_html_e('Map Provider', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_provider" name="nexdirectory_map_provider">
                                        <option value="openstreetmap" <?php selected($map_provider_value, 'openstreetmap'); ?>><?php esc_html_e('OpenStreetMap', 'nexdirectory'); ?></option>
                                        <option value="mapbox" <?php selected($map_provider_value, 'mapbox'); ?>><?php esc_html_e('Mapbox', 'nexdirectory'); ?></option>
                                        <option value="google" <?php selected($map_provider_value, 'google'); ?>><?php esc_html_e('Google Maps Tiles', 'nexdirectory'); ?></option>
                                    </select>
                                    <?php /* translators: 1: Placeholder value 1, 2: Placeholder value 2, 3: Placeholder value 3. */ ?>
                                    <p class="description"><?php echo wp_kses_post(sprintf(__('Docs: <a href="%1$s" target="_blank" rel="noopener noreferrer">OSM</a> · <a href="%2$s" target="_blank" rel="noopener noreferrer">Mapbox</a> · <a href="%3$s" target="_blank" rel="noopener noreferrer">Google</a>', 'nexdirectory'), esc_url('https://www.openstreetmap.org/'), esc_url('https://docs.mapbox.com/'), esc_url('https://developers.google.com/maps'))); ?></p>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_map_style"><?php esc_html_e('Map Style / Skin', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_map_style" name="nexdirectory_map_style">
                                        <option value="osm-standard" data-provider="openstreetmap" <?php selected($map_style_value, 'osm-standard'); ?>><?php esc_html_e('Standard (OSM)', 'nexdirectory'); ?></option>
                                        <option value="carto-light" data-provider="openstreetmap" <?php selected($map_style_value, 'carto-light'); ?>><?php esc_html_e('Light (Carto Positron)', 'nexdirectory'); ?></option>
                                        <option value="carto-dark" data-provider="openstreetmap" <?php selected($map_style_value, 'carto-dark'); ?>><?php esc_html_e('Dark (Carto DarkMatter)', 'nexdirectory'); ?></option>
                                        <option value="osm-hot" data-provider="openstreetmap" <?php selected($map_style_value, 'osm-hot'); ?>><?php esc_html_e('Humanitarian (HOT)', 'nexdirectory'); ?></option>
                                        <option value="topo" data-provider="openstreetmap" <?php selected($map_style_value, 'topo'); ?>><?php esc_html_e('Topographic', 'nexdirectory'); ?></option>
                                        <option value="mapbox-streets" data-provider="mapbox" <?php selected($map_style_value, 'mapbox-streets'); ?>><?php esc_html_e('Mapbox Streets', 'nexdirectory'); ?></option>
                                        <option value="mapbox-outdoors" data-provider="mapbox" <?php selected($map_style_value, 'mapbox-outdoors'); ?>><?php esc_html_e('Mapbox Outdoors', 'nexdirectory'); ?></option>
                                        <option value="mapbox-satellite" data-provider="mapbox" <?php selected($map_style_value, 'mapbox-satellite'); ?>><?php esc_html_e('Mapbox Satellite', 'nexdirectory'); ?></option>
                                        <option value="google-roadmap" data-provider="google" <?php selected($map_style_value, 'google-roadmap'); ?>><?php esc_html_e('Google Roadmap', 'nexdirectory'); ?></option>
                                        <option value="google-satellite" data-provider="google" <?php selected($map_style_value, 'google-satellite'); ?>><?php esc_html_e('Google Satellite', 'nexdirectory'); ?></option>
                                        <option value="custom" data-provider="all" <?php selected($map_style_value, 'custom'); ?>><?php esc_html_e('Custom Tile URL', 'nexdirectory'); ?></option>
                                    </select>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_mapbox_access_token"><?php esc_html_e('Mapbox Access Token', 'nexdirectory'); ?></label>
                                    <input type="password" id="nexdirectory_mapbox_access_token" name="nexdirectory_mapbox_access_token" value="" autocomplete="off" placeholder="<?php esc_attr_e('Leave blank to keep existing token', 'nexdirectory'); ?>">
                                    <?php /* translators: %s: Placeholder value. */ ?>
                                    <p class="description"><?php echo wp_kses_post(sprintf(__('Create token in <a href="%s" target="_blank" rel="noopener noreferrer">Mapbox Account</a>.', 'nexdirectory'), esc_url('https://account.mapbox.com/access-tokens/'))); ?></p>
                                </div>
                                <div class="nexdirectory-settings-field">
                                    <label for="nexdirectory_mapbox_style_id"><?php esc_html_e('Mapbox Style ID', 'nexdirectory'); ?></label>
                                    <select id="nexdirectory_mapbox_style_id" name="nexdirectory_mapbox_style_id">
                                        <?php foreach ((array) $mapbox_style_options as $mapbox_style_id => $mapbox_style_label) : ?>
                                            <option value="<?php echo esc_attr((string) $mapbox_style_id); ?>" <?php selected($mapbox_style_value, (string) $mapbox_style_id); ?>>
                                                <?php echo esc_html((string) $mapbox_style_label); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="nexdirectory-settings-field nexdirectory-full">
                                    <div class="nexdirectory-settings-section-card">
                                        <h3><span class="dashicons dashicons-admin-site-alt3"></span><?php esc_html_e('Custom Map Skin Config', 'nexdirectory'); ?></h3>
                                        <div class="nexdirectory-settings-grid">
                                            <div class="nexdirectory-settings-field">
                                                <label for="nexdirectory_map_custom_tile_url"><?php esc_html_e('Tile URL Template', 'nexdirectory'); ?></label>
                                                <input type="text" id="nexdirectory_map_custom_tile_url" name="nexdirectory_map_custom_tile_url" value="<?php echo esc_attr((string) get_option('nexdirectory_map_custom_tile_url', '')); ?>" placeholder="https://{s}.example.com/tiles/{z}/{x}/{y}.png">
                                            </div>
                                            <div class="nexdirectory-settings-field">
                                                <label for="nexdirectory_map_custom_tile_subdomains"><?php esc_html_e('Subdomains', 'nexdirectory'); ?></label>
                                                <input type="text" id="nexdirectory_map_custom_tile_subdomains" name="nexdirectory_map_custom_tile_subdomains" value="<?php echo esc_attr((string) get_option('nexdirectory_map_custom_tile_subdomains', 'a,b,c')); ?>" placeholder="a,b,c">
                                            </div>
                                            <div class="nexdirectory-settings-field nexdirectory-full">
                                                <label for="nexdirectory_map_custom_tile_attribution"><?php esc_html_e('Attribution', 'nexdirectory'); ?></label>
                                                <input type="text" id="nexdirectory_map_custom_tile_attribution" name="nexdirectory_map_custom_tile_attribution" value="<?php echo esc_attr((string) get_option('nexdirectory_map_custom_tile_attribution', '&copy; OpenStreetMap contributors')); ?>">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="nexdirectory-settings-field nexdirectory-full">
                            <h3 class="nexdirectory-settings-core-title"><span class="dashicons dashicons-location" aria-hidden="true"></span><?php esc_html_e('Custom Map Pin Image', 'nexdirectory'); ?></h3>
                            <p class="description"><?php esc_html_e('Used for map markers across archive and map views.', 'nexdirectory'); ?></p>
                            <?php $map_pin_url = esc_url((string) get_option('nexdirectory_map_pin_url', '')); ?>
                            <input type="hidden" id="nexdirectory_map_pin_url" name="nexdirectory_map_pin_url" value="<?php echo esc_attr($map_pin_url); ?>">

                            <div class="nexdirectory-media-picker" data-nexdirectory-media-picker data-nexdirectory-media-target="#nexdirectory_map_pin_url" data-nexdirectory-media-multiple="0" data-nexdirectory-upload-target="cover">
                                <button type="button" class="nexdirectory-media-dropzone" data-nexdirectory-media-open>
                                    <span class="dashicons dashicons-location-alt" aria-hidden="true"></span>
                                    <strong><?php esc_html_e('Choose map pin image', 'nexdirectory'); ?></strong>
                                    <span><?php esc_html_e('Drag and drop or click to upload', 'nexdirectory'); ?></span>
                                </button>
                                <input type="file" accept="image/*" hidden data-nexdirectory-media-file-input>

                                <div class="nexdirectory-fallback-preview-single nexdirectory-media-gallery" id="nexdirectory-map-pin-preview">
                                    <?php if ($map_pin_url !== '') : ?>
                                        <div class="nexdirectory-media-tile" data-nexdirectory-media-url="<?php echo esc_attr($map_pin_url); ?>">
                                            <img src="<?php echo esc_url($map_pin_url); ?>" alt="<?php esc_attr_e('Map pin image', 'nexdirectory'); ?>">
                                            <button type="button" class="nexdirectory-media-remove" data-nexdirectory-media-remove aria-label="<?php esc_attr_e('Remove map pin image', 'nexdirectory'); ?>">&times;</button>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <p class="description nexdirectory-media-feedback" data-nexdirectory-media-feedback></p>
                            </div>
                        </div>
                    </div>
                </section>
