<?php

/**

 * Settings - Enterprise Dashboard

 *

 * @package    SensFRX

 * @subpackage SensFRX/admin/partials

 */



// If this file is called directly, abort.

if (!defined('WPINC')) {

    die;

}



// Get current settings

$options = get_option('sensfrx_options', SensFRX::default_options());

?>



<div class="sensfrx-enterprise-wrapper">

    <!-- Navigation Tabs -->

    <?php include_once plugin_dir_path(__FILE__) . 'sensfrx-navigation.php'; ?>



    <!-- Main Content -->

    <div class="sensfrx-enterprise-dashboard">

        <!-- Page Header -->

        <div class="sensfrx-page-header">

            <div class="sensfrx-page-title-section">

                <h1 class="sensfrx-page-title">Store Protection Settings</h1>

                <p class="sensfrx-page-subtitle">Control how SensFRX protects your store from fraud and suspicious activity</p>

            </div>

            <div class="sensfrx-autosave-status" id="sensfrx-save-status">

                <svg class="sensfrx-save-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">

                    <path d="M16 4l-8 8-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                </svg>

                <span id="sensfrx-save-text">All changes saved</span>

            </div>

        </div>



        <form id="sensfrx-settings-form" method="post" action="options.php">

            <?php settings_fields('sensfrx_plugin_options'); ?>



            <!-- Two Column Layout -->

            <div class="sensfrx-settings-grid">

                <!-- Left Column -->

                <div class="sensfrx-settings-column">



                    <!-- Connection Settings -->

                    <div class="sensfrx-settings-card">

                        <div class="sensfrx-card-header">

                            <div class="sensfrx-card-icon" style="background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);">

                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                    <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                            </div>

                            <div style="flex: 1;">

                                <div style="display: flex; align-items: center; gap: 12px;">

                                    <h3 class="sensfrx-card-title">Connect Your Store</h3>

                                    <?php if (!empty($options['sensfrx_property_id']) && !empty($options['sensfrx_property_secret'])): ?>

                                        <span class="sensfrx-status-badge sensfrx-status-connected">

                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">

                                                <circle cx="6" cy="6" r="5" fill="currentColor"/>

                                            </svg>

                                            Connected

                                        </span>

                                    <?php else: ?>

                                        <span class="sensfrx-status-badge sensfrx-status-disconnected">

                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">

                                                <circle cx="6" cy="6" r="5" fill="currentColor"/>

                                            </svg>

                                            Not Connected

                                        </span>

                                    <?php endif; ?>

                                </div>

                                <p class="sensfrx-card-description">Link your store to SensFRX fraud protection</p>

                            </div>

                        </div>



                        <div class="sensfrx-form-group">

                            <label class="sensfrx-label">

                                Property ID

                                <span class="sensfrx-required">*</span>

                            </label>

                            <input

                                type="text"

                                name="sensfrx_options[sensfrx_property_id]"

                                value="<?php echo esc_attr($options['sensfrx_property_id']); ?>"

                                placeholder="Enter your Property ID"

                                class="sensfrx-input"

                                required

                            />

                            <p class="sensfrx-help-text">Find this in your SensFRX dashboard</p>

                        </div>



                        <div class="sensfrx-form-group">

                            <label class="sensfrx-label">

                                Property Secret

                                <span class="sensfrx-required">*</span>

                            </label>

                            <input

                                type="password"

                                name="sensfrx_options[sensfrx_property_secret]"

                                value="<?php echo esc_attr($options['sensfrx_property_secret']); ?>"

                                placeholder="Enter your Property Secret"

                                class="sensfrx-input"

                                required

                            />

                            <p class="sensfrx-help-text">Keep this secure - never share it publicly</p>

                        </div>



                        <!-- Account Email Label -->

                        <div id="sensfrx-account-email-container" style="margin-top: 16px; display: none;">

                            <div class="sensfrx-info-box" style="background: #f0f9ff; border-color: #0254ff;">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <path d="M3 4h14a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V5a1 1 0 011-1z" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M18 5l-8 6-8-6" stroke="#0254ff" stroke-width="2" stroke-linecap="round"/>

                                </svg>

                                <div>

                                    <strong>Account:</strong>

                                    <span id="sensfrx-account-email" style="color: #0254ff; font-weight: 500;"></span>

                                </div>

                            </div>

                        </div>



                        <!-- Connection Status Box (will be populated by JavaScript after API verification) -->

                        <div id="connection-status-container" style="margin-top: 16px;">

                            <?php if (!empty($options['sensfrx_property_id']) && !empty($options['sensfrx_property_secret'])): ?>

                                <!-- Show loading state initially -->

                                <div class="sensfrx-info-box" id="connection-verifying-box">

                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="sensfrx-spinner">

                                        <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2" opacity="0.3"/>

                                        <path d="M10 1a9 9 0 019 9" stroke="#0254ff" stroke-width="2" stroke-linecap="round"/>

                                    </svg>

                                    <div>

                                        <strong>Verifying Connection...</strong>

                                        <p>Checking your credentials with SensFRX servers.</p>

                                    </div>

                                </div>

                            <?php else: ?>

                            <div class="sensfrx-warning-box">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <path d="M10 0l10 17H0L10 0z" fill="none" stroke="#f59e0b" stroke-width="2"/>

                                    <path d="M10 7v4m0 3h.01" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/>

                                </svg>

                                <div>

                                    <strong>Store Not Protected</strong>

                                    <p>Add your Property ID and Secret to start protecting your store from fraud. <a href="https://status.sensfrx.com" target="_blank" class="sensfrx-link">Get credentials →</a></p>

                                </div>

                            </div>



                                <div class="sensfrx-info-box">

                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                        <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                        <path d="M10 6v4m0 4h.01" stroke="#0254ff" stroke-width="2" stroke-linecap="round"/>

                                    </svg>

                                    <div>

                                        <strong>Need your credentials?</strong>

                                        <p>Visit your <a href="https://status.sensfrx.com" target="_blank" class="sensfrx-link">SensFRX Dashboard</a> to get your Property ID and Secret.</p>

                                    </div>

                                </div>

                            <?php endif; ?>

                        </div>



                        <!-- Reset Account - Passive Link -->

                        <?php if (!empty($options['sensfrx_property_id']) && !empty($options['sensfrx_property_secret'])): ?>

                        <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; text-align: center;">

                            <a href="#" id="sensfrx-reset-account-link" style="font-size: 12px; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s;">

                                <svg width="12" height="12" viewBox="0 0 20 20" fill="none" style="opacity: 0.5;">

                                    <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                                <span>Reset Account</span>

                            </a>

                        </div>

                        <?php endif; ?>

                    </div>



                    <?php /* ALERT NOTIFICATIONS REMOVED - Moved to Fraud Protection Page

                    

                    Admin fraud alert settings are now managed in the "Fraud Protection" page for better

                    organization and granular control. This provides separate controls for:

                    - Login fraud alerts (challenge/deny levels)

                    - Payment fraud alerts (allow/challenge/deny levels)

                    - Registration fraud alerts (allow/challenge/deny levels)

                    

                    These settings sync to the SensFRX API and Cassandra email_alerts table.

                    */ ?>



                    <?php /* COMMENTED OUT FOR FUTURE IMPLEMENTATION

                    Risk Levels Section - Currently Non-Functional

                    

                    NOTE: These thresholds are NOT currently used for fraud decisions.

                    Fraud decisions are made by the SensFRX API using hardcoded thresholds:

                    - Score 90+: Deny (critical)

                    - Score 60-89: Challenge (high) 

                    - Score 0-59: Allow (low/medium)

                    

                    This section is preserved for future implementation when custom

                    thresholds per property will be supported by the API.



                    <!-- Risk Thresholds -->

                    <div class="sensfrx-settings-card">

                        <div class="sensfrx-card-header">

                            <div class="sensfrx-card-icon" style="background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);">

                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                    <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                    <line x1="12" y1="9" x2="12" y2="13" stroke="white" stroke-width="2" stroke-linecap="round"/>

                                    <line x1="12" y1="17" x2="12.01" y2="17" stroke="white" stroke-width="2" stroke-linecap="round"/>

                                </svg>

                            </div>

                            <div style="flex: 1;">

                                <div style="display: flex; align-items: center; gap: 12px;">

                                    <h3 class="sensfrx-card-title">Risk Levels</h3>

                                    <?php if (!empty($options['sensfrx_property_id']) && !empty($options['sensfrx_property_secret'])): ?>

                                        <span class="sensfrx-status-badge sensfrx-status-connected">

                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">

                                                <circle cx="6" cy="6" r="5" fill="currentColor"/>

                                            </svg>

                                            Active

                                        </span>

                                    <?php endif; ?>

                                </div>

                                <p class="sensfrx-card-description">Set when to automatically block or review orders</p>

                            </div>

                        </div>



                        <?php if (empty($options['sensfrx_property_id']) || empty($options['sensfrx_property_secret'])): ?>

                            <div class="sensfrx-info-box" style="margin-bottom: 16px;">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M10 6v4m0 4h.01" stroke="#0254ff" stroke-width="2" stroke-linecap="round"/>

                                </svg>

                                <div>

                                    <strong>Connect Your Store First</strong>

                                    <p>Risk levels will take effect once you add your Property ID and Secret above.</p>

                                </div>

                            </div>

                        <?php endif; ?>



                        <div class="sensfrx-threshold-visual">

                            <div class="sensfrx-threshold-bar">

                                <div class="sensfrx-threshold-zone sensfrx-zone-safe" style="width: <?php echo esc_attr(isset($options['review_threshold']) ? $options['review_threshold'] : 50); ?>%;">

                                    <span>Safe</span>

                                </div>

                                <div class="sensfrx-threshold-zone sensfrx-zone-review" style="width: <?php echo esc_attr((isset($options['block_threshold']) ? $options['block_threshold'] : 80) - (isset($options['review_threshold']) ? $options['review_threshold'] : 50)); ?>%;">

                                    <span>Review</span>

                                </div>

                                <div class="sensfrx-threshold-zone sensfrx-zone-block" style="width: <?php echo esc_attr(100 - (isset($options['block_threshold']) ? $options['block_threshold'] : 80)); ?>%;">

                                    <span>Block</span>

                                </div>

                            </div>

                        </div>



                        <div class="sensfrx-form-group">

                            <label class="sensfrx-label">

                                Review Threshold

                                <span class="sensfrx-badge sensfrx-badge-info">Medium Risk</span>

                            </label>

                            <div class="sensfrx-slider-group">

                                <input

                                    type="range"

                                    name="sensfrx_options[review_threshold]"

                                    id="review-threshold"

                                    value="<?php echo esc_attr(isset($options['review_threshold']) ? $options['review_threshold'] : 50); ?>"

                                    min="0"

                                    max="100"

                                    class="sensfrx-slider sensfrx-slider-review"

                                    oninput="document.getElementById('review-value').textContent = this.value"

                                />

                                <span class="sensfrx-slider-value sensfrx-value-review" id="review-value"><?php echo esc_attr(isset($options['review_threshold']) ? $options['review_threshold'] : 50); ?></span>

                            </div>

                            <p class="sensfrx-help-text">Orders above this score need your manual review before processing</p>

                        </div>



                        <div class="sensfrx-form-group">

                            <label class="sensfrx-label">

                                Block Threshold

                                <span class="sensfrx-badge sensfrx-badge-info">High Risk</span>

                            </label>

                            <div class="sensfrx-slider-group">

                                <input

                                    type="range"

                                    name="sensfrx_options[block_threshold]"

                                    id="block-threshold"

                                    value="<?php echo esc_attr(isset($options['block_threshold']) ? $options['block_threshold'] : 80); ?>"

                                    min="0"

                                    max="100"

                                    class="sensfrx-slider sensfrx-slider-block"

                                    oninput="document.getElementById('block-value').textContent = this.value"

                                />

                                <span class="sensfrx-slider-value sensfrx-value-block" id="block-value"><?php echo esc_attr(isset($options['block_threshold']) ? $options['block_threshold'] : 80); ?></span>

                            </div>

                            <p class="sensfrx-help-text">Orders above this score are automatically blocked to protect your store</p>

                        </div>

                    </div>

                    */ ?>



                </div>



                <!-- Right Column -->

                <div class="sensfrx-settings-column">



                    <!-- Fraud Protection Settings -->

                    <div class="sensfrx-settings-card" style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 2px solid #ef4444;">

                        <div class="sensfrx-card-header" style="border-bottom: none; padding-bottom: 0;">

                            <div class="sensfrx-card-icon" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">

                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                    <path d="M12 2L3 7v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V7l-9-5z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                    <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                            </div>

                            <div style="flex: 1;">

                                <h3 class="sensfrx-card-title" style="color: #dc2626;">Fraud Protection Controls</h3>

                                <p class="sensfrx-card-description" style="color: #991b1b;">Manage all fraud detection and protection settings</p>

                            </div>

                        </div>



                        <div style="background: white; padding: 20px; border-radius: 8px; margin-top: 16px;">

                            <div style="display: flex; gap: 20px; align-items: start; margin-bottom: 16px;">

                                <div style="flex-shrink: 0; font-size: 32px;">🔒</div>

                                <div style="flex: 1;">

                                    <h4 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #111827;">Configure Your Protection Settings</h4>

                                    <p style="margin: 0 0 12px 0; font-size: 14px; color: #6b7280; line-height: 1.6;">

                                        Control fraud detection for transactions, logins, registrations, bot protection, and email notifications.

                                        Enable/disable specific protection features and customize how your store responds to threats.

                                    </p>

                                    <ul style="margin: 0 0 16px 0; padding-left: 20px; font-size: 13px; color: #6b7280; line-height: 1.8;">

                                        <li><strong>Master Protection Toggle</strong> - Turn all fraud detection on/off</li>

                                        <li><strong>Transaction & Login Protection</strong> - Protect orders and accounts</li>

                                        <li><strong>Bot & Registration Blocking</strong> - Stop automated attacks</li>

                                        <li><strong>Email Notifications</strong> - Get alerts for suspicious activity</li>

                                        <li><strong>Advanced Features</strong> - Webhooks, whitelists, and more</li>

                                    </ul>

                                </div>

                            </div>



                            <a href="<?php echo esc_url( admin_url('admin.php?page=sensfrx_fpwoo&tab=fraud-protection')); ?>" class="sensfrx-btn-primary" style="display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; text-decoration: none; border-radius: 8px; font-size: 15px; font-weight: 600; transition: all 0.2s; box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);">

                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                <circle cx="10" cy="10" r="2" stroke="currentColor" stroke-width="1.5"/>

                                <circle cx="3" cy="10" r="2" stroke="currentColor" stroke-width="1.5"/>

                                <circle cx="17" cy="10" r="2" stroke="currentColor" stroke-width="1.5"/>

                            </svg>

                                <span>Go to Fraud Protection Settings</span>

                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                <path d="M7 4l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                            </svg>

                        </a>

                        </div>

                    </div>



                    <!-- Pro Features -->

                    <div class="sensfrx-settings-card sensfrx-pro-card">

                        <div class="sensfrx-pro-badge">

                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">

                                <path d="M8 0l2.5 5 5.5.7-4 3.9.9 5.4L8 12.5 3.1 15l.9-5.4-4-3.9 5.5-.7L8 0z" fill="white"/>

                            </svg>

                            PRO

                        </div>

                        <div class="sensfrx-card-header">

                            <div class="sensfrx-card-icon" style="background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);">

                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">

                                    <path d="M12 0l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z" fill="white"/>

                                </svg>

                            </div>

                            <div>

                                <h3 class="sensfrx-card-title">Advanced Protection</h3>

                                <p class="sensfrx-card-description">Unlock powerful features for serious stores</p>

                            </div>

                        </div>



                        <div class="sensfrx-pro-features">

                            <div class="sensfrx-pro-feature">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M6 10l3 3 5-6" stroke="#0254ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                                <div>

                                    <strong>Real-time Webhooks</strong>

                                    <p>Get instant notifications about fraud events</p>

                                </div>

                            </div>



                            <div class="sensfrx-pro-feature">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M6 10l3 3 5-6" stroke="#0254ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                                <div>

                                    <strong>Geographic Blocking</strong>

                                    <p>Block orders from high-risk countries</p>

                                </div>

                            </div>



                            <div class="sensfrx-pro-feature">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M6 10l3 3 5-6" stroke="#0254ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                                <div>

                                    <strong>Custom Risk Rules</strong>

                                    <p>Create your own fraud detection rules</p>

                                </div>

                            </div>



                            <div class="sensfrx-pro-feature">

                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                    <circle cx="10" cy="10" r="9" stroke="#0254ff" stroke-width="2"/>

                                    <path d="M6 10l3 3 5-6" stroke="#0254ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                                </svg>

                                <div>

                                    <strong>Priority Support</strong>

                                    <p>Get help from our fraud experts</p>

                                </div>

                            </div>

                        </div>



                        <a href="https://sensfrx.ai/pricing" target="_blank" class="sensfrx-pro-cta">

                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                <path d="M10 0l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z" fill="white"/>

                            </svg>

                            Upgrade to Pro

                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                                <path d="M7 3l7 7-7 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                            </svg>

                        </a>

                    </div>



                    <!-- Help Box -->

                    <div class="sensfrx-help-card">

                        <div class="sensfrx-help-icon">

                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">

                                <circle cx="16" cy="16" r="14" fill="#f8faff"/>

                                <circle cx="16" cy="16" r="10" stroke="#0254ff" stroke-width="2"/>

                                <path d="M16 12v8m0 4h.01" stroke="#0254ff" stroke-width="2" stroke-linecap="round"/>

                            </svg>

                        </div>

                        <h4>Need Help?</h4>

                        <p>Our documentation has detailed guides on setting up fraud protection for your store.</p>

                        <a href="https://docs.sensfrx.ai" target="_blank" class="sensfrx-help-link">

                            View Documentation

                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">

                                <path d="M6 3l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

                            </svg>

                        </a>

                    </div>



                </div>

            </div>



        </form>

    </div>

</div>



<script>

jQuery(document).ready(function($) {

    let saveTimeout;

    let isSaving = false;

    const restUrl = '<?php echo esc_url(rest_url('sensfrx-fraud-prevention-for-woocommerce/')); ?>';

    const nonce = '<?php echo esc_js( wp_create_nonce('wp_rest') ); ?>';



    // Verify credentials on page load if they exist

    <?php if (!empty($options['sensfrx_property_id']) && !empty($options['sensfrx_property_secret'])): ?>

    verifyCredentials();

    <?php endif; ?>



    // Auto-save function

    function autoSaveSettings() {

        if (isSaving) return;



        isSaving = true;

        updateSaveStatus('saving');



        const formData = $('#sensfrx-settings-form').serialize();



        $.ajax({

            url: ajaxurl,

            type: 'POST',

            data: {

                action: 'sensfrx_autosave_settings',

                nonce: '<?php echo esc_js( wp_create_nonce('sensfrx_autosave_nonce') ); ?>',

                settings: formData

            },

            success: function(response) {

                isSaving = false;

                if (response.success) {

                    updateSaveStatus('saved');

                } else {

                    updateSaveStatus('error');

                }

            },

            error: function() {

                isSaving = false;

                updateSaveStatus('error');

            }

        });

    }



    // Hide upgrade card for Pro and Enterprise plans

    // function hideUpgradeCardIfNeeded(planName) {

    //     const planLower = (planName || '').toLowerCase();



    //     // Hide upgrade card if user is on Pro, Enterprise, or any premium plan

    //     if (planLower.includes('pro') || planLower.includes('enterprise') || planLower.includes('premium')) {

    //         const upgradeCard = document.querySelector('.sensfrx-pro-card');

    //         if (upgradeCard) {

    //             upgradeCard.style.display = 'none';

    //         }

    //     }

    // }



    // Verify credentials with SensFRX API

    function verifyCredentials() {



        fetch(restUrl + 'get_license_info', {

            method: 'GET',

            headers: {

                'X-WP-Nonce': nonce,

                'Content-Type': 'application/json'

            }

        })

        .then(response => response.json())

        .then(data => {

            if (data.status === 'success' && data.data) {

                showConnectionSuccess(data.data);

            } else {

                showConnectionError(data);

            }

        })

        .catch(error => {

            showConnectionError({

                status: 'error',

                message: 'Network error connecting to SensFRX',

                details: error.message

            });

        });



        fetch(restUrl + 'get_sensfrx_review_count', {

            method: 'GET',

            headers: {

                'Content-Type': 'application/json'

            }

        })

        .then(response => response.json())

        .then(data => {

            if (data.status === 'success') {

                const badge = document.querySelector('.sensfrx-nav-badge');

                if (badge) {

                    badge.textContent = data.reviewCount || 0;

                }

            }

        })

        .catch(error => console.error('Error fetching review count:', error));



    }



    function getNextPlanFromApi(licenseData) {

        if (!licenseData || !licenseData.plan || !licenseData.plan_details) {

            return null;

        }



        const currentPlan = licenseData.plan.toLowerCase();



        // Do not show upgrade card for Enterprise

        if (currentPlan === 'enterprise') {

            return null;

        }



        const upgradeOrder = ['free', 'pro', 'growth', 'business', 'enterprise'];



        // If current plan is not part of the upgrade journey (eg: growth_trial)

        if (!upgradeOrder.includes(currentPlan)) {

            return null;

        }



        const currentIndex = upgradeOrder.indexOf(currentPlan);

        if (currentIndex === -1) return null;



        const nextPlanKey = upgradeOrder[currentIndex + 1];



        if (!nextPlanKey || !licenseData.plan_details[nextPlanKey]) {

            return null;

        }



        return licenseData.plan_details[nextPlanKey];

    }



    function updateUpgradeCard(licenseData) {

        const card = document.querySelector('.sensfrx-pro-card');

        if (!card) return;



        const nextPlan = getNextPlanFromApi(licenseData);



        // Hide card if no upgrade available

        if (!nextPlan) {

            card.style.display = 'none';

            return;

        }



        // Update title

        card.querySelector('.sensfrx-card-title').textContent =

            nextPlan.plan + ' Plan';



        // Update description

        card.querySelector('.sensfrx-card-description').textContent =

            `Upgrade to ${nextPlan.plan} for higher limits and advanced protection`;



        // Update CTA

        const cta = card.querySelector('.sensfrx-pro-cta');

        cta.href = licenseData.upgrade_url;

        cta.childNodes[2].textContent = `Upgrade to ${nextPlan.plan}`;



        // Update badge text

        card.querySelector('.sensfrx-pro-badge').lastChild.textContent =

            nextPlan.plan.toUpperCase();



        card.style.display = 'block';

    }



    // Show connection success message

    function showConnectionSuccess(licenseData) {

        const planName = licenseData.planName || licenseData.plan_name || licenseData.plan || 'Unknown Plan';

        const accountEmail = licenseData.email || licenseData.account_email || licenseData.user_email || '';



        // Hide upgrade card for Pro and Enterprise plans

        // hideUpgradeCardIfNeeded(planName);

        updateUpgradeCard(licenseData);



        // Show account email if available

        if (accountEmail) {

            const emailContainer = document.getElementById('sensfrx-account-email-container');

            const emailSpan = document.getElementById('sensfrx-account-email');

            if (emailContainer && emailSpan) {

                emailSpan.textContent = accountEmail;

                emailContainer.style.display = 'block';

            }

        }



        const html = `

            <div class="sensfrx-success-box sensfrx-dismissible" id="connection-success-box" style="animation: slideIn 0.3s ease;">

                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">

                    <circle cx="10" cy="10" r="9" stroke="#4caf50" stroke-width="2"/>

                    <path d="M6 10l3 3 5-6" stroke="#4caf50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

                </svg>

                <div style="flex: 1;">

                    <strong>Store Connected!</strong>

                    <p>Your store is protected by SensFRX (${planName}). All transactions are being monitored for fraud.</p>

                </div>

                <button type="button" class="sensfrx-dismiss-btn" onclick="sensFrxDismissBox('connection-success-box')" aria-label="Dismiss">

                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">

                        <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

                    </svg>

                </button>

            </div>

        `;

        $('#connection-status-container').html(html);



        // Update connection badges

        updateConnectionBadges(true);

    }



    // Show connection error message

    function showConnectionError(errorData) {

        // Hide account email on error

        const emailContainer = document.getElementById('sensfrx-account-email-container');

        if (emailContainer) {

            emailContainer.style.display = 'none';

        }



        const message = errorData.message || errorData.error || 'Unable to verify credentials';

        const details = errorData.details || '';



        let title = 'Connection Issue';

        let description = message;

        let steps = [];



        if (message.toLowerCase().includes('not configured')) {

            title = 'Store Not Connected';

            description = 'Your SensFRX credentials have not been configured yet.';

            steps = [

                'Get your credentials from <a href="https://status.sensfrx.com" target="_blank" class="sensfrx-link">SensFRX Dashboard</a>',

                'Add your Property ID and Property Secret above',

                'Save and this will automatically verify your connection'

            ];

        } else if (message.toLowerCase().includes('not authorized') || message.toLowerCase().includes('unauthorized') || message.toLowerCase().includes('invalid property') || message.toLowerCase().includes('invalid secret')) {

            title = 'Invalid Credentials';

            description = 'Unable to verify license with SensFRX servers. Please verify your Property ID and Secret are correct.';

            steps = [

                'Verify your Property ID and Property Secret are correct',

                'Get correct credentials from <a href="https://status.sensfrx.com" target="_blank" class="sensfrx-link">your SensFRX dashboard</a>',

                'Update the credentials above and save'

            ];

        } else if (message.toLowerCase().includes('network')) {

            title = 'Network Error';

            description = message;

            steps = [

                'Check your internet connection',

                'Verify WordPress can make external HTTP requests',

                'Try again in a few moments'

            ];

        }



        let stepsHtml = '';

        if (steps.length > 0) {

            stepsHtml = '<ol style="margin: 12px 0 0 20px; padding: 0; font-size: 13px; color: #991b1b;">' +

                steps.map(step => '<li style="margin-bottom: 6px;">' + step + '</li>').join('') +

                '</ol>';

        }



        const html = `

            <div class="sensfrx-error-box sensfrx-dismissible" style="display: flex; gap: 12px; padding: 16px; background: #fee2e2; border-left: 4px solid #dc2626; border-radius: 8px; animation: slideIn 0.3s ease;">

                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="flex-shrink: 0;">

                    <circle cx="10" cy="10" r="9" stroke="#dc2626" stroke-width="2"/>

                    <path d="M10 6v4m0 4h.01" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>

                </svg>

                <div style="flex: 1;">

                    <strong style="display: block; margin-bottom: 4px; color: #991b1b;">${title}</strong>

                    <p style="margin: 0; font-size: 13px; color: #991b1b;">${description}</p>

                    ${stepsHtml}

                </div>

                <button type="button" class="sensfrx-dismiss-btn" onclick="this.parentElement.style.display='none'" aria-label="Dismiss" style="background: transparent; border: none; cursor: pointer; padding: 4px; color: inherit; opacity: 0.6;">

                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">

                        <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

                    </svg>

                </button>

            </div>

        `;

        $('#connection-status-container').html(html);



        // Update connection badges

        updateConnectionBadges(false);

    }



    // Update connection status badges throughout the page

    function updateConnectionBadges(isConnected) {

        const $badges = $('.sensfrx-status-badge');

        $badges.each(function() {

            const $badge = $(this);

            if (isConnected) {

                $badge.removeClass('sensfrx-status-disconnected').addClass('sensfrx-status-connected');

                $badge.html(`

                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">

                        <circle cx="6" cy="6" r="5" fill="currentColor"/>

                    </svg>

                    ${$badge.text().includes('Active') ? 'Active' : $badge.text().includes('Enabled') ? 'Enabled' : 'Connected'}

                `);

            } else {

                $badge.removeClass('sensfrx-status-connected').addClass('sensfrx-status-disconnected');

                $badge.html(`

                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">

                        <circle cx="6" cy="6" r="5" fill="currentColor"/>

                    </svg>

                    Not Connected

                `);

            }

        });

    }



    // Update save status indicator

    function updateSaveStatus(status) {

        const $status = $('#sensfrx-save-status');

        const $text = $('#sensfrx-save-text');



        $status.removeClass('saving saved error');



        if (status === 'saving') {

            $status.addClass('saving');

            $text.text('Saving...');

        } else if (status === 'saved') {

            $status.addClass('saved');

            $text.text('All changes saved');

        } else if (status === 'error') {

            $status.addClass('error');

            $text.text('Error saving');

            setTimeout(function() {

                $status.removeClass('error');

                $text.text('All changes saved');

            }, 3000);

        }

    }



    // Trigger auto-save on input change with debounce

    $('#sensfrx-settings-form input, #sensfrx-settings-form select').on('change input', function() {

        clearTimeout(saveTimeout);

        updateSaveStatus('saving');



        saveTimeout = setTimeout(function() {

            autoSaveSettings();

        }, 1000); // Wait 1 second after last change

    });



    // Special handling for sliders to show real-time updates

    $('.sensfrx-slider').on('input', function() {

        clearTimeout(saveTimeout);

        updateSaveStatus('saving');



        saveTimeout = setTimeout(function() {

            autoSaveSettings();

        }, 1500); // Slightly longer delay for sliders

    });



    // Reset Account - Passive functionality

    $('#sensfrx-reset-account-link').on('click', function(e) {

        e.preventDefault();



        // Show confirmation dialog

        if (confirm('Are you sure you want to reset your SensFRX account?\n\nThis will:\n• Clear all stored credentials\n• Disconnect your store from SensFRX\n• Reset the onboarding process\n\nYou can reconnect at any time by re-entering your credentials.')) {



            // Clear the form fields

            $('input[name="sensfrx_options[sensfrx_property_id]"]').val('');

            $('input[name="sensfrx_options[sensfrx_property_secret]"]').val('');



            // Trigger auto-save to clear the credentials

            autoSaveSettings();



            // Also clear onboarding state

            $.ajax({

                url: ajaxurl,

                type: 'POST',

                data: {

                    action: 'sensfrx_reset_onboarding',

                    nonce: '<?php echo esc_js( wp_create_nonce('sensfrx_reset_onboarding') ); ?>'

                },

                success: function(response) {

                    // Reload the page to show fresh state

                    setTimeout(function() {

                        window.location.reload();

                    }, 1000);

                }

            });

        }

    });

});



// Dismiss notification boxes

function sensFrxDismissBox(boxId) {

    const box = document.getElementById(boxId);

    if (box) {

        box.style.animation = 'slideOut 0.3s ease';

        setTimeout(function() {

            box.style.display = 'none';

        }, 300);

    }

}

</script>



<style>

/* Auto-save Status */

.sensfrx-page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 24px;

}



.sensfrx-autosave-status {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    background: #f0fdf4;

    border: 1px solid #86efac;

    border-radius: 8px;

    color: #166534;

    font-size: 14px;

    font-weight: 500;

    transition: all 0.3s ease;

}



.sensfrx-autosave-status .sensfrx-save-icon {

    color: #16a34a;

}



.sensfrx-autosave-status.saving {

    background: #fef3c7;

    border-color: #fde047;

    color: #854d0e;

}



.sensfrx-autosave-status.saving .sensfrx-save-icon {

    color: #eab308;

    animation: spin 1s linear infinite;

}



.sensfrx-autosave-status.error {

    background: #fee2e2;

    border-color: #fca5a5;

    color: #991b1b;

}



.sensfrx-autosave-status.error .sensfrx-save-icon {

    color: #dc2626;

}



@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Spinner animation for verification */

.sensfrx-spinner {

    animation: spin 1s linear infinite;

}



/* Error box styling */

.sensfrx-error-box {

    display: flex;

    gap: 12px;

    padding: 16px;

    background: #fee2e2;

    border-left: 4px solid #dc2626;

    border-radius: 8px;

    animation: slideIn 0.3s ease;

}



.sensfrx-error-box strong {

    display: block;

    margin-bottom: 4px;

    color: #991b1b;

}



.sensfrx-error-box p {

    margin: 0;

    font-size: 13px;

    color: #991b1b;

}



/* Settings Grid Layout */

.sensfrx-settings-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

    margin-top: 24px;

}



.sensfrx-settings-column {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



/* Settings Card */

.sensfrx-settings-card {

    background: white;

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.sensfrx-settings-card:hover {

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



/* Card Header */

.sensfrx-card-header {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 24px;

}



.sensfrx-card-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.sensfrx-card-title {

    margin: 0 0 4px;

    font-size: 18px;

    font-weight: 600;

    color: #1a1a1a;

}



.sensfrx-card-description {

    margin: 0;

    font-size: 14px;

    color: #6b7280;

}



/* Status Badges */

.sensfrx-status-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 12px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 600;

    animation: fadeIn 0.3s ease;

}



.sensfrx-status-connected {

    background: #d1fae5;

    color: #065f46;

}



.sensfrx-status-disconnected {

    background: #fee2e2;

    color: #991b1b;

}



@keyframes fadeIn {

    from { opacity: 0; transform: scale(0.9); }

    to { opacity: 1; transform: scale(1); }

}



/* Form Elements */

.sensfrx-form-group {

    margin-bottom: 20px;

}



.sensfrx-form-group:last-child {

    margin-bottom: 0;

}



.sensfrx-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #374151;

}



.sensfrx-required {

    color: #dc2626;

}



.sensfrx-input {

    width: 100%;

    padding: 10px 14px;

    border: 2px solid #e5e7eb;

    border-radius: 8px;

    font-size: 14px;

    transition: all 0.2s ease;

}



.sensfrx-input:focus {

    outline: none;

    border-color: #0254ff;

    box-shadow: 0 0 0 3px rgba(2, 84, 255, 0.1);

}



.sensfrx-help-text {

    margin: 6px 0 0;

    font-size: 13px;

    color: #6b7280;

}



/* Info Boxes */

.sensfrx-info-box {

    display: flex;

    gap: 12px;

    padding: 16px;

    background: #f8faff;

    border-left: 4px solid #0254ff;

    border-radius: 8px;

    margin-top: 16px;

}



.sensfrx-info-box strong {

    display: block;

    margin-bottom: 4px;

    color: #03060b;

}



.sensfrx-info-box p {

    margin: 0;

    font-size: 13px;

    color: #4f5258;

}



.sensfrx-success-box {

    display: flex;

    gap: 12px;

    padding: 16px;

    background: #d1fae5;

    border-left: 4px solid #4caf50;

    border-radius: 8px;

    margin-top: 16px;

    animation: slideIn 0.3s ease;

}



.sensfrx-success-box strong {

    display: block;

    margin-bottom: 4px;

    color: #065f46;

}



.sensfrx-success-box p {

    margin: 0;

    font-size: 13px;

    color: #065f46;

}



.sensfrx-warning-box {

    display: flex;

    gap: 12px;

    padding: 16px;

    background: #fef3c7;

    border-left: 4px solid #f59e0b;

    border-radius: 8px;

    margin-top: 16px;

    animation: slideIn 0.3s ease;

}



.sensfrx-warning-box strong {

    display: block;

    margin-bottom: 4px;

    color: #92400e;

}



.sensfrx-warning-box p {

    margin: 0;

    font-size: 13px;

    color: #92400e;

}



@keyframes slideIn {

    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes slideOut {

    from { opacity: 1; transform: translateY(0); }

    to { opacity: 0; transform: translateY(-10px); }

}



.sensfrx-dismissible {

    position: relative;

}



.sensfrx-dismiss-btn {

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 4px;

    color: inherit;

    opacity: 0.6;

    transition: opacity 0.2s ease;

    flex-shrink: 0;

}



.sensfrx-dismiss-btn:hover {

    opacity: 1;

}



.sensfrx-dismiss-btn:focus {

    outline: 2px solid currentColor;

    outline-offset: 2px;

    border-radius: 4px;

}



.sensfrx-link {

    color: #0254ff;

    text-decoration: underline;

    font-weight: 500;

}



/* Toggle Items */

.sensfrx-toggle-group {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;

}



.sensfrx-toggle-item {

    display: block;

    padding: 16px;

    background: #f9fafb;

    border: 2px solid #e5e7eb;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.sensfrx-toggle-item:hover {

    background: #f3f4f6;

    border-color: #d1d5db;

}



.sensfrx-toggle-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.sensfrx-toggle-label {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    flex: 1;

}



.sensfrx-toggle-label strong {

    display: block;

    font-size: 14px;

    color: #1a1a1a;

    margin-bottom: 2px;

}



.sensfrx-toggle-label p {

    margin: 0;

    font-size: 13px;

    color: #6b7280;

}



/* Override WordPress default checkbox styles for toggle */

input[type="checkbox"].sensfrx-toggle {

    width: 48px !important;

    height: 28px !important;

    min-width: 48px !important;

    min-height: 28px !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    appearance: none !important;

    background: #d1d5db !important;

    border-radius: 14px !important;

    position: relative !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

    flex-shrink: 0 !important;

    border: none !important;

    outline: none !important;

    margin: 0 !important;

    padding: 0 !important;

    vertical-align: middle !important;

    box-shadow: none !important;

    display: inline-block !important;

}



input[type="checkbox"].sensfrx-toggle:focus {

    outline: 2px solid #0254ff !important;

    outline-offset: 2px !important;

    box-shadow: none !important;

}



input[type="checkbox"].sensfrx-toggle:checked {

    background: #0254ff !important;

    border: none !important;

}



input[type="checkbox"].sensfrx-toggle::before {

    content: '' !important;

    position: absolute !important;

    width: 22px !important;

    height: 22px !important;

    border-radius: 50% !important;

    background: white !important;

    top: 3px !important;

    left: 3px !important;

    transition: all 0.3s ease !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;

    display: block !important;

    margin: 0 !important;

    float: none !important;

    transform: translateX(0) !important;

}



input[type="checkbox"].sensfrx-toggle:checked::before {

    transform: translateX(20px) !important;

    left: 3px !important;

    margin: 0 !important;

    top: 3px !important;

}



/* Remove any WordPress checkmark */

input[type="checkbox"].sensfrx-toggle::after {

    content: none !important;

    display: none !important;

}



/* Threshold Visual */

.sensfrx-threshold-visual {

    margin-bottom: 24px;

}



.sensfrx-threshold-bar {

    display: flex;

    height: 40px;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.sensfrx-threshold-zone {

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: 600;

    font-size: 13px;

    transition: all 0.3s ease;

}



.sensfrx-zone-safe {

    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);

}



.sensfrx-zone-review {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

}



.sensfrx-zone-block {

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

}



/* Slider */

.sensfrx-slider-group {

    display: flex;

    align-items: center;

    gap: 12px;

}



.sensfrx-slider {

    flex: 1;

    height: 8px;

    -webkit-appearance: none;

    appearance: none;

    background: #e5e7eb;

    border-radius: 4px;

    outline: none;

}



.sensfrx-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: white;

    border: 2px solid #0254ff;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

}



.sensfrx-slider::-webkit-slider-thumb:hover {

    border-width: 3px;

    box-shadow: 0 3px 8px rgba(2, 84, 255, 0.3);

}



.sensfrx-slider::-moz-range-thumb {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: white;

    border: 2px solid #0254ff;

    cursor: pointer;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

}



.sensfrx-slider::-moz-range-thumb:hover {

    border-width: 3px;

    box-shadow: 0 3px 8px rgba(2, 84, 255, 0.3);

}



.sensfrx-slider-value {

    min-width: 48px;

    padding: 6px 12px;

    background: #f3f4f6;

    color: #374151;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-weight: 600;

    font-size: 15px;

    text-align: center;

}



.sensfrx-value-review {

    color: #0254ff;

    border-color: #0254ff;

    background: #f8faff;

}



.sensfrx-value-block {

    color: #0254ff;

    border-color: #0254ff;

    background: #f8faff;

}



/* Badge */

.sensfrx-badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 600;

}



.sensfrx-badge-warning {

    background: #fef3c7;

    color: #92400e;

}



.sensfrx-badge-danger {

    background: #fee2e2;

    color: #991b1b;

}



.sensfrx-badge-info {

    background: #e0f2fe;

    color: #075985;

}



/* Pro Card */

.sensfrx-pro-card {

    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);

    border: 2px solid #e5e7eb;

    position: relative;

}



.sensfrx-pro-badge {

    position: absolute;

    top: 16px;

    right: 16px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 14px;

    background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);

    color: white;

    border-radius: 16px;

    font-size: 12px;

    font-weight: 700;

    box-shadow: 0 4px 12px rgba(2, 84, 255, 0.3);

}



.sensfrx-pro-features {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: 20px;

}



.sensfrx-pro-feature {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 12px;

    background: white;

    border-radius: 8px;

}



.sensfrx-pro-feature strong {

    display: block;

    font-size: 14px;

    color: #1a1a1a;

    margin-bottom: 2px;

}



.sensfrx-pro-feature p {

    margin: 0;

    font-size: 13px;

    color: #6b7280;

}



.sensfrx-pro-cta {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 20px;

    padding: 14px 24px;

    background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    font-size: 15px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(2, 84, 255, 0.3);

}



.sensfrx-pro-cta:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(2, 84, 255, 0.4);

}



/* Help Card */

.sensfrx-help-card {

    background: white;

    border-radius: 12px;

    padding: 24px;

    text-align: center;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.sensfrx-help-icon {

    margin: 0 auto 16px;

    width: fit-content;

}



.sensfrx-help-card h4 {

    margin: 0 0 8px;

    font-size: 18px;

    font-weight: 600;

    color: #1a1a1a;

}



.sensfrx-help-card p {

    margin: 0 0 16px;

    font-size: 14px;

    color: #6b7280;

    line-height: 1.5;

}



.sensfrx-help-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #0254ff;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    transition: all 0.2s ease;

}



.sensfrx-help-link:hover {

    gap: 8px;

    color: #0043ce;

}



/* Form Actions */

.sensfrx-form-actions {

    display: flex;

    gap: 12px;

    margin-top: 32px;

    padding-top: 24px;

    border-top: 2px solid #e5e7eb;

}



.sensfrx-btn-primary {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 14px 28px;

    background: linear-gradient(135deg, #0254ff 0%, #0043ce 100%);

    color: white;

    border: none;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(2, 84, 255, 0.3);

}



.sensfrx-btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(2, 84, 255, 0.4);

}



.sensfrx-btn-secondary {

    padding: 14px 28px;

    background: white;

    color: #374151;

    border: 2px solid #e5e7eb;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

}



.sensfrx-btn-secondary:hover {

    background: #f9fafb;

    border-color: #d1d5db;

}



/* Responsive */

@media (max-width: 1024px) {

    .sensfrx-settings-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 640px) {

    .sensfrx-settings-card {

        padding: 20px;

    }



    .sensfrx-card-header {

        flex-direction: column;

        gap: 12px;

    }



    .sensfrx-toggle-content {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .sensfrx-form-actions {

        flex-direction: column;

    }



    .sensfrx-btn-primary,

    .sensfrx-btn-secondary {

        width: 100%;

        justify-content: center;

    }

}



/* Fraud Detection Card Styles */

.sensfrx-checkbox-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}



.sensfrx-checkbox-item {

    position: relative;

    cursor: pointer;

    display: block;

}



.sensfrx-checkbox-item input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    cursor: pointer;

}



.sensfrx-checkbox-content {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    background: white;

    border: 2px solid #e2e8f0;

    border-radius: 10px;

    transition: all 0.2s ease;

    color: #1f2937;

}



.sensfrx-checkbox-content svg {

    flex-shrink: 0;

    color: #94a3b8;

    transition: color 0.2s ease;

}



.sensfrx-checkbox-content div {

    flex: 1;

}



.sensfrx-checkbox-content strong {

    display: block;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 2px;

    color: #1f2937;

}



.sensfrx-checkbox-content p {

    font-size: 12px;

    color: #64748b;

    margin: 0;

    line-height: 1.4;

}



.sensfrx-checkbox-item input[type="checkbox"]:checked + .sensfrx-checkbox-content {

    background: #eff6ff;

    border-color: #0254ff;

    color: #0254ff;

}



.sensfrx-checkbox-item input[type="checkbox"]:checked + .sensfrx-checkbox-content svg {

    color: #0254ff;

}



.sensfrx-checkbox-item:hover .sensfrx-checkbox-content {

    border-color: #0254ff;

    transform: translateY(-1px);

    box-shadow: 0 2px 8px rgba(2, 84, 255, 0.1);

}



.sensfrx-advanced-link {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 20px;

    background: linear-gradient(135deg, #f8faff 0%, #eff6ff 100%);

    border: 2px solid #e2e8f0;

    border-radius: 10px;

    color: #0254ff;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    transition: all 0.2s ease;

    margin-top: 4px;

}



.sensfrx-advanced-link svg {

    flex-shrink: 0;

}



.sensfrx-advanced-link:hover {

    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

    border-color: #0254ff;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(2, 84, 255, 0.15);

}



.sensfrx-divider {

    height: 1px;

    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);

    margin: 20px 0;

}



@media (max-width: 768px) {

    .sensfrx-checkbox-grid {

        grid-template-columns: 1fr;

    }

}



/* Reset Account Link - Passive Styling */

#sensfrx-reset-account-link:hover {

    color: #475569;

}



#sensfrx-reset-account-link:hover svg {

    opacity: 0.7;

}

</style>

