<?php
/**
 * Plugin Name:       Yoppli Video Player Design
 * Plugin URI:        https://yoppli.com/yoppli-video-player-design-pro/
 * Description:       Reproductor de video avanzado con temas premium y Ad Server.
 * Version:           200.0.3
 * Author:            Yoppli
 * Author URI:        https://yoppli.com/
 * License:           GPLv2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Requires PHP:      7.4
 * Requires at least: 6.0
 * Tested up to:      6.9
 * WC requires at least: 8.0
 * WC tested up to:    10.5.2
 * Text Domain:       yoppli-video-player
 * Domain Path:       /languages
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
add_action( 'before_woocommerce_init', function() {
    if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
        \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__, true );
    }
} );
define( 'YVPD_VERSION', '200.0.3' );
define( 'YVPD_PATH', plugin_dir_path( __FILE__ ) );
define( 'YVPD_URL', plugin_dir_url( __FILE__ ) );
function yvpd_is_context_allowed() {
    global $post;
    if ( ! $post ) return false; 
    if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'yvpd_player' ) ) {
        return true;
    }    
    return false;
}
function yvpd_enqueue_assets() {
    if ( ! yvpd_is_context_allowed() ) return;   
    wp_dequeue_style('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
    wp_dequeue_script('wp-mediaelement');
    wp_deregister_script('wp-mediaelement');
    wp_enqueue_style( 'dashicons' );
    wp_enqueue_style( 
        'videojs-css', 
        plugin_dir_url( __FILE__ ) . 'assets/css/video-js.min.css', 
        array(), 
        '8.10.0' 
    );
    wp_enqueue_script( 
        'videojs-js', 
        plugin_dir_url( __FILE__ ) . 'assets/js/video.min.js', 
        array(), 
        '8.10.0', 
        true 
    );
    wp_enqueue_style( 'yvpd-style', YVPD_URL . 'assets/css/yvpd-public.css', array('videojs-css', 'dashicons'), '13.0' );
    $js_deps = array('jquery', 'videojs-js');
    wp_enqueue_script( 'yvpd-script', YVPD_URL . 'assets/js/yvpd-public.js', $js_deps, time(), true );
    global $post;
    $pid = ($post) ? $post->ID : 0;
    wp_localize_script( 'yvpd-script', 'yvpd_vars', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'api_bridge_url' => '',
        'yvpd_url'  => YVPD_URL,
        'auto_skin' => '0', 
        'post_id' => $pid,
        'i18n' => array(
            'ad'           => __( 'Ad', 'yoppli-video-player' ),
            'wait'         => __( 'Wait', 'yoppli-video-player' ),
            'skip'         => __( 'Skip', 'yoppli-video-player' ),
            'visit'        => __( 'Visit', 'yoppli-video-player' ),
            'close'        => __( 'Close', 'yoppli-video-player' ),
            'tap_unmute'   => __( 'Tap to unmute', 'yoppli-video-player' ),
            'no_options'   => __( 'No options available.', 'yoppli-video-player' ),
            'vjs_colors'   => array()
        )
    ));
} 
add_action( 'wp_enqueue_scripts', 'yvpd_enqueue_assets', 9999 );
require_once YVPD_PATH . 'includes/class-yvpd-shortcode.php';
add_action('all_admin_notices', 'yvpd_inyectar_menu_universal', 1);
function yvpd_inyectar_menu_universal() {
    global $current_screen, $plugin_page;
    if ( isset($current_screen) && $current_screen->base === 'post' ) return; 
    $is_yvpd = false;
    if ( $plugin_page === 'yoppli-video-player' || strpos($plugin_page, 'yvpd-') === 0 ) $is_yvpd = true;
    if ( $is_yvpd ) yvpd_render_master_nav();
}
function yvpd_render_master_nav() {
    global $plugin_page;
    $tab = 'settings'; 
    if ($plugin_page === 'yoppli-video-player') $tab = 'settings';
    elseif ($plugin_page === 'yvpd-instructions') $tab = 'docs';
    $primary_color = '#00adef';
    ?>
    <div class="yvpd-main-nav-container">
        <div class="yvpd-nav-header">
            <h1 class="yvpd-nav-title"><span class="dashicons dashicons-video-alt3"></span> <?php esc_html_e( 'Video Player Design (Free)', 'yoppli-video-player' ); ?></h1>
            <a href="https://yoppli.com/yoppli-video-player-design-pro/" target="_blank" style="background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; text-decoration: none; padding: 8px 20px; border-radius: 30px; font-weight: bold; font-size: 12px; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); border: 1px solid #f87171;">🚀 <?php esc_html_e( 'Upgrade to PRO', 'yoppli-video-player' ); ?></a>
        </div>
        <div class="yvpd-nav-tabs-grid">
            <a href="admin.php?page=yoppli-video-player" class="yvpd-nav-item <?php echo ($tab=='settings') ? 'is-active' : ''; ?>"><span>⚙️ <?php esc_html_e( 'General Settings', 'yoppli-video-player' ); ?></span></a>
            <a href="admin.php?page=yvpd-instructions" class="yvpd-nav-item <?php echo ($tab=='docs') ? 'is-active' : ''; ?>"><span>📖 <?php esc_html_e( 'Instructions & Masterclass', 'yoppli-video-player' ); ?></span></a>
        </div>
    </div>
    <?php
}
function yvpd_add_menu() {
    add_menu_page( 
        __( 'Video Player Design', 'yoppli-video-player' ),
        __( 'Video Player', 'yoppli-video-player' ),        
        'manage_options', 
        'yoppli-video-player', 
        'yvpd_render_settings_page', 
        'dashicons-video-alt3', 
        99 
    );
    add_submenu_page( 
        'yoppli-video-player', 
        __( 'General Settings', 'yoppli-video-player' ),    
        __( 'General Settings', 'yoppli-video-player' ),    
        'manage_options', 
        'yoppli-video-player', 
        'yvpd_render_settings_page' 
    );
    add_submenu_page( 
        'yoppli-video-player', 
        __( 'Usage Instructions', 'yoppli-video-player' ),  
        __( 'Instructions', 'yoppli-video-player' ),        
        'manage_options', 
        'yvpd-instructions', 
        'yvpd_render_instructions_page' 
    );
}
add_action( 'admin_menu', 'yvpd_add_menu' );
function yvpd_render_settings_page() {
    if ( isset($_POST['yvpd_save_settings']) && check_admin_referer('yvpd_save_nonce') ) {
        update_option('yvpd_auto_enable', 0); 
        update_option('yvpd_auto_posts', 0);
        update_option('yvpd_auto_pages', 0);
        update_option('yvpd_pro_primary_color', '#00adef');
        update_option('yvpd_pro_secondary_color', '#ff0055');
        update_option('yvpd_pro_global_width', 500); 
        update_option('yvpd_pro_width_unit', 'px');
        update_option('yvpd_pro_width_mode', 'global'); 
        update_option('yvpd_pro_player_theme', 'mobile');
        update_option('yvpd_tool_big_play', 1);
        update_option('yvpd_tool_play', 1);
        update_option('yvpd_tool_progress', 1);
        echo '<div id="yvpd-success-msg" style="position:fixed; top:40px; right:40px; background:#10b981; color:#fff; padding:15px 25px; border-radius:8px; box-shadow:0 10px 25px rgba(16,185,129,0.4); z-index:99999; font-weight:bold; animation: slideInRight 0.5s forwards;">✨ ¡Ajustes guardados con éxito!</div>';
        wp_add_inline_script( 'common', 'setTimeout(function(){ var msg = document.getElementById("yvpd-success-msg"); if(msg) msg.style.display="none"; }, 3500);' );
    }
    ?>
    <div class="yvpd-wrap-2026">
        <form method="post" action="" id="yvpd-settings-form">
            <?php wp_nonce_field('yvpd_save_nonce'); ?>
            <div class="yvpd-settings-grid">
                
                <div class="yvpd-card delay-1">
                    <div class="yvpd-card-header">
                        <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #10b981, #059669);">⚡</div>
                        <h2 class="yvpd-card-title"><?php esc_html_e( 'MP4 Auto-Replacement', 'yoppli-video-player' ); ?></h2>
                    </div>
                    
                    <div class="yvpd-group" style="pointer-events: none; opacity: 0.7;">
                        <span class="yvpd-group-title"><?php esc_html_e( '1. Enable Basic Replacement (Local Files & JS)', 'yoppli-video-player' ); ?></span>
                        <div class="yvpd-row-switch" style="background:rgba(255,255,255,0.02);">
                            <div class="yvpd-switch-text">
                                <span class="yvpd-switch-desc"><?php esc_html_e( 'Detects plain text links (.mp4) and WordPress media library videos.', 'yoppli-video-player' ); ?></span>
                            </div>
                            <span class="yvpd-badge-active-dark" style="background: rgba(16,185,129,0.1); color: #34d399; padding: 4px 8px; border-radius: 6px; font-weight: bold; font-size: 11px; border: 1px solid rgba(16,185,129,0.3);">✅ PRO Only</span>
                        </div>
                    </div>

                    <div style="display: flex; gap: 15px; margin-top: 15px; pointer-events: none; opacity: 0.7;">
                        <div class="yvpd-row-switch" style="flex: 1; padding: 8px 12px;">
                            <span class="yvpd-switch-title" style="font-size:12px;"><?php esc_html_e( 'Apply to Posts', 'yoppli-video-player' ); ?></span>
                            <span class="yvpd-badge-active-dark" style="padding: 2px 6px; font-size: 10px;">PRO</span>
                        </div>
                        <div class="yvpd-row-switch" style="flex: 1; padding: 8px 12px;">
                            <span class="yvpd-switch-title" style="font-size:12px;"><?php esc_html_e( 'Apply to Pages', 'yoppli-video-player' ); ?></span>
                            <span class="yvpd-badge-active-dark" style="padding: 2px 6px; font-size: 10px;">PRO</span>
                        </div>
                    </div>

                    <div class="yvpd-info-box" style="border-left-color:#f43f5e; margin-top:20px;">
                        <strong style="color:#f8fafc; font-size:14px; display:block; margin-bottom:5px;">📌 <?php esc_html_e( 'Free Version Usage:', 'yoppli-video-player' ); ?></strong>
                        <?php esc_html_e( 'To use the player, copy your video URL and paste this shortcode in your editor:', 'yoppli-video-player' ); ?> 
                        <code style="color:#f43f5e; background:#020617; font-size:13px; margin-top:10px; border:1px solid #1e293b; display:block; padding:8px; border-radius:4px;">[yvpd_player url="/wp-content/uploads/video.mp4"]</code>
                    </div>
                </div>

                <div class="yvpd-card delay-2">
                    <div class="yvpd-card-header">
                        <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f43f5e, #e11d48);">🎨</div>
                        <h2 class="yvpd-card-title"><?php esc_html_e( 'Design and Themes', 'yoppli-video-player' ); ?></h2>
                    </div>
                    <div class="yvpd-group">
                        <span class="yvpd-group-title"><?php esc_html_e( 'Style Selector (Visual Skin):', 'yoppli-video-player' ); ?></span>
                        <div class="yvpd-input" style="background:rgba(255,255,255,0.02); color:#cbd5e1; border-color:#334155; font-weight:500; cursor:default; padding: 12px 15px;">
                            <?php esc_html_e( '1. Rounded Borders (Free / Default)', 'yoppli-video-player' ); ?>
                            <span style="float:right;" class="yvpd-badge-active-dark">✅ Active</span>
                        </div>
                    </div>
                    <hr>
                    <h3 style="font-size:15px; color:#f8fafc; margin:0 0 15px 0;">📏 <?php esc_html_e( 'Configuration Mode', 'yoppli-video-player' ); ?></h3>
                    <div style="background:rgba(14,165,233,0.05); padding:15px; border-radius:8px; display:flex; gap:20px; align-items:center; border: 1px solid rgba(14,165,233,0.2);">
                        <div style="display:flex; align-items:center; gap:8px;">
                            <div style="width:18px; height:18px; border-radius:50%; background:#00adef; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 4px rgba(0,173,239,0.3);">
                                <div style="width:8px; height:8px; border-radius:50%; background:#fff;"></div>
                            </div>
                            <strong style="color:#f8fafc;"><?php esc_html_e( 'Individual Mode (Active)', 'yoppli-video-player' ); ?></strong>
                        </div>
                    </div>
                    <div style="margin-top:20px; pointer-events: none; opacity: 0.5;">
                        <span class="yvpd-group-title"><?php esc_html_e( 'Global Settings', 'yoppli-video-player' ); ?></span>
                        <div style="display:flex; gap:10px; align-items:center; margin-bottom:15px;">
                            <span style="font-weight:600; font-size:13px; color:#94a3b8;"><?php esc_html_e( 'Size:', 'yoppli-video-player' ); ?></span>
                            <span style="font-weight:bold; font-size:15px; color:#cbd5e1;">500 px</span>
                        </div>
                    </div>
                </div>
                <div class="yvpd-card delay-3">
                    <div class="yvpd-card-header">
                        <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🛠️</div>
                        <h2 class="yvpd-card-title"><?php esc_html_e( 'Tools', 'yoppli-video-player' ); ?></h2>
                    </div>
                    <div class="yvpd-tools-grid">
                        <div class="yvpd-tool-item" style="cursor:default;">
                            <span><?php esc_html_e( 'Giant Play Button', 'yoppli-video-player' ); ?></span>
                            <div class="yvpd-badge-active-dark">✅ Included</div>
                        </div>
                        <div class="yvpd-tool-item" style="cursor:default;">
                            <span><?php esc_html_e( 'Play Button', 'yoppli-video-player' ); ?></span>
                            <div class="yvpd-badge-active-dark">✅ Included</div>
                        </div>
                        <div class="yvpd-tool-item" style="cursor:default;">
                            <span><?php esc_html_e( 'Progress Bar', 'yoppli-video-player' ); ?></span>
                            <div class="yvpd-badge-active-dark">✅ Included</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="yvpd-floating-bar">
                <p><?php esc_html_e( 'Ready to save changes?', 'yoppli-video-player' ); ?></p>
                <button type="submit" name="yvpd_save_settings" class="yvpd-save-btn">🚀 <?php esc_html_e( 'Save Settings', 'yoppli-video-player' ); ?></button>
            </div>
        </form>
    </div>
    <?php
}
add_filter('get_user_option_screen_layout_yvpd_ad', function() { return 1; });
add_action('admin_enqueue_scripts', 'yvpd_ad_custom_styles');
function yvpd_ad_custom_styles( $hook ) {
    global $current_screen;
    if ( isset($current_screen) && $current_screen->post_type === 'yvpd_ad' ) {
        $custom_css = "
            .page-title-action { display: none !important; }
            #poststuff #post-body.columns-2 { margin-right: 0 !important; }
            #postbox-container-1.postbox-container { width: 100% !important; margin-bottom: 20px; }
            #postbox-container-2.postbox-container { width: 100% !important; }
            body.post-type-yvpd_ad #submitdiv h2.hndle { display: none; }
            body.post-type-yvpd_ad #submitdiv .inside { margin: 0; padding: 0; }
            body.post-type-yvpd_ad #submitdiv { border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; border: 1px solid #00adef; overflow: hidden; background: #fff; }
            body.post-type-yvpd_ad #submitpost { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; width: 100%; box-sizing: border-box;}
            body.post-type-yvpd_ad #minor-publishing { display: flex; align-items: center; border: none; background: transparent; padding: 0; margin-right: auto;}
            body.post-type-yvpd_ad #misc-publishing-actions { display: flex; align-items: center; gap: 20px; padding: 0; }
            body.post-type-yvpd_ad .misc-pub-section { border: none; padding: 0; display:flex; align-items:center; }
            body.post-type-yvpd_ad #major-publishing-actions { border: none; background: transparent; padding: 0; display:flex; align-items:center; }
            body.post-type-yvpd_ad #minor-publishing-actions { display: none; }
            body.post-type-yvpd_ad #delete-action a { color: #d63638; font-weight: bold; text-decoration: none; }
            body.post-type-yvpd_ad #delete-action a:hover { text-decoration: underline; }
            body.post-type-yvpd_ad #publish { font-size: 16px; padding: 5px 30px; }
            .yvpd-stat-card { border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border: 1px solid #333 !important; background: #222 !important; color:#fff; }
            .yvpd-table-wrap { background: #222; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); padding: 20px; overflow: hidden; border: 1px solid #333; color: #fff;}
            .yvpd-export-btn { background: #333; border: 1px solid #555; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 11px; margin-left: 5px; transition: 0.2s;}
            .yvpd-export-btn:hover { background: #00adef; color:#fff; border-color: #00adef; }
        ";
        wp_register_style( 'yvpd-admin-dummy-css', false, array(), YVPD_VERSION );
        wp_enqueue_style( 'yvpd-admin-dummy-css' );
        wp_add_inline_style( 'yvpd-admin-dummy-css', $custom_css );
    }
}
function yvpd_render_instructions_page() {
    ?>
    <div class="yvpd-docs-wrap">
        <div class="yvpd-hero">
            <div>
                <h2 class="yvpd-hero-title">
                    <span class="dashicons dashicons-book-alt" style="font-size:36px; width:36px; height:36px;"></span>
                    <span><?php esc_html_e( 'Documentation & PRO Masterclass', 'yoppli-video-player' ); ?></span>
                </h2>
                <p class="yvpd-hero-subtitle"><?php esc_html_e( 'Welcome to the most advanced video engine for WordPress. Discover how to combine tools to create foolproof marketing strategies, monetize with ads, and protect your content like an expert.', 'yoppli-video-player' ); ?></p>
            </div>
            <div class="yvpd-hero-controls">
                <a href="https://yoppli.com/yoppli-video-player-design-pro/" target="_blank" class="yvpd-upgrade-btn">
                    <span>🚀 <?php esc_html_e( 'Get PRO Version', 'yoppli-video-player' ); ?></span>
                </a>
            </div>
        </div>
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '1. Basic Setup (Free Version)', 'yoppli-video-player' ); ?>
        </h2>
        <div class="yvpd-free-banner">
            <div style="flex:1; min-width:300px;">
                <h3 style="margin:0 0 10px 0; color:#0f172a; font-size:18px;">
                    <?php esc_html_e( '🔹 What\'s included in the free version?', 'yoppli-video-player' ); ?>
                </h3>
                <p style="margin:0 0 15px 0; font-size:14px; color:#475569;">
                    <?php esc_html_e( 'The free version automatically transforms boring native WP videos into an elegant, dark, and fluid player ideal for simple blogs.', 'yoppli-video-player' ); ?>
                </p>
                <ul class="yvpd-feature-list">
                    <li><span class="dashicons dashicons-yes" style="color:#10b981;"></span> <?php echo wp_kses_post( __( '<strong>Unified Skin:</strong> Modern style for your site.', 'yoppli-video-player' ) ); ?></li>
                    <li><span class="dashicons dashicons-yes" style="color:#10b981;"></span> <?php echo wp_kses_post( __( '<strong>Basic Controls:</strong> Center and bottom Play/Pause.', 'yoppli-video-player' ) ); ?></li>
                    <li><span class="dashicons dashicons-yes" style="color:#10b981;"></span> <?php echo wp_kses_post( __( '<strong>Progress Bar:</strong> Fluid video navigation.', 'yoppli-video-player' ) ); ?></li>
                </ul>
            </div>
            <div style="flex:1; min-width:300px; background:#fff; padding:20px; border-radius:8px; border:1px solid #e2e8f0;">
                <h4 style="margin:0 0 10px 0; color:#1e293b;"><?php esc_html_e( '📌 How to use (Classic Embed)', 'yoppli-video-player' ); ?></h4>
                <p style="font-size:13px; margin:0 0 10px 0; color:#475569;"><?php esc_html_e( 'Upload your video to "Media" and paste this shortcode:', 'yoppli-video-player' ); ?></p>
                <code class="yvpd-code">[yvpd_player url="/wp-content/uploads/video.mp4"]</code>
                <div style="background:#fffbeb; border-left:4px solid #f59e0b; padding:10px; margin-top:15px; font-size:12px; border-radius:4px; color:#b45309;">
                    <strong><?php esc_html_e( '⚠️ Current Limitations:', 'yoppli-video-player' ); ?></strong><br>
                    <?php echo wp_kses_post( __( 'In the free version videos are <strong>NOT protected</strong> from downloads, NO ad monetization, NO Amazon S3 support, and NO marketing tools or share buttons.', 'yoppli-video-player' ) ); ?>
                </div>
            </div>
        </div>
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '💡 2. Strategies & Use Cases (PRO Masterclass)', 'yoppli-video-player' ); ?>
        </h2>
        <p style="margin-top:-10px; margin-bottom:25px; color:#64748b;">
            <?php esc_html_e( 'Don\'t just show a video. Discover which combination of tools to activate based on your business model to squeeze the most out of your website.', 'yoppli-video-player' ); ?>
        </p>
        <div class="yvpd-grid-3">
            <div class="yvpd-card-doc" style="border-top: 4px solid #8b5cf6;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9);">🎓</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Academies & Online Courses', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Prevent piracy and facilitate studying.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Secure Amazon S3', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Download: Blob (Hidden)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Speed (1.5x/2x)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Picture-in-Picture', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Host your courses on <strong>Amazon S3</strong> so you don\'t overload your server. Activate the <strong>Encrypted Download (Blob)</strong>; this will hide the S3 URL in the source code, blocking extensions like IDM that steal videos. Activate <strong>Speed</strong> (vital for students) and turn off the Share button.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #10b981;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #10b981, #059669);">📰</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Magazines & Viral Blogs', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Reading retention and passive monetization.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Autoplay: On Scroll', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Muted', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'FULL Social Media', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'AdServer: AdSense', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Activate <strong>Autoplay on Scroll</strong> and <strong>Muted</strong>. The video will only start silently when the reader scrolls down the article. This respects Google\'s policies. Activate all Social buttons (especially WhatsApp) and inject a <strong>VAST AdSense</strong> code to get paid for each impression.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #ec4899;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #ec4899, #be123c);">🛒</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'E-Commerce & Sales Funnels', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Capture immediate visual attention and force clicks.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Hover Preview', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Neon Gradient', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Ad: Pre-Roll (No Skip)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'CTA Button', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'The magic is in the <strong>Hover Preview</strong> (Netflix/YouTube style). When hovering, the video moves. Use the <strong>Neon</strong> theme to stand out. Create a <strong>Mandatory Pre-Roll</strong> ad (a 5s video of your product) that includes an Info Card with a "Buy Now" CTA pointing to your checkout.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #f59e0b;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🏠</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Real Estate Agencies', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Maximum visual immersion and direct contact.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Cast (TV)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Camera (Snapshot)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Minimalist Theme', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Loop', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'House buyers want to see them huge. Enable <strong>Cast (TV)</strong> to send the virtual tour to their Smart TV. Enable <strong>Camera</strong> so they can take snapshots of the kitchen. Use the <strong>Minimalist</strong> theme to remove intrusive buttons and set the video on <strong>Loop</strong>.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #e11d48;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #e11d48, #9f1239);">🍿</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Streaming / Adult Tube Sites', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Binge-watching without frustrating the user.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Theme: Dark / Cinema', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Quality (HD)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Ad Freq: Smart', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( '90% Banners', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Use immersive dark themes and enable the <strong>Quality</strong> button. Since they watch many videos in a row, use AdServer\'s <strong>Smart Frequency (Watchtime)</strong>: Inject 1 ad every "15 mins of accumulated playback" instead of scaring them on every click. Use <strong>Bottom Banners</strong> to avoid pausing the video.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #3b82f6;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">🎤</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Webinars & Sales Letters (VSL)', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Force full message listening without distractions.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'YouTube "White Label"', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Hide Progress Bar', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Hide Speed', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Autoplay', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Upload your webinar to YouTube as "Unlisted" so you don\'t pay for servers. Enable <strong>YouTube White Label</strong> in the plugin; your user will see a premium player without the red YT logo. Disable the <strong>Progress Bar and Speed</strong> so they cannot skip ahead in the sales letter.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #a855f7;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #a855f7, #7e22ce);">✨</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Creative Agencies & Portfolios', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Absolute aesthetic impact, without buttons cluttering the art.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Theme: MacOS Glass', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Autoplay + Loop + Muted', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Auto-Thumbnail', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Use the <strong>MacOS Glass</strong> theme (which hides the floating bar until you hover) or the <strong>Minimalist</strong> theme. Set <strong>Autoplay, Loop and Muted</strong> simultaneously so your design videos function as perpetual interactive backgrounds without annoying the user.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #f97316;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f97316, #c2410c);">⭐</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Reviews & Affiliate Marketing', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Show product details and drive clicks to Amazon/AliExpress.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Ad: Custom HTML Banner', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Rewind 10s', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Double Click Fullscreen', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Enable <strong>Rewind/Forward 10s</strong> and <strong>Double click Fullscreen</strong> so the user can pause and zoom in on the product you are reviewing. Create an <strong>AdSense/Code type Ad</strong> and paste your Amazon affiliate banner HTML there; it will appear floating on the video.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #06b6d4;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #06b6d4, #0369a1);">🎙️</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Video Podcasts & Interviews', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Background consumption and audio control.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Picture-in-Picture (PiP)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Speed', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Volume', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Social: LinkedIn / X', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Vital to activate <strong>Picture-in-Picture (PiP)</strong>. This allows the user to extract your interview into a floating window and continue browsing the web while listening to you. Enable <strong>Volume</strong> and <strong>Speed</strong> (people listen to podcasts at 1.5x) and enable LinkedIn/X to debate quotes.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <!-- NUEVO: Plataformas VOD premium -->
            <div class="yvpd-card-doc" style="border-top: 4px solid #f59e0b;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">👑</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Premium VOD Platforms (Netflix Style)', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Sell subscriptions and manage multiple family profiles.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Account Management', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'PIN Vault', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Frontend Login', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Avatars', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Enable the <strong>Floating Menu</strong> and <strong>Frontend Login</strong> so the user never leaves your site. Configure Account Management so VIP users can create up to 5 different profiles with <strong>Custom Avatars</strong>. Enable the <strong>Security Vault</strong> so parents can lock profiles with a 4-digit PIN.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>

            <!-- NUEVO: Sitios web privados (KYC) -->
            <div class="yvpd-card-doc" style="border-top: 4px solid #14b8a6;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #14b8a6, #0f766e);">🛡️</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Private Websites for Creators (KYC)', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Validate user identity and protect access to exclusive content.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'KYC Audit', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Dynamic Fields', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Verified Badges', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Block WP-Login', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Enable <strong>Block WP-Login</strong> so no one sees the WordPress admin panel. Use the <strong>Field Builder</strong> to require an ID document (PDF/JPG) upon registration. From the VIP Audit, you can approve legitimate users so they receive the <strong>Verified Account Badge</strong> next to their avatar.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>

            <!-- NUEVO: Radiodifusión -->
            <div class="yvpd-card-doc" style="border-top: 4px solid #ef4444;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #ef4444, #b91c1c);">📺</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Internet TV and Broadcasting', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Maximize revenue by simulating traditional commercial breaks and monitoring downtime.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Ad Pods', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Watchtime Frequency', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Reports Center', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Enable <strong>Ad Pods</strong> (ad blocks) to show 2 or 3 ads in a row in a single break. Combine it with <strong>Watchtime Frequency</strong> so breaks trigger exactly every 15 real minutes of consumption, preventing user fatigue from page reloads. Enable the <strong>Reports</strong> button to receive real-time alerts on your radar if the stream fails.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>

            <div class="yvpd-card-doc" style="border-top: 4px solid #64748b;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #64748b, #334155);">🏢</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Corporate Portals & Intranets', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Absolute data privacy and strict access control for employees.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Block WP-Login', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'reCAPTCHA: Login', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'VIP Audit', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Start Muted', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'For internal company videos. Enable <strong>Block WP-Login</strong> and <strong>reCAPTCHA</strong> to prevent unauthorized access or bot attacks. Use the <strong>VIP Audit</strong> to manually verify employees before they can watch the content. Start videos <strong>Muted</strong> to avoid office disruptions.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #0ea5e9;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #0ea5e9, #0369a1);">💎</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Tiered Membership Sites', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Offer exclusive perks and control menu visibility based on subscription levels.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Customize Dropdown Menu', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Roles Management', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Frontend Dashboard', 'yoppli-video-player' ); ?></span> 
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Use the <strong>Customize Dropdown Menu</strong> to inject specific WordPress menus based on the user\'s role (e.g., a "VIP Downloads" link only for Premium users). Combine this with the <strong>Frontend Dashboard</strong> so they feel they are navigating an exclusive app, not a standard WordPress site.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #f97316;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #f97316, #c2410c);">🛵</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Delivery & Transport Apps', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Train drivers and restaurant partners efficiently via mobile.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Mobile Theme', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Dynamic Fields (KYC)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Double Click Fullscreen', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'WhatsApp Share', 'yoppli-video-player' ); ?></span>
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Ideal for onboarding videos. Require driver license uploads using <strong>Dynamic Fields (KYC)</strong> during registration. Use the <strong>Mobile Theme</strong> and <strong>Double Click Fullscreen</strong> for perfect smartphone usability, and add the <strong>WhatsApp Share</strong> button for quick fleet communication.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
            <div class="yvpd-card-doc" style="border-top: 4px solid #10b981;">
                <div class="yvpd-card-header">
                    <div class="yvpd-card-icon" style="background: linear-gradient(135deg, #10b981, #047857);">💻</div>
                    <h3 class="yvpd-card-title"><?php esc_html_e( 'Digital Asset Marketplaces', 'yoppli-video-player' ); ?></h3>
                </div>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( '<strong>Goal:</strong> Showcase digital products and provide secure downloads.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:15px; margin-bottom:20px;">
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Encrypted Download (Blob)', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Hover Preview', 'yoppli-video-player' ); ?></span> 
                    <span class="yvpd-tag yvpd-tag-pro"><?php esc_html_e( 'Ad: HTML Banner', 'yoppli-video-player' ); ?></span> 
                </div>
                <div class="yvpd-accordion">
                    <summary><?php esc_html_e( 'Why and how to configure?', 'yoppli-video-player' ); ?></summary>
                    <div class="yvpd-accordion-content">
                        <?php echo wp_kses_post( __( 'Protect your premium source code or asset files by delivering them through the <strong>Encrypted Download (Blob)</strong>. Use <strong>Hover Preview</strong> to let buyers quickly preview WordPress themes or plugins in action without clicking. Inject an <strong>HTML Banner</strong> with a direct link to your checkout.', 'yoppli-video-player' ) ); ?>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '🛠️ 3. Tools and Options Dictionary', 'yoppli-video-player' ); ?>
        </h2>
        <p style="margin-top:-10px; margin-bottom:25px; color:#64748b;">
            <?php esc_html_e( 'What exactly does each button in the General Settings panel do? Click the sections to explore the magic of each tool.', 'yoppli-video-player' ); ?>
        </p>
        <details class="yvpd-accordion">
            <summary><?php esc_html_e( '⚙️ Auto-Replacement Engine', 'yoppli-video-player' ); ?></summary>
            <div class="yvpd-accordion-content">
                <div class="yvpd-dict-grid">
                    <div class="yvpd-dict-item">
                        <div class="yvpd-dict-icon">🔍</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Basic Replacement <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Scans your website looking for links ending in <code>.mp4</code>. If found, it removes the ugly text link and paints the player over it. Works perfectly with videos uploaded to WP Media.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#00adef;">⚡</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Force Aggressive Replace <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Essential for S3 or visual builders (Elementor, Divi). Intercepts the code from the server before WordPress renders it, forcibly transforming native Gutenberg blocks and <code>[video]</code> shortcodes into the VPD player.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item">
                        <div class="yvpd-dict-icon">🔗</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Custom Slugs <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'By default, the plugin only searches in "Posts" and "Pages". If you use a Custom Post Type (e.g., "Lessons" in LearnDash), write the slug (e.g., <code class="yvpd-inline-code">sfwd-lessons</code>) here so the engine searches for videos there too.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <details class="yvpd-accordion">
            <summary><?php esc_html_e( '🎨 Design and Visual Themes', 'yoppli-video-player' ); ?></summary>
            <div class="yvpd-accordion-content">
                <div class="yvpd-dict-grid">
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#e11d48;">🎨</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Skins / Themes <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Completely change the player\'s CSS architecture with one click. You have 10 styles: rounded buttons (Mobile), floating bars (MacOS), cinema colors, TikTok-style gradients, or pure minimalism.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#c026d3;">🖌️</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Primary / Secondary Color <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Brand customization. Affects the color of the time progress bar, active buttons on mouse hover, and backgrounds in "Gradient" or "Neon" themes.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item">
                        <div class="yvpd-dict-icon">📏</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Individual vs Global Mode <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'If you choose <strong>"Global"</strong>, all players on your site will measure exactly what you set in "Size" (e.g., 75%). If you choose <strong>"Individual"</strong>, the player will take 100% of the column where you insert it in Elementor/Gutenberg.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <details class="yvpd-accordion">
            <summary><?php esc_html_e( '☁️ Integrations (YouTube / Cloud)', 'yoppli-video-player' ); ?></summary>
            <div class="yvpd-accordion-content">
                <div class="yvpd-dict-grid">
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#ef4444;">📺</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'YouTube White Label <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Transforms a boring YouTube iframe into the Premium VPD player. The main advantage is that it hides the red bar, the YT logo, and the annoying recommendations at the end of the video.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#0ea5e9;">📦</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Dropbox Support <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Allows using free videos hosted on Dropbox. <strong>Vital trick:</strong> Make sure the share link always ends in <code class="yvpd-inline-code">dl=0</code> or <code class="yvpd-inline-code">raw=1</code> to work.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#f59e0b;">☁️</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Amazon S3 Support <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Reads the direct public URL of the S3 object. Saves hundreds of dollars in bandwidth. <strong>Requires injecting a CORS rule</strong> in your bucket so the browser trusts the video (see help section 5).', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <details class="yvpd-accordion">
            <summary><?php esc_html_e( '🕹️ Player Controls (Buttons)', 'yoppli-video-player' ); ?></summary>
            <div class="yvpd-accordion-content">
                <div class="yvpd-dict-grid">
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#10b981;">👀</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Hover Preview <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'If the user leaves the mouse still over the closed player, the video starts playing silently (without opening controls). It is an ultra-effective visual hook used by Netflix.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#6366f1;">📱</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Picture-in-Picture (PiP) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Adds a "squares" icon. When clicked, the video detaches from the page and becomes a floating frame over Windows/Mac, allowing the user to read your articles while watching the video.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#f97316;">📸</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Camera (Snapshot) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Allows the user to "take a photo" of the video. It will download to their computer an exact, high-quality JPG file of the exact frame they are seeing at that millisecond.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#0ea5e9;">📡</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Cast (TV) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Searches for smart devices (Chromecast, Android TV, AppleTV) connected to the same WiFi network and sends the movie straight to their living room TV.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#ef4444;">🔒</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Encrypted Download (Blob) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Anti-Theft Protection. Creates a fake URL in the browser\'s RAM (E.g.: <code class="yvpd-inline-code">blob:http://yoursite/8s...</code>). The native download button works, but hackers cannot extract your original S3 link.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#8b5cf6;">🪟</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Double Click Fullscreen <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php esc_html_e( 'Emulates mobile app behavior. Instead of looking for the small fullscreen button, the user just double-clicks quickly in the center of the video to maximize it.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#ef4444;">🛑</div>
                        <div class="yvpd-dict-text">
                            <h4>
                                <?php echo wp_kses_post( __( 'Smart Pause (Anti-Abandon) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?>
                            </h4>
                            <p><?php echo wp_kses_post( __( 'Automatically pauses the video if the user changes tabs or minimizes the browser, and magically resumes when they return. <strong>Ideal for:</strong> Educational courses, webinars, or VSLs (Video Sales Letters) where you must guarantee the user\'s visual attention.', 'yoppli-video-player' ) ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <details class="yvpd-accordion">
            <summary><?php esc_html_e( '👤 User & Ecosystem Management', 'yoppli-video-player' ); ?></summary>
            <div class="yvpd-accordion-content">
                <div class="yvpd-dict-grid">
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#0ea5e9;">🎛️</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Frontend Dashboard <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Create an immersive web portal where the user manages their profiles, payments, visual themes, and can review their detailed activity history (minute by minute).', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#8b5cf6;">🌐</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Integrated Frontend Login <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Replace the boring wp-login screen with a spectacular glass popup (Glassmorphism) with Registration and Login tabs. Combine it with "Block WP-Login" for maximum security.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#10b981;">🛡️</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Security Vault (PIN) <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Ideal for parental control or privacy. Users can lock their sub-profiles with a 4-digit PIN. Includes automated password recovery via email.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#f59e0b;">🕵️</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'KYC Audit & Verification <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Design dynamic fields (Text, Checkboxes, Country Codes, File Uploads) required for registration. The administrator can approve or reject each data point and award the Official Verification Badge.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#ef4444;">🚨</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Reports Center <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Allows users to report errors directly from the video. The administrator receives the tickets in an animated backend radar to resolve, delete, or group dropped reports.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#ec4899;">👥</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Avatars & Albums <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Allows uploading avatars from the user\'s PC or enables the "Netflix-Style Carousel" by selecting image categories uploaded directly by the administrator.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#14b8a6;">🤖</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Google reCAPTCHA v2 / v3 <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Stops bots and spam registrations natively within the premium frontend popup. You can enforce it on Login, Registration, or both, ensuring your user database remains clean without breaking the glassmorphism design.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                    <div class="yvpd-dict-item" style="border-color:#bfdbfe; background:#f8fafc;">
                        <div class="yvpd-dict-icon" style="color:#8b5cf6;">🧩</div>
                        <div class="yvpd-dict-text">
                            <h4><?php echo wp_kses_post( __( 'Customize Dropdown Menu <span class="yvpd-badge-sm">PRO</span>', 'yoppli-video-player' ) ); ?></h4>
                            <p><?php esc_html_e( 'Gives you absolute control over the floating profile menu. You can hide default buttons (like Dashboard or Logout) and inject custom WordPress Menus assigned to specific User Roles, creating personalized navigation for free vs. VIP users.', 'yoppli-video-player' ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '💲 4. Ad Server: Monetize your videos', 'yoppli-video-player' ); ?>
        </h2>
        <div class="yvpd-grid-2">
            <div class="yvpd-card-doc delay-1">
                <h3 style="margin:0 0 10px 0; color:#1e293b;">
                    <?php esc_html_e( 'Format 1: Native Ads (Pre/Post Roll)', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( 'Upload a short .mp4 video from your sponsor. Set it as <strong>Pre-Roll</strong> (starts before your content) or <strong>Post-Roll</strong>. The system lets you inject a <strong>Visual Info Card</strong> (Title, Desc, Logo 300x300, and CTA Button) superimposed, allowing the user to click and visit the sponsor\'s website.', 'yoppli-video-player' ) ); ?></p>
                <div style="margin-top:10px; background:#f1f5f9; padding:10px; border-radius:6px; font-size:12px;">
                    <?php echo wp_kses_post( __( '<strong>Tip:</strong> Configure the Skip button to "Custom at 5s" so you don\'t frustrate your audience.', 'yoppli-video-player' ) ); ?>
                </div>
            </div>
            <div class="yvpd-card-doc delay-2">
                <h3 style="margin:0 0 10px 0; color:#1e293b;">
                    <?php esc_html_e( 'Format 2: 90% Banners (Non-intrusive)', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text"><?php esc_html_e( 'Upload an image (JPG/PNG). The player will display it as an elegant strip at the bottom of the video, spanning 90% of the width, with a small close (X) button and a countdown. Ideal for monetizing long movies or webinars without pausing playback.', 'yoppli-video-player' ); ?></p>
            </div>
            <div class="yvpd-card-doc delay-3">
                <h3 style="margin:0 0 10px 0; color:#1e293b;">
                    <?php esc_html_e( 'Format 3: Google AdSense / VAST', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( 'If you are approved by a global ad network, select this option. Paste the AdSense HTML <code>&lt;script&gt;</code> code and the system will render it as a bottom banner. Or paste the VAST/IMA XML URL, and the player will request dynamic video commercials directly from Google.', 'yoppli-video-player' ) ); ?></p>
            </div>
            <div class="yvpd-card-doc delay-4" style="background: linear-gradient(135deg, #1e293b, #0f172a); color:#fff; border:none;">
                <h3 style="margin:0 0 10px 0; color:#38bdf8;">
                    <?php esc_html_e( '💸 Budget & Limit Control', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text" style="color:#cbd5e1;"><?php echo wp_kses_post( __( 'When you create an ad, you assign it a CPV (Cost Per View) and CPC (Cost Per Click). If a client paid you $100, set <strong>Limit: $100</strong>. The real-time dashboard will deduct cents. When the ad spends $100, it automatically turns off and changes status to "Budget Limit"!', 'yoppli-video-player' ) ); ?></p>
            </div>
            <div class="yvpd-card-doc delay-5" style="border-top: 4px solid #f59e0b;">
                <h3 style="margin:0 0 10px 0; color:#1e293b;">
                    <?php esc_html_e( 'Ad Pods (Ad Blocks)', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( 'Multiply your income. Instead of a single ad, chain <strong>up to 9 ads in a row</strong> in a single commercial break (Pre-Roll, Mid-Roll, or Post-Roll). The player will display a counter like "Ad 1 of 3".', 'yoppli-video-player' ) ); ?></p>
            </div>
            <div class="yvpd-card-doc delay-6" style="border-top: 4px solid #0ea5e9;">
                <h3 style="margin:0 0 10px 0; color:#1e293b;">
                    <?php esc_html_e( 'Watchtime Frequency (Smart)', 'yoppli-video-player' ); ?> <span class="yvpd-badge-sm">PRO</span>
                </h3>
                <p class="yvpd-card-text"><?php echo wp_kses_post( __( 'Instead of showing ads every time they reload the page, the system measures the user\'s <strong>actual playback minutes</strong>. The ad will trigger exactly when the quota is met (e.g., 15 minutes), regardless of whether the user paused the video, went to the bathroom, or switched tabs.', 'yoppli-video-player' ) ); ?></p>
            </div>
        </div>
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '⚙️ 5. Server Technical Guides', 'yoppli-video-player' ); ?>
        </h2>
        <div class="yvpd-card-doc delay-1" style="margin-top:20px;">
            <h3 style="margin:0 0 10px 0; color:#1e3a8a;">
                <span class="dashicons dashicons-cloud" style="vertical-align:middle;"></span> 
                <?php esc_html_e( 'Connect Amazon S3 (Fixing CORS Block)', 'yoppli-video-player' ); ?>
            </h3>
            <p class="yvpd-card-text"><?php esc_html_e( 'If your Amazon S3 videos throw an error, fail on Apple devices, or subtitles fail, it\'s due to AWS security locks. Follow these 3 steps in your S3 console:', 'yoppli-video-player' ); ?></p>
            <details class="yvpd-accordion">
                <summary>
                    <?php esc_html_e( 'Step 1: Enable Public Access', 'yoppli-video-player' ); ?>
                </summary>
                <div class="yvpd-accordion-content">
                    <?php echo wp_kses_post( __( 'Go to the "Permissions" tab of your S3 bucket. Make sure to <strong>DISABLE</strong> "Block all public access".', 'yoppli-video-player' ) ); ?>
                </div>
            </details>
            <details class="yvpd-accordion">
                <summary>
                    <?php esc_html_e( 'Step 2: Inject CORS Config (JSON)', 'yoppli-video-player' ); ?>
                </summary>
                <div class="yvpd-accordion-content">
                    <?php esc_html_e( 'Scroll down to "Cross-origin resource sharing (CORS)" and paste this JSON:', 'yoppli-video-player' ); ?>
<pre class="yvpd-code">[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]</pre>
                </div>
            </details>
            <details class="yvpd-accordion">
                <summary>
                    <?php esc_html_e( 'Step 3: Read-Only Bucket Policy', 'yoppli-video-player' ); ?>
                </summary>
                <div class="yvpd-accordion-content">
                    <?php echo wp_kses_post( __( 'Paste this in "Bucket Policy", changing <code>YOUR-BUCKET</code> to your exact bucket name. This tells Amazon anyone can "view" the video, but nobody can delete or upload stuff.', 'yoppli-video-player' ) ); ?>
<pre class="yvpd-code">{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR-BUCKET/*"
        }
    ]
}</pre>
                </div>
            </details>
        </div>
        <div class="yvpd-card-doc delay-2" style="margin-top:20px; border-left:4px solid #14b8a6;">
            <h3 style="margin:0 0 10px 0; color:#047857;">
                <span class="dashicons dashicons-format-image" style="vertical-align:middle;"></span> 
                <?php esc_html_e( 'Activate Auto-Thumbnails (FFmpeg)', 'yoppli-video-player' ); ?>
            </h3>
            <p class="yvpd-card-text"><?php echo wp_kses_post( __( 'If a native MP4 has no poster, the player looks black. With this PRO option, your server "travels" to second 3 of the video, extracts a photo, and magically sets it as background. Requires <code>FFmpeg</code> library installed at server level.', 'yoppli-video-player' ) ); ?></p>
            <div class="yvpd-grid-2">
                <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0; margin-top:15px;">
                    <strong><?php esc_html_e( 'For cPanel (Shared Hosting like HostGator/Bluehost):', 'yoppli-video-player' ); ?></strong>
                    <ol style="margin-top:10px; font-size:13px; color:#475569; padding-left:15px;">
                        <li><?php esc_html_e( 'Log into your cPanel.', 'yoppli-video-player' ); ?></li>
                        <li><?php esc_html_e( 'Search for "Select PHP Version".', 'yoppli-video-player' ); ?></li>
                        <li><?php echo wp_kses_post( __( 'Go to the "Extensions" tab, find <code class="yvpd-inline-code">ffmpeg</code> or <code class="yvpd-inline-code">php-ffmpeg</code> and check it.', 'yoppli-video-player' ) ); ?></li>
                    </ol>
                </div>
                <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0; margin-top:15px;">
                    <strong><?php esc_html_e( 'For VPS / Dedicated Servers (Ubuntu/Debian):', 'yoppli-video-player' ); ?></strong>
                    <p style="font-size:13px; color:#475569; margin:10px 0;"><?php esc_html_e( 'Log via SSH console and run:', 'yoppli-video-player' ); ?></p>
                    <code class="yvpd-code">sudo apt update && sudo apt install ffmpeg -y</code>
                    <strong style="display:block; margin-top:10px;"><?php esc_html_e( 'For WHM / CentOS:', 'yoppli-video-player' ); ?></strong>
                    <code class="yvpd-code">yum install epel-release -y && yum install ffmpeg ffmpeg-devel -y</code>
                </div>
            </div>
        </div>

        <!-- NUEVA SECCIÓN 6: Integraciones -->
        <h2 class="yvpd-section-title">
            <?php esc_html_e( '🔌 6. Integrations and Compatibility', 'yoppli-video-player' ); ?>
        </h2>
        <p style="margin-top:-10px; margin-bottom:25px; color:#64748b;">
            <?php esc_html_e( 'The VPD ecosystem is designed to work seamlessly with your favorite WordPress tools and external platforms.', 'yoppli-video-player' ); ?>
        </p>
        <div class="yvpd-grid-3">
            <div class="yvpd-card-doc delay-1" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #8b5cf6, #6d28d9); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">🛒</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'WooCommerce (HPOS)', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( 'Fully compatible with <strong>High-Performance Order Storage (HPOS)</strong>. You can also sync the VPD frontend login to use the native WooCommerce login system.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>
            
            <div class="yvpd-card-doc delay-2" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #ef4444, #b91c1c); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">🏗️</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'Elementor, Divi and Gutenberg', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( 'Our <strong>Force Aggressive Replace</strong> engine intercepts native <code>[video]</code> shortcodes and Gutenberg <code>core/video</code> blocks, automatically replacing them with the VPD player inside visual builders.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>

            <div class="yvpd-card-doc delay-3" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #f59e0b, #d97706); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">🎓</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'LearnDash and LMS', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( 'Use the <strong>Custom Slugs / CPTs</strong> setting to insert the player on course pages, lessons (e.g., <code>sfwd-lessons</code>), or any custom post type generated by your LMS.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>

            <div class="yvpd-card-doc delay-4" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">📈</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'Google AdSense and VAST', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php esc_html_e( 'Native integration with Google\'s IMA SDK. You can paste standard AdSense HTML tags for banners or VAST XML links for dynamic video ads.', 'yoppli-video-player' ); ?>
                </p>
            </div>

            <div class="yvpd-card-doc delay-5" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #ef4444, #dc2626); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">📺</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'YouTube API (White Label)', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( 'Paste any YouTube URL and VPD will mask it using the official API. Play YouTube videos with your own <strong>skins, ad blocks, and custom smart memory</strong>, without the red YouTube logo.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>

            <div class="yvpd-card-doc delay-6" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #10b981, #047857); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">☁️</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'Amazon S3 and Dropbox', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( 'Avoid bandwidth limits by connecting directly to Dropbox (<code>dl=0</code>) or AWS S3 buckets. VPD protects these links with its <strong>Encrypted Blob</strong> engine.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>

            <div class="yvpd-card-doc delay-7" style="padding:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:15px;">
                    <div style="width:36px; height:36px; background:linear-gradient(135deg, #0ea5e9, #0369a1); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">🌍</div>
                    <strong style="color:#f8fafc; font-size:16px;"><?php esc_html_e( 'Loco Translate / WPML', 'yoppli-video-player' ); ?></strong>
                </div>
                <p style="font-size:13px; color:#cbd5e1; margin:0; line-height:1.5;">
                    <?php echo wp_kses_post( __( '100% translation ready. All frontend and backend text strings are registered under the <code>yoppli-video-player</code> text domain for easy localization.', 'yoppli-video-player' ) ); ?>
                </p>
            </div>
        </div>

    </div>
    <?php
}

// INYECCIÓN DE ESTILOS Y SCRIPTS DEL ADMINISTRADOR
add_action('admin_enqueue_scripts', 'yvpd_admin_custom_styles');

function yvpd_admin_custom_styles( $hook ) {
    if ( strpos($hook, 'yoppli-video-player') !== false || strpos($hook, 'yvpd-') !== false ) {
        
        $custom_css = '
            .yvpd-main-nav-container { background: #0f172a; margin: 10px 20px 25px 0; padding: 25px; border-radius: 16px; border: 1px solid #1e293b; box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
            .yvpd-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; }
            .yvpd-nav-title { margin: 0; font-size: 24px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 12px; letter-spacing: -0.5px; }
            .yvpd-nav-title .dashicons { font-size: 32px; width: 32px; height: 32px; color: #00adef; filter: drop-shadow(0 0 8px #00adef77); }
            .yvpd-nav-tabs-grid { display: flex; gap: 10px; }
            .yvpd-nav-item { text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #94a3b8; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }
            .yvpd-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
            .yvpd-nav-item.is-active { background: #00adef !important; color: #fff !important; border-color: #00adef !important; box-shadow: 0 8px 20px #00adef55; }
            .wrap > h1.wp-heading-inline, .wrap > h1.yvpd-header-title, .wrap > .nav-tab-wrapper, .yvpd-tabs { display: none !important; }
            .yvpd-wrap-2026 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0b1121; margin: 0 20px 20px 0; padding: 30px; border-radius: 16px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); border: 1px solid #1e293b; color: #94a3b8; }
            .yvpd-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 25px; }
            .yvpd-card { background: #0f172a; border-radius: 16px; padding: 25px; border: 1px solid #334155; box-shadow: 0 10px 20px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s forwards; position: relative; overflow: hidden; }
            .yvpd-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.5); border-color: #475569; }
            .yvpd-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; border-bottom: 1px solid #334155; padding-bottom: 15px; }
            .yvpd-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 4px 10px rgba(14,165,233,0.3); }
            .yvpd-card-title { margin: 0; font-size: 18px; font-weight: 700; color: #f8fafc; }
            .yvpd-group { margin-bottom: 15px; }
            .yvpd-group-title { display: block; font-size: 13px; font-weight: 700; color: #cbd5e1; margin-bottom: 8px; }
            .yvpd-input { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid #334155; background: #020617; color: #fff; font-size: 14px; transition: 0.3s; box-sizing: border-box; }
            .yvpd-row-switch { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid #334155; border-radius: 10px; margin-bottom: 10px; transition: 0.2s; }
            .yvpd-switch-text { flex: 1; padding-right: 15px; }
            .yvpd-switch-title { display: block; font-weight: 600; color: #e2e8f0; font-size: 14px; margin-bottom: 2px;}
            .yvpd-switch-desc { display: block; font-size: 12px; color: #94a3b8; line-height: 1.4; }
            .yvpd-info-box { background: rgba(15, 23, 42, 0.5); border: 1px solid #334155; border-left: 4px solid #00adef; padding: 12px; border-radius: 8px; margin-top: 10px; font-size: 13px; color: #cbd5e1; }
            .yvpd-code-block { background: #020617; color: #38bdf8; padding: 6px 10px; border-radius: 4px; font-family: monospace; display: block; margin-top: 8px; font-size: 12px; word-break: break-all; border: 1px solid #1e293b; }
            .yvpd-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
            .yvpd-tool-item { background: rgba(15, 23, 42, 0.4); border: 1px solid #334155; padding: 10px 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
            .yvpd-tool-item span { font-size: 13px; font-weight: 600; color: #e2e8f0; }
            .yvpd-floating-bar { position: fixed; bottom: 30px; right: 40px; background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 15px 25px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 20px; z-index: 9999; animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
            .yvpd-floating-bar p { margin: 0; font-weight: 600; color: #cbd5e1; font-size: 14px; }
            .yvpd-save-btn { background: linear-gradient(135deg, #00adef 0%, #3b82f6 100%); color: #fff; border: none; padding: 12px 30px; border-radius: 30px; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,173,239,0.4); }
            .yvpd-save-btn:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(59,130,246,0.5); }
            @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
            @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
            @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
            .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; }
            hr { border-top: 1px dashed #334155 !important; }
            .yvpd-badge-active-dark { background: rgba(16,185,129,0.1); color: #34d399; padding: 4px 8px; border-radius: 6px; font-weight: bold; font-size: 11px; border: 1px solid rgba(16,185,129,0.3); }
            .yvpd-badge-inactive { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
            .yvpd-docs-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 20px 20px 20px 0; color: #94a3b8; background: #0b1121; padding: 30px; border-radius: 16px; border: 1px solid #1e293b; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
            .yvpd-header-title { font-size: 28px !important; font-weight: 800 !important; color: #f8fafc !important; display: flex; align-items: center; gap: 12px; margin-bottom: 30px; letter-spacing: -0.5px; }
            .yvpd-header-title span.dashicons { font-size: 36px; height: 36px; width: 36px; color: #00adef; }
            .yvpd-tabs { display: flex; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid #1e293b; padding-bottom: 10px; flex-wrap: wrap; }
            .yvpd-tabs a { text-decoration: none; padding: 10px 20px; font-size: 15px; font-weight: 600; color: #64748b; border-radius: 8px; transition: 0.3s; }
            .yvpd-tabs a.active { background: #00adef; color: #fff; box-shadow: 0 4px 15px rgba(0,173,239,0.3); }
            .yvpd-tabs a:hover:not(.active) { background: #1e293b; color: #f8fafc; }
            .yvpd-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius: 16px; padding: 40px; color: #ffffff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; position: relative; overflow: hidden; margin-top: 0; border: 1px solid #334155;}
            .yvpd-hero::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,173,239,0.1) 0%, transparent 60%); pointer-events: none; }
            .yvpd-hero-title { font-size: 32px !important; font-weight: 800 !important; margin: 0 0 10px 0 !important; display: flex; align-items: center; gap: 15px; letter-spacing: -1px; z-index: 1; position: relative; color: #ffffff !important;}
            .yvpd-hero-subtitle { font-size: 16px !important; color: #94a3b8 !important; margin: 0 !important; max-width: 700px; line-height: 1.6; z-index: 1; position: relative;}
            .yvpd-hero-controls { display: flex; gap: 15px; align-items: center; z-index: 1; position: relative; flex-wrap: wrap;}
            .yvpd-lang-toggle { background: rgba(0,0,0,0.3); border-radius: 30px; padding: 4px; display: flex; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
            .yvpd-lang-btn { background: transparent; border: none; color: #94a3b8; padding: 8px 20px; border-radius: 25px; font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 13px; }
            .yvpd-lang-btn.active { background: #00adef; color: #fff; box-shadow: 0 4px 15px rgba(0,173,239,0.4); }
            .yvpd-upgrade-btn { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; text-decoration: none; padding: 12px 25px; border-radius: 30px; font-weight: bold; font-size: 14px; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); transition: 0.3s; border: 1px solid #f87171; display:inline-block;}
            .yvpd-upgrade-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6); color: #fff; }
            .yvpd-section-title { font-size: 24px !important; font-weight: 800 !important; color: #f8fafc !important; margin: 50px 0 20px 0 !important; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #334155; padding-bottom: 15px; }
            .yvpd-section-title + p { color: #94a3b8 !important; }
            .yvpd-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; }
            .yvpd-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
            .yvpd-card-doc { background: #0f172a !important; border-radius: 16px; padding: 25px; border: 1px solid #334155 !important; box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important; transition: 0.3s; display: flex; flex-direction: column;}
            .yvpd-card-doc:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important; border-color: #00adef !important; transform: translateY(-5px); background: #1e293b !important; z-index: 10;}
            .yvpd-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
            .yvpd-card-icon { width: 45px; height: 45px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.3); flex-shrink: 0;}
            .yvpd-card-title { font-size: 18px !important; font-weight: 700 !important; color: #f8fafc !important; margin: 0 !important; line-height: 1.2;}
            .yvpd-card-text { font-size: 14px !important; color: #cbd5e1 !important; line-height: 1.6 !important; margin: 0 !important;}
            .yvpd-feature-list { list-style: none; padding: 0; margin: 15px 0 0 0; }
            .yvpd-feature-list li { padding: 8px 0; border-bottom: 1px solid #1e293b; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #cbd5e1 !important; }
            .yvpd-feature-list li:last-child { border: none; }
            .yvpd-feature-list strong { color: #f8fafc !important; }
            .yvpd-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: bold; background: #1e293b !important; color: #94a3b8 !important; margin: 0 5px 5px 0; border: 1px solid #334155 !important; }
            .yvpd-tag-pro { background: rgba(0, 173, 239, 0.1) !important; color: #00adef !important; border-color: rgba(0, 173, 239, 0.3) !important; box-shadow: inset 0 0 10px rgba(0,173,239,0.1); }
            .yvpd-accordion { margin-top: auto; border: 1px solid #334155 !important; border-radius: 8px; overflow: hidden; background: #0f172a !important; transition: 0.3s;}
            .yvpd-accordion summary { padding: 15px; font-weight: 600; color: #f8fafc !important; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #1e293b !important; }
            .yvpd-accordion summary::-webkit-details-marker { display: none; }
            .yvpd-accordion summary::after { content: "▼"; font-size: 12px; color: #94a3b8; transition: 0.3s; }
            .yvpd-accordion[open] summary::after { transform: rotate(180deg); color: #00adef; }
            .yvpd-accordion[open] { background: #0f172a !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-color: #00adef !important; }
            .yvpd-accordion-content { padding: 0 15px 15px 15px; font-size: 13.5px; color: #cbd5e1 !important; line-height: 1.6; border-top: 1px solid #334155 !important; margin-top: 5px; padding-top: 15px;}
            .yvpd-accordion-content strong { color: #f8fafc !important; }
            .yvpd-dict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-top: 5px; }
            .yvpd-dict-item { background: #1e293b !important; border: 1px solid #334155 !important; border-radius: 12px; padding: 15px; display: flex; gap: 15px; align-items: flex-start; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;}
            .yvpd-dict-item:hover { border-color: #00adef !important; box-shadow: 0 8px 25px rgba(0,173,239,0.2) !important; transform: translateY(-3px); filter: brightness(1.15); }
            .yvpd-dict-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: #0f172a !important; border: 1px solid #475569 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
            .yvpd-dict-text { flex: 1; }
            .yvpd-dict-text h4 { margin: 0 0 5px 0; font-size: 14px; color: #f8fafc !important; font-weight: 700; display:flex; align-items:center; gap:8px; line-height: 1.2;}
            .yvpd-dict-text p { margin: 0; font-size: 12.5px; color: #cbd5e1 !important; line-height: 1.5; }
            .yvpd-badge-sm { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; background: rgba(239, 68, 68, 0.15) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; letter-spacing: 0.5px;}
            .yvpd-badge-sm-free { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
            .yvpd-code-inline { background: #020617 !important; color: #00adef !important; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; border: 1px solid #334155 !important; }
            .yvpd-free-banner { background: #0f172a !important; border: 1px solid #334155 !important; border-left: 5px solid #00adef !important; padding: 20px; border-radius: 16px; margin-bottom: 30px; display: flex; gap: 25px; align-items: flex-start; flex-wrap: wrap; box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;}
            .yvpd-free-banner h3, .yvpd-free-banner h4 { color: #f8fafc !important; }
            .yvpd-free-banner p { color: #cbd5e1 !important; }
            .yvpd-success-msg { position:fixed; top:40px; right:40px; background:#10b981; color:#fff; padding:15px 25px; border-radius:8px; box-shadow:0 10px 25px rgba(16,185,129,0.4); z-index:99999; font-weight:bold; animation: slideInRight 0.5s forwards; }
            .yvpd-docs-wrap [style*="background:#fff"], .yvpd-docs-wrap [style*="background: #fff"], .yvpd-docs-wrap [style*="background:#ffffff"], .yvpd-docs-wrap [style*="background: #ffffff"], .yvpd-docs-wrap [style*="background:#f8fafc"], .yvpd-docs-wrap [style*="background: #f8fafc"], .yvpd-docs-wrap [style*="background:#f1f5f9"], .yvpd-docs-wrap [style*="background:#fffbeb"], .yvpd-docs-wrap [style*="background:#eff6ff"] { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
            .yvpd-docs-wrap [style*="color:#0f172a"], .yvpd-docs-wrap [style*="color:#1e293b"], .yvpd-docs-wrap [style*="color:#475569"] { color: #f8fafc !important; }
            .yvpd-docs-wrap [style*="color:#64748b"] { color: #94a3b8 !important; }
            .yvpd-docs-wrap [style*="border-color:#e2e8f0"], .yvpd-docs-wrap [style*="border:1px solid #e2e8f0"] { border-color: #334155 !important; }
            .yvpd-docs-wrap h3[style*="color:#1e3a8a"], .yvpd-docs-wrap h3[style*="color: #1e3a8a"] { color: #00adef !important; text-shadow: 0 0 10px rgba(0, 173, 239, 0.4); }
            .yvpd-docs-wrap h3[style*="color:#047857"], .yvpd-docs-wrap h3[style*="color: #047857"] { color: #34d399 !important; text-shadow: 0 0 10px rgba(52, 211, 153, 0.4); }
        ';

        $custom_js = "
            function vpdToggleDocLang(lang) {
                var elsEs = document.querySelectorAll('.yvpd-es');
                var elsEn = document.querySelectorAll('.yvpd-en');
                var btnEs = document.getElementById('btn-doc-es');
                var btnEn = document.getElementById('btn-doc-en');
                if(lang === 'es') {
                    elsEs.forEach(function(e) { e.style.display = (e.tagName === 'SPAN' || e.tagName === 'STRONG') ? 'inline' : 'block'; });
                    elsEn.forEach(function(e) { e.style.display = 'none'; });
                    if(btnEs) btnEs.classList.add('active'); if(btnEn) btnEn.classList.remove('active');
                } else {
                    elsEs.forEach(function(e) { e.style.display = 'none'; });
                    elsEn.forEach(function(e) { e.style.display = (e.tagName === 'SPAN' || e.tagName === 'STRONG') ? 'inline' : 'block'; });
                    if(btnEn) btnEn.classList.add('active'); if(btnEs) btnEs.classList.remove('active');
                }
            }
        ";
        
        wp_register_style( 'yvpd-admin-css', false, array(), YVPD_VERSION );
        wp_enqueue_style( 'yvpd-admin-css' );
        wp_add_inline_style( 'yvpd-admin-css', $custom_css );

        wp_register_script( 'yvpd-admin-js', false, array('jquery'), YVPD_VERSION, true );
        wp_enqueue_script( 'yvpd-admin-js' );
        wp_add_inline_script( 'yvpd-admin-js', $custom_js );
    }
}