<?php

/**
 * Provide a admin area view for the plugin settings
 *
 * This file is used to markup the admin-facing settings of the plugin.
 *
 * @link       https://pinnerpress.com
 * @since      0.1.0
 *
 * @package    PinnerPress
 * @subpackage PinnerPress/admin/partials
 */

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

// Note: Redirect logic moved to admin class to prevent headers already sent error

// Check if user has premium access
$is_premium = function_exists('pinnerpress_is_premium') ? pinnerpress_is_premium() : false;

// Check if user can use premium features (includes trial users)
$can_use_premium_features = function_exists('pinnerpress_can_use_premium_features') ? pinnerpress_can_use_premium_features() : false;

// Get the active tab or default to 'general'
// For admin navigation tabs, we don't typically require nonces as they don't modify data
// However, we still need to sanitize the input
$active_tab = 'general'; // Default value changed to general

// Check if we're in the admin area and user has proper capabilities before processing GET data
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Admin navigation tabs don't require nonce verification
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Admin navigation tabs for UI display only
if (is_admin() && current_user_can('manage_options') && isset($_GET['tab'])) {
    // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only admin navigation param
    $requested_tab = sanitize_text_field(wp_unslash($_GET['tab']));
    if (!empty($requested_tab) && is_string($requested_tab)) {
        $allowed_tabs = array('general', 'settings', 'follow_box', 'banner', 'call_out', 'filters', 'migration');
        if (in_array($requested_tab, $allowed_tabs, true)) {
            $active_tab = $requested_tab;
        }
    }
}
?>

<div class="wrap pinnerpress-admin">
    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
    
    <div class="pinnerpress-admin-header">
        <div class="pinnerpress-logo">
            <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- Plugin logo asset ?>
            <img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/pinnerpress-logo.png'); ?>" alt="<?php echo esc_attr__('PinnerPress Logo', 'pinnerpress'); ?>">
        </div>
        <div class="pinnerpress-header-content">
            <h2><?php esc_html_e('PinnerPress Settings', 'pinnerpress'); ?></h2>
            <p><?php esc_html_e('Configure your Pinterest integration settings below.', 'pinnerpress'); ?></p>
        </div>
    </div>

<style>
.pinnerpress-analytics-limitation {
    border-left: 4px solid #E60023;
    padding: 12px;
    background-color: #fef4f4;
    margin: 20px 0;
}

.pinnerpress-analytics-limitation h4 {
    margin: 0 0 10px 0;
    color: #E60023;
}

.pinnerpress-analytics-limitation p {
    margin: 0 0 10px 0;
}

.pinnerpress-analytics-limitation .button-primary {
    background-color: #E60023;
    border-color: #E60023;
}

.pinnerpress-analytics-limitation .button-primary:hover {
    background-color: #c8001f;
    border-color: #c8001f;
}
</style>

    <div class="pinnerpress-admin-content">
        <?php if (!$can_use_premium_features && !in_array($active_tab, ['follow_box', 'banner'])): ?>
            <?php 
            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Function returns properly escaped HTML
            echo pinnerpress_get_upgrade_notification(); 
            ?>
        <?php endif; ?>
    
    <div class="pinnerpress-tabs-wrapper">
        <h2 class="nav-tab-wrapper">
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e('General', 'pinnerpress'); ?></a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=settings" class="nav-tab <?php echo $active_tab == 'settings' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e('Pin Button', 'pinnerpress'); ?></a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=follow_box" 
               class="nav-tab <?php echo $active_tab == 'follow_box' ? 'nav-tab-active' : ''; ?> <?php echo !pinnerpress_is_feature_enabled('follow_box') ? 'pinnerpress-premium-tab' : ''; ?>">
               <?php esc_html_e('Follow Box', 'pinnerpress'); ?>
               <?php if (!pinnerpress_is_feature_enabled('follow_box')): ?>
                   <span class="pinnerpress-premium-badge">PRO</span>
               <?php endif; ?>
            </a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=banner" 
               class="nav-tab <?php echo $active_tab == 'banner' ? 'nav-tab-active' : ''; ?> <?php echo !pinnerpress_is_feature_enabled('image_banner') ? 'pinnerpress-premium-tab' : ''; ?>">
               <?php esc_html_e('Image Banner', 'pinnerpress'); ?>
               <?php if (!pinnerpress_is_feature_enabled('image_banner')): ?>
                   <span class="pinnerpress-premium-badge">PRO</span>
               <?php endif; ?>
            </a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=call_out" class="nav-tab <?php echo $active_tab == 'call_out' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e('Call Out Banners', 'pinnerpress'); ?></a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=filters" class="nav-tab <?php echo $active_tab == 'filters' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e('Filters', 'pinnerpress'); ?></a>
            <a href="?page=<?php echo esc_attr($this->plugin_name); ?>-settings&tab=migration" class="nav-tab <?php echo $active_tab == 'migration' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e('Migration', 'pinnerpress'); ?></a>
        </h2>
        
        <div class="pinnerpress-tab-content">
            <form method="post" action="options.php" class="pinnerpress-settings-form">
                

                
                <?php if ($active_tab == 'general'): ?>
                <!-- General Tab Content -->
                <?php
                // This prints out all hidden setting fields for the General tab only
                settings_fields('pinnerpress_settings_general');
                do_settings_sections('pinnerpress_settings');
                ?>
                

                
                <div class="pinnerpress-settings-container <?php echo !$is_premium ? 'pinnerpress-free-settings' : ''; ?>">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Pinterest Profile Settings', 'pinnerpress'); ?></h2>
                                
                                <?php if (!$is_premium): ?>
                                <div class="pinnerpress-free-limitation">
                                    <p><span class="dashicons dashicons-info"></span><strong><?php esc_html_e('Free Version', 'pinnerpress'); ?></strong> - <?php esc_html_e('Some advanced Pinterest features are available in the premium version.', 'pinnerpress'); ?></p>
                                </div>
                                <?php endif; ?>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pinterest URL', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_pinterest_url" id="pinnerpress_pinterest_url" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_pinterest_url', '')); ?>" placeholder="<?php echo esc_attr__('https://www.pinterest.com/yourusername', 'pinnerpress'); ?>" />
                                            <p class="description">
                                                <?php esc_html_e('Enter your full Pinterest profile URL (e.g., https://www.pinterest.com/yourusername).', 'pinnerpress'); ?>
                                            </p>
                                            <p class="pinnerpress-url-error" style="color: #dc3232; font-style: italic; display: none;"><?php esc_html_e('Invalid Pinterest URL format. URL must start with https://pinterest. or https://www.pinterest. followed by a valid domain and your username.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pinterest Display Name', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_pinterest_display_name" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_pinterest_display_name', '')); ?>" placeholder="<?php echo esc_attr__('PinnerPress', 'pinnerpress'); ?>" maxlength="20" />
                                            <p class="description">
                                                <?php esc_html_e('The name displayed in Pinterest-related features. Maximum 20 characters.', 'pinnerpress'); ?>
                                            </p>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Profile Image', 'pinnerpress'); ?></th>
                                        <td>
                                            <div class="pinnerpress-media-field">
                                                <input type="hidden" name="pinnerpress_profile_image" id="pinnerpress_profile_image" value="<?php echo esc_attr(get_option('pinnerpress_profile_image', '')); ?>" />
                                                <?php 
                                                $profile_image = get_option('pinnerpress_profile_image', '');
                                                $show_preview = !empty($profile_image);
                                                ?>
                                                <div class="pinnerpress-media-preview" <?php echo (!$show_preview ? 'style="display:none;"' : ''); ?>>
                                                    <?php
                                                    if ($show_preview) {
                                                        // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- User uploaded profile image
                                                        echo '<img src="' . esc_url($profile_image) . '" alt="' . esc_attr__('Profile Image', 'pinnerpress') . '" style="max-width: 100px; max-height: 100px;" />';
                                                    }
                                                    ?>
                                                </div>
                                                <div class="button-container">
                                                    <button type="button" class="button pinnerpress-media-upload" data-target="pinnerpress_profile_image"><?php esc_html_e('Select Image', 'pinnerpress'); ?></button>
                                                    <button type="button" class="button pinnerpress-media-remove" data-target="pinnerpress_profile_image" <?php echo empty($profile_image) ? 'style="display:none;"' : ''; ?>><?php esc_html_e('Remove', 'pinnerpress'); ?></button>
                                                </div>
                                                <p class="description">
                                                    <?php esc_html_e('Choose a custom profile image or leave empty to use the default Pinterest profile image. Recommended size: 200x200 pixels.', 'pinnerpress'); ?>
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Disable Rich Pins', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php if (pinnerpress_is_feature_enabled('disable_rich_pins')): ?>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_disable_rich_pins" value="on" <?php checked(get_option('pinnerpress_disable_rich_pins'), 'on'); ?> />
                                                    <?php esc_html_e('Disable rich pins on this site', 'pinnerpress'); ?>
                                                </label>
                                                <p class="description"><?php esc_html_e('When checked, a meta tag will be added to all pages telling Pinterest not to create rich pins from your content.', 'pinnerpress'); ?></p>
                                            </fieldset>
                                            <?php else: ?>
                                            <div class="pinnerpress-free-limitation">
                                                <p><?php esc_html_e('Rich Pins configuration is available in the premium version.', 'pinnerpress'); ?></p>
                                            </div>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Enable Hidden Pins Button', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php if (pinnerpress_is_feature_enabled('enable_hidden_pins')): ?>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_enable_hidden_pins" value="1" <?php checked(get_option('pinnerpress_enable_hidden_pins', '0'), '1'); ?> />
                                                    <?php esc_html_e('Show "Pin this post" button below post titles', 'pinnerpress'); ?>
                                                </label>
                                                <p class="description">
                                                    <?php esc_html_e('When enabled, a "Pin this post" button will appear below post titles. Clicking it opens a modal showing hidden Pinterest images (if set) or all post images for easy pinning.', 'pinnerpress'); ?>
                                                </p>
                                            </fieldset>
                                            <?php else: ?>
                                            <div class="pinnerpress-free-limitation">
                                                <p><?php esc_html_e('Hidden Pins Button is available in the premium version.', 'pinnerpress'); ?></p>
                                            </div>
                                            <?php endif; ?>
                                        </td>
                                    </tr>
                                </table>
                                

                            </div>
                            
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Follow Button Defaults', 'pinnerpress'); ?></h2>
                                <p class="description"><?php esc_html_e('Set default values for Pinterest Follow buttons. These can be overridden on individual blocks.', 'pinnerpress'); ?></p>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Default Button Text', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_follow_button_default_text" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_follow_button_default_text', __('Follow on Pinterest', 'pinnerpress'))); ?>" placeholder="<?php echo esc_attr__('Follow on Pinterest', 'pinnerpress'); ?>" maxlength="50" />
                                            <p class="description">
                                                <?php esc_html_e('Default text for follow buttons. Maximum 50 characters.', 'pinnerpress'); ?>
                                            </p>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Default Button Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_follow_button_default_color" value="<?php echo esc_attr(get_option('pinnerpress_follow_button_default_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-follow-button-default-color-picker" data-default-color="#E60023" />
                                            <p class="description">
                                                <?php esc_html_e('Default background color for follow buttons.', 'pinnerpress'); ?>
                                            </p>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Default Text Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_follow_button_default_text_color" value="<?php echo esc_attr(get_option('pinnerpress_follow_button_default_text_color', '#ffffff')); ?>" class="pinnerpress-color-picker pinnerpress-follow-button-default-text-color-picker" data-default-color="#ffffff" />
                                            <p class="description">
                                                <?php esc_html_e('Default text color for follow buttons.', 'pinnerpress'); ?>
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                                

                            </div>
                            
                            <div id="analytics-settings" class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Analytics Settings', 'pinnerpress'); ?></h2>
                                <p class="description"><?php esc_html_e('Configure analytics tracking for PinnerPress interactions.', 'pinnerpress'); ?></p>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Enable Analytics', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_analytics_enabled" value="1" <?php checked(get_option('pinnerpress_analytics_enabled', '1'), '1'); ?> />
                                                    <?php esc_html_e('Track user interactions with PinnerPress elements', 'pinnerpress'); ?>
                                                </label>
                                                <p class="description">
                                                    <?php
                                                    printf(
                                                        /* translators: %s: Link to analytics page */
                                                        esc_html__('When enabled, PinnerPress will track clicks on pin buttons, follow buttons, banners, and other elements. View your analytics data on the %s.', 'pinnerpress'),
                                                        '<a href="' . esc_url(admin_url('admin.php?page=pinnerpress')) . '">' . esc_html__('Analytics page', 'pinnerpress') . '</a>'
                                                    );
                                                    ?>
                                                </p>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Ignore Logged-in Users', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_analytics_ignore_logged_in" value="1" <?php checked(get_option('pinnerpress_analytics_ignore_logged_in', '0'), '1'); ?> />
                                                    <?php esc_html_e('Exclude logged-in users from analytics tracking', 'pinnerpress'); ?>
                                                </label>
                                                <p class="description">
                                                    <?php esc_html_e('When enabled, clicks and impressions from logged-in users (site admins and editors) will not be tracked. This helps prevent your own interactions from skewing visitor analytics data.', 'pinnerpress'); ?>
                                                </p>
                                            </fieldset>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <?php elseif ($active_tab == 'settings'): ?>
                <!-- Pin Button Tab Content -->
                <?php
                // This prints out all hidden setting fields for the Pin Button tab only
                settings_fields('pinnerpress_settings_pin_button');
                do_settings_sections('pinnerpress_settings');
                ?>

                <!-- Feature Description Box -->
                <div class="pinnerpress-feature-description">
                    <div class="pinnerpress-feature-box">
                        <h3><?php esc_html_e('Pin Button Feature', 'pinnerpress'); ?></h3>
                        <p><?php esc_html_e('The Pin Button allows your visitors to easily save your images to their Pinterest boards. When enabled, a customizable "Pin It" button appears over images on your site. You can control the button\'s appearance, position, size, colors, and behavior to match your site\'s design and user experience preferences.', 'pinnerpress'); ?></p>
                    </div>
                </div>

                <div class="pinnerpress-settings-container">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php $pin_button_status = get_option('pinnerpress_pin_button_status', 'on'); ?>
                                            <select name="pinnerpress_pin_button_status">
                                                <option value="on" <?php selected($pin_button_status, 'on'); ?>><?php esc_html_e('On', 'pinnerpress'); ?></option>
                                                <option value="off" <?php selected($pin_button_status, 'off'); ?>><?php esc_html_e('Off', 'pinnerpress'); ?></option>
                                            </select>
                                            <p class="description"><?php esc_html_e('Enable or disable the Pinterest Pin Button on images.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    
                                    
                                    <tbody>
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Show Pin Button text', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="radio" name="pinnerpress_hover_button_style" value="default" <?php checked(get_option('pinnerpress_hover_button_style'), 'default'); ?> />
                                                    <?php esc_html_e('Yes', 'pinnerpress'); ?>
                                                </label><br>
                                                
                                                <label>
                                                    <input type="radio" name="pinnerpress_hover_button_style" value="pinterest-logo" <?php checked(get_option('pinnerpress_hover_button_style'), 'pinterest-logo'); ?> />
                                                    <?php esc_html_e('No', 'pinnerpress'); ?>
                                                </label>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button position', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php $hover_button_position = get_option('pinnerpress_hover_button_position', 'top-right'); ?>
                                            <select name="pinnerpress_hover_button_position">
                                                <option value="top-left" <?php selected($hover_button_position, 'top-left'); ?>><?php esc_html_e('Top Left', 'pinnerpress'); ?></option>
                                                <option value="top-right" <?php selected($hover_button_position, 'top-right'); ?>><?php esc_html_e('Top Right', 'pinnerpress'); ?></option>
                                                <option value="center" <?php selected($hover_button_position, 'center'); ?>><?php esc_html_e('Center', 'pinnerpress'); ?></option>
                                                <option value="bottom-left" <?php selected($hover_button_position, 'bottom-left'); ?>><?php esc_html_e('Bottom Left', 'pinnerpress'); ?></option>
                                                <option value="bottom-right" <?php selected($hover_button_position, 'bottom-right'); ?>><?php esc_html_e('Bottom Right', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button shape', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php $hover_button_shape = get_option('pinnerpress_hover_button_shape', 'rectangular'); ?>
                                            <select name="pinnerpress_hover_button_shape">
                                                <option value="round" <?php selected($hover_button_shape, 'round'); ?>><?php esc_html_e('Round', 'pinnerpress'); ?></option>
                                                <option value="rectangular" <?php selected($hover_button_shape, 'rectangular'); ?>><?php esc_html_e('Rectangular', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button size', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_hover_button_size">
                                                <option value="small" <?php selected(get_option('pinnerpress_hover_button_size', 'medium'), 'small'); ?>><?php esc_html_e('Small', 'pinnerpress'); ?></option>
                                                <option value="medium" <?php selected(get_option('pinnerpress_hover_button_size', 'medium'), 'medium'); ?>><?php esc_html_e('Medium', 'pinnerpress'); ?></option>
                                                <option value="large" <?php selected(get_option('pinnerpress_hover_button_size', 'medium'), 'large'); ?>><?php esc_html_e('Large', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_hover_button_color" value="<?php echo esc_attr(get_option('pinnerpress_hover_button_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-hover-button-color-picker" data-default-color="#E60023" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button text color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_hover_button_text_color" value="<?php echo esc_attr(get_option('pinnerpress_hover_button_text_color', '#FFFFFF')); ?>" class="pinnerpress-color-picker pinnerpress-hover-button-text-color-picker" data-default-color="#FFFFFF" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button Shadow', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="radio" name="pinnerpress_image_shadow" value="1" <?php checked(get_option('pinnerpress_image_shadow'), '1'); ?> />
                                                    <?php esc_html_e('Yes', 'pinnerpress'); ?>
                                                </label><br>
                                                
                                                <label>
                                                    <input type="radio" name="pinnerpress_image_shadow" value="0" <?php checked(get_option('pinnerpress_image_shadow'), '0'); ?> />
                                                    <?php esc_html_e('No', 'pinnerpress'); ?>
                                                </label>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pin Button Text', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php 
                                            $custom_button_text = get_option('pinnerpress_custom_button_text', '');
                                            $display_value = !empty($custom_button_text) ? $custom_button_text : 'Pin It';
                                            ?>
                                            <input type="text" name="pinnerpress_custom_button_text" class="regular-text" value="<?php echo esc_attr($display_value); ?>" maxlength="20" />
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>

                        <div class="pinnerpress-preview-column">
                            <div class="pinnerpress-preview">
                                <div class="pinnerpress-preview-image" id="pinnerpress-preview-image-container">
                                    <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- Plugin preview asset ?>
                                    <img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/pinnerpress-preview.png'); ?>" alt="<?php echo esc_attr__('Preview Image', 'pinnerpress'); ?>">
                                    <?php 
                                    // Display initial preview button
                                    $preview_options = [
                                        'position' => get_option('pinnerpress_hover_button_position', 'top-left'),
                                        'shape' => get_option('pinnerpress_hover_button_shape', 'rectangular'),
                                        'size' => get_option('pinnerpress_hover_button_size', 'medium'),
                                        'color' => get_option('pinnerpress_hover_button_color', '#E60023'),
                                        'text_color' => get_option('pinnerpress_hover_button_text_color', '#FFFFFF'),
                                        'image_shadow' => get_option('pinnerpress_image_shadow', '0'),
                                        'custom_button_text' => get_option('pinnerpress_custom_button_text', ''),
                                        'default_text' => 'Pin It',
                                        'button_style' => get_option('pinnerpress_hover_button_style', 'default')
                                    ];
                                    
                                    // Generate the button HTML for admin preview
                                    $button_html = pinnerpress_get_pin_button_html($preview_options, true);
                                    
                                    // Output the button HTML directly without wp_kses filtering
                                    // This is safe because:
                                    // 1. This is admin-only preview (requires manage_options capability)
                                    // 2. HTML is generated internally by our own trusted function
                                    // 3. wp_kses was stripping essential SVG attributes like viewBox
                                    echo $button_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Admin preview HTML is generated internally and safe
                                    ?>
                                </div>
                                <div class="pinnerpress-preview-info">
                                    <p><?php esc_html_e('Preview', 'pinnerpress'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <?php elseif ($active_tab == 'follow_box'): ?>
                <!-- Follow Box Tab Content -->
                <?php
                $is_follow_box_enabled = pinnerpress_is_feature_enabled('follow_box');
                ?>
                <?php
                // This prints out all hidden setting fields for the Follow Box tab only
                settings_fields('pinnerpress_settings_follow_box');
                do_settings_sections('pinnerpress_settings');
                ?>

                <!-- Feature Description Box -->
                <div class="pinnerpress-feature-description">
                    <div class="pinnerpress-feature-box">
                        <h3><?php esc_html_e('Follow Box Feature', 'pinnerpress'); ?></h3>
                        <p><?php esc_html_e('The Follow Box helps grow your Pinterest following by displaying an attractive popup that encourages visitors to follow your Pinterest account. It can appear automatically when the page loads or after users interact with Pin buttons. The follow box displays your Pinterest profile information, including your profile image, account description, and a customizable follow button.', 'pinnerpress'); ?></p>
                        <?php if (!$is_follow_box_enabled): ?>
                        <p class="pinnerpress-premium-notice"><strong><?php esc_html_e('Premium Feature:', 'pinnerpress'); ?></strong> <?php esc_html_e('The Follow Box is available in the premium version of PinnerPress.', 'pinnerpress'); ?></p>
                        <?php endif; ?>
                    </div>
                </div>

                <?php if (!$is_follow_box_enabled): ?>
                <div class="pinnerpress-analytics-limitation notice notice-info">
                    <h4><?php esc_html_e('🚀 Unlock PinnerPress Premium', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Upgrade to premium to unlock advanced features including: Call-out Banners, Image Control, Custom CTA Banners, Follow Buttons, Rich Pins, Hidden Pins, Custom Descriptions, Repin Attribution, Post Analytics, and Image Analytics', 'pinnerpress'); ?></p>
                    <a href="<?php echo esc_url(pinnerpress_get_upgrade_url()); ?>" class="button button-primary" target="_blank"><?php esc_html_e('Upgrade to Premium', 'pinnerpress'); ?></a>
                </div>
                <?php endif; ?>

                <div class="pinnerpress-settings-container <?php echo !$is_follow_box_enabled ? 'pinnerpress-disabled-feature' : ''; ?>">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Follow Box Settings', 'pinnerpress'); ?></h2>
                                
                                <div class="pinnerpress-settings-notice">
                                    <p><strong><?php esc_html_e('Note:', 'pinnerpress'); ?></strong> <?php 
                                    /* translators: %s: Link to the General tab */
                                    printf(esc_html__('Set the Pinterest URL, Display Name, and Profile Image in the %s.', 'pinnerpress'), '<a href="?page=' . esc_attr($this->plugin_name) . '-settings&tab=general">' . esc_html__('General tab', 'pinnerpress') . '</a>'); ?></p>
                                </div>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Follow Box', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_follow_box_status" <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?>>
                                                <option value="off" <?php selected(get_option('pinnerpress_follow_box_status', 'off'), 'off'); ?>><?php esc_html_e('Off', 'pinnerpress'); ?></option>
                                                <option value="on" <?php selected(get_option('pinnerpress_follow_box_status', 'off'), 'on'); ?>><?php esc_html_e('On', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Display Follow Box', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_follow_box_display_pin_click" value="1" <?php checked(get_option('pinnerpress_follow_box_display_pin_click', '1'), '1'); ?> <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?> />
                                                    <?php esc_html_e('Show after pin button click', 'pinnerpress'); ?>
                                                </label><br>
                                                
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_follow_box_display_page_load" value="1" <?php checked(get_option('pinnerpress_follow_box_display_page_load', '0'), '1'); ?> <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?> />
                                                    <?php esc_html_e('Show when page loads', 'pinnerpress'); ?>
                                                </label>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Dismissal Option', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_follow_box_allow_dismiss" value="1" <?php checked(get_option('pinnerpress_follow_box_allow_dismiss', '0'), '1'); ?> <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?> />
                                                    <?php 
                                                    /* translators: %s: "Don't remind me" text */
                                                    printf(esc_html__('Allow users to dismiss for 30 days ("%s" link)', 'pinnerpress'), esc_html__("Don't remind me", 'pinnerpress')); ?>
                                                </label>
                                                <p class="description"><?php 
                                                /* translators: %s: "Don't remind me" text */
                                                printf(esc_html__('When enabled, a "%s" link will appear. Clicking it sets a cookie that hides the follow box for 30 days.', 'pinnerpress'), esc_html__("Don't remind me", 'pinnerpress')); ?></p>
                                            </fieldset>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Account Description', 'pinnerpress'); ?></th>
                                        <td>
                                            <textarea name="pinnerpress_account_description" rows="2" class="large-text" <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?>><?php echo esc_textarea(get_option('pinnerpress_account_description', '')); ?></textarea>
                                            <p class="description"><?php esc_html_e('Short description of your Pinterest account. Maximum 75 characters.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>

                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Header Image', 'pinnerpress'); ?></th>
                                        <td>
                                            <div class="pinnerpress-media-field">
                                                <input type="hidden" name="pinnerpress_header_image" id="pinnerpress_header_image" value="<?php echo esc_attr(get_option('pinnerpress_header_image', '')); ?>" />
                                                <?php 
                                                $header_image = get_option('pinnerpress_header_image', '');
                                                $show_preview = !empty($header_image);
                                                ?>
                                                <div class="pinnerpress-media-preview" <?php echo (!$show_preview ? 'style="display:none;"' : ''); ?>>
                                                    <?php
                                                    if ($show_preview) {
                                                        // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- User uploaded header image
                                                        echo '<img src="' . esc_url($header_image) . '" alt="' . esc_attr__('Header Image', 'pinnerpress') . '" style="max-width: 200px; max-height: 100px;" />';
                                                    }
                                                    ?>
                                                </div>
                                                <div class="button-container">
                                                    <button type="button" class="button pinnerpress-media-upload" data-target="pinnerpress_header_image" <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?>><?php esc_html_e('Select Image', 'pinnerpress'); ?></button>
                                                    <button type="button" class="button pinnerpress-media-remove" data-target="pinnerpress_header_image" <?php echo empty($header_image) ? 'style="display:none;"' : ''; ?> <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?>><?php esc_html_e('Remove', 'pinnerpress'); ?></button>
                                                </div>
                                                <p class="description"><?php esc_html_e('Choose a custom header image or leave empty to use the default Pinterest header image. Recommended size: 800x250 pixels.', 'pinnerpress'); ?></p>
                                            </div>
                                        </td>
                                    </tr>
                                
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Button Background Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_follow_button_bg_color" value="<?php echo esc_attr(get_option('pinnerpress_follow_button_bg_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-follow-button-bg_color-picker" data-default-color="#E60023" <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?> />
                                        </td>
                                    </tr>
                            
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Button Text Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_follow_button_text_color" value="<?php echo esc_attr(get_option('pinnerpress_follow_button_text_color', '#FFFFFF')); ?>" class="pinnerpress-color-picker pinnerpress-follow-button-text-color-picker" data-default-color="#FFFFFF" <?php echo !$is_follow_box_enabled ? 'disabled' : ''; ?> />
                                        </td>
                                    </tr>
                                </table>


                            </div>
                        </div>

                        <div class="pinnerpress-preview-column">
                            <div class="pinnerpress-preview">
                                <div class="pinnerpress-preview-image" id="pinnerpress-follow-box-preview">
                                    <div class="pinnerpress-settings-preview-container">
                                        <?php 
                                        // Get settings for the follow box
                                        $pinterest_url = get_option('pinnerpress_pinterest_url', 'https://www.pinterest.com/pinnerpress/');
                                        $account_description = get_option('pinnerpress_account_description', __('Follow us on Pinterest for more inspiration!', 'pinnerpress'));
                                        $button_bg_color = get_option('pinnerpress_follow_button_bg_color', '#E60023');
                                        $button_text_color = get_option('pinnerpress_follow_button_text_color', '#FFFFFF');
                                        
                                        // Get display name
                                        $display_name = get_option('pinnerpress_pinterest_display_name', 'PinnerPress');
                                        
                                        // Use the full Pinterest URL directly (it's already validated and formatted)
                                        $pinterest_full_url = $pinterest_url;
                                        ?>
                                        
                                        <div class="pinnerpress-follow-box-preview">
                                            <div class="pinnerpress-follow-box-wrapper">
                                                <div class="pinnerpress-follow-box pinnerpress-shadow-lg">
                                                    <div class="pinnerpress-follow-box-header" style="background-image: url(<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/follow-box/default-pinterest-profile-header-image.png'); ?>);">
                                                        <button type="button" aria-label="<?php echo esc_attr__('close', 'pinnerpress'); ?>" class="pinnerpress-follow-box-close">
                                                            <svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <g clip-path="url(#clip0)">
                                                                    <path d="M3.72545 9L0.313977 5.48191C-0.10466 5.0502 -0.10466 4.35023 0.313977 3.91816L1.07216 3.13629C1.4908 2.70457 2.16954 2.70457 2.58852 3.13629L6 6.65437L9.41148 3.13629C9.83011 2.70457 10.5089 2.70457 10.9278 3.13629L11.686 3.91816C12.1047 4.34988 12.1047 5.04984 11.686 5.48191L8.27455 9L11.686 12.5181C12.1047 12.9498 12.1047 13.6498 11.686 14.0818L10.9278 14.8637C10.5092 15.2954 9.83011 15.2954 9.41148 14.8637L6 11.3456L2.58852 14.8637C2.16989 15.2954 1.4908 15.2954 1.07216 14.8637L0.313977 14.0818C-0.10466 13.6501 -0.10466 12.9502 0.313977 12.5181L3.72545 9Z" />
                                                                </g>
                                                                <defs>
                                                                <clipPath id="clip0">
                                                                    <rect width="12" height="18" fill="white" transform="matrix(-1 0 0 1 12 0)"></rect>
                                                                </clipPath>
                                                                </defs>
                                                            </svg>
                                                        </button>
                                                        <?php 
                                                        // Get profile image from general settings
                                                        $profile_image = get_option('pinnerpress_profile_image', '');
                                                        $profile_image_url = !empty($profile_image) ? $profile_image : esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/follow-box/default-pinterest-profile-images.png');
                                                        ?>
                                                        <div class="pinnerpress-follow-box-logo" style="background-image: url(<?php echo esc_url($profile_image_url); ?>); background-color: #FFFFFF;"></div>
                                                    </div>
                                                    <div class="pinnerpress-follow-box-inner">
                                                        <h3><?php echo esc_html($display_name); ?></h3>
                                                        <p><?php echo esc_html($account_description); ?></p>
                                                        <a class="pinnerpress-follow-box-button" href="<?php echo esc_url($pinterest_full_url); ?>" style="background-color: <?php echo esc_attr($button_bg_color); ?>; color: <?php echo esc_attr($button_text_color); ?>;" data-pin-do="buttonFollow" target="_blank">
                                                            <span class="pinnerpress-follow-button-text"><?php esc_html_e('Follow on', 'pinnerpress'); ?></span>
                                                            <svg class="pinnerpress-pinterest-button-logo" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M23.25 12C23.25 5.57812 18.0469 0.375 11.625 0.375C5.20312 0.375 0 5.57812 0 12C0 16.9688 3.04688 21.1406 7.35938 22.8281C7.26562 21.9375 7.17188 20.5312 7.40625 19.5C7.64062 18.6094 8.76562 13.7344 8.76562 13.7344C8.76562 13.7344 8.4375 13.0312 8.4375 12C8.4375 10.4062 9.375 9.1875 10.5469 9.1875C11.5312 9.1875 12 9.9375 12 10.8281C12 11.8125 11.3438 13.3125 11.0156 14.7188C10.7812 15.8438 11.625 16.7812 12.75 16.7812C14.8125 16.7812 16.4062 14.625 16.4062 11.4844C16.4062 8.67188 14.3906 6.75 11.5781 6.75C8.25 6.75 6.32812 9.23438 6.32812 11.7656C6.32812 12.7969 6.70312 13.875 7.17188 14.4375C7.26562 14.5312 7.26562 14.6719 7.26562 14.7656C7.17188 15.1406 6.9375 15.9375 6.9375 16.0781C6.89062 16.3125 6.75 16.3594 6.51562 16.2656C5.0625 15.5625 4.17188 13.4531 4.17188 11.7188C4.17188 8.0625 6.84375 4.6875 11.8594 4.6875C15.8906 4.6875 19.0312 7.59375 19.0312 11.4375C19.0312 15.4219 16.5 18.6562 12.9844 18.6562C11.8125 18.6562 10.6875 18.0469 10.3125 17.2969C10.3125 17.2969 9.75 19.5469 9.60938 20.0625C9.32812 21.0938 8.625 22.3594 8.15625 23.1094C9.23438 23.4844 10.4062 23.625 11.625 23.625C18.0469 23.625 23.25 18.4219 23.25 12Z" fill="currentColor"></path>
                                                            </svg>
                                                        </a>
                                                        <?php if (get_option('pinnerpress_follow_box_allow_dismiss', '0') == '1'): ?>
                                                        <div class="pinnerpress-follow-box-dismiss">
                                                            <a href="#" class="pinnerpress-follow-box-dismiss-link"><?php esc_html_e("Don't remind me", 'pinnerpress'); ?></a>
                                                        </div>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pinnerpress-preview-info">
                                    <p><?php esc_html_e('Preview', 'pinnerpress'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <?php elseif ($active_tab == 'banner'): ?>
                <!-- Banner Tab Content -->
                <?php
                $is_image_banner_enabled = pinnerpress_is_feature_enabled('image_banner');
                ?>
                <?php
                // This prints out all hidden setting fields for the Banner tab only
                settings_fields('pinnerpress_settings_banner');
                do_settings_sections('pinnerpress_settings');
                ?>

                <!-- Feature Description Box -->
                <div class="pinnerpress-feature-description">
                    <div class="pinnerpress-feature-box">
                        <h3><?php esc_html_e('Image Banner Feature', 'pinnerpress'); ?></h3>
                        <p><?php esc_html_e('The Image Banner adds an eye-catching overlay at the bottom of your images to encourage Pinterest saves. When enabled, a customizable banner with the Pinterest logo and your chosen text appears on hover, making it clear that images are pinnable. You can customize the banner\'s colors, opacity, and text to seamlessly integrate with your site\'s visual design.', 'pinnerpress'); ?></p>
                        <?php if (!$is_image_banner_enabled): ?>
                        <p class="pinnerpress-premium-notice"><strong><?php esc_html_e('Premium Feature:', 'pinnerpress'); ?></strong> <?php esc_html_e('The Image Banner is available in the premium version of PinnerPress.', 'pinnerpress'); ?></p>
                        <?php endif; ?>
                    </div>
                </div>

                <?php if (!$is_image_banner_enabled): ?>
                <div class="pinnerpress-analytics-limitation notice notice-info">
                    <h4><?php esc_html_e('🚀 Unlock PinnerPress Premium', 'pinnerpress'); ?></h4>
                    <p><?php esc_html_e('Upgrade to premium to unlock advanced features including: Call-out Banners, Image Control, Custom CTA Banners, Follow Buttons, Rich Pins, Hidden Pins, Custom Descriptions, Repin Attribution, Post Analytics, and Image Analytics', 'pinnerpress'); ?></p>
                    <a href="<?php echo esc_url(pinnerpress_get_upgrade_url()); ?>" class="button button-primary" target="_blank"><?php esc_html_e('Upgrade to Premium', 'pinnerpress'); ?></a>
                </div>
                <?php endif; ?>

                <div class="pinnerpress-settings-container <?php echo !$is_image_banner_enabled ? 'pinnerpress-disabled-feature' : ''; ?>">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Image Banner Settings', 'pinnerpress'); ?></h2>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Image Banner', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_banner_status" <?php echo !$is_image_banner_enabled ? 'disabled' : ''; ?>>
                                                <option value="off" <?php selected(get_option('pinnerpress_banner_status', 'off'), 'off'); ?>><?php esc_html_e('Off', 'pinnerpress'); ?></option>
                                                <option value="on" <?php selected(get_option('pinnerpress_banner_status', 'off'), 'on'); ?>><?php esc_html_e('On', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Background Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_banner_bg_color" value="<?php echo esc_attr(get_option('pinnerpress_banner_bg_color', 'rgba(255, 255, 255, 0.5)')); ?>" class="pinnerpress-color-picker pinnerpress-banner-bg-color-picker" data-alpha="true" <?php echo !$is_image_banner_enabled ? 'disabled' : ''; ?> />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Background Opacity', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="range" name="pinnerpress_banner_opacity" value="<?php echo esc_attr(get_option('pinnerpress_banner_opacity', '50')); ?>" min="0" max="100" step="5" class="pinnerpress-opacity-slider" <?php echo !$is_image_banner_enabled ? 'disabled' : ''; ?> />
                                            <span class="pinnerpress-opacity-value"><?php echo esc_html(get_option('pinnerpress_banner_opacity', '50')); ?>%</span>                                            
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Pinterest Icon and Text Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_banner_text_color" value="<?php echo esc_attr(get_option('pinnerpress_banner_text_color', '#BD081C')); ?>" class="pinnerpress-color-picker pinnerpress-banner-text-color-picker" data-default-color="#BD081C" <?php echo !$is_image_banner_enabled ? 'disabled' : ''; ?> />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Text', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_banner_text" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_banner_text', __('Pin this', 'pinnerpress'))); ?>" maxlength="20" <?php echo !$is_image_banner_enabled ? 'disabled' : ''; ?> />
                                            <p class="description"><?php esc_html_e('Banner text should be less than 20 characters.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>

                                </table>

                            </div>
                        </div>

                        <div class="pinnerpress-preview-column">
                            <div class="pinnerpress-preview">
                                <div class="pinnerpress-preview-image" id="pinnerpress-banner-preview">
                                    <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- Plugin preview asset ?>
                                    <img src="<?php echo esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/pinnerpress-preview.png'); ?>" alt="<?php echo esc_attr__('Preview Image', 'pinnerpress'); ?>">
                                    <?php 
                                    // Always show banner in preview (for demo purposes)
                                    $bg_color = get_option('pinnerpress_banner_bg_color', 'rgba(255, 255, 255, 0.5)');
                                    $text_color = get_option('pinnerpress_banner_text_color', '#BD081C');
                                    $banner_text = get_option('pinnerpress_banner_text', __('Pin this', 'pinnerpress'));
                                    ?>
                                        <a href="#" class="pinnerpress-image-banner" style="position: absolute; bottom: 0; left: 0; right: 0; background-color: <?php echo esc_attr($bg_color); ?>; color: <?php echo esc_attr($text_color); ?>; padding: 8px 15px; font-size: 22px; font-weight: 500; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer; z-index: 9;">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pinnerpress-banner-icon" style="width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.4em; fill: currentColor;">
                                                <path d="M12 0C5.373 0 0 5.373 0 12c0 4.99 3.657 9.132 8.48 10.099-.118-.859-.224-2.178.045-3.116.244-.834 1.577-5.313 1.577-5.313s-.402-.803-.402-1.986c0-1.863 1.08-3.254 2.42-3.254 1.142 0 1.693.859 1.693 1.89 0 1.151-.733 2.87-1.11 4.467-.318 1.322.672 2.401 1.99 2.401 2.388 0 4.224-2.516 4.224-6.14 0-3.204-2.303-5.442-5.581-5.442-3.803 0-6.037 2.849-6.037 5.794 0 1.148.438 2.382 1.054 3.049.117.13.134.244.099.377-.109.427-.354 1.35-.398 1.539-.062.248-.2.302-.461.182-1.723-.796-2.797-3.294-2.797-5.301 0-4.33 3.141-8.306 9.067-8.306 4.754 0 8.442 3.384 8.442 7.917 0 4.715-2.969 8.502-7.085 8.502-1.381 0-2.681-.712-3.123-1.557l-.847 3.216c-.306 1.156-1.14 2.6-1.699 3.487C9.19 23.414 10.573 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"></path>
                                            </svg>
                                            <span><?php echo esc_html($banner_text); ?></span>
                                        </a>
                                </div>
                                <div class="pinnerpress-preview-info">
                                    <p><?php esc_html_e('Preview', 'pinnerpress'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <?php elseif ($active_tab == 'call_out'): ?>
                <!-- Call Out Banners Tab Content -->
                <?php
                // This prints out all hidden setting fields for the Call Out Banners tab only
                settings_fields('pinnerpress_settings_call_out');
                do_settings_sections('pinnerpress_settings');
                ?>

                <!-- Feature Description Box -->
                <div class="pinnerpress-feature-description">
                    <div class="pinnerpress-feature-box">
                        <h3><?php esc_html_e('Call Out Banners Feature', 'pinnerpress'); ?></h3>
                        <p><?php esc_html_e('Call Out Banners are prominent promotional blocks that encourage visitors to follow your Pinterest account. These attention-grabbing banners can be displayed at the top, bottom, or both positions of your posts and pages.They feature a clear call-to-action button to increase your Pinterest following and engagement.', 'pinnerpress'); ?></p>
                    </div>
                </div>

                <div class="pinnerpress-settings-container">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Call Out Banners Settings', 'pinnerpress'); ?></h2>
                                
                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Call Out Banner', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_call_out_status">
                                                <option value="off" <?php selected(get_option('pinnerpress_call_out_status', 'off'), 'off'); ?>><?php esc_html_e('Off', 'pinnerpress'); ?></option>
                                                <option value="on" <?php selected(get_option('pinnerpress_call_out_status', 'off'), 'on'); ?>><?php esc_html_e('On', 'pinnerpress'); ?></option>
                                            </select>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Position', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_call_out_position">
                                                <option value="top" <?php selected(get_option('pinnerpress_call_out_position', 'top'), 'top'); ?>><?php esc_html_e('Top of content', 'pinnerpress'); ?></option>
                                                <option value="bottom" <?php selected(get_option('pinnerpress_call_out_position', 'top'), 'bottom'); ?>><?php esc_html_e('Bottom of content', 'pinnerpress'); ?></option>
                                                <option value="both" <?php selected(get_option('pinnerpress_call_out_position', 'top'), 'both'); ?>><?php esc_html_e('Both top and bottom', 'pinnerpress'); ?></option>
                                            </select>
                                            <p class="description"><?php esc_html_e('Choose where to display the call out banner on your posts.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Display On', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_call_out_display_posts" value="1" <?php checked(get_option('pinnerpress_call_out_display_posts', '1'), '1'); ?> />
                                                    <?php esc_html_e('Posts', 'pinnerpress'); ?>
                                                </label><br>
                                                
                                                <label>
                                                    <input type="checkbox" name="pinnerpress_call_out_display_pages" value="1" <?php checked(get_option('pinnerpress_call_out_display_pages', '0'), '1'); ?> />
                                                    <?php esc_html_e('Pages', 'pinnerpress'); ?>
                                                </label>
                                            </fieldset>
                                            <p class="description"><?php esc_html_e('Select which content types should display the call out banner.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    
                                    <!-- Banner Style option removed as requested -->
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Background Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_bg_color" value="<?php echo esc_attr(get_option('pinnerpress_call_out_bg_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-call-out-bg-color-picker" data-default-color="#E60023" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Border Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_border_color" value="<?php echo esc_attr(get_option('pinnerpress_call_out_border_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-call-out-border-color-picker" data-default-color="#E60023" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Text Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_text_color" value="<?php echo esc_attr(get_option('pinnerpress_call_out_text_color', '#FFFFFF')); ?>" class="pinnerpress-color-picker pinnerpress-call-out-text-color-picker" data-default-color="#FFFFFF" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Title', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_title" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_call_out_title', __('Follow us on Pinterest', 'pinnerpress'))); ?>" />
                                        </td>
                                    </tr>
                                    
                                    <!-- Banner Description removed as requested -->
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Button Text', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_button_text" class="regular-text" value="<?php echo esc_attr(get_option('pinnerpress_call_out_button_text', __('Follow', 'pinnerpress'))); ?>" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Button Background Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_button_bg_color" value="<?php echo esc_attr(get_option('pinnerpress_call_out_button_bg_color', '#FFFFFF')); ?>" class="pinnerpress-color-picker pinnerpress-call-out-button-bg-color-picker" data-default-color="#FFFFFF" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Button Text Color', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="text" name="pinnerpress_call_out_button_text_color" value="<?php echo esc_attr(get_option('pinnerpress_call_out_button_text_color', '#E60023')); ?>" class="pinnerpress-color-picker pinnerpress-call-out-button-text-color-picker" data-default-color="#E60023" />
                                        </td>
                                    </tr>
                                    
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Banner Logo', 'pinnerpress'); ?></th>
                                        <td>
                                            <select name="pinnerpress_call_out_logo">
                                                <option value="pinterest" <?php selected(get_option('pinnerpress_call_out_logo', 'pinterest'), 'pinterest'); ?>><?php esc_html_e('Pinterest Logo', 'pinnerpress'); ?></option>
                                                <option value="profile" <?php selected(get_option('pinnerpress_call_out_logo', 'pinterest'), 'profile'); ?>><?php esc_html_e('Profile Image', 'pinnerpress'); ?></option>
                                                <option value="none" <?php selected(get_option('pinnerpress_call_out_logo', 'pinterest'), 'none'); ?>><?php esc_html_e('No Logo', 'pinnerpress'); ?></option>
                                            </select>
                                            <p class="description"><?php 
                                            /* translators: %s: Link to the General tab */
                                            printf(esc_html__('Set the profile image on the %s.', 'pinnerpress'), '<a href="?page=' . esc_attr($this->plugin_name) . '-settings&tab=general">' . esc_html__('General tab', 'pinnerpress') . '</a>'); ?></p>
                                        </td>
                                    </tr>
                                </table>

                            </div>
                            <?php if (!pinnerpress_is_feature_enabled('call_out_banners')): ?>
                            <?php
                            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Function returns properly escaped HTML
                            echo pinnerpress_get_upgrade_notice(esc_html__('Call Out Banners', 'pinnerpress'));
                            ?>
                            <?php endif; ?>
                        </div>

                        <div class="pinnerpress-preview-column">
                            <div class="pinnerpress-preview">
                                <div class="pinnerpress-preview-image" id="pinnerpress-call-out-preview" data-pinterest-url="<?php echo esc_attr(get_option('pinnerpress_pinterest_url', '')); ?>">
                                    <?php 
                                    // Get settings for the call out banner preview
                                    $bg_color = get_option('pinnerpress_call_out_bg_color', '#E60023');
                                    $text_color = get_option('pinnerpress_call_out_text_color', '#FFFFFF');
                                    $title = get_option('pinnerpress_call_out_title', __('Follow us on Pinterest', 'pinnerpress'));
                                    $button_text = get_option('pinnerpress_call_out_button_text', __('Follow', 'pinnerpress'));
                                    $button_bg_color = get_option('pinnerpress_call_out_button_bg_color', '#FFFFFF');
                                    $button_text_color = get_option('pinnerpress_call_out_button_text_color', '#E60023');
                                    $logo = get_option('pinnerpress_call_out_logo', 'pinterest');
                                    
                                    // Get Pinterest URL from follow box settings
                                    $pinterest_url = get_option('pinnerpress_pinterest_url', '');
                                    
                                    // Ensure URL has http/https protocol
                                    if (!empty($pinterest_url) && !preg_match('~^(?:f|ht)tps?://~i', $pinterest_url)) {
                                        $pinterest_url = 'https://' . $pinterest_url;
                                    }
                                    ?>
                                    
                                    <!-- Force call out button color styles -->
                                    <style type="text/css">
                                        .pinnerpress-admin #pinnerpress-call-out-preview .pinnerpress-button-force-color span.pinnerpress-button-text-span,
                                        #wpbody-content .pinnerpress-admin #pinnerpress-call-out-preview .pinnerpress-button-force-color span.pinnerpress-button-text-span,
                                        body.wp-admin .pinnerpress-admin .pinnerpress-button-force-color span.pinnerpress-button-text-span {
                                            color: <?php echo esc_attr($button_text_color); ?> !important;
                                        }
                                        /* Removed hover/active/focus for simplicity, assuming base color !important is enough or handled by <a> if needed */
                                    </style>
                                    
                                    <div class="pinnerpress-call-out-banner" style="background-color: <?php echo esc_attr($bg_color); ?>; /* REMOVED color: <?php echo esc_attr($text_color); ?>; */ padding: 15px 25px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; text-align: center; flex-wrap: nowrap; max-width: 100%; border-color: <?php echo esc_attr(get_option('pinnerpress_call_out_border_color', '#E60023')); ?>;">
                                        <?php if ($logo === 'pinterest'): ?>
                                        <div class="pinnerpress-logo" style="display: flex; align-items: center; justify-content: flex-start; margin-right: 15px; width: auto; min-width: 38px; flex-shrink: 0;">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 38px; height: 38px; fill: <?php echo esc_attr($text_color); ?>;">
                                                <path d="M12 0C5.373 0 0 5.373 0 12c0 4.99 3.657 9.132 8.48 10.099-.118-.859-.224-2.178.045-3.116.244-.834 1.577-5.313 1.577-5.313s-.402-.803-.402-1.986c0-1.863 1.08-3.254 2.42-3.254 1.142 0 1.693.859 1.693 1.89 0 1.151-.733 2.87-1.11 4.467-.318 1.322.672 2.401 1.99 2.401 2.388 0 4.224-2.516 4.224-6.14 0-3.204-2.303-5.442-5.581-5.442-3.803 0-6.037 2.849-6.037 5.794 0 1.148.438 2.382 1.054 3.049.117.13.134.244.099.377-.109.427-.354 1.35-.398 1.539-.062.248-.2.302-.461.182-1.723-.796-2.797-3.294-2.797-5.301 0-4.33 3.141-8.306 9.067-8.306 4.754 0 8.442 3.384 8.442 7.917 0 4.715-2.969 8.502-7.085 8.502-1.381 0-2.681-.712-3.123-1.557l-.847 3.216c-.306 1.156-1.14 2.6-1.699 3.487C9.19 23.414 10.573 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"></path>
                                            </svg>
                                        </div>
                                        <?php elseif ($logo === 'profile'): ?>
                                        <?php
                                        // Get profile image URL
                                        $profile_image_url = get_option('pinnerpress_profile_image', '');
                                        
                                        // If no custom profile image is set, use the default one
                                        if (empty($profile_image_url)) {
                                            $profile_image_url = esc_url(plugin_dir_url(dirname(__FILE__)) . 'images/follow-box/default-pinterest-profile-images.png');
                                        }
                                        ?>
                                        <div class="pinnerpress-logo" style="display: flex; align-items: center; justify-content: flex-start; margin-right: 15px; width: auto; min-width: 38px; flex-shrink: 0;">
                                            <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedImage -- User profile image or plugin default ?>
                                            <img src="<?php echo esc_url($profile_image_url); ?>" alt="<?php echo esc_attr__('Profile', 'pinnerpress'); ?>" style="width: 38px; height: 38px; border-radius: 50%;" />
                                        </div>
                                        <?php endif; ?>
                                        
                                        <span class="pinnerpress-banner-title-span" style="color: <?php echo esc_attr($text_color); ?> !important; font-weight: 600; margin: 0; font-size: 24px !important; text-align: center; flex: 1; display: flex; justify-content: center; align-items: center;"><?php echo esc_html($title); ?></span>
                                        
                                        <a href="<?php echo esc_url($pinterest_url); ?>" 
                                           target="_blank" 
                                           class="pinnerpress-call-out-button pinnerpress-button-force-color"
                                           data-pin-do="buttonFollow" 
                                           style="display: inline-block; 
                                                  background-color: <?php echo esc_attr($button_bg_color); ?> !important; 
                                                  padding: 8px 15px; /* Reduced padding */
                                                  text-decoration: none !important; 
                                                  border-radius: 50px; 
                                                  font-weight: 700; 
                                                  white-space: nowrap; 
                                                  margin-left: 15px; 
                                                  min-width: 90px; 
                                                  text-align: center; 
                                                  flex-shrink: 0; 
                                                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
                                                  font-size: 14px; /* Match front-end sizing */
                                                  line-height: 1.4; /* From front-end example */">
                                            <span class="pinnerpress-button-text-span" 
                                                  style="color: <?php echo esc_attr($button_text_color); ?> !important; 
                                                         display: inline-block !important; /* Keep visibility helpers if needed */
                                                         visibility: visible !important; 
                                                         opacity: 1 !important;">
                                                <?php echo esc_html($button_text); ?>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="pinnerpress-preview-info">
                                    <p><?php esc_html_e('Preview', 'pinnerpress'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <?php elseif ($active_tab == 'filters'): ?>
                <!-- Filters Tab Content -->
                <?php settings_fields('pinnerpress_settings_filters'); ?>
                <div class="pinnerpress-settings-container">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">

                            <!-- Image Size Settings -->
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Minimum Image Size', 'pinnerpress'); ?></h2>
                                <table class="form-table" role="presentation">
                                    <tbody>
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Apply Size Filter To', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_size_filter_pin_buttons" value="1" <?php checked(get_option('pinnerpress_size_filter_pin_buttons', 1)); ?> />
                                                    <strong><?php esc_html_e('Pin Buttons', 'pinnerpress'); ?></strong>
                                                </label>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_size_filter_image_banners" value="1" <?php checked(get_option('pinnerpress_size_filter_image_banners', 1)); ?> />
                                                    <strong><?php esc_html_e('Image Banners', 'pinnerpress'); ?></strong>
                                                </label>
                                            </fieldset>
                                            <p class="description"><?php esc_html_e('Choose which features should respect the minimum image size below.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>

                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Minimum Image Size', 'pinnerpress'); ?></th>
                                        <td>
                                            <input type="range" name="pinnerpress_minimum_image_size" value="<?php echo esc_attr(get_option('pinnerpress_minimum_image_size', '250')); ?>" min="50" max="500" step="10" class="pinnerpress-image-size-slider" />
                                            <span class="pinnerpress-image-size-value"><?php echo esc_html(get_option('pinnerpress_minimum_image_size', '250')); ?>px</span>
                                            <p class="description"><?php esc_html_e('Will not show the feature on images smaller than this size.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>

                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Exclude Gallery Images', 'pinnerpress'); ?></th>
                                        <td>
                                            <label for="pinnerpress_exclude_gallery_minimum">
                                                <input type="checkbox" id="pinnerpress_exclude_gallery_minimum" name="pinnerpress_exclude_gallery_minimum" value="1" <?php checked('1', get_option('pinnerpress_exclude_gallery_minimum', '0')); ?> />
                                                <?php esc_html_e('Ignore minimum size for gallery images', 'pinnerpress'); ?>
                                            </label>
                                            <p class="description"><?php esc_html_e('When checked, images inside WordPress galleries will display the selected features above regardless of their size.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Category Exclusions -->
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Category Exclusions', 'pinnerpress'); ?></h2>
                                <p class="description"><?php esc_html_e('Select categories where you want to disable specific PinnerPress features:', 'pinnerpress'); ?></p>

                                <table class="form-table">
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Apply Category Filter To', 'pinnerpress'); ?></th>
                                        <td>
                                            <fieldset>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_category_filter_pin_buttons" value="1" <?php checked(get_option('pinnerpress_category_filter_pin_buttons', 1)); ?> />
                                                    <strong><?php esc_html_e('Pin Buttons', 'pinnerpress'); ?></strong>
                                                </label>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_category_filter_image_banners" value="1" <?php checked(get_option('pinnerpress_category_filter_image_banners', 1)); ?> />
                                                    <strong><?php esc_html_e('Image Banners', 'pinnerpress'); ?></strong>
                                                </label>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_category_filter_call_out_banners" value="1" <?php checked(get_option('pinnerpress_category_filter_call_out_banners', 1)); ?> />
                                                    <strong><?php esc_html_e('Call Out Banners', 'pinnerpress'); ?></strong>
                                                </label>
                                                <label style="display: block; margin-bottom: 10px;">
                                                    <input type="checkbox" name="pinnerpress_category_filter_follow_boxes" value="1" <?php checked(get_option('pinnerpress_category_filter_follow_boxes', 1)); ?> />
                                                    <strong><?php esc_html_e('Follow Boxes', 'pinnerpress'); ?></strong>
                                                </label>
                                            </fieldset>
                                            <p class="description"><?php esc_html_e('Choose which features should respect the category exclusions below.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <th scope="row"><?php esc_html_e('Disabled Categories', 'pinnerpress'); ?></th>
                                        <td>
                                            <?php
                                            $categories = get_categories(array('hide_empty' => false));
                                            $excluded_categories = get_option('pinnerpress_excluded_categories', array());
                                            if (!is_array($excluded_categories)) {
                                                $excluded_categories = array();
                                            }

                                            if (!empty($categories)) {
                                                echo '<fieldset>';
                                                foreach ($categories as $category) {
                                                    $is_checked = in_array($category->term_id, $excluded_categories, true);
                                                    echo '<label style="display: block; margin-bottom: 5px;">';
                                                    echo '<input type="checkbox" name="pinnerpress_excluded_categories[]" value="' . esc_attr($category->term_id) . '" ' . checked( $is_checked, true, false ) . ' /> ';
                                                    echo esc_html($category->name);
                                                    echo ' (' . esc_html($category->count) . ' ' . esc_html__('posts', 'pinnerpress') . ')';
                                                    echo '</label>';
                                                }
                                                echo '</fieldset>';
                                            } else {
                                                echo '<p>' . esc_html__('No categories found.', 'pinnerpress') . '</p>';
                                            }
                                            ?>
                                            <p class="description"><?php esc_html_e('When checked, the selected features above will not appear on posts in these categories.', 'pinnerpress'); ?></p>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <!-- Custom CSS Selectors Section -->
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Custom CSS Selectors', 'pinnerpress'); ?></h2>
                                <p><?php esc_html_e('Override default image detection with custom CSS selectors. These settings apply to both Pin Buttons and Image Banners.', 'pinnerpress'); ?></p>

                                <table class="form-table" role="presentation">
                                    <tbody>
                                        <tr>
                                            <th scope="row">
                                                <label for="pinnerpress_custom_selectors_enabled">
                                                    <?php esc_html_e('Use Custom Selectors', 'pinnerpress'); ?>
                                                </label>
                                            </th>
                                            <td>
                                                <input type="checkbox" id="pinnerpress_custom_selectors_enabled" name="pinnerpress_custom_selectors_enabled" value="1" <?php checked('1', get_option('pinnerpress_custom_selectors_enabled', '0')); ?> />
                                                <p class="description">
                                                    <?php esc_html_e('When enabled, only use custom CSS selectors (ignore default image detection). Applies to both Pin Buttons and Image Banners.', 'pinnerpress'); ?>
                                                </p>
                                            </td>
                                        </tr>

                                        <tr class="pinnerpress-global-custom-selectors-row" style="display: <?php echo get_option('pinnerpress_custom_selectors_enabled', '0') === '1' ? 'table-row' : 'none'; ?>;">
                                            <th scope="row">
                                                <label for="pinnerpress_custom_selectors">
                                                    <?php esc_html_e('Custom CSS Selectors', 'pinnerpress'); ?>
                                                </label>
                                            </th>
                                            <td>
                                                <textarea id="pinnerpress_custom_selectors" name="pinnerpress_custom_selectors" rows="5" class="large-text code"><?php echo esc_textarea(get_option('pinnerpress_custom_selectors', '')); ?></textarea>
                                                <p class="description">
                                                    <?php esc_html_e('Enter one CSS selector per line. Example: #main img, .content img, .post-content img', 'pinnerpress'); ?>
                                                </p>
                                            </td>
                                        </tr>

                                        <tr class="pinnerpress-global-custom-selectors-row" style="display: <?php echo get_option('pinnerpress_custom_selectors_enabled', '0') === '1' ? 'table-row' : 'none'; ?>;">
                                            <th scope="row">
                                                <label for="pinnerpress_find_images_in_selectors">
                                                    <?php esc_html_e('Find Images Inside Selectors', 'pinnerpress'); ?>
                                                </label>
                                            </th>
                                            <td>
                                                <input type="checkbox" id="pinnerpress_find_images_in_selectors" name="pinnerpress_find_images_in_selectors" value="1" <?php checked('1', get_option('pinnerpress_find_images_in_selectors', '1')); ?> />
                                                <p class="description">
                                                    <?php esc_html_e('When enabled, treat selectors as containers and find all images inside them. When disabled, selectors must point directly to image elements.', 'pinnerpress'); ?>
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class="pinnerpress-settings-sidebar">
                            <div class="pinnerpress-settings-box">
                                <h3><?php esc_html_e('How Custom Selectors Work', 'pinnerpress'); ?></h3>
                                <p><?php esc_html_e('Custom selectors give you complete control over which images PinnerPress targets.', 'pinnerpress'); ?></p>

                                <h4><?php esc_html_e('Two Modes:', 'pinnerpress'); ?></h4>
                                <p><strong><?php esc_html_e('Direct Mode (unchecked):', 'pinnerpress'); ?></strong><br>
                                <?php esc_html_e('Selectors must point directly to images', 'pinnerpress'); ?><br>
                                <code>#main img</code></p>

                                <p><strong><?php esc_html_e('Container Mode (checked):', 'pinnerpress'); ?></strong><br>
                                <?php esc_html_e('Selectors point to containers, find images inside', 'pinnerpress'); ?><br>
                                <code>#main</code> <?php esc_html_e('(finds all images inside #main)', 'pinnerpress'); ?></p>

                                <h4><?php esc_html_e('Example Selectors:', 'pinnerpress'); ?></h4>
                                <ul style="list-style-type: disc; margin-left: 20px;">
                                    <li><code>#main</code></li>
                                    <li><code>#main > article</code></li>
                                    <li><code>article.single-entry</code></li>
                                    <li><code>.post-content</code></li>
                                    <li><code>article.entry</code></li>
                                    <li><code>.content-area</code></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <?php elseif ($active_tab == 'migration'): ?>
                </form>
                <!-- Migration Tab Content (outside form since it uses AJAX) -->
                <div class="pinnerpress-settings-container">
                    <div class="pinnerpress-settings-layout">
                        <div class="pinnerpress-settings-column">
                            <div class="pinnerpress-settings-section">
                                <h2><?php esc_html_e('Migration Tools', 'pinnerpress'); ?></h2>
                                <p><?php esc_html_e('Migrate settings and data from other Pinterest plugins to PinnerPress.', 'pinnerpress'); ?></p>
                                
                                <!-- Hubbub Migration Section -->
                                <div class="pinnerpress-migration-section">
                                    <h3><?php esc_html_e('Migrate from Hubbub', 'pinnerpress'); ?></h3>
                                    <p><?php esc_html_e('Transfer your Pinterest settings and hidden images from Hubbub to PinnerPress.', 'pinnerpress'); ?></p>
                                    
                                    <div class="pinnerpress-migration-controls">
                                        <button type="button" id="pinnerpress-scan-hubbub" class="button button-secondary">
                                            <?php esc_html_e('Scan for Hubbub Data', 'pinnerpress'); ?>
                                        </button>
                                        <button type="button" id="pinnerpress-migrate-hubbub" class="button button-primary" style="display: none;">
                                            <?php esc_html_e('Migrate from Hubbub', 'pinnerpress'); ?>
                                        </button>
                                    </div>
                                    
                                    <div id="pinnerpress-migration-results" class="pinnerpress-migration-results" style="display: none;">
                                        <!-- Results will be populated via AJAX -->
                                    </div>
                                    
                                    <div id="pinnerpress-migration-progress" class="pinnerpress-migration-progress" style="display: none;">
                                        <div class="pinnerpress-progress-bar">
                                            <div class="pinnerpress-progress-fill"></div>
                                        </div>
                                        <p class="pinnerpress-progress-text"><?php esc_html_e('Migration in progress...', 'pinnerpress'); ?></p>
                                    </div>
                                </div>
                                
                                <!-- Tasty Pins Migration Section -->
                                <div class="pinnerpress-migration-section" style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc;">
                                    <h3><?php esc_html_e('Migrate from Tasty Pins', 'pinnerpress'); ?></h3>
                                    <p><?php esc_html_e('Transfer your Pinterest settings, follow box, banner, and hidden images from Tasty Pins to PinnerPress.', 'pinnerpress'); ?></p>
                                    
                                    <div class="pinnerpress-migration-controls">
                                        <button type="button" id="pinnerpress-scan-tasty-pins" class="button button-secondary">
                                            <?php esc_html_e('Scan for Tasty Pins Data', 'pinnerpress'); ?>
                                        </button>
                                        <button type="button" id="pinnerpress-migrate-tasty-pins" class="button button-primary" style="display: none;">
                                            <?php esc_html_e('Migrate from Tasty Pins', 'pinnerpress'); ?>
                                        </button>
                                    </div>
                                    
                                    <div id="pinnerpress-tasty-pins-migration-results" class="pinnerpress-migration-results" style="display: none;">
                                        <!-- Results will be populated via AJAX -->
                                    </div>
                                    
                                    <div id="pinnerpress-tasty-pins-migration-progress" class="pinnerpress-migration-progress" style="display: none;">
                                        <div class="pinnerpress-progress-bar">
                                            <div class="pinnerpress-progress-fill"></div>
                                        </div>
                                        <p class="pinnerpress-progress-text"><?php esc_html_e('Migration in progress...', 'pinnerpress'); ?></p>
                                    </div>
                                </div>
                                
                                <!-- ESSB Migration Section -->
                                <div class="pinnerpress-migration-section" style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc;">
                                    <h3><?php esc_html_e('Migrate from Easy Social Share Buttons', 'pinnerpress'); ?></h3>
                                    <p><?php esc_html_e('Transfer your Pinterest settings, follow box, and hidden images from Easy Social Share Buttons to PinnerPress.', 'pinnerpress'); ?></p>
                                    
                                    <div class="pinnerpress-migration-controls">
                                        <button type="button" id="pinnerpress-scan-essb" class="button button-secondary">
                                            <?php esc_html_e('Scan for ESSB Data', 'pinnerpress'); ?>
                                        </button>
                                        <button type="button" id="pinnerpress-migrate-essb" class="button button-primary" style="display: none;">
                                            <?php esc_html_e('Migrate from ESSB', 'pinnerpress'); ?>
                                        </button>
                                    </div>
                                    
                                    <div id="pinnerpress-essb-migration-results" class="pinnerpress-migration-results" style="display: none;">
                                        <!-- Results will be populated via AJAX -->
                                    </div>
                                    
                                    <div id="pinnerpress-essb-migration-progress" class="pinnerpress-migration-progress" style="display: none;">
                                        <div class="pinnerpress-progress-bar">
                                            <div class="pinnerpress-progress-fill"></div>
                                        </div>
                                        <p class="pinnerpress-progress-text"><?php esc_html_e('Migration in progress...', 'pinnerpress'); ?></p>
                                    </div>
                                </div>
                                
                                <!-- Migration History Section -->
                                <div class="pinnerpress-migration-history" style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc;">
                                    <h3><?php esc_html_e('Migration History', 'pinnerpress'); ?></h3>
                                    <?php
                                    $hubbub_migration = get_option('pinnerpress_hubbub_migration_completed');
                                    $tasty_pins_migration = get_option('pinnerpress_tasty_pins_migration_completed');
                                    $essb_migration = get_option('pinnerpress_essb_migration_completed');
                                    
                                    $has_migrations = false;
                                    
                                    if ($hubbub_migration) {
                                        echo '<p><strong>' . esc_html__('Hubbub:', 'pinnerpress') . '</strong> ' . sprintf(
                                            /* translators: %s: Migration date and time */
                                            esc_html__('Migrated on %s', 'pinnerpress'),
                                            esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($hubbub_migration)))
                                        ) . '</p>';
                                        $has_migrations = true;
                                    }
                                    
                                    if ($tasty_pins_migration) {
                                        echo '<p><strong>' . esc_html__('Tasty Pins:', 'pinnerpress') . '</strong> ' . sprintf(
                                            /* translators: %s: Migration date and time */
                                            esc_html__('Migrated on %s', 'pinnerpress'),
                                            esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($tasty_pins_migration)))
                                        ) . '</p>';
                                        $has_migrations = true;
                                    }
                                    
                                    if ($essb_migration) {
                                        echo '<p><strong>' . esc_html__('Easy Social Share Buttons:', 'pinnerpress') . '</strong> ' . sprintf(
                                            /* translators: %s: Migration date and time */
                                            esc_html__('Migrated on %s', 'pinnerpress'),
                                            esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($essb_migration)))
                                        ) . '</p>';
                                        $has_migrations = true;
                                    }
                                    
                                    if (!$has_migrations) {
                                        echo '<p>' . esc_html__('No migrations have been completed yet.', 'pinnerpress') . '</p>';
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form method="post" action="options.php" class="pinnerpress-settings-form">
                
                <?php endif; ?>
                
                <?php if ($active_tab !== 'migration'): ?>
                <div class="pinnerpress-submit-buttons">
                    <?php 
                    // Disable submit button for free users on premium feature tabs
                    $button_disabled = false;
                    if ($active_tab === 'follow_box' && !pinnerpress_is_feature_enabled('follow_box')) {
                        $button_disabled = true;
                    } elseif ($active_tab === 'banner' && !pinnerpress_is_feature_enabled('image_banner')) {
                        $button_disabled = true;
                    }
                    
                    if ($button_disabled) {
                        echo '<button type="submit" name="submit" id="submit" class="button button-primary" disabled>' . esc_html__('Save Changes', 'pinnerpress') . ' (' . esc_html__('Premium Feature', 'pinnerpress') . ')</button>';
                    } else {
                        submit_button(esc_html__('Save Changes', 'pinnerpress'), 'primary', 'submit', false);
                    }
                    ?>
                    <?php 
                    // Create reset link with nonce
                    $reset_url = wp_nonce_url(
                        add_query_arg(
                            array(
                                'page' => esc_attr($this->plugin_name) . '-settings',
                                'tab' => $active_tab,
                                'pinnerpress_reset_settings' => 'true',
                                'reset_tab' => $active_tab // Add the tab to reset
                            ),
                            admin_url('admin.php')
                        ),
                        'pinnerpress-reset-settings'
                    );
                    ?>
                    <?php
                    // Customize the reset button text based on the active tab
                    $reset_button_text = __('Reset Settings', 'pinnerpress');
                    $confirm_text = __('Are you sure you want to reset these settings to their default values? This cannot be undone.', 'pinnerpress');
                    
                    switch ($active_tab) {
                        case 'settings':
                            $reset_button_text = __('Reset Pin Button Settings', 'pinnerpress');
                            $confirm_text = __('Are you sure you want to reset Pin Button settings to their default values? This cannot be undone.', 'pinnerpress');
                            break;
                        case 'follow_box':
                            $reset_button_text = __('Reset Follow Box Settings', 'pinnerpress');
                            $confirm_text = __('Are you sure you want to reset Follow Box settings to their default values? This cannot be undone.', 'pinnerpress');
                            break;
                        case 'banner':
                            $reset_button_text = __('Reset Image Banner Settings', 'pinnerpress');
                            $confirm_text = __('Are you sure you want to reset Image Banner settings to their default values? This cannot be undone.', 'pinnerpress');
                            break;
                        case 'call_out':
                            $reset_button_text = __('Reset Call Out Banner Settings', 'pinnerpress');
                            $confirm_text = __('Are you sure you want to reset Call Out Banner settings to their default values? This cannot be undone.', 'pinnerpress');
                            break;
                    }
                    ?>
                    <a href="<?php echo esc_url($reset_url); ?>" class="button button-secondary reset-button pinnerpress-reset-button" onclick="return confirm('<?php echo esc_js($confirm_text); ?>');"><?php echo esc_html($reset_button_text); ?></a>
                </div>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>

<style>
/* Free Version Styles */
.pinnerpress-free-settings .pinnerpress-disabled-field {
    opacity: 0.6;
    pointer-events: none;
}

.pinnerpress-free-note {
    color: #666;
    font-style: italic;
    font-weight: normal;
    margin-left: 8px;
}

.pinnerpress-premium-notice {
    color: #E60023;
    font-weight: 600;
}

.pinnerpress-free-settings input[disabled],
.pinnerpress-free-settings button[disabled] {
    opacity: 0.6;
    cursor: not-allowed !important;
}

@media (max-width: 768px) {
    .pinnerpress-call-out-banner {
        flex-direction: column;
        padding: 20px;
    }
    .pinnerpress-call-out-banner > span.pinnerpress-banner-title-span { 
        margin: 0 0 10px 0 !important; /* Adjusted to 10px bottom margin, consistent with earlier fix attempt */
        text-align: center;
        display: block; /* Added to ensure it behaves as a block if intended */
        width: 100%;    /* Added to ensure it takes full width if intended */
    }
    .pinnerpress-call-out-button {
        width: 100%;
        max-width: 200px;
        margin: 0 auto 5px !important; /* Consistent with earlier fix for button spacing */
        text-align: center;
        padding: 6px 12px !important; 
    }
    .pinnerpress-call-out-button span.pinnerpress-button-text-span {
        margin: 0 !important; 
        padding: 0 !important;
    }
    .pinnerpress-logo {
        margin: 0 auto 10px !important; /* Added bottom margin to logo for better spacing */
    }
}

.pinnerpress-analytics-limitation {
    border-left: 4px solid #E60023;
    padding: 12px;
    background-color: #fef4f4;
    margin: 20px 0;
}

.pinnerpress-analytics-limitation h4 {
    margin-top: 0;
    color: #E60023;
}

.pinnerpress-analytics-limitation p {
    margin-bottom: 10px;
}

/* Additional PinnerPress Button Styling */
.pinnerpress-reset-button {
    background-color: #fff !important;
    color: #E60023 !important;
    border: 1px solid #E60023 !important;
    transition: all 0.3s ease;
}

.pinnerpress-reset-button:hover {
    background-color: #E60023 !important;
    color: white !important;
    border-color: #E60023 !important;
}

/* Submit buttons */
.wrap.pinnerpress-admin .submit input[type="submit"] {
    background-color: #E60023 !important;
    border-color: #E60023 !important;
    color: white !important;
    transition: all 0.3s ease;
}

.wrap.pinnerpress-admin .submit input[type="submit"]:hover {
    background-color: #c7001e !important;
    border-color: #c7001e !important;
}

/* Tab navigation buttons */
.pinnerpress-tabs-wrapper .nav-tab {
    transition: all 0.3s ease;
}

.pinnerpress-tabs-wrapper .nav-tab:hover {
    color: #E60023;
}

/* Media upload buttons */
.pinnerpress-admin .pinnerpress-media-upload {
    background-color: #E60023 !important;
    border-color: #E60023 !important;
    color: white !important;
}

.pinnerpress-admin .pinnerpress-media-upload:hover {
    background-color: #c7001e !important;
    border-color: #c7001e !important;
}

.pinnerpress-admin .pinnerpress-media-remove {
    background-color: #fff !important;
    color: #E60023 !important;
    border: 1px solid #E60023 !important;
}

.pinnerpress-admin .pinnerpress-media-remove:hover {
    background-color: #E60023 !important;
    color: white !important;
    border-color: #E60023 !important;
}

/* PinnerPress Red Slider Styling */
.pinnerpress-opacity-slider {
    -webkit-appearance: none;
    width: 200px;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    outline: none;
    transition: background 0.3s;
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

.pinnerpress-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E60023;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid #fff;
    transition: background 0.3s;
    margin-top: -7px; /* Centers the thumb on the track */
}

.pinnerpress-opacity-slider:focus::-webkit-slider-thumb {
    outline: 2px solid #E60023;
    outline-offset: 2px;
}

.pinnerpress-opacity-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E60023;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid #fff;
    transition: background 0.3s;
    -moz-appearance: none;
}

.pinnerpress-opacity-slider:focus::-moz-range-thumb {
    outline: 2px solid #E60023;
    outline-offset: 2px;
}

.pinnerpress-opacity-slider::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E60023;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 2px solid #fff;
    transition: background 0.3s;
    margin-top: 0;
}

.pinnerpress-opacity-slider:focus::-ms-thumb {
    outline: 2px solid #E60023;
    outline-offset: 2px;
}

.pinnerpress-opacity-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: #eee;
    border: none;
}

.pinnerpress-opacity-slider::-ms-fill-lower {
    background: #E60023;
    border-radius: 3px;
}

.pinnerpress-opacity-slider::-ms-fill-upper {
    background: #eee;
    border-radius: 3px;
}

.pinnerpress-opacity-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #eee;
    border: none;
}

.pinnerpress-opacity-slider::-moz-range-progress {
    background-color: #E60023;
    border-radius: 3px;
}

.pinnerpress-opacity-slider:focus {
    outline: none;
}

/* Hide the outline for Firefox */
.pinnerpress-opacity-slider::-moz-focus-outer {
    border: 0;
}

/* Align opacity value text */
.pinnerpress-opacity-value {
    vertical-align: middle;
    display: inline-block;
}

/* PinnerPress Color Picker Styling */
.pinnerpress-admin .wp-color-picker-wrap .wp-color-picker {
    border: 1px solid #ccd0d4 !important;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.pinnerpress-admin .wp-color-picker-wrap .wp-color-picker:focus {
    border-color: #999 !important;
    box-shadow: 0 0 0 1px #ccd0d4 !important;
}

.pinnerpress-admin .wp-color-picker-wrap .wp-picker-container .wp-color-result {
    border: 1px solid #ccd0d4 !important;
    border-radius: 4px 0 0 4px;
    transition: border-color 0.3s ease;
}

.pinnerpress-admin .wp-color-picker-wrap .wp-picker-container .wp-color-result:hover,
.pinnerpress-admin .wp-color-picker-wrap .wp-picker-container .wp-color-result:focus {
    border-color: #999 !important;
}

.pinnerpress-admin .wp-color-picker-wrap .wp-picker-container .wp-picker-input-wrap {
    border: 1px solid #ccd0d4 !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0;
}

.pinnerpress-admin .wp-color-picker-wrap .wp-picker-container .wp-picker-input-wrap .wp-color-picker {
    border: none !important;
}

/* Color picker button styling */
.pinnerpress-admin .wp-picker-container .wp-color-result.button {
    /* background: none !important; */
    border: 1px solid #ccd0d4 !important;
    transition: all 0.3s ease;
}

.pinnerpress-admin .wp-picker-container .wp-color-result.button:hover {
    border-color: #999 !important;
    transform: none !important;
}

/* Focus states for accessibility */
.pinnerpress-admin .wp-picker-container .wp-color-result:focus {
    outline: 2px solid #ccd0d4;
    outline-offset: 2px;
}

/* Migration Tab Styles */
.pinnerpress-migration-section {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fafafa;
}

.pinnerpress-migration-section h3 {
    margin-top: 0;
    color: #E60023;
}

.pinnerpress-migration-controls {
    margin: 20px 0;
}

.pinnerpress-migration-controls .button {
    margin-right: 10px;
}

.pinnerpress-migration-results {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

.pinnerpress-migration-progress {
    margin: 20px 0;
}

.pinnerpress-progress-bar {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pinnerpress-progress-fill {
    height: 100%;
    background-color: #E60023;
    width: 0%;
    transition: width 0.3s ease;
}

.pinnerpress-progress-text {
    text-align: center;
    margin: 0;
    font-weight: 600;
}

.pinnerpress-migration-history {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;
    background: #f9f9f9;
}

.pinnerpress-migration-history h3 {
    margin-top: 0;
    color: #666;
}

.pinnerpress-migration-success {
    color: #046B04;
    background-color: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.pinnerpress-migration-error {
    color: #DC2626;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.pinnerpress-migration-info {
    color: #1F2937;
    background-color: #F3F4F6;
    border: 1px solid #D1D5DB;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}
</style>
    </div> <!-- Close pinnerpress-admin-content --> 
