<?php
/**
 * VMP Security - Help & Documentation
 *
 * @package VMPFence
 * @since 1.0.0
 * @since 2.1.0 Updated to reflect VMP WordPress Security branding.
 * @since 2.2.2 Updated to reflect VMP Security branding, Complete redesign with comprehensive documentation structure
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Get current license type
$license_type = VMPFence_Config::get('license_type', 'free');
$is_premium = ($license_type === 'premium');
?>

<!-- WordPress Admin Notices Container (must be in .wrap for WordPress notices to display correctly) -->
<div class="wrap">
    <?php settings_errors(); ?>
</div>

<div class="vmpfence-help-page">
    <h1 class="vmpfence-page-title">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        Help & Documentation
    </h1>

    <!-- Support Cards Section -->
    <div class="vmpfence-support-cards">
        <?php if ($is_premium): ?>
            <!-- Premium Support Card -->
            <div class="vmpfence-support-card vmpfence-card-premium">
                <div class="card-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                        <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
                    </svg>
                </div>
                <h2>Premium Support</h2>
                <p>Get priority assistance from our security experts. Average response time: 2-4 hours.</p>
                <div class="support-features">
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>24/7 Priority Email Support</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Live Chat (Mon-Fri, 9AM-5PM EST)</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Security Incident Response</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Malware Removal Assistance</span>
                    </div>
                </div>
                <a href="https://vpnmasterpro.com/support/premium" class="vmpfence-btn vmpfence-btn-primary" target="_blank">
                    Contact Premium Support
                </a>
            </div>
        <?php else: ?>
            <!-- Free Support Card -->
            <div class="vmpfence-support-card vmpfence-card-free">
                <div class="card-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                </div>
                <h2>Free Support</h2>
                <p>Access our documentation and community forums. Response time: 24-48 hours.</p>
                <div class="support-features">
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Email Support (Business Days)</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Community Forums</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Knowledge Base Access</span>
                    </div>
                    <div class="feature-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        <span>Video Tutorials</span>
                    </div>
                </div>
                <a href="https://vpnmasterpro.com/support" class="vmpfence-btn vmpfence-btn-secondary" target="_blank">
                    Contact Support
                </a>
            </div>

            <!-- Upgrade Card -->
            <div class="vmpfence-support-card vmpfence-card-upgrade">
                <div class="card-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#F5A623" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                        <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
                    </svg>
                </div>
                <h2>Upgrade to Premium</h2>
                <p>Get advanced features, priority support, and enhanced protection for your website.</p>
                <div class="upgrade-benefits">
                    <strong>Premium Benefits:</strong>
                    <ul>
                        <li>Real-time threat intelligence</li>
                        <li>Advanced malware scanning</li>
                        <li>Country blocking</li>
                        <li>Two-factor authentication</li>
                        <li>Priority support & malware removal</li>
                    </ul>
                </div>
                <a href="https://vpnmasterpro.com/pricing" class="vmpfence-btn vmpfence-btn-gold" target="_blank">
                    Upgrade Now
                </a>
            </div>
        <?php endif; ?>
    </div>

    <!-- Main Content Area -->
    <div class="vmpfence-help-content">
        <!-- Left Column: Documentation Categories -->
        <div class="vmpfence-help-main">
            
            <!-- Getting Started Section -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    <h2>Getting Started</h2>
                </div>
                <p class="section-description">Learn the basics of VMP Security and get your site protected quickly.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Quick Start Guide</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Initial Setup and Configuration</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Understanding Your Dashboard</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Running Your First Security Scan</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Firewall Documentation -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    <h2>Web Application Firewall (WAF)</h2>
                </div>
                <p class="section-description">Protect your site from attacks with our advanced firewall system.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">How the Firewall Works</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Managing Firewall Rules</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Blocking and Allowlisting IPs</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Country Blocking</span>
                        <span class="doc-status status-premium">Premium</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Rate Limiting & Brute Force Protection</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Understanding Firewall Logs</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Malware Scanner Documentation -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M12 16v-4M12 8h.01"></path>
                    </svg>
                    <h2>Malware Scanner</h2>
                </div>
                <p class="section-description">Detect and remove malicious code from your WordPress installation.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">How Malware Scanning Works</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Scheduling Automatic Scans</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Understanding Scan Results</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Repairing Infected Files</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Exclusions and Whitelisting</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Login Security Documentation -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                        <polyline points="10 17 15 12 10 7"></polyline>
                        <line x1="15" y1="12" x2="3" y2="12"></line>
                    </svg>
                    <h2>Login Security & 2FA</h2>
                </div>
                <p class="section-description">Secure your WordPress login with advanced authentication features.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Setting Up Two-Factor Authentication</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">CAPTCHA Integration</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Password Strength Requirements</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Login Attempt Monitoring</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Tools Documentation -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
                    </svg>
                    <h2>Security Tools</h2>
                </div>
                <p class="section-description">Additional tools to enhance your website security.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Live Traffic Monitoring</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Audit Log & Activity Tracking</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">IP Management Tools</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Diagnostic Tools</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Advanced Features -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                        <polyline points="2 17 12 22 22 17"></polyline>
                        <polyline points="2 12 12 17 22 12"></polyline>
                    </svg>
                    <h2>Advanced Features</h2>
                </div>
                <p class="section-description">Unlock advanced security capabilities for maximum protection.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Custom Firewall Rules</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">API Integration Guide</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Security Headers Configuration</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Performance Optimization</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Troubleshooting -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
                    </svg>
                    <h2>Troubleshooting & FAQ</h2>
                </div>
                <p class="section-description">Find solutions to common issues and frequently asked questions.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Common Installation Issues</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Firewall False Positives</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Performance Issues</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Locked Out of Admin?</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Plugin Conflicts</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- Best Practices -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="9 11 12 14 22 4"></polyline>
                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                    </svg>
                    <h2>Security Best Practices</h2>
                </div>
                <p class="section-description">Learn industry best practices for WordPress security.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">WordPress Hardening Guide</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Backup Best Practices</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">User Role Management</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">SSL/HTTPS Configuration</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

            <!-- GDPR & Privacy -->
            <div class="vmpfence-doc-section">
                <div class="section-header">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                    <h2>GDPR & Privacy</h2>
                </div>
                <p class="section-description">Understand how VMP Security handles data and privacy.</p>
                <ul class="doc-list">
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">GDPR Compliance Information</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Data Collection & Storage</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                    <li><a href="#" class="doc-link">
                        <span class="doc-title">Privacy Policy</span>
                        <span class="doc-status status-coming-soon">Coming Soon</span>
                    </a></li>
                </ul>
            </div>

        </div>

        <!-- Right Column: Quick Links & Resources -->
        <div class="vmpfence-help-sidebar">
            
            <!-- Top Topics -->
            <div class="vmpfence-sidebar-section">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                    Top Topics
                </h3>
                <ul class="sidebar-list">
                    <li><a href="#">Getting Started Guide</a></li>
                    <li><a href="#">How to Block an IP Address</a></li>
                    <li><a href="#">Understanding Scan Results</a></li>
                    <li><a href="#">Setting Up 2FA</a></li>
                    <li><a href="#">Fixing False Positives</a></li>
                    <li><a href="#">Improving Site Performance</a></li>
                </ul>
            </div>

            <!-- Video Tutorials -->
            <div class="vmpfence-sidebar-section">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
                    </svg>
                    Video Tutorials
                </h3>
                <p class="sidebar-description">Watch step-by-step video guides</p>
                <a href="https://vpnmasterpro.com/tutorials" target="_blank" class="sidebar-link">
                    View All Tutorials →
                </a>
            </div>

            <!-- Community Forum -->
            <div class="vmpfence-sidebar-section">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    Community Forum
                </h3>
                <p class="sidebar-description">Connect with other users and get help</p>
                <a href="https://vpnmasterpro.com/forum" target="_blank" class="sidebar-link">
                    Visit Forum →
                </a>
            </div>

            <!-- Contact Support -->
            <div class="vmpfence-sidebar-section vmpfence-sidebar-highlight">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                    Need Help?
                </h3>
                <p class="sidebar-description">Can't find what you're looking for?</p>
                <a href="https://vpnmasterpro.com/support/contact" target="_blank" class="vmpfence-btn vmpfence-btn-secondary vmpfence-btn-small">
                    Contact Support
                </a>
            </div>

            <!-- System Information -->
            <div class="vmpfence-sidebar-section">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="16" x2="12" y2="12"></line>
                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg>
                    System Information
                </h3>
                <div class="system-info">
                    <div class="info-row">
                        <span class="info-label">Plugin Version:</span>
                        <span class="info-value"><?php echo esc_html(VMPFENCE_VERSION); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">License:</span>
                        <span class="info-value"><?php echo esc_html(ucfirst($license_type)); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">WordPress:</span>
                        <span class="info-value"><?php echo esc_html(get_bloginfo('version')); ?></span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">PHP:</span>
                        <span class="info-value"><?php echo esc_html(PHP_VERSION); ?></span>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<style>
/* VMP Security - Help Page Styles */
/* Following Design System Guidelines */

.vmpfence-help-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #191970; /* Midnight Blue */
    max-width: 1400px;
    margin: 0 auto;
}

.vmpfence-page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #191970;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.vmpfence-page-title svg {
    color: #007AFF; /* Bright Blue */
}

/* Support Cards Section */
.vmpfence-support-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.vmpfence-support-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(25, 25, 112, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.vmpfence-support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(25, 25, 112, 0.12);
}

.vmpfence-support-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.vmpfence-card-premium .card-icon {
    background: linear-gradient(135deg, #2A2669 0%, #20409A 100%);
    color: #FFFFFF;
}

.vmpfence-card-free .card-icon {
    background: #007AFF;
    color: #FFFFFF;
}

.vmpfence-card-upgrade .card-icon {
    background: #F5A623;
    color: #FFFFFF;
}

.vmpfence-support-card h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #191970;
    margin: 0 0 8px 0;
}

.vmpfence-support-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(25, 25, 112, 0.7);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.support-features,
.upgrade-benefits {
    margin-bottom: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #191970;
}

.upgrade-benefits strong {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #191970;
}

.upgrade-benefits ul {
    margin: 0;
    padding-left: 20px;
}

.upgrade-benefits li {
    margin-bottom: 6px;
    font-size: 14px;
    color: rgba(25, 25, 112, 0.8);
}

/* Buttons */
.vmpfence-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.vmpfence-btn-primary {
    background: #191970;
    color: #FFFFFF;
}

.vmpfence-btn-primary:hover {
    background: #20409A;
    color: #FFFFFF;
}

.vmpfence-btn-secondary {
    background: #007AFF;
    color: #FFFFFF;
}

.vmpfence-btn-secondary:hover {
    background: #0066CC;
    color: #FFFFFF;
}

.vmpfence-btn-gold {
    background: #F5A623;
    color: #FFFFFF;
}

.vmpfence-btn-gold:hover {
    background: #E09612;
    color: #FFFFFF;
}

.vmpfence-btn-small {
    padding: 8px 16px;
    font-size: 13px;
    width: 100%;
}

/* Main Content Area */
.vmpfence-help-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
}

@media (max-width: 1024px) {
    .vmpfence-help-content {
        grid-template-columns: 1fr;
    }
}

/* Documentation Sections */
.vmpfence-doc-section {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(25, 25, 112, 0.08);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-header svg {
    color: #007AFF;
    flex-shrink: 0;
}

.section-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #191970;
    margin: 0;
}

.section-description {
    font-size: 14px;
    color: rgba(25, 25, 112, 0.7);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-list li {
    margin-bottom: 8px;
}

.doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #191970;
    transition: background 0.2s;
}

.doc-link:hover {
    background: rgba(0, 122, 255, 0.05);
}

.doc-title {
    font-weight: 500;
    font-size: 14px;
}

.doc-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.status-coming-soon {
    background: rgba(245, 166, 35, 0.1);
    color: #F5A623;
}

.status-premium {
    background: linear-gradient(135deg, #2A2669 0%, #20409A 100%);
    color: #FFFFFF;
}

/* Sidebar */
.vmpfence-help-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vmpfence-sidebar-section {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(25, 25, 112, 0.08);
}

.vmpfence-sidebar-highlight {
    background: linear-gradient(135deg, #2A2669 0%, #20409A 100%);
    color: #FFFFFF;
}

.vmpfence-sidebar-highlight h3,
.vmpfence-sidebar-highlight .sidebar-description {
    color: #FFFFFF;
}

.vmpfence-sidebar-section h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #191970;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vmpfence-sidebar-section h3 svg {
    color: #007AFF;
}

.vmpfence-sidebar-highlight h3 svg {
    color: #FFFFFF;
}

.sidebar-description {
    font-size: 13px;
    color: rgba(25, 25, 112, 0.7);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-list li {
    margin-bottom: 8px;
}

.sidebar-list a {
    font-size: 14px;
    color: #191970;
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar-list a:hover {
    color: #007AFF;
}

.sidebar-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #007AFF;
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar-link:hover {
    color: #0066CC;
}

/* System Information */
.system-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.info-label {
    color: rgba(25, 25, 112, 0.7);
    font-weight: 500;
}

.info-value {
    color: #191970;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vmpfence-support-cards {
        grid-template-columns: 1fr;
    }
    
    .vmpfence-help-content {
        grid-template-columns: 1fr;
    }
    
    .vmpfence-page-title {
        font-size: 24px;
    }
}
</style>
