<?php
/**
 * CHECKOUT - Página de Pagamento
 * Sistema de Checkout Profissional com múltiplos gateways
 * 
 * @version 2.0
 * @author Checkout Pro 2025
 */

// ============================================================
// CONFIGURAÇÃO E INICIALIZAÇÃO
// ============================================================

// Tratamento global de erros
set_error_handler(function($errno, $errstr, $errfile, $errline) {
    error_log("Erro em checkout.php: [$errno] $errstr em $errfile:$errline");
    return false;
});

error_reporting(E_ALL);
ini_set('display_errors', 0);
ini_set('log_errors', 1);

// Incluir dependências
try {
    if (file_exists(__DIR__ . '/../config/token.php')) {
        include_once __DIR__ . '/../config/token.php';
    }
    require __DIR__ . '/../config/config_db.php';
    require_once __DIR__ . '/../backend/gateway_helper.php';
} catch (Exception $e) {
    error_log("Erro ao incluir arquivos: " . $e->getMessage());
    http_response_code(500);
    die("Erro de configuração. Verifique os logs.");
}

// Buscar configurações dos gateways
// CRÍTICO (cartão): PUBLIC_KEY deve ser do MESMO ambiente/conta do ACCESS_TOKEN (tabela credenciais via token.php)
// Senão acontece "payment methods inference error" / "Card Token not found" mesmo com PIX e boleto funcionando.
$mercadopago_public_key = null;

// Prioridade 1: PUBLIC_KEY (credenciais) — emparelhada com ACCESS_TOKEN
if (defined('PUBLIC_KEY') && !empty(trim((string) PUBLIC_KEY))) {
    $mercadopago_public_key = trim((string) PUBLIC_KEY);
}

// Prioridade 2: configuracoes (fallback)
if (empty($mercadopago_public_key) && function_exists('get_gateway_config')) {
    $mercadopago_public_key = get_gateway_config('mercadopago', 'public_key');
}

// ============================================================
// VERIFICAÇÃO DE GATEWAYS ATIVOS
// ============================================================

$mp_on = gateway_ativado('mercadopago');
$stripe_on = gateway_ativado('stripe');
$paypal_on = gateway_ativado('paypal');
$pagarme_on = gateway_ativado('pagarme');

// Variáveis de compatibilidade (mantidas para código existente)
$mercadopago_ativado = $mp_on;
$stripe_ativado = $stripe_on;
$paypal_ativado = $paypal_on;

// Contar gateways ativos
$gateways_ativos = [];
if ($mp_on) $gateways_ativos[] = 'mercadopago';
if ($stripe_on) $gateways_ativos[] = 'stripe';
if ($paypal_on) $gateways_ativos[] = 'paypal';
if ($pagarme_on) $gateways_ativos[] = 'pagarme';

// Validar se há pelo menos um gateway ativo
if (empty($gateways_ativos)) {
    die("Erro: Nenhum gateway de pagamento está ativado. Configure pelo menos um gateway no painel administrativo.");
}

// Definir primeira aba ativa (primeiro gateway da lista)
$primeira_aba = $gateways_ativos[0];

// Validar conexão com banco
if (!isset($pdo) || !($pdo instanceof PDO)) {
    error_log("Erro: Variável \$pdo não está definida");
    http_response_code(500);
    die("Erro de conexão com banco de dados.");
}

// Buscar Pixel ID
$pixel_id = '';
try {
    $stmt = $pdo->prepare("SELECT valor FROM configuracoes WHERE chave = 'facebook_pixel_id' LIMIT 1");
    $stmt->execute();
    $config = $stmt->fetch(PDO::FETCH_ASSOC);
    $pixel_id = $config ? $config['valor'] : '';
} catch (PDOException $e) {
    error_log("Erro ao buscar pixel ID: " . $e->getMessage());
}

// Lógica de Captura Robusta (Fonte da Verdade)
$final_prod_id = filter_input(INPUT_GET, 'produto_id', FILTER_SANITIZE_NUMBER_INT);
$final_af_id = filter_input(INPUT_GET, 'ref', FILTER_SANITIZE_NUMBER_INT);
if (!$final_af_id) {
    $final_af_id = filter_input(INPUT_GET, 'af', FILTER_SANITIZE_NUMBER_INT);
}

// Se falhar o GET, tenta recuperar de uma variável global ou sessão se existir
if (!$final_prod_id && isset($produto_id)) {
    $final_prod_id = $produto_id;
}

// Validar produto_id
if (!$final_prod_id) {
    die("Erro: produto_id não fornecido!");
}

$produto_id = intval($final_prod_id);
if ($produto_id <= 0) {
    die("Erro: ID do produto inválido!");
}

// Atualizar variáveis para uso consistente (retrocompatibilidade)
$safe_prod_id = $final_prod_id;
$safe_produto_id = $final_prod_id;
$safe_ref_id = $final_af_id ?? 0;
$safe_afiliado_id = $final_af_id ?? 0;

// Verificar cookie de afiliado
$afiliado_id = null;
if (isset($_COOKIE['affiliate_id']) && isset($_COOKIE['affiliate_produto_id'])) {
    $cookie_afiliado_id = intval($_COOKIE['affiliate_id']);
    $cookie_produto_id = intval($_COOKIE['affiliate_produto_id']);
    if ($cookie_produto_id == $produto_id && $cookie_afiliado_id > 0) {
        $afiliado_id = $cookie_afiliado_id;
    }
}

// Buscar produto principal
try {
    $sql = "SELECT id, nome, descricao, imagem, preco_original, preco_atual, link_entregavel, 
                   checkout_background_color, checkout_banner, checkout_main_card_background, checkout_text_color,
                   tipo_produto, metodos_pagamento
            FROM produtos WHERE id = :produto_id LIMIT 1";
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['produto_id' => $produto_id]);
    $produto = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Erro ao buscar produto: " . $e->getMessage());
    die("Erro ao buscar produto. Tente novamente.");
}

if (!$produto) {
    die("Erro: Produto não encontrado!");
}

// Garantir campos essenciais
$produto = array_merge([
    'nome' => 'Produto',
    'descricao' => '',
    'imagem' => '',
    'preco_original' => 0,
    'preco_atual' => 0,
    'link_entregavel' => '',
    'checkout_background_color' => '#0f0c29',
    'checkout_banner' => '',
    'checkout_main_card_background' => '#1a1a2e',
    'checkout_text_color' => '#ffffff',
    'tipo_produto' => 'digital',
    'metodos_pagamento' => 'todos'
], $produto);

// Variável para controlar se é produto físico
$is_produto_fisico = ($produto['tipo_produto'] ?? 'digital') === 'fisico';

// Função para gerar campos de endereço (reutilizável)
function gerarCamposEndereco($sufixo = '', $checkout_text_color = '#ffffff', $sempre_mostrar = false) {
    global $is_produto_fisico;
    
    // Para boleto, sempre mostrar. Para outros, apenas se for físico
    if (!$sempre_mostrar && !$is_produto_fisico) {
        return '';
    }
    
    // IDs padronizados com sufixo para manter unicidade entre abas
    $id_sufixo_final = $sufixo ? '_' . $sufixo : '';
    $id_cep = 'input_cep' . $id_sufixo_final;
    $id_rua = 'input_logradouro' . $id_sufixo_final;
    $id_numero = 'input_numero' . $id_sufixo_final;
    $id_complemento = 'input_complemento' . $id_sufixo_final;
    $id_bairro = 'input_bairro' . $id_sufixo_final;
    $id_cidade = 'input_cidade' . $id_sufixo_final;
    $id_estado = 'input_estado' . $id_sufixo_final;
    
    ob_start();
    ?>
    <!-- Campos de Endereço -->
    <div class="endereco-container-<?= $sufixo; ?>" style="margin-top: 20px; margin-bottom: 20px; padding: 20px; background: rgba(102, 126, 234, 0.1); border: 2px dashed rgba(255,255,255,0.2); border-radius: 10px;">
        <h3 style="font-size: 16px; color: <?= $checkout_text_color; ?>; margin-bottom: 15px;">
            <i class="fas fa-map-marker-alt"></i>
            <?php if (strpos((string)$sufixo, 'boleto') !== false): ?>
                Endereço do Pagador (obrigatório para emissão do boleto)
            <?php else: ?>
                Endereço de Entrega
            <?php endif; ?>
        </h3>
        
        <div class="form-group">
            <input type="text" id="<?= $id_cep; ?>" name="<?= $id_cep; ?>" placeholder="CEP (Ex: 01310-100)" maxlength="9" class="cep-input" required>
            <div class="error-message" id="error-<?= $id_cep; ?>"></div>
        </div>
        
        <div class="form-group">
            <input type="text" id="<?= $id_rua; ?>" name="<?= $id_rua; ?>" placeholder="Rua" required>
            <div class="error-message" id="error-<?= $id_rua; ?>"></div>
        </div>
        
        <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px;">
            <div class="form-group">
                <input type="text" id="<?= $id_numero; ?>" name="<?= $id_numero; ?>" placeholder="Número" required>
                <div class="error-message" id="error-<?= $id_numero; ?>"></div>
            </div>
            <div class="form-group">
                <input type="text" id="<?= $id_complemento; ?>" name="<?= $id_complemento; ?>" placeholder="Complemento (opcional)">
            </div>
        </div>
        
        <div class="form-group">
            <input type="text" id="<?= $id_bairro; ?>" name="<?= $id_bairro; ?>" placeholder="Bairro" required>
            <div class="error-message" id="error-<?= $id_bairro; ?>"></div>
        </div>
        
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 10px;">
            <div class="form-group">
                <input type="text" id="<?= $id_cidade; ?>" name="<?= $id_cidade; ?>" placeholder="Cidade" required>
                <div class="error-message" id="error-<?= $id_cidade; ?>"></div>
            </div>
            <div class="form-group">
                <input type="text" id="<?= $id_estado; ?>" name="<?= $id_estado; ?>" placeholder="UF" maxlength="2" required style="text-transform: uppercase;">
                <div class="error-message" id="error-<?= $id_estado; ?>"></div>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

// Buscar produtos adicionais (Order Bump)
$produtos_adicionais = [];
try {
    $sql = "SELECT pa.id, pa.produto_principal_id, pa.produto_adicional_id, 
                   pa.preco_original, pa.preco_promocional, pa.imagem AS imagem_pa,
                   p.imagem AS imagem_produto,
                   CASE 
                     WHEN pa.imagem IS NOT NULL AND pa.imagem != '' AND TRIM(pa.imagem) != '' THEN pa.imagem
                     WHEN p.imagem IS NOT NULL AND p.imagem != '' AND TRIM(p.imagem) != '' THEN p.imagem
                     ELSE ''
                   END AS imagem,
                   COALESCE(pa.descricao, p.descricao, '') AS descricao, 
                   COALESCE(pa.titulo_rosa, 'Oferta Especial') AS titulo_rosa, 
                   COALESCE(pa.link_pagina, '') AS link_pagina,
                   COALESCE(p.nome, 'Produto') AS nome
            FROM produtos_adicionais pa
            INNER JOIN produtos p ON p.id = pa.produto_adicional_id
            WHERE pa.produto_principal_id = :produto_principal_id
            ORDER BY pa.id ASC
            LIMIT 10";
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['produto_principal_id' => $produto_id]);
    $produtos_adicionais = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Erro ao buscar produtos adicionais: " . $e->getMessage());
}

// Configurações do checkout
$checkout_background_color = $produto['checkout_background_color'];
$checkout_banner = $produto['checkout_banner'];
$checkout_main_card_background = $produto['checkout_main_card_background'];
$checkout_text_color = $produto['checkout_text_color'];
$numero_de_adicionais = count($produtos_adicionais);
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Pagamento Seguro</title>
    
    <!-- SDKs de Pagamento -->
    <script src="https://sdk.mercadopago.com/js/v2"></script>
    <script src="https://www.mercadopago.com/v2/security.js" view="checkout"></script>
    <?php if ($mercadopago_ativado && !empty($mercadopago_public_key)): ?>
    <script>
        // Criar UMA ÚNICA instância global de mp IMEDIATAMENTE quando o SDK carregar
        (function() {
            const publicKey = "<?= htmlspecialchars($mercadopago_public_key, ENT_QUOTES, 'UTF-8'); ?>";
            
            function criarInstanciaMercadoPago() {
                if (typeof MercadoPago === 'undefined') {
                    console.warn('SDK do Mercado Pago ainda não carregou, tentando novamente...');
                    setTimeout(criarInstanciaMercadoPago, 100);
                    return;
                }
                
                if (!window.mp) {
                    window.mp = new MercadoPago(publicKey, { locale: 'pt-BR' });
                    console.log('✅ Instância ÚNICA do Mercado Pago criada e exposta em window.mp');
                } else {
                    console.log('✅ Instância window.mp já existe, reutilizando');
                }
            }
            
            // Tentar criar a instância imediatamente
            criarInstanciaMercadoPago();
            
            // Também tentar quando o DOM estiver pronto
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', criarInstanciaMercadoPago);
            } else {
                criarInstanciaMercadoPago();
            }
        })();
    </script>
    <?php endif; ?>
    <?php if ($stripe_ativado): ?>
    <script src="https://js.stripe.com/v3/"></script>
    <?php endif; ?>
    
    <!-- Fontes e Ícones -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/fontawesome/css/all.min.css">
    
    <!-- Facebook Pixel -->
    <?php if (!empty($pixel_id)): ?>
    <script>
        !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/pt_BR/fbevents.js');
        fbq('init', '<?= $pixel_id; ?>');
        fbq('track', 'PageView');
        fbq('track', 'AddPaymentInfo');
    </script>
    <?php endif; ?>
    
    <style>
        /* ============================================================
           ESTILOS GLOBAIS
           ============================================================ */
        * { box-sizing: border-box; outline: none; }
        
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Montserrat', sans-serif;
            background: <?= $checkout_background_color; ?>;
            color: <?= $checkout_text_color; ?>;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        
        /* Container Principal */
        /* ============================================================
           CONTAINER PRINCIPAL - SOLUÇÃO HÍBRIDA PARA SPINNER E STACKING CONTEXT
           ============================================================ */
        .container {
            position: relative;
            background: <?= $checkout_main_card_background; ?>;
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            margin: 20px auto;
            overflow: visible; /* Mantém visible para permitir interação com iframes */
            z-index: auto; /* CORRIGIDO: auto para não criar stacking context que prende os campos */
            color: <?= $checkout_text_color; ?>;
            /* Sombra Neon Estática (sem animação) */
            box-shadow: 0 0 15px #009846;
        }
        
        /* ============================================================
           CAMPOS DE CARTÃO - STACKING CONTEXT ISOLADO E SUPERIOR
           ============================================================ */
        /* Container de cartão - SEM isolation para permitir cliques */
        #mercadopago-cartao {
            position: relative !important;
        }
        
        #form-card-mp {
            position: relative !important;
            pointer-events: auto !important;
        }
        
        /* Form groups */
        #form-card-mp .form-group {
            position: relative !important;
            pointer-events: auto !important;
        }
        
        /* Containers dos campos - dentro do contexto isolado */
        /* CORRIGIDO: Estilos visuais completos para aparecerem como caixas brancas com borda azul */
        /* REFATORADO: display: block (não flex) para permitir injeção correta de iframes pelo Mercado Pago */
        /* ============================================================
           PADRONIZAÇÃO VISUAL: CONTAINERS DE CARTÃO (MERCADO PAGO)
           ============================================================ */
        #form-checkout__cardNumber,
        #form-checkout__expirationDate,
        #form-checkout__securityCode {
            /* Dimensões e Layout - CRÍTICO */
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;
            display: block !important; /* CORRIGIDO: block ao invés de flex para permitir iframes */
            box-sizing: border-box !important;
            
            /* Estilos Visuais - Espelhados do #form-checkout__cardholderName */
            background-color: #ffffff !important; /* Fundo branco para aparecer e funcionar */
            border: 2px solid #00c6ff !important; /* Borda azul igual ao campo de nome */
            border-radius: 8px !important; /* Bordas arredondadas */
            box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important; /* Sombra neon */
            
            /* Posicionamento e Empilhamento - OBRIGATÓRIO para iframes absolute */
            position: relative !important; /* CRÍTICO: relative para que iframe absolute funcione */
            z-index: 10 !important; /* Garantir que fiquem acima de decorações */
            
            /* Interatividade - CRÍTICO: Garantir que containers e iframes sejam clicáveis */
            pointer-events: auto !important;
            cursor: text !important;
            overflow: visible !important; /* Não cortar iframes */
            
            /* CRÍTICO: Forçar que elementos filhos (iframes) também sejam clicáveis */
        }
        
        /* CRÍTICO: Garantir que iframes dentro dos containers sejam sempre clicáveis */
        #form-checkout__cardNumber *,
        #form-checkout__expirationDate *,
        #form-checkout__securityCode * {
            pointer-events: auto !important;
        }
        
        /* ============================================================
           PADRONIZAÇÃO VISUAL: CONTAINER DE CARTÃO (STRIPE)
           Aplicando os mesmos estilos do Mercado Pago para paridade visual
           ============================================================ */
        #card-element {
            /* Dimensões e Layout - CRÍTICO (igual ao MP) */
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;
            display: block !important; /* block para permitir injeção correta do Stripe Elements */
            box-sizing: border-box !important;
            
            /* Estilos Visuais - Espelhados do Mercado Pago */
            background-color: #ffffff !important; /* Fundo branco para aparecer e funcionar */
            border: 2px solid #00c6ff !important; /* Borda azul igual ao MP */
            border-radius: 8px !important; /* Bordas arredondadas */
            box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important; /* Sombra neon */
            
            /* Posicionamento e Empilhamento */
            position: relative !important; /* CRÍTICO: relative para que Stripe Elements funcione */
            z-index: 10 !important; /* Garantir que fique acima de decorações */
            
            /* Interatividade */
            pointer-events: auto !important;
            cursor: text !important;
            overflow: visible !important; /* Não cortar elementos */
            
            /* Transição suave */
            transition: 0.3s !important;
        }
        
        /* Efeito de foco no container do Stripe (quando elemento recebe foco) */
        #card-element:focus-within {
            outline: none !important;
            border-color: #00c6ff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.8) !important;
        }
        
        /* Efeito de foco nos containers (quando iframe recebe foco) */
        #form-checkout__cardNumber:focus-within,
        #form-checkout__expirationDate:focus-within,
        #form-checkout__securityCode:focus-within {
            outline: none !important;
            border-color: #00c6ff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.8) !important;
        }
        
        
        /* Detalhes do Produto */
        #product-details {
            display: flex;
            gap: 15px;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }
        
        #imagem-produto {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        /* Garantir que quando não houver imagem, não apareça nada */
        #imagem-produto:not([src]),
        #imagem-produto[src=""],
        #imagem-produto[src=" "],
        #imagem-produto[src="undefined"],
        #imagem-produto[src="null"] {
            display: none !important;
            visibility: hidden !important;
            width: 0 !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 0 !important;
            position: absolute !important;
            left: -9999px !important;
        }
        
        /* Ocultar qualquer texto alternativo da imagem */
        #imagem-produto[alt] {
            text-indent: -9999px;
            overflow: hidden;
            font-size: 0 !important;
            line-height: 0 !important;
        }
        
        /* Garantir que o container não reserve espaço quando não houver imagem */
        #product-details:not(:has(#imagem-produto[src]:not([src=""]):not([src=" "]))),
        #product-details:not(:has(#imagem-produto)) {
            /* Ajustar layout quando não houver imagem */
        }
        
        #titulo-produto {
            font-size: 16px;
            margin: 0 0 5px;
            color: <?= $checkout_text_color; ?>;
        }
        
        #descricao-produto {
            font-size: 12px;
            color: <?= $checkout_text_color; ?>;
            opacity: 0.9;
            margin: 0 0 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        #product-price {
            font-size: 18px;
            color: #00c6ff;
            font-weight: 700;
            margin: 0;
        }
        
        #product-discount {
            font-size: 12px;
            text-decoration: line-through;
            color: <?= $checkout_text_color; ?>;
            opacity: 0.7;
        }
        
        /* Barra de Progresso */
        .progress-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        
        .progress-step {
            text-align: center;
            width: 33%;
            position: relative;
            z-index: 1;
        }
        
        .progress-bullet {
            width: 12px;
            height: 12px;
            background: #444;
            border-radius: 50%;
            margin: 0 auto 5px;
            transition: 0.3s;
        }
        
        .progress-bullet.active {
            background: #00c6ff;
            box-shadow: 0 0 10px #00c6ff;
            transform: scale(1.3);
        }
        
        .progress-label {
            font-size: 10px;
            color: #aaa;
            text-transform: uppercase;
        }
        
        /* Títulos */
        .title {
            color: <?= $checkout_text_color; ?>;
            text-align: center;
            margin-bottom: 5px;
            font-size: 22px;
        }
        
        .subtitle {
            color: <?= $checkout_text_color; ?>;
            opacity: 0.8;
            text-align: center;
            font-size: 13px;
            margin-bottom: 25px;
        }
        
        /* Abas de Pagamento */
        .tabs {
            display: flex !important;
            gap: 10px;
            margin-bottom: 25px;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            position: relative;
            z-index: 10;
        }
        
        .tab {
            flex: 1;
            padding: 15px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: 0.3s;
            color: <?= $checkout_text_color; ?>;
            font-weight: 600;
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .tab:hover {
            background: rgba(255,255,255,0.1);
        }
        
        .tab.active {
            background: rgba(0, 198, 255, 0.15);
            border-color: #00c6ff;
            color: #fff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.2);
        }
        
        /* Conteúdo das Abas */
        .tab-content {
            display: none;
            visibility: visible;
            opacity: 1;
        }
        
        .tab-content.active {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Formulários */
        .form-group {
            margin-bottom: 20px;
            position: relative;
            pointer-events: auto;
        }
        
        /* Labels - Brancos */
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #ffffff !important;
            font-size: 14px;
            font-weight: 600;
            pointer-events: none;
        }
        
        /* ============================================================
           CAMPOS DE CARTÃO - Z-INDEX MÁXIMO PARA GARANTIR FUNCIONAMENTO
           ============================================================ */
        
        /* Aba de cartão */
        #mercadopago-cartao {
            position: relative !important;
        }
        
        /* Iframes do Mercado Pago - DENTRO DO STACKING CONTEXT ISOLADO */
        /* Iframes do Mercado Pago - FORÇADOS A OCUPAR ESPAÇO COMPLETO */
        /* CRÍTICO: Estes estilos garantem que o iframe preencha completamente o container */
        /* Iframes do Mercado Pago - DENTRO DO STACKING CONTEXT ISOLADO */
        /* Iframes do Mercado Pago - FORÇADOS A OCUPAR ESPAÇO COMPLETO */
        /* CRÍTICO: Estes estilos garantem que o iframe preencha completamente o container */
        #form-checkout__cardNumber iframe,
        #form-checkout__expirationDate iframe,
        #form-checkout__securityCode iframe {
            /* Posicionamento absoluto para ocupar todo o container */
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 50px !important;
            max-height: 50px !important;
            
            /* CRÍTICO: Garantir que iframes sejam clicáveis */
            pointer-events: auto !important;
            z-index: 10000 !important;
            cursor: text !important;
            
            /* Estilos visuais */
            border: none !important;
            border-radius: 8px !important;
            background: transparent !important;
            
            /* Interatividade */
            pointer-events: auto !important;
            cursor: text !important;
            z-index: 100 !important; /* Alto para garantir que fique acima de tudo */
            
            /* Layout */
            display: block !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Campo Nome do Titular - DENTRO DO STACKING CONTEXT ISOLADO */
        #form-checkout__cardholderName {
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;
            padding: 0 15px !important;
            background: #ffffff !important;
            border: 2px solid #00c6ff !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            color: #000000 !important;
            transition: 0.3s;
            pointer-events: auto !important;
            cursor: text !important;
            box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important;
            z-index: 10 !important;
            box-sizing: border-box !important;
            position: relative !important;
        }
        
        #form-checkout__cardholderName:focus {
            outline: none !important;
            border-color: #00c6ff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.8) !important;
        }
        
        #form-checkout__cardholderName::placeholder {
            color: #888 !important;
        }
        
        /* Garantir que nenhum elemento pai bloqueie os campos */
        #form-card-mp * {
            pointer-events: auto !important;
        }
        
        /* Labels não bloqueiam */
        #form-card-mp label {
            pointer-events: none !important;
        }
        
        /* Pseudo-elementos não bloqueiam */
        #form-card-mp *::before,
        #form-card-mp *::after {
            pointer-events: none !important;
        }
        
        /* Campos normais (não Mercado Pago) - Brancos com Borda Neon */
        .form-group input:not([id^="form-checkout__"]),
        .form-group select:not([id^="form-checkout__"]) {
            width: 100% !important;
            height: 50px !important;
            padding: 0 15px !important;
            background: #ffffff !important;
            border: 2px solid #00c6ff !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            color: #000000 !important; /* Texto digitado preto */
            transition: 0.3s;
            pointer-events: auto !important;
            cursor: text !important;
            box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important;
            z-index: 10000 !important;
        }
        
        .form-group input:not([id^="form-checkout__"]):focus,
        .form-group select:not([id^="form-checkout__"]):focus {
            outline: none !important;
            border-color: #00c6ff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.8) !important;
        }
        
        .form-group input::placeholder {
            color: #888 !important;
        }
        
        /* Campo de Parcelas - Branco com Borda Neon */
        #form-checkout__installments {
            width: 100% !important;
            height: 50px !important;
            padding: 0 15px !important;
            background: #ffffff !important;
            border: 2px solid #00c6ff !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            color: #000000 !important; /* Texto digitado preto */
            cursor: pointer !important;
            pointer-events: auto !important;
            box-shadow: 0 0 10px rgba(0, 198, 255, 0.5) !important;
            z-index: 10000 !important;
        }
        
        #form-checkout__installments:focus {
            outline: none !important;
            border-color: #00c6ff !important;
            box-shadow: 0 0 15px rgba(0, 198, 255, 0.8) !important;
        }
        
        /* Order Bump */
        .order-bump {
            background: rgba(255, 165, 0, 0.1);
            border: 1px dashed #ffa500;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            color: <?= $checkout_text_color; ?>;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .order-bump h1 {
            font-size: 14px;
            color: #ffca28;
            margin: 0 0 10px 0;
            text-transform: uppercase;
        }
        
        .offer-details {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .offer-checkbox {
            transform: scale(1.3);
            accent-color: #00c6ff;
        }
        
        .offer-label {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
        }
        
        .order-bump-image {
            width: 50px !important;
            height: 50px !important;
            border-radius: 5px;
            object-fit: cover;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .discount-price {
            color: #00c6ff;
            font-weight: 800;
        }
        
        /* Botões */
        .btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(90deg, #00c6ff, #0072ff);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            margin-top: 25px;
            box-shadow: 0 5px 15px rgba(0, 114, 255, 0.4);
            transition: 0.3s;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 114, 255, 0.6);
        }
        
        .btn-back {
            background: none;
            border: none;
            color: #aaa;
            width: 100%;
            padding: 15px;
            cursor: pointer;
            font-size: 12px;
            margin-top: 10px;
            transition: 0.3s;
        }
        
        .btn-back:hover {
            color: #fff;
        }
        
        /* Total e Resumo */
        .total-container {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 15px;
            margin-top: 20px;
            border-radius: 10px;
        }
        
        .resumo-pedido h3 {
            font-size: 14px;
            color: <?= $checkout_text_color; ?>;
            opacity: 0.8;
            margin-top: 0;
        }
        
        .resumo-pedido ul {
            padding-left: 20px;
            font-size: 13px;
            color: <?= $checkout_text_color; ?>;
        }
        
        .total-pedido {
            color: #00c6ff;
            font-weight: 800;
            font-size: 18px;
        }
        
        /* Pix Info */
        .pix-info-container {
            background: rgba(0, 198, 255, 0.1);
            border: 1px solid rgba(0, 198, 255, 0.3);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            color: <?= $checkout_text_color; ?>;
        }
        
        .pix-info-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #00c6ff;
        }
        
        /* Popup Processando */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 9999;
            display: none; /* Default: oculto */
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            pointer-events: none; /* CRÍTICO: Não bloquear cliques quando oculto */
        }
        
        .popup-overlay[style*="display: flex"],
        .popup-overlay[style*="display:flex"] {
            pointer-events: auto; /* Permitir cliques apenas quando visível */
        }
        
        .popup-content {
            background: #1a1a2e;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            color: #fff;
            box-shadow: 0 0 50px rgba(0, 198, 255, 0.2);
        }
        
        /* ============================================================
           CSS RESPONSIVO - MOBILE FIRST
           ============================================================ */
        @media only screen and (max-width: 768px) {
            /* Layout Geral */
            body {
                padding: 0 !important;
                min-height: 100vh;
            }
            
            .container {
                padding: 20px 15px !important;
                margin: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                min-height: 100vh;
            }
            
            /* Detalhes do Produto - Empilhar em coluna */
            #product-details {
                flex-direction: column !important;
                text-align: center;
                gap: 15px !important;
            }
            
            #imagem-produto {
                width: 100px !important;
                height: 100px !important;
                margin: 0 auto;
            }
            
            #titulo-produto {
                font-size: 18px !important;
            }
            
            #descricao-produto {
                font-size: 13px !important;
                -webkit-line-clamp: 3;
            }
            
            #product-price {
                font-size: 20px !important;
            }
            
            /* Barra de Progresso - Ajustar tamanho */
            .progress-container {
                margin-bottom: 20px !important;
            }
            
            .progress-label {
                font-size: 9px !important;
            }
            
            /* Abas de Pagamento - Empilhar ou ajustar */
            .tabs {
                flex-direction: column !important;
                gap: 8px !important;
            }
            
            .tab {
                padding: 12px !important;
                font-size: 14px !important;
            }
            
            /* Campos de Formulário - Tamanho de toque adequado */
            .form-group {
                margin-bottom: 18px !important;
            }
            
            .form-group label {
                font-size: 15px !important;
                margin-bottom: 10px !important;
            }
            
            /* Inputs HTML padrão - Altura mínima para toque + evitar zoom no iOS */
            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="number"],
            select,
            textarea {
                width: 100% !important;
                height: 50px !important;
                min-height: 50px !important;
                padding: 0 16px !important;
                font-size: 16px !important; /* CRÍTICO: 16px evita zoom automático no iOS */
                border-radius: 8px !important;
                box-sizing: border-box !important;
            }
            
            textarea {
                height: auto !important;
                min-height: 100px !important;
                padding: 12px 16px !important;
            }
            
            /* Campos do Mercado Pago - Garantir tamanho adequado no mobile */
            #form-checkout__cardNumber,
            #form-checkout__expirationDate,
            #form-checkout__securityCode,
            #form-checkout__cardholderName {
                width: 100% !important;
                height: 50px !important;
                min-height: 50px !important;
                max-height: 50px !important;
                font-size: 16px !important; /* Evita zoom no iOS */
            }
            
            /* Iframes do Mercado Pago - Garantir tamanho adequado */
            #form-checkout__cardNumber iframe,
            #form-checkout__expirationDate iframe,
            #form-checkout__securityCode iframe {
                height: 50px !important;
                min-height: 50px !important;
                max-height: 50px !important;
            }
            
            /* Stripe Card Element */
            #card-element {
                width: 100% !important;
                height: 50px !important;
                min-height: 50px !important;
                max-height: 50px !important;
            }
            
            /* Botões - Largura total e altura adequada */
            .btn {
                width: 100% !important;
                padding: 18px !important;
                font-size: 16px !important;
                height: auto !important;
                min-height: 50px !important;
                border-radius: 10px !important;
                margin-top: 20px !important;
                display: block !important;
            }
            
            .btn-back {
                width: 100% !important;
                padding: 15px !important;
                font-size: 14px !important;
                min-height: 44px !important;
            }
            
            /* Títulos */
            .title {
                font-size: 20px !important;
                margin-bottom: 10px !important;
            }
            
            .subtitle {
                font-size: 13px !important;
                margin-bottom: 20px !important;
            }
            
            /* Resumo do Pedido */
            .total-container {
                padding: 15px !important;
                margin-top: 15px !important;
            }
            
            .resumo-pedido h3 {
                font-size: 14px !important;
            }
            
            .resumo-pedido ul {
                font-size: 13px !important;
            }
            
            .total-pedido {
                font-size: 18px !important;
            }
            
            /* Order Bumps */
            .order-bump {
                padding: 15px !important;
                margin-bottom: 15px !important;
            }
            
            .offer-label {
                font-size: 14px !important;
            }
            
            .order-bump-image {
                width: 60px !important;
                height: 60px !important;
            }
            
            /* Pix Info Container */
            .pix-info-container {
                padding: 15px !important;
                margin-bottom: 15px !important;
            }
            
            .pix-info-header {
                font-size: 14px !important;
            }
            
            .pix-info-text {
                font-size: 13px !important;
            }
        }
        
        /* Tablets pequenos */
        @media only screen and (min-width: 481px) and (max-width: 768px) {
            .container {
                max-width: 90% !important;
                padding: 30px 25px !important;
                border-radius: 20px !important;
                margin: 20px auto !important;
            }
            
            .tabs {
                flex-direction: row !important;
            }
        }
        
        /* Dispositivos muito pequenos (menos de 480px) */
        @media only screen and (max-width: 480px) {
            .container {
                padding: 15px 12px !important;
            }
            
            #product-details {
                padding-bottom: 15px !important;
                margin-bottom: 15px !important;
            }
            
            .title {
                font-size: 18px !important;
            }
            
            .tab {
                padding: 10px 8px !important;
                font-size: 12px !important;
            }
        }
    </style>
</head>
<body>
    <!-- Data Store Seguro (Fonte da Verdade - Independente da URL) -->
    <div id="checkout-safe-data" style="display:none;" 
         data-produto-id="<?= htmlspecialchars($final_prod_id, ENT_QUOTES, 'UTF-8'); ?>" 
         data-afiliado-id="<?= htmlspecialchars($final_af_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>"
         data-tipo-produto="<?= htmlspecialchars($produto['tipo_produto'] ?? 'digital', ENT_QUOTES, 'UTF-8'); ?>">
    </div>
    
    <!-- Campos ocultos para dados do produto físico -->
    <input type="hidden" id="hidden_tipo_produto" value="<?= htmlspecialchars($produto['tipo_produto'] ?? 'digital', ENT_QUOTES, 'UTF-8'); ?>">
    <input type="hidden" id="hidden_metodos_pagamento" value="<?= htmlspecialchars($produto['metodos_pagamento'] ?? 'todos', ENT_QUOTES, 'UTF-8'); ?>">
    
    <div class="container">
        <?php if (!empty($checkout_banner)): ?>
        <div style="text-align: center; margin-bottom: 20px; width: 100%;">
            <img src="<?= htmlspecialchars($checkout_banner); ?>" alt="Banner" style="max-width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
        </div>
        <?php endif; ?>
        
        <!-- Detalhes do Produto -->
        <div id="product-details">
            <?php 
            // Verificar se a imagem do produto existe (campo vazio ou apenas espaços)
            $imagem_produto = isset($produto['imagem']) ? trim($produto['imagem']) : '';
            // Só exibir imagem se não estiver vazia, não for apenas espaços e for uma URL válida
            // Se estiver vazia, NÃO exibir nada (nem imagem, nem ícone, nem texto)
            if (!empty($imagem_produto) && $imagem_produto !== '' && strlen($imagem_produto) > 0 && filter_var($imagem_produto, FILTER_VALIDATE_URL)): 
            ?>
            <img id="imagem-produto" src="<?= htmlspecialchars($imagem_produto); ?>" alt="" onerror="this.style.display='none'; this.alt=''; this.src='';">
            <?php else: ?>
            <!-- Imagem do produto desativada - não exibir nada -->
            <?php endif; ?>
            <!-- Se imagem estiver desativada, não exibir nada - apenas o banner será mostrado -->
            <div>
                <h2 id="titulo-produto"><?= htmlspecialchars($produto['nome']); ?></h2>
                <p id="descricao-produto"><?= htmlspecialchars($produto['descricao']); ?></p>
                <?php if (!empty($produto['preco_original']) && $produto['preco_original'] > 0): ?>
                <p id="product-discount">R$ <span id="preco-original"><?= number_format(floatval($produto['preco_original']), 2, ',', '.'); ?></span></p>
                <?php endif; ?>
                <p id="product-price">Por R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></p>
                <input type="hidden" id="link-entregavel" value="<?= htmlspecialchars($produto['link_entregavel']); ?>">
            </div>
        </div>
        
        <!-- Campos ocultos globais para persistência de dados (acessíveis ao JavaScript) -->
        <div id="checkout-data-store" style="display:none;">
            <input type="hidden" id="global_produto_id" value="<?= htmlspecialchars($safe_prod_id, ENT_QUOTES, 'UTF-8'); ?>">
            <input type="hidden" id="global_afiliado_id" value="<?= htmlspecialchars($safe_ref_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>">
        </div>
        
        <!-- Campos ocultos para compatibilidade (mantidos para não quebrar código existente) -->
        <input type="hidden" id="hidden_produto_id" value="<?= htmlspecialchars($safe_prod_id, ENT_QUOTES, 'UTF-8'); ?>">
        <input type="hidden" id="hidden_afiliado_id" value="<?= htmlspecialchars($safe_ref_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>">
        
        <!-- Barra de Progresso -->
        <div class="progress-container">
            <div class="progress-step">
                <div class="progress-bullet active"></div>
                <span class="progress-label">Dados</span>
            </div>
            <div class="progress-step">
                <div class="progress-bullet active"></div>
                <span class="progress-label">Pagamento</span>
            </div>
            <div class="progress-step">
                <div class="progress-bullet"></div>
                <span class="progress-label">Acesso</span>
            </div>
        </div>
        
        <h2 class="title">Pagamento Seguro</h2>
        <p class="subtitle">Selecione a forma de pagamento desejada</p>
        
        <!-- Abas de Pagamento (Dinâmico baseado em gateways ativos) -->
        <div class="tabs">
            <?php if ($mp_on): ?>
            <div id="mercadopago-cartao-tab" class="tab <?= $primeira_aba === 'mercadopago' ? 'active' : ''; ?>" onclick="showTab('mercadopago-cartao')">
                <i class="fas fa-credit-card"></i> <span>Cartão (MP)</span>
            </div>
            <div id="mercadopago-pix-tab" class="tab" onclick="showTab('mercadopago-pix')">
                <i class="fas fa-qrcode"></i> <span>PIX (MP)</span>
            </div>
            <?php endif; ?>
            
            <?php if ($stripe_on): ?>
            <div id="stripe-tab" class="tab <?= $primeira_aba === 'stripe' ? 'active' : ''; ?>" onclick="showTab('stripe')">
                <i class="fab fa-stripe"></i> <span>Stripe</span>
            </div>
            <?php endif; ?>
            
            <?php if ($paypal_on): ?>
            <div id="paypal-tab" class="tab <?= $primeira_aba === 'paypal' ? 'active' : ''; ?>" onclick="showTab('paypal')">
                <i class="fab fa-paypal"></i> <span>PayPal</span>
            </div>
            <?php endif; ?>
            
            <?php if ($pagarme_on): ?>
            <div id="pagarme-cartao-tab" class="tab <?= $primeira_aba === 'pagarme' ? 'active' : ''; ?>" onclick="showTab('pagarme-cartao')">
                <i class="fas fa-credit-card"></i> <span>Cartão (PM)</span>
            </div>
            <div id="pagarme-pix-tab" class="tab" onclick="showTab('pagarme-pix')">
                <i class="fas fa-qrcode"></i> <span>PIX (PM)</span>
            </div>
            <div id="pagarme-boleto-tab" class="tab" onclick="showTab('pagarme-boleto')">
                <i class="fas fa-barcode"></i> <span>Boleto (PM)</span>
            </div>
            <?php endif; ?>
            
            <?php if ($mp_on): ?>
            <div id="mercadopago-boleto-tab" class="tab" onclick="showTab('mercadopago-boleto')">
                <i class="fas fa-barcode"></i> <span>Boleto (MP)</span>
            </div>
            <?php endif; ?>
        </div>
        
        <!-- ============================================================
             ABA: CARTÃO (MERCADO PAGO)
             ============================================================ -->
        <?php if ($mercadopago_ativado): ?>
        <div id="mercadopago-cartao" class="tab-content <?= $primeira_aba === 'mercadopago' ? 'active' : ''; ?>" style="<?= $primeira_aba === 'mercadopago' ? 'display: block !important;' : 'display: none;'; ?>">
            <div style="text-align:right; margin-bottom:10px; font-size:12px; color:#888;">
                Processado por <img src="/img/mercadopago.svg" alt="Mercado Pago" style="height:18px; vertical-align:middle; filter: brightness(200%);"/>
            </div>
            
            <form id="form-card-mp" onsubmit="return false;">
                <!-- Campos ocultos críticos para preservar produto_id e afiliado_id no submit -->
                <input type="hidden" name="produto_id" id="form_produto_id" value="<?= htmlspecialchars($safe_produto_id, ENT_QUOTES, 'UTF-8'); ?>">
                <input type="hidden" name="ref" id="form_afiliado_id" value="<?= htmlspecialchars($safe_afiliado_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>">
                
                <div class="form-group">
                    <div id="form-checkout__cardNumber" style="width: 100% !important; height: 50px !important;"></div>
                </div>
                <div class="form-group" style="display:flex !important; gap:10px !important;">
                    <div id="form-checkout__expirationDate" style="flex:1 !important; height: 50px !important;"></div>
                    <div id="form-checkout__securityCode" style="flex:1 !important; height: 50px !important;"></div>
                </div>
                <div class="form-group">
                    <input type="text" id="form-checkout__cardholderName" placeholder="Nome do Titular do Cartão" />
                </div>
                
                <div class="form-group" style="display: none;">
                    <input type="email" id="form-checkout__cardholderEmail" value="" />
                </div>
                
                <!-- Campos ocultos necessários (OBRIGATÓRIOS para o SDK V2) -->
                <div class="form-group" style="display: none;">
                    <select id="form-checkout__identificationType"></select>
                    <input type="text" id="form-checkout__identificationNumber" placeholder="CPF" />
                    <select id="form-checkout__issuer"></select>
                </div>
                
                <div class="form-group">
                    <label>Parcelas</label>
                    <select id="form-checkout__installments">
                        <option value="">Carregando parcelas...</option>
                    </select>
                </div>
                
                <?php if ($numero_de_adicionais > 0 && !empty($produtos_adicionais)): ?>
                <div class="adicionais-info" style="margin-top:25px; display: block;">
                    <h3 class="title" style="font-size:16px; color:#ffca28; text-align:left;">🎉 Ofertas Especiais</h3>
                </div>
                <?php foreach ($produtos_adicionais as $adicional): ?>
                    <?php if (!empty($adicional['nome'])): ?>
                    <div class="order-bump" style="display: block !important; visibility: visible !important;">
                        <h1><?= htmlspecialchars($adicional['titulo_rosa'] ?? 'Oferta Especial'); ?></h1>
                        <div class="offer-details">
                            <label class="offer-label">
                                <input type="checkbox" class="offer-checkbox" name="produto_adicional[]" value="<?= htmlspecialchars($adicional['id']); ?>" data-preco="<?= floatval($adicional['preco_promocional'] ?? 0); ?>" data-nome="<?= htmlspecialchars($adicional['nome']); ?>">
                                <?php 
                                $imagem_url = '';
                                if (!empty($adicional['imagem_pa']) && trim($adicional['imagem_pa']) !== '') {
                                    $imagem_url = trim($adicional['imagem_pa']);
                                } elseif (!empty($adicional['imagem_produto']) && trim($adicional['imagem_produto']) !== '') {
                                    $imagem_url = trim($adicional['imagem_produto']);
                                } elseif (!empty($adicional['imagem']) && trim($adicional['imagem']) !== '') {
                                    $imagem_url = trim($adicional['imagem']);
                                }
                                
                                if ($imagem_url !== ''): 
                                ?>
                                <img src="<?= htmlspecialchars($imagem_url, ENT_QUOTES, 'UTF-8'); ?>" alt="<?= htmlspecialchars($adicional['nome'], ENT_QUOTES, 'UTF-8'); ?>" class="order-bump-image" loading="lazy">
                                <?php else: ?>
                                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 5px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-image" style="font-size: 20px; color: #aaa;"></i>
                                </div>
                                <?php endif; ?>
                                <div style="flex: 1;">
                                    <strong><?= htmlspecialchars($adicional['nome']); ?></strong>
                                    <?php if (!empty($adicional['preco_original']) && floatval($adicional['preco_original']) > 0 && floatval($adicional['preco_original']) > floatval($adicional['preco_promocional'])): ?>
                                    <p style="margin:2px 0 0 0; font-size:11px; text-decoration: line-through; opacity: 0.7;">De: R$ <?= number_format(floatval($adicional['preco_original']), 2, ',', '.'); ?></p>
                                    <?php endif; ?>
                                    <?php if (!empty($adicional['preco_promocional']) && floatval($adicional['preco_promocional']) > 0): ?>
                                    <p style="margin:2px 0 0 0; font-size:11px;">Por apenas: <span class="discount-price">R$ <?= number_format(floatval($adicional['preco_promocional']), 2, ',', '.'); ?></span></p>
                                    <?php else: ?>
                                    <p style="margin:2px 0 0 0; font-size:11px;">Adicionar ao pedido</p>
                                    <?php endif; ?>
                                    <?php if (!empty($adicional['link_pagina'])): ?>
                                    <a href="<?= htmlspecialchars($adicional['link_pagina']); ?>" target="_blank" class="btn-ver-pagina" style="display: inline-block; margin-top: 8px; padding: 6px 12px; background: #00c6ff; color: white; text-decoration: none; border-radius: 5px; font-size: 12px; font-weight: 600; transition: 0.3s;">
                                        <i class="fas fa-external-link-alt"></i> Ver Página
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </label>
                        </div>
                    </div>
                    <?php endif; ?>
                <?php endforeach; ?>
                <?php endif; ?>
                
                <?= gerarCamposEndereco('mp_cartao', $produto['checkout_text_color'], false); ?>
                
                <div class="total-container" id="total-container" style="display:none;">
                    <div id="resumo-pedido" class="resumo-pedido">
                        <h3>Resumo do Pedido</h3>
                        <ul id="resumo-lista"></ul>
                    </div>
                    <p style="text-align:right; margin:0;">Total: <span class="total-pedido">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
                </div>
                
                <button type="button" class="btn" id="btn-submit-mp-cartao">FINALIZAR COMPRA <i class="fas fa-lock"></i></button>
            </form>
            
            <button class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        
        <!-- ============================================================
             ABA: PIX
             ============================================================ -->
        <div id="mercadopago-pix" class="tab-content" style="display:none;">
            <div class="pix-info-container">
                <div class="pix-info-header"><i class="fas fa-clock"></i> Aprovação Imediata</div>
                <div>O código Pix tem validade de 30 minutos. O acesso será enviado para seu e-mail imediatamente.</div>
            </div>
            
            <?php include __DIR__ . '/../includes/order_bump.php'; ?>
            
            <?= gerarCamposEndereco('mp_pix', $produto['checkout_text_color'], false); ?>
            
            <div class="total-container" id="total-container-pix" style="display:none;">
                <div id="resumo-pedido" class="resumo-pedido">
                    <h3>Resumo</h3>
                    <ul id="resumo-lista-pix"></ul>
                </div>
                <p style="text-align:right; margin:0;">Total: <span class="total-pedido">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
            </div>
            
            <form id="form-pix-mp" onsubmit="return false;">
                <button type="button" id="btn-pix-mp" class="btn" style="background: linear-gradient(90deg, #00b09b, #96c93d);">GERAR PIX <i class="fas fa-qrcode"></i></button>
            </form>
            
            <button class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar
            </button>
        </div>
        <?php endif; ?>
        
        <!-- ============================================================
             ABA: STRIPE
             ============================================================ -->
        <?php if ($stripe_ativado): ?>
        <div id="stripe" class="tab-content <?= $primeira_aba === 'stripe' ? 'active' : ''; ?>" style="<?= $primeira_aba === 'stripe' ? 'display: block !important;' : 'display: none;'; ?>">
            <div style="text-align:right; margin-bottom:10px; font-size:12px; color:#888;">
                Processado por <i class="fab fa-stripe" style="font-size:18px; vertical-align:middle;"></i> Stripe
            </div>
            
            <form id="form-card-stripe" onsubmit="return false;">
                <input type="hidden" name="produto_id" value="<?= htmlspecialchars($safe_produto_id, ENT_QUOTES, 'UTF-8'); ?>">
                <input type="hidden" name="ref" value="<?= htmlspecialchars($safe_afiliado_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>">
                
                <div class="form-group">
                    <div id="card-element"></div>
                    <div id="card-errors" role="alert" style="color: #f44336; margin-top: 10px;"></div>
                </div>
                
                <?php if ($numero_de_adicionais > 0 && !empty($produtos_adicionais)): ?>
                <div class="adicionais-info" style="margin-top:25px; display: block;">
                    <h3 class="title" style="font-size:16px; color:#ffca28; text-align:left;">🎉 Ofertas Especiais</h3>
                </div>
                <?php foreach ($produtos_adicionais as $adicional): ?>
                    <?php if (!empty($adicional['nome'])): ?>
                    <div class="order-bump" style="display: block !important; visibility: visible !important;">
                        <h1><?= htmlspecialchars($adicional['titulo_rosa'] ?? 'Oferta Especial'); ?></h1>
                        <div class="offer-details">
                            <label class="offer-label">
                                <input type="checkbox" class="offer-checkbox" name="produto_adicional[]" value="<?= htmlspecialchars($adicional['id']); ?>" data-preco="<?= floatval($adicional['preco_promocional'] ?? 0); ?>" data-nome="<?= htmlspecialchars($adicional['nome']); ?>">
                                <?php 
                                $imagem_url = '';
                                if (!empty($adicional['imagem_pa']) && trim($adicional['imagem_pa']) !== '') {
                                    $imagem_url = trim($adicional['imagem_pa']);
                                } elseif (!empty($adicional['imagem_produto']) && trim($adicional['imagem_produto']) !== '') {
                                    $imagem_url = trim($adicional['imagem_produto']);
                                } elseif (!empty($adicional['imagem']) && trim($adicional['imagem']) !== '') {
                                    $imagem_url = trim($adicional['imagem']);
                                }
                                
                                if ($imagem_url !== ''): 
                                ?>
                                <img src="<?= htmlspecialchars($imagem_url, ENT_QUOTES, 'UTF-8'); ?>" alt="<?= htmlspecialchars($adicional['nome'], ENT_QUOTES, 'UTF-8'); ?>" class="order-bump-image" loading="lazy">
                                <?php else: ?>
                                <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 5px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-image" style="font-size: 20px; color: #aaa;"></i>
                                </div>
                                <?php endif; ?>
                                <div style="flex: 1;">
                                    <strong><?= htmlspecialchars($adicional['nome']); ?></strong>
                                    <?php if (!empty($adicional['preco_original']) && floatval($adicional['preco_original']) > 0 && floatval($adicional['preco_original']) > floatval($adicional['preco_promocional'])): ?>
                                    <p style="margin:2px 0 0 0; font-size:11px; text-decoration: line-through; opacity: 0.7;">De: R$ <?= number_format(floatval($adicional['preco_original']), 2, ',', '.'); ?></p>
                                    <?php endif; ?>
                                    <?php if (!empty($adicional['preco_promocional']) && floatval($adicional['preco_promocional']) > 0): ?>
                                    <p style="margin:2px 0 0 0; font-size:11px;">Por apenas: <span class="discount-price">R$ <?= number_format(floatval($adicional['preco_promocional']), 2, ',', '.'); ?></span></p>
                                    <?php else: ?>
                                    <p style="margin:2px 0 0 0; font-size:11px;">Adicionar ao pedido</p>
                                    <?php endif; ?>
                                    <?php if (!empty($adicional['link_pagina'])): ?>
                                    <a href="<?= htmlspecialchars($adicional['link_pagina']); ?>" target="_blank" class="btn-ver-pagina" style="display: inline-block; margin-top: 8px; padding: 6px 12px; background: #00c6ff; color: white; text-decoration: none; border-radius: 5px; font-size: 12px; font-weight: 600; transition: 0.3s;">
                                        <i class="fas fa-external-link-alt"></i> Ver Página
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </label>
                        </div>
                    </div>
                    <?php endif; ?>
                <?php endforeach; ?>
                <?php endif; ?>
                
                <div class="total-container" id="total-container-stripe" style="display:none;">
                    <div id="resumo-pedido-stripe" class="resumo-pedido">
                        <h3>Resumo do Pedido</h3>
                        <ul id="resumo-lista-stripe"></ul>
                    </div>
                    <p style="text-align:right; margin:0;">Total: <span class="total-pedido-stripe">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
                </div>
                
                <button type="button" class="btn" id="btn-submit-stripe">FINALIZAR COMPRA <i class="fas fa-lock"></i></button>
            </form>
            
            <button class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        <?php endif; ?>
        
        <!-- ============================================================
             ABA: PAYPAL
             ============================================================ -->
        <?php if ($paypal_ativado): ?>
        <div id="paypal" class="tab-content <?= $primeira_aba === 'paypal' ? 'active' : ''; ?>" style="<?= $primeira_aba === 'paypal' ? 'display: block !important;' : 'display: none;'; ?>">
            <div class="pix-info-container">
                <div class="pix-info-header"><i class="fab fa-paypal"></i> Pagamento via PayPal</div>
                <div>Você será redirecionado para o PayPal para concluir o pagamento de forma segura.</div>
            </div>
            
            <?php include __DIR__ . '/../includes/order_bump.php'; ?>
            
            <div class="total-container" id="total-container-paypal" style="display:none;">
                <div id="resumo-pedido-paypal" class="resumo-pedido">
                    <h3>Resumo do Pedido</h3>
                    <ul id="resumo-lista-paypal"></ul>
                </div>
                <p style="text-align:right; margin:0;">Total: <span class="total-pedido-paypal">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
            </div>
            
            <div id="paypal-button-container"></div>
            
            <button type="button" class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        <?php endif; ?>
        
        <!-- ============================================================
             ABA: CARTÃO PAGAR.ME
             ============================================================ -->
        <?php if ($pagarme_on): ?>
        <div id="pagarme-cartao" class="tab-content <?= $primeira_aba === 'pagarme' ? 'active' : ''; ?>" style="<?= $primeira_aba === 'pagarme' ? 'display: block !important;' : 'display: none;'; ?>">
            <div style="text-align:right; margin-bottom:10px; font-size:12px; color:#888;">
                Processado por <i class="fas fa-credit-card" style="font-size:18px; vertical-align:middle;"></i> Pagar.me
            </div>
            
            <form id="form-card-pagarme" onsubmit="return false;">
                <input type="hidden" name="produto_id" value="<?= htmlspecialchars($safe_produto_id, ENT_QUOTES, 'UTF-8'); ?>">
                <input type="hidden" name="ref" value="<?= htmlspecialchars($safe_afiliado_id ?? 0, ENT_QUOTES, 'UTF-8'); ?>">
                
                <div class="form-group">
                    <label>Número do Cartão</label>
                    <input type="text" id="pagarme-card-number" placeholder="0000 0000 0000 0000" maxlength="19" />
                </div>
                <div class="form-group" style="display:flex !important; gap:10px !important;">
                    <div style="flex:1;">
                        <label>Validade</label>
                        <input type="text" id="pagarme-card-expiry" placeholder="MM/AA" maxlength="5" />
                    </div>
                    <div style="flex:1;">
                        <label>CVV</label>
                        <input type="text" id="pagarme-card-cvv" placeholder="123" maxlength="4" />
                    </div>
                </div>
                <div class="form-group">
                    <label>Nome no Cartão</label>
                    <input type="text" id="pagarme-card-name" placeholder="NOME COMPLETO" />
                </div>
                <div class="form-group">
                    <label>CPF</label>
                    <input type="text" id="pagarme-card-cpf" placeholder="000.000.000-00" maxlength="14" />
                </div>
                
                <?php if ($numero_de_adicionais > 0 && !empty($produtos_adicionais)): ?>
                <?php include __DIR__ . '/../includes/order_bump.php'; ?>
                <?php endif; ?>
                
                <?= gerarCamposEndereco('pagarme_cartao', $produto['checkout_text_color'], false); ?>
                
                <div class="total-container" id="total-container-pagarme-cartao" style="display:none;">
                    <div id="resumo-pedido-pagarme-cartao" class="resumo-pedido">
                        <h3>Resumo do Pedido</h3>
                        <ul id="resumo-lista-pagarme-cartao"></ul>
                    </div>
                    <p style="text-align:right; margin:0;">Total: <span class="total-pedido-pagarme-cartao">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
                </div>
                
                <button type="button" class="btn" id="btn-submit-pagarme-cartao">FINALIZAR COMPRA <i class="fas fa-lock"></i></button>
            </form>
            
            <button type="button" class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        
        <!-- ============================================================
             ABA: PIX PAGAR.ME
             ============================================================ -->
        <div id="pagarme-pix" class="tab-content" style="display:none;">
            <div class="pix-info-container">
                <div class="pix-info-header"><i class="fas fa-clock"></i> Aprovação Imediata</div>
                <div>O código Pix tem validade de 30 minutos. O acesso será enviado para seu e-mail imediatamente.</div>
            </div>
            
            <?php if ($numero_de_adicionais > 0 && !empty($produtos_adicionais)): ?>
            <?php include __DIR__ . '/../includes/order_bump.php'; ?>
            <?php endif; ?>
            
            <?= gerarCamposEndereco('pagarme_pix', $produto['checkout_text_color'], false); ?>
            
            <div class="total-container" id="total-container-pagarme-pix" style="display:none;">
                <div id="resumo-pedido-pagarme-pix" class="resumo-pedido">
                    <h3>Resumo</h3>
                    <ul id="resumo-lista-pagarme-pix"></ul>
                </div>
                <p style="text-align:right; margin:0;">Total: <span class="total-pedido-pagarme-pix">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
            </div>
            
            <form id="form-pix-pagarme" onsubmit="return false;">
                <button type="button" id="btn-pix-pagarme" class="btn" style="background: linear-gradient(90deg, #00b09b, #96c93d);">GERAR PIX <i class="fas fa-qrcode"></i></button>
            </form>
            
            <button type="button" class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        <?php endif; ?>
        
        <!-- ============================================================
             ABA: BOLETO MERCADO PAGO
             ============================================================ -->
        <?php if ($mercadopago_ativado): ?>
        <div id="mercadopago-boleto" class="tab-content" style="display:none;">
            <div class="pix-info-container">
                <div class="pix-info-header"><i class="fas fa-barcode"></i> Pagamento via Boleto</div>
                <div>O boleto tem validade de 3 dias úteis. O acesso será enviado para seu e-mail após a confirmação do pagamento.</div>
            </div>
            
            <?php include __DIR__ . '/../includes/order_bump.php'; ?>
            
            <!-- Campo CPF para Boleto (Obrigatório) -->
            <div class="form-group" style="margin-top: 20px; margin-bottom: 20px;">
                <label for="cpf_boleto_mp" style="display: block; margin-bottom: 8px; font-weight: 600; color: <?= $produto['checkout_text_color']; ?>;">
                    <i class="fas fa-id-card"></i> CPF (Obrigatório para Boleto)
                </label>
                <input type="text" id="cpf_boleto_mp" name="cpf_boleto_mp" placeholder="000.000.000-00" maxlength="14" class="cpf-input" required style="width: 100%; padding: 12px; border: 2px solid #00c6ff; border-radius: 8px; font-size: 16px;">
                <div class="error-message" id="error-cpf_boleto_mp"></div>
            </div>
            
            <?= gerarCamposEndereco('mp_boleto', $produto['checkout_text_color'], true); ?>
            
            <div class="total-container" id="total-container-mercadopago-boleto" style="display:none;">
                <div id="resumo-pedido-mercadopago-boleto" class="resumo-pedido">
                    <h3>Resumo</h3>
                    <ul id="resumo-lista-mercadopago-boleto"></ul>
                </div>
                <p style="text-align:right; margin:0;">Total: <span class="total-pedido-mercadopago-boleto">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
            </div>
            
            <form id="form-boleto-mp" onsubmit="return false;">
                <button type="button" id="btn-boleto-mp" class="btn" style="background: linear-gradient(90deg, #009846, #00A85A);">GERAR BOLETO <i class="fas fa-barcode"></i></button>
            </form>
            
            <button type="button" class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        <?php endif; ?>
        
        <!-- ============================================================
             ABA: BOLETO PAGAR.ME
             ============================================================ -->
        <?php if ($pagarme_on): ?>
        <div id="pagarme-boleto" class="tab-content" style="display:none;">
            <div class="pix-info-container">
                <div class="pix-info-header"><i class="fas fa-barcode"></i> Pagamento via Boleto</div>
                <div>O boleto tem validade de 3 dias úteis. O acesso será enviado para seu e-mail após a confirmação do pagamento.</div>
            </div>
            
            <?php if ($numero_de_adicionais > 0 && !empty($produtos_adicionais)): ?>
            <?php include __DIR__ . '/../includes/order_bump.php'; ?>
            <?php endif; ?>
            
            <?= gerarCamposEndereco('pagarme_boleto', $produto['checkout_text_color'], true); ?>
            
            <div class="total-container" id="total-container-pagarme-boleto" style="display:none;">
                <div id="resumo-pedido-pagarme-boleto" class="resumo-pedido">
                    <h3>Resumo</h3>
                    <ul id="resumo-lista-pagarme-boleto"></ul>
                </div>
                <p style="text-align:right; margin:0;">Total: <span class="total-pedido-pagarme-boleto">R$ <?= number_format(floatval($produto['preco_atual']), 2, ',', '.'); ?></span></p>
            </div>
            
            <form id="form-boleto-pagarme" onsubmit="return false;">
                <button type="button" id="btn-boleto-pagarme" class="btn" style="background: linear-gradient(90deg, #009846, #00A85A);">GERAR BOLETO <i class="fas fa-barcode"></i></button>
            </form>
            
            <button type="button" class="btn-back" onclick="voltarParaDadosPessoais()">
                <i class="fas fa-arrow-left"></i> Voltar para Dados
            </button>
        </div>
        <?php endif; ?>
        
    </div>
    
    <!-- Popup de Processamento -->
    <div id="processing-popup" class="popup-overlay" style="display:none; pointer-events:none;">
        <div class="popup-content">
            <p style="font-weight:bold; margin-bottom:15px; font-size:18px;">Processando...</p>
            <img src="/../img/loading.gif" alt="Carregando" style="width:50px;">
        </div>
    </div>
    
    <!-- Scripts -->
    <!-- Cache-busting para garantir que o navegador carregue o JS atualizado -->
    <script src="/views/js/checkout.js?v=<?= htmlspecialchars((string) @filemtime(__DIR__ . '/js/checkout.js'), ENT_QUOTES, 'UTF-8'); ?>"></script>
    
    <script>
        // ============================================================
        // INICIALIZAÇÃO VIACEP E MÁSCARAS PARA CAMPOS
        // ============================================================
        document.addEventListener('DOMContentLoaded', function() {
            const tipoProduto = document.getElementById('hidden_tipo_produto')?.value;
            const sufixos = ['mp_cartao', 'mp_pix', 'mp_boleto', 'pagarme_cartao', 'pagarme_pix', 'pagarme_boleto'];
            
            // Máscara de CPF para boleto
            const cpfBoletoInput = document.getElementById('cpf_boleto_mp');
            if (cpfBoletoInput) {
                cpfBoletoInput.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 11) value = value.substring(0, 11);
                    if (value.length > 9) {
                        value = value.substring(0, 9) + '-' + value.substring(9);
                    }
                    if (value.length > 6) {
                        value = value.substring(0, 6) + '.' + value.substring(6);
                    }
                    if (value.length > 3) {
                        value = value.substring(0, 3) + '.' + value.substring(3);
                    }
                    e.target.value = value;
                });
            }
            
            // Para cada sufixo, inicializar ViaCEP
            sufixos.forEach(sufixo => {
                const cepInput = document.getElementById('input_cep_' + sufixo);
                if (!cepInput) return;
                
                const ruaInput = document.getElementById('input_logradouro_' + sufixo);
                const bairroInput = document.getElementById('input_bairro_' + sufixo);
                const cidadeInput = document.getElementById('input_cidade_' + sufixo);
                const estadoInput = document.getElementById('input_estado_' + sufixo);
                const numeroInput = document.getElementById('input_numero_' + sufixo);
                
                // Máscara CEP
                cepInput.addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, '');
                    if (value.length > 5) {
                        value = value.substring(0, 5) + '-' + value.substring(5, 8);
                    }
                    e.target.value = value;
                    
                    // Buscar endereço quando CEP completo
                    if (value.length === 9) {
                        buscarCEP(value.replace(/\D/g, ''), ruaInput, bairroInput, cidadeInput, estadoInput, numeroInput);
                    }
                });
                
                // Máscara UF (sempre maiúsculo)
                if (estadoInput) {
                    estadoInput.addEventListener('input', function(e) {
                        e.target.value = e.target.value.toUpperCase();
                    });
                }
            });
            
            function buscarCEP(cep, ruaInput, bairroInput, cidadeInput, estadoInput, numeroInput) {
                if (cep.length !== 8) return;
                
                fetch(`https://viacep.com.br/ws/${cep}/json/`)
                    .then(res => res.json())
                    .then(data => {
                        if (!data.erro && data.cep) {
                            if (ruaInput) ruaInput.value = data.logradouro || '';
                            if (bairroInput) bairroInput.value = data.bairro || '';
                            if (cidadeInput) cidadeInput.value = data.localidade || '';
                            if (estadoInput) estadoInput.value = (data.uf || '').toUpperCase();
                            
                            // Focar no campo número após preencher endereço
                            if (numeroInput) numeroInput.focus();
                        } else {
                            console.warn('CEP não encontrado:', cep);
                        }
                    })
                    .catch(err => {
                        console.error('Erro ao buscar CEP:', err);
                    });
            }
        });
        
        // ============================================================
        // VARIÁVEIS GLOBAIS
        // ============================================================
        let precoBase = <?= floatval($produto['preco_atual']); ?>;
        let totalAtual = precoBase;
        let produtosSelecionados = {};
        
        // ============================================================
        // FUNÇÃO: ATUALIZAR TOTAL COM ORDER BUMPS
        // ============================================================
        function atualizarTotal(checkbox) {
            const precoAdicional = parseFloat(checkbox.getAttribute('data-preco'));
            const produtoId = checkbox.getAttribute('value');
            const produtoNome = checkbox.getAttribute('data-nome');
            
            if (checkbox.checked) {
                totalAtual += precoAdicional;
                produtosSelecionados[produtoId] = { nome: produtoNome, preco: precoAdicional };
            } else {
                totalAtual -= precoAdicional;
                delete produtosSelecionados[produtoId];
            }
            
            // Atualiza total visualmente
            document.querySelectorAll('.total-pedido, .total-pedido-stripe, .total-pedido-paypal').forEach(el => {
                el.innerText = 'R$ ' + totalAtual.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
            });
            
            // Mostra/Esconde resumo
            const displayStyle = Object.keys(produtosSelecionados).length > 0 ? 'block' : 'none';
            ['total-container', 'total-container-pix', 'total-container-stripe', 'total-container-paypal'].forEach(id => {
                const el = document.getElementById(id);
                if (el) el.style.display = displayStyle;
            });
            
            // Gera lista
            const resumoLista = document.getElementById('resumo-lista');
            const resumoListaPix = document.getElementById('resumo-lista-pix');
            const resumoListaStripe = document.getElementById('resumo-lista-stripe');
            const resumoListaPaypal = document.getElementById('resumo-lista-paypal');
            
            let html = `<li>Principal: R$ ${precoBase.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</li>`;
            for (const key in produtosSelecionados) {
                html += `<li>${produtosSelecionados[key].nome}: R$ ${produtosSelecionados[key].preco.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</li>`;
            }
            
            [resumoLista, resumoListaPix, resumoListaStripe, resumoListaPaypal].forEach(el => {
                if (el) el.innerHTML = html;
            });
            
            // Sincroniza abas
            const valor = checkbox.value;
            document.querySelectorAll(`.offer-checkbox[value="${valor}"]`).forEach(el => {
                if (el !== checkbox) el.checked = checkbox.checked;
            });
        }
        
        // ============================================================
        // FUNÇÃO: SHOW TAB (ALTERNAR ENTRE ABAS)
        // ============================================================
        window.showTab = function(tab) {
            // Remover active de todos os tabs
            document.querySelectorAll('.tab').forEach(t => {
                t.classList.remove('active');
            });
            
            // Esconder todos os conteúdos
            document.querySelectorAll('.tab-content').forEach(c => {
                c.style.display = 'none';
                c.classList.remove('active');
            });
            
            // Ativar o tab clicado
            const tabElement = document.getElementById(tab + '-tab');
            if (tabElement) {
                tabElement.classList.add('active');
            }
            
            // Mostrar o conteúdo correspondente
            const content = document.getElementById(tab);
            if (content) {
                content.style.display = 'block';
                content.classList.add('active');
            }
            
            // Inicializar gateway específico se necessário
            if (tab === 'stripe' && typeof Stripe !== 'undefined' && !window.stripeInstance) {
                inicializarStripe();
            }
        };
        
        // ============================================================
        // FUNÇÃO: INICIALIZAR STRIPE
        // ============================================================
        <?php if ($stripe_ativado): ?>
        function inicializarStripe() {
            const stripePublicKey = '<?= get_gateway_config("stripe", "public_key") ?: ""; ?>';
            if (!stripePublicKey) {
                console.error('Stripe public key não configurada');
                return;
            }
            
            window.stripeInstance = Stripe(stripePublicKey);
            const elements = window.stripeInstance.elements();
            const cardElement = elements.create('card', {
                style: {
                    base: {
                        fontSize: '16px',
                        color: '#424770',
                        '::placeholder': { color: '#aab7c4' }
                    }
                }
            });
            
            cardElement.mount('#card-element');
            window.cardElement = cardElement;
            
            cardElement.on('change', function(event) {
                const displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });
        }
        <?php endif; ?>
        
        // ============================================================
        // FUNÇÃO: PROCESSAR PAYPAL
        // ============================================================
        <?php if ($paypal_ativado): ?>
        function processarPayPal() {
            const urlParams = new URLSearchParams(window.location.search);
            const produtoId = urlParams.get('produto_id');
            const data = {
                transaction_amount: totalAtual,
                description: '<?= addslashes($produto['nome']); ?>',
                product: {
                    id: produtoId,
                    title: '<?= addslashes($produto['nome']); ?>',
                    description: '<?= addslashes($produto['descricao']); ?>',
                    link_entregavel: '<?= addslashes($produto['link_entregavel']); ?>',
                    price: precoBase
                },
                payer: {
                    full_name: getCookie('full-name') || '',
                    email: getCookie('email') || '',
                    phone: {
                        country_code: '55',
                        area_code: '',
                        number: getCookie('celular') || ''
                    },
                    identification: {
                        number: getCookie('cpf') || ''
                    }
                },
                additional_products: capturarProdutosAdicionais(),
                client_ip: getCookie('device-ip') || '',
                device_id: window.MP_DEVICE_SESSION_ID || null
            };
            
            fetch('/backend/process_payment_paypal.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                if (result.status === 'success' && result.approval_url) {
                    window.location.href = result.approval_url;
                } else {
                    alert(result.message || 'Erro ao processar pagamento PayPal');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao processar pagamento. Tente novamente.');
            });
        }
        <?php endif; ?>
        
        // ============================================================
        // FUNÇÃO: VOLTAR PARA DADOS PESSOAIS
        // ============================================================
        function voltarParaDadosPessoais() {
            const urlParams = new URLSearchParams(window.location.search);
            window.location.href = `/views/dados_pessoais.php?produto_id=${urlParams.get('produto_id')}`;
        }
        
        // ============================================================
        // INICIALIZAÇÃO: ORDER BUMPS
        // ============================================================
        document.querySelectorAll(".offer-checkbox").forEach(chk => {
            chk.addEventListener("change", function() {
                atualizarTotal(this);
            });
        });
        
        // ============================================================
        // INICIALIZAÇÃO: MERCADO PAGO
        // ============================================================
        <?php if ($mercadopago_ativado && !empty($mercadopago_public_key)): ?>
        (function() {
            // FALLBACK GLOBAL: Sistema de verificação periódica (independente do callback)
            let fallbackGlobalInterval = null;
            let tentativasFallbackGlobal = 0;
            const maxTentativasFallbackGlobal = 20; // 10 segundos (20 * 500ms)
            
            const iniciarFallbackGlobalCamposClicaveis = function() {
                if (fallbackGlobalInterval) return; // Já está rodando
                
                console.log('🔄 Iniciando sistema de fallback GLOBAL para campos clicáveis...');
                
                fallbackGlobalInterval = setInterval(() => {
                    tentativasFallbackGlobal++;
                    
                    if (window.garantirCamposClicaveis) {
                        const iframesEncontrados = window.garantirCamposClicaveis();
                        
                        // Se encontrou iframes ou atingiu limite de tentativas, para o intervalo
                        if (iframesEncontrados > 0 || tentativasFallbackGlobal >= maxTentativasFallbackGlobal) {
                            clearInterval(fallbackGlobalInterval);
                            fallbackGlobalInterval = null;
                            tentativasFallbackGlobal = 0;
                            
                            if (iframesEncontrados > 0) {
                                console.log(`✅ Fallback Global: ${iframesEncontrados} iframe(s) configurado(s)`);
                            }
                        }
                    }
                }, 500); // Verifica a cada 500ms
            };
            
            // Iniciar fallback global imediatamente (antes mesmo do cardForm ser montado)
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => {
                    setTimeout(iniciarFallbackGlobalCamposClicaveis, 1000);
                });
            } else {
                setTimeout(iniciarFallbackGlobalCamposClicaveis, 1000);
            }
            
            // ============================================================
            // FUNÇÃO REFATORADA: INICIALIZAÇÃO DO MERCADO PAGO
            // Com tratamento de erros robusto e callbacks corretos
            // ============================================================
            function inicializarMercadoPago() {
                console.log('🚀 [DEBUG] Tentando iniciar Mercado Pago...');
                
                // GUARD CLAUSE: Verificar se a aba do Mercado Pago está ativa
                const creditCardTab = document.getElementById('mercadopago-cartao');
                if (!creditCardTab) {
                    console.log('⏳ [DEBUG] Aba do Mercado Pago não encontrada, aguardando...');
                    setTimeout(inicializarMercadoPago, 500);
                    return;
                }
                
                const computedStyle = window.getComputedStyle(creditCardTab);
                const isDisplayed = computedStyle.display !== 'none';
                const isActive = creditCardTab.classList.contains('active');
                const isOffsetParentNotNull = creditCardTab.offsetParent !== null;
                
                // Se a aba não estiver visível, não inicializar (evita conflito com Stripe/PayPal)
                if (!isDisplayed && !isActive && !isOffsetParentNotNull) {
                    console.log('⏳ [DEBUG] Aba do Mercado Pago não está visível, aguardando...');
                    setTimeout(inicializarMercadoPago, 500);
                    return;
                }
                
                // Verificar se outra aba está ativa (Stripe ou PayPal)
                const stripeTab = document.getElementById('stripe');
                const paypalTab = document.getElementById('paypal');
                const stripeActive = stripeTab && (window.getComputedStyle(stripeTab).display !== 'none' || stripeTab.classList.contains('active'));
                const paypalActive = paypalTab && (window.getComputedStyle(paypalTab).display !== 'none' || paypalTab.classList.contains('active'));
                
                if (stripeActive || paypalActive) {
                    console.log('⏸️ [DEBUG] Outro gateway está ativo (Stripe/PayPal), não inicializando Mercado Pago');
                    return;
                }
                
                console.log('✅ [DEBUG] Aba do Mercado Pago confirmada como ativa, prosseguindo...');
                
                // ETAPA 1: Verificar se window.mp existe
                if (!window.mp) {
                    console.warn('⚠️ [DEBUG] window.mp ainda não está disponível, aguardando...');
                    setTimeout(inicializarMercadoPago, 500);
                    return;
                }
                console.log('✅ [DEBUG] window.mp encontrado');

                // ETAPA 2: Verificar se já foi inicializado
                if (window._mpCardForm) {
                    console.log('✅ [DEBUG] cardForm já foi inicializado');
                    return;
                }

                // ETAPA 3: Verificar se o método cardForm existe
                if (typeof window.mp.cardForm !== 'function') {
                    const erroMsg = 'ERRO CRÍTICO: window.mp.cardForm não é uma função. Verifique se o SDK do Mercado Pago foi carregado corretamente.';
                    console.error('❌ [DEBUG]', erroMsg);
                    alert(erroMsg);
                    return;
                }
                console.log('✅ [DEBUG] Método cardForm disponível');

                // ETAPA 4: Verificar se os containers existem no DOM e IDs estão corretos
                const formContainer = document.getElementById('form-card-mp');
                const cardNumberContainer = document.getElementById('form-checkout__cardNumber');
                const expirationDateContainer = document.getElementById('form-checkout__expirationDate');
                const securityCodeContainer = document.getElementById('form-checkout__securityCode');
                
                if (!formContainer) {
                    const erroMsg = 'ERRO CRÍTICO: Formulário #form-card-mp não encontrado no DOM!';
                    console.error('❌ [DEBUG]', erroMsg);
                    alert(erroMsg);
                    return;
                }
                
                // Verificar todos os containers necessários
                const containersRequeridos = {
                    'form-checkout__cardNumber': cardNumberContainer,
                    'form-checkout__expirationDate': expirationDateContainer,
                    'form-checkout__securityCode': securityCodeContainer
                };
                
                const containersFaltando = [];
                for (const [id, container] of Object.entries(containersRequeridos)) {
                    if (!container) {
                        containersFaltando.push(id);
                        console.error(`❌ [DEBUG] Container #${id} não encontrado no DOM!`);
                    } else {
                        console.log(`✅ [DEBUG] Container #${id} encontrado no DOM`);
                    }
                }
                
                if (containersFaltando.length > 0) {
                    const erroMsg = `ERRO CRÍTICO: Os seguintes containers não foram encontrados no DOM:\n\n${containersFaltando.join('\n')}\n\nVerifique se os IDs no HTML correspondem exatamente aos IDs no JavaScript.`;
                    console.error('❌ [DEBUG]', erroMsg);
                    alert(erroMsg);
                    return;
                }
                
                console.log('✅ [DEBUG] Todos os containers encontrados no DOM');
                
                // Log dos IDs que serão usados no cardForm (para debug)
                console.log('📋 [DEBUG] IDs que serão passados para mp.cardForm:', {
                    formId: 'form-card-mp',
                    cardNumber: 'form-checkout__cardNumber',
                    expirationDate: 'form-checkout__expirationDate',
                    securityCode: 'form-checkout__securityCode'
                });

                // ETAPA 5: Criar instância do cardForm com tratamento de erro robusto
                let cardForm = null;
                
                // Função auxiliar para formatar erros do Mercado Pago (pode ser Array ou Error)
                const formatarErroMercadoPago = (erro) => {
                    // Se for Array (típico do Mercado Pago quando há erros de validação)
                    if (Array.isArray(erro)) {
                        return JSON.stringify(erro, null, 2);
                    }
                    // Se for objeto Error padrão
                    if (erro && typeof erro === 'object' && erro.message) {
                        return erro.message + (erro.stack ? '\n\nStack Trace:\n' + erro.stack : '');
                    }
                    // Se for string
                    if (typeof erro === 'string') {
                        return erro;
                    }
                    // Fallback: converter para JSON
                    try {
                        return JSON.stringify(erro, null, 2);
                    } catch (e) {
                        return String(erro);
                    }
                };
                
                try {
                    console.log('🔄 [DEBUG] Criando instância do cardForm...');
                    const mp = window.mp;

                    cardForm = mp.cardForm({
                        amount: "<?= number_format($produto['preco_atual'], 2, '.', ''); ?>",
                        iframe: true,
                        form: {
                            id: "form-card-mp",
                            cardNumber: {
                                id: "form-checkout__cardNumber",
                                placeholder: "Número do cartão"
                            },
                            expirationDate: {
                                id: "form-checkout__expirationDate",
                                placeholder: "MM/AA"
                            },
                            securityCode: {
                                id: "form-checkout__securityCode",
                                placeholder: "CVV"
                            },
                            cardholderName: {
                                id: "form-checkout__cardholderName",
                                placeholder: "Nome do Titular do Cartão"
                            },
                            identificationType: {
                                id: "form-checkout__identificationType"
                            },
                            identificationNumber: {
                                id: "form-checkout__identificationNumber"
                            },
                            issuer: {
                                id: "form-checkout__issuer"
                            },
                            installments: {
                                id: "form-checkout__installments"
                            }
                        },
                        callbacks: {
                            // CALLBACK PRINCIPAL: Executado quando o formulário é montado
                            onFormMounted: error => {
                                if (error) {
                                    // ERRO EXPOSTO: Formatar erro (pode ser Array ou Error)
                                    const erroFormatado = formatarErroMercadoPago(error);
                                    const erroMsg = `ERRO AO MONTAR FORMULÁRIO MERCADO PAGO:\n\n${erroFormatado}\n\nVerifique:\n- Public Key está correta?\n- IDs dos campos estão corretos?\n- SDK do Mercado Pago foi carregado?`;
                                    
                                    console.error('❌ [DEBUG] Erro ao montar cardForm:', error);
                                    console.error('❌ [DEBUG] Tipo do erro:', Array.isArray(error) ? 'Array' : typeof error);
                                    console.error('❌ [DEBUG] Detalhes completos:', erroFormatado);
                                    
                                    // Exibir erro visível na tela
                                    const formContainer = document.getElementById('form-card-mp');
                                    if (formContainer) {
                                        // Escapar HTML para segurança
                                        const erroHtml = erroFormatado.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
                                        formContainer.innerHTML = `
                                            <div style="background: rgba(255, 0, 0, 0.1); border: 2px solid #f44336; padding: 20px; border-radius: 8px; color: #f44336; margin: 20px 0;">
                                                <h3 style="margin: 0 0 10px 0; color: #f44336;">❌ Erro ao Inicializar Formulário de Cartão</h3>
                                                <p style="margin: 0 0 10px 0;"><strong>Erro:</strong></p>
                                                <pre style="background: rgba(0,0,0,0.1); padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 11px; white-space: pre-wrap; word-wrap: break-word;">${erroHtml}</pre>
                                                <p style="margin: 10px 0 0 0; font-size: 12px;">Verifique a configuração do Mercado Pago no painel administrativo.</p>
                                            </div>
                                        `;
                                    }
                                    
                                    alert(erroMsg);
                                    return;
                                }
                                
                                console.log('✅ [DEBUG] cardForm montado com sucesso - Callback onFormMounted executado');
                                
                                // ============================================
                                // CONFIGURAÇÃO DOS CAMPOS DENTRO DO CALLBACK
                                // (Não usar setTimeout - usar callback real)
                                // ============================================
                                
                                // Função para configurar campos clicáveis
                                const configurarCamposClicaveis = () => {
                                    const camposIds = [
                                        'form-checkout__cardNumber',
                                        'form-checkout__expirationDate',
                                        'form-checkout__securityCode'
                                    ];
                                    
                                    let iframesEncontrados = 0;
                                    
                                    camposIds.forEach(campoId => {
                                        const campo = document.getElementById(campoId);
                                        if (!campo) {
                                            console.warn(`⚠️ [DEBUG] Container ${campoId} não encontrado`);
                                            return;
                                        }
                                        
                                        // Configurar container
                                        campo.style.setProperty('pointer-events', 'auto', 'important');
                                        campo.style.setProperty('z-index', '100', 'important');
                                        campo.style.setProperty('position', 'relative', 'important');
                                        campo.style.setProperty('overflow', 'visible', 'important');
                                        campo.style.setProperty('cursor', 'text', 'important');
                                        
                                        // Encontrar e configurar iframes
                                        const iframes = campo.querySelectorAll('iframe');
                                        iframes.forEach(iframe => {
                                            if (!iframe) return;
                                            
                                            iframesEncontrados++;
                                            
                                            // Configurar iframe para ser clicável
                                            iframe.style.setProperty('pointer-events', 'auto', 'important');
                                            iframe.style.setProperty('z-index', '100', 'important');
                                            iframe.style.setProperty('position', 'absolute', 'important');
                                            iframe.style.setProperty('top', '0', 'important');
                                            iframe.style.setProperty('left', '0', 'important');
                                            iframe.style.setProperty('width', '100%', 'important');
                                            iframe.style.setProperty('height', '100%', 'important');
                                            iframe.style.setProperty('cursor', 'text', 'important');
                                            iframe.style.setProperty('border', 'none', 'important');
                                            iframe.style.setProperty('background', 'transparent', 'important');
                                            iframe.style.setProperty('visibility', 'visible', 'important');
                                            iframe.style.setProperty('opacity', '1', 'important');
                                            
                                            console.log(`✅ [DEBUG] Iframe ${campoId} configurado`);
                                        });
                                        
                                        if (iframes.length > 0) {
                                            console.log(`✅ [DEBUG] ${campoId}: ${iframes.length} iframe(s) encontrado(s) e configurado(s)`);
                                        } else {
                                            console.warn(`⚠️ [DEBUG] ${campoId}: Nenhum iframe encontrado ainda`);
                                        }
                                    });
                                    
                                    return iframesEncontrados;
                                };
                                
                                // Executar configuração imediatamente (dentro do callback)
                                let iframesConfigurados = configurarCamposClicaveis();
                                console.log(`✅ [DEBUG] ${iframesConfigurados} iframe(s) configurado(s) imediatamente`);
                                
                                // Se não encontrou iframes, tentar novamente após pequeno delay
                                if (iframesConfigurados === 0) {
                                    console.log('🔄 [DEBUG] Nenhum iframe encontrado, tentando novamente em 500ms...');
                                    setTimeout(() => {
                                        iframesConfigurados = configurarCamposClicaveis();
                                        if (iframesConfigurados > 0) {
                                            console.log(`✅ [DEBUG] ${iframesConfigurados} iframe(s) encontrado(s) na segunda tentativa`);
                                        } else {
                                            console.warn('⚠️ [DEBUG] Ainda nenhum iframe encontrado. Verifique se o Mercado Pago injetou os campos.');
                                        }
                                    }, 500);
                                }
                                
                                // Observar mudanças no DOM para detectar iframes adicionados posteriormente
                                const formContainer = document.getElementById('form-card-mp');
                                if (formContainer) {
                                    const observer = new MutationObserver(() => {
                                        const novosIframes = configurarCamposClicaveis();
                                        if (novosIframes > iframesConfigurados) {
                                            console.log(`✅ [DEBUG] ${novosIframes - iframesConfigurados} novo(s) iframe(s) detectado(s) e configurado(s)`);
                                            iframesConfigurados = novosIframes;
                                        }
                                    });
                                    
                                    observer.observe(formContainer, {
                                        childList: true,
                                        subtree: true
                                    });
                                    
                                    console.log('✅ [DEBUG] MutationObserver configurado para detectar novos iframes');
                                }
                                
                                // Expor função globalmente para debug
                                window.garantirCamposClicaveis = configurarCamposClicaveis;
                                console.log('✅ [DEBUG] Função garantirCamposClicaveis() disponível globalmente');
                                
                            },
                            // CALLBACK DE ERRO: Executado quando há erro no cardForm
                            onError: error => {
                                // ERRO EXPOSTO: Formatar erro (pode ser Array ou Error)
                                const erroFormatado = formatarErroMercadoPago(error);
                                const erroMsg = `ERRO NO CARD FORM MERCADO PAGO:\n\n${erroFormatado}`;
                                
                                console.error('❌ [DEBUG] Erro no cardForm:', error);
                                console.error('❌ [DEBUG] Tipo do erro:', Array.isArray(error) ? 'Array' : typeof error);
                                console.error('❌ [DEBUG] Detalhes completos:', erroFormatado);
                                
                                // Exibir erro visível
                                const formContainer = document.getElementById('form-card-mp');
                                if (formContainer) {
                                    // Escapar HTML para segurança
                                    const erroHtml = erroFormatado.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
                                    formContainer.innerHTML = `
                                        <div style="background: rgba(255, 0, 0, 0.1); border: 2px solid #f44336; padding: 20px; border-radius: 8px; color: #f44336; margin: 20px 0;">
                                            <h3 style="margin: 0 0 10px 0; color: #f44336;">❌ Erro no Formulário de Cartão</h3>
                                            <p style="margin: 0 0 10px 0;"><strong>Erro:</strong></p>
                                            <pre style="background: rgba(0,0,0,0.1); padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 11px; white-space: pre-wrap; word-wrap: break-word;">${erroHtml}</pre>
                                        </div>
                                    `;
                                }
                                
                                alert(erroMsg);
                            }
                        }
                    });

                    console.log('✅ [DEBUG] Instância cardForm criada com sucesso');
                    
                } catch (e) {
                    // ERRO FATAL EXPOSTO: Formatar erro (pode ser Array ou Error)
                    const erroFormatado = formatarErroMercadoPago(e);
                    const erroMsg = `ERRO FATAL AO CRIAR CARD FORM:\n\n${erroFormatado}\n\nVerifique:\n- Public Key do Mercado Pago está correta?\n- SDK foi carregado?\n- IDs dos campos estão corretos?\n- Console do navegador para mais detalhes.`;
                    
                    console.error('❌ [DEBUG] ERRO FATAL ao criar cardForm:', e);
                    console.error('❌ [DEBUG] Tipo do erro:', Array.isArray(e) ? 'Array' : typeof e);
                    console.error('❌ [DEBUG] Detalhes completos:', erroFormatado);
                    
                    // Exibir erro visível na tela
                    const formContainer = document.getElementById('form-card-mp');
                    if (formContainer) {
                        // Escapar HTML para segurança
                        const erroHtml = erroFormatado.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
                        formContainer.innerHTML = `
                            <div style="background: rgba(255, 0, 0, 0.1); border: 2px solid #f44336; padding: 20px; border-radius: 8px; color: #f44336; margin: 20px 0;">
                                <h3 style="margin: 0 0 10px 0; color: #f44336;">❌ Erro Fatal ao Inicializar Mercado Pago</h3>
                                <p style="margin: 0 0 10px 0;"><strong>Erro:</strong></p>
                                <pre style="background: rgba(0,0,0,0.1); padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 11px; white-space: pre-wrap; word-wrap: break-word;">${erroHtml}</pre>
                                <p style="margin: 10px 0 0 0; font-size: 12px;">Verifique o console do navegador (F12) para mais detalhes.</p>
                            </div>
                        `;
                    }
                    
                    alert(erroMsg);
                    // NÃO atribuir window._mpCardForm se houve erro
                    return;
                }

                // ETAPA 6: Atribuir apenas se cardForm foi criado com sucesso
                if (cardForm) {
                    window._mpCardForm = cardForm;
                    console.log('✅ [DEBUG] window._mpCardForm atribuído com sucesso');
                } else {
                    console.error('❌ [DEBUG] cardForm é null/undefined - não foi atribuído');
                    alert('ERRO: cardForm não foi criado. Verifique o console para detalhes.');
                }
            }

            // ============================================================
            // FUNÇÃO REFATORADA: DETECÇÃO DE ABA ATIVA
            // Usa offsetParent para verificação real de visibilidade
            // ============================================================
            const startWhenVisible = () => {
                // Verificar qual aba está ativa - se for PIX ou Boleto, não tentar inicializar cartão
                const activeTabContent = document.querySelector('.tab-content.active');
                const activeTabId = activeTabContent ? activeTabContent.id : null;
                if (activeTabId && (activeTabId.includes('pix') || activeTabId.includes('boleto'))) {
                    // Usuário está em PIX ou Boleto, não tentar inicializar cartão
                    return;
                }
                
                const creditCardTab = document.getElementById('mercadopago-cartao');
                if (!creditCardTab) {
                    // Limitar tentativas - parar após 5 segundos (10 tentativas)
                    if (!window._startWhenVisibleAttempts) {
                        window._startWhenVisibleAttempts = 0;
                        window._startWhenVisibleTimeout = setTimeout(() => {
                            window._startWhenVisibleAttempts = 0;
                        }, 5000);
                    }
                    
                    if (window._startWhenVisibleAttempts >= 10) {
                        window._startWhenVisibleAttempts = 0;
                        if (window._startWhenVisibleTimeout) {
                            clearTimeout(window._startWhenVisibleTimeout);
                            window._startWhenVisibleTimeout = null;
                        }
                        return;
                    }
                    
                    window._startWhenVisibleAttempts++;
                    setTimeout(startWhenVisible, 500);
                    return;
                }
                
                // GUARD CLAUSE: Verificar se outra aba está ativa (Stripe ou PayPal)
                const stripeTab = document.getElementById('stripe');
                const paypalTab = document.getElementById('paypal');
                const stripeActive = stripeTab && (window.getComputedStyle(stripeTab).display !== 'none' || stripeTab.classList.contains('active'));
                const paypalActive = paypalTab && (window.getComputedStyle(paypalTab).display !== 'none' || paypalTab.classList.contains('active'));
                
                if (stripeActive || paypalActive) {
                    return;
                }
                
                // Verificação robusta de visibilidade
                const computedStyle = window.getComputedStyle(creditCardTab);
                const isDisplayed = computedStyle.display !== 'none';
                const isActive = creditCardTab.classList.contains('active');
                const hasInlineDisplay = creditCardTab.style.display && creditCardTab.style.display !== 'none';
                const isOffsetParentNotNull = creditCardTab.offsetParent !== null; // Verificação real de visibilidade
                
                // Verificar se o container do primeiro campo está visível (verificação mais confiável)
                const cardNumberContainer = document.getElementById('form-checkout__cardNumber');
                const isContainerVisible = cardNumberContainer && cardNumberContainer.offsetParent !== null;
                
                console.log('🔍 [DEBUG] Status da aba:', {
                    isDisplayed,
                    isActive,
                    hasInlineDisplay,
                    isOffsetParentNotNull,
                    isContainerVisible,
                    stripeActive,
                    paypalActive
                });
                
                // Se qualquer verificação indicar visibilidade E nenhum outro gateway estiver ativo, inicializar
                if ((isDisplayed || isActive || hasInlineDisplay || isOffsetParentNotNull || isContainerVisible) && !stripeActive && !paypalActive) {
                    // Resetar contador se encontrou
                    if (window._startWhenVisibleAttempts) {
                        window._startWhenVisibleAttempts = 0;
                    }
                    if (window._startWhenVisibleTimeout) {
                        clearTimeout(window._startWhenVisibleTimeout);
                        window._startWhenVisibleTimeout = null;
                    }
                    
                    inicializarMercadoPago();
                } else {
                    // Limitar tentativas - parar após 5 segundos (10 tentativas)
                    if (!window._startWhenVisibleAttempts) {
                        window._startWhenVisibleAttempts = 0;
                        window._startWhenVisibleTimeout = setTimeout(() => {
                            window._startWhenVisibleAttempts = 0;
                        }, 5000);
                    }
                    
                    if (window._startWhenVisibleAttempts >= 10) {
                        window._startWhenVisibleAttempts = 0;
                        if (window._startWhenVisibleTimeout) {
                            clearTimeout(window._startWhenVisibleTimeout);
                            window._startWhenVisibleTimeout = null;
                        }
                        return;
                    }
                    
                    window._startWhenVisibleAttempts++;
                    setTimeout(startWhenVisible, 500);
                }
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => {
                    setTimeout(startWhenVisible, 500);
                });
            } else {
                setTimeout(startWhenVisible, 500);
            }

            // Garante que ao clicar na aba de cartão, inicializa se ainda não tiver feito
            // COM GUARD CLAUSE: Só inicializa se a aba do MP estiver realmente ativa
            const originalShowTab = window.showTab;
            window.showTab = function(tab) {
                if (originalShowTab) originalShowTab(tab);
                
                // GUARD CLAUSE: Só processar se for a aba do Mercado Pago
                if (tab === 'mercadopago-cartao') {
                    // Verificar se a aba realmente está visível após a troca
                    setTimeout(() => {
                        const creditCardContent = document.getElementById('mercadopago-cartao');
                        if (!creditCardContent) return;
                        
                        const computedStyle = window.getComputedStyle(creditCardContent);
                        const isDisplayed = computedStyle.display !== 'none';
                        const isActive = creditCardContent.classList.contains('active');
                        
                        // Verificar se outro gateway não está ativo
                        const stripeTab = document.getElementById('stripe');
                        const paypalTab = document.getElementById('paypal');
                        const stripeActive = stripeTab && (window.getComputedStyle(stripeTab).display !== 'none' || stripeTab.classList.contains('active'));
                        const paypalActive = paypalTab && (window.getComputedStyle(paypalTab).display !== 'none' || paypalTab.classList.contains('active'));
                        
                        // Só inicializar se a aba do MP estiver visível E nenhum outro gateway estiver ativo
                        if ((isDisplayed || isActive) && !stripeActive && !paypalActive) {
                            if (!window._mpCardForm) {
                                console.log('✅ [DEBUG] Aba do Mercado Pago clicada, inicializando...');
                                inicializarMercadoPago();
                            } else {
                                // Se já inicializado, garantir que os campos estejam clicáveis
                                setTimeout(() => {
                                    if (window.garantirCamposClicaveis) {
                                        window.garantirCamposClicaveis();
                                    }
                                }, 100);
                                setTimeout(() => {
                                    if (window.garantirCamposClicaveis) {
                                        window.garantirCamposClicaveis();
                                    }
                                }, 1000);
                            }
                        } else {
                            console.log('⏸️ [DEBUG] Aba do Mercado Pago não está ativa ou outro gateway está ativo');
                        }
                    }, 100);
                }
            };
            
            // REFATORADO: Listener melhorado para detectar aba ativa corretamente
            // COM GUARD CLAUSE: Só inicializa se a aba do MP estiver realmente ativa
            document.addEventListener('click', function(e) {
                const creditCardTab = e.target.closest('#mercadopago-cartao-tab, [onclick*="mercadopago-cartao"], [data-tab="mercadopago-cartao"]');
                if (creditCardTab) {
                    setTimeout(() => {
                        const creditCardContent = document.getElementById('mercadopago-cartao');
                        if (!creditCardContent) return;
                        
                        // Verificação melhorada usando computed style
                        const computedStyle = window.getComputedStyle(creditCardContent);
                        const isDisplayed = computedStyle.display !== 'none';
                        const isActive = creditCardContent.classList.contains('active');
                        
                        // GUARD CLAUSE: Verificar se outro gateway não está ativo
                        const stripeTab = document.getElementById('stripe');
                        const paypalTab = document.getElementById('paypal');
                        const stripeActive = stripeTab && (window.getComputedStyle(stripeTab).display !== 'none' || stripeTab.classList.contains('active'));
                        const paypalActive = paypalTab && (window.getComputedStyle(paypalTab).display !== 'none' || paypalTab.classList.contains('active'));
                        
                        // Só inicializar se a aba do MP estiver visível E nenhum outro gateway estiver ativo
                        if ((isDisplayed || isActive) && !stripeActive && !paypalActive) {
                            if (!window._mpCardForm) {
                                console.log('✅ [DEBUG] Aba de cartão (Mercado Pago) clicada, inicializando...');
                                inicializarMercadoPago();
                            } else {
                                // Se já inicializado, garantir que campos estejam clicáveis
                                if (window.garantirCamposClicaveis) {
                                    window.garantirCamposClicaveis();
                                }
                            }
                        } else {
                            console.log('⏸️ [DEBUG] Aba do Mercado Pago não está ativa ou outro gateway está ativo');
                        }
                    }, 200);
                }
            });
        })();
        <?php endif; ?>
    </script>
</body>
</html>
