.psv-payment-form-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.psv-form-group {
    margin-bottom: 20px;
}

.psv-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.psv-form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.psv-pay-button {
    width: 100%;
    padding: 15px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.psv-pay-button:hover {
    background: #005a87;
}

.psv-pay-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.psv-response {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    display: none;
}

.psv-response.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.psv-response.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.psv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.psv-modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.psv-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.psv-payment-form-container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.psv-form-group {
    margin-bottom: 1.5rem;
}

.psv-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.psv-form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.psv-pay-button {
    width: 100%;
    padding: 1rem;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.psv-pay-button:hover {
    background: #005a87;
}

.psv-pay-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.psv-response {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    display: none;
}

.psv-response.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.psv-response.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.psv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.psv-modal-content {
    background: white;
    padding: 2rem;(function($) {
    'use strict';
    
    $(document).ready(function() {
        console.log('PSV Payment Script Loaded');
        console.log('Public Key:', psv_payment.public_key ? 'Set (first 10 chars: ' + psv_payment.public_key.substring(0, 10) + '...)' : 'NOT SET');
        console.log('AJAX URL:', psv_payment.ajax_url);
        
        // Initialize payment form
        const $form = $('#psv-payment-form');
        const $payButton = $('#psv-pay-button');
        const $response = $('#psv-payment-response');
        const $modal = $('#psv-payment-modal');
        
        if (!$form.length) {
            console.error('Payment form not found!');
            return;
        }
        
        console.log('Payment form found, setting up event handler');
        
        // Store original button text
        const originalButtonText = $payButton.text();
        $payButton.data('original-text', originalButtonText);
        
        $form.on('submit', function(e) {
            e.preventDefault();
            console.log('Form submitted');
            
            // Validate form
            if (!validateForm()) {
                console.log('Form validation failed');
                return;
            }
            
            console.log('Form validation passed');
            
            // Disable button and show loading
            $payButton.prop('disabled', true).text(psv_payment.messages.processing);
            showModal();
            
            // Generate unique reference
            const reference = 'PSV_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
            console.log('Generated reference:', reference);
            
            // Get form data
            const formData = {
                email: $('#psv-email').val(),
                full_name: $('#psv-full_name').val(),
                phone: $('#psv-phone').val(),
                amount: parseFloat($('#psv-amount').val()) * 100, // Convert to kobo
                reference: reference
            };
            
            console.log('Form data:', formData);
            
            // Check if PaystackPop is available
            if (typeof PaystackPop === 'undefined') {
                console.error('PaystackPop is not defined!');
                showResponse('Payment gateway not loaded. Please refresh the page.', 'error');
                resetForm();
                hideModal();
                return;
            }
            
            // Check public key
            if (!psv_payment.public_key || psv_payment.public_key.trim() === '') {
                console.error('Public key is empty!');
                showResponse('Payment configuration error. Please contact administrator.', 'error');
                resetForm();
                hideModal();
                return;
            }
            
            console.log('Initializing Paystack with key:', psv_payment.public_key.substring(0, 20) + '...');
            
            try {
                // Initialize Paystack
                const handler = PaystackPop.setup({
                    key: psv_payment.public_key,
                    email: formData.email,
                    amount: formData.amount,
                    currency: psv_payment.currency,
                    ref: reference,
                    metadata: {
                        custom_fields: [
                            {
                                display_name: 'Full Name',
                                variable_name: 'full_name',
                                value: formData.full_name
                            },
                            {
                                display_name: 'Phone',
                                variable_name: 'phone',
                                value: formData.phone || ''
                            }
                        ]
                    },
                    callback: function(response) {
                        console.log('Paystack callback received:', response);
                        // Verify payment
                        verifyPayment(response.reference, formData);
                    },
                    onClose: function() {
                        // User closed the payment modal
                        console.log('Paystack modal closed by user');
                        hideModal();
                        resetForm();
                        showResponse('Payment was cancelled.', 'error');
                    }
                });
                
                console.log('Opening Paystack iframe');
                handler.openIframe();
                
            } catch (error) {
                console.error('Error initializing Paystack:', error);
                showResponse('Error initializing payment. Please try again.', 'error');
                resetForm();
                hideModal();
            }
        });
        
        function verifyPayment(reference, formData) {
            console.log('Verifying payment with reference:', reference);
            
            $.ajax({
                url: psv_payment.ajax_url,
                type: 'POST',
                data: {
                    action: 'psv_verify_payment',
                    nonce: psv_payment.nonce,
                    reference: reference,
                    email: formData.email,
                    full_name: formData.full_name,
                    phone: formData.phone,
                    amount: formData.amount / 100 // Convert back to Naira
                },
                success: function(response) {
                    console.log('AJAX response received:', response);
                    
                    if (response.success) {
                        console.log('Payment verified successfully!', response.data);
                        showResponse(response.data.message, 'success');
                        
                        // If download URL is provided, show it
                        if (response.data.download_url) {
                            console.log('Redirecting to download URL:', response.data.download_url);
                            setTimeout(function() {
                                window.location.href = response.data.download_url;
                            }, 2000);
                        } else if (response.data.redirect_url) {
                            console.log('Redirecting to success URL:', response.data.redirect_url);
                            setTimeout(function() {
                                window.location.href = response.data.redirect_url;
                            }, 2000);
                        }
                    } else {
                        console.error('Payment verification failed:', response.data);
                        showResponse(response.data.message || 'Payment verification failed.', 'error');
                        resetForm();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX error:', status, error, xhr.responseText);
                    showResponse('An error occurred. Please try again.', 'error');
                    resetForm();
                },
                complete: function() {
                    hideModal();
                }
            });
        }
        
        function validateForm() {
            const email = $('#psv-email').val();
            const name = $('#psv-full_name').val();
            const amount = $('#psv-amount').val();
            
            console.log('Validating form:', { email, name, amount });
            
            if (!email || !isValidEmail(email)) {
                showResponse('Please enter a valid email address.', 'error');
                return false;
            }
            
            if (!name || name.trim().length < 2) {
                showResponse('Please enter your full name.', 'error');
                return false;
            }
            
            if (!amount || parseFloat(amount) < 100) {
                showResponse('Please enter a valid amount (minimum ₦100).', 'error');
                return false;
            }
            
            return true;
        }
        
        function isValidEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
        
        function showResponse(message, type) {
            console.log('Showing response:', type, message);
            $response.removeClass('success error')
                     .addClass(type)
                     .text(message)
                     .show();
            
            // Auto-hide error messages after 5 seconds
            if (type === 'error') {
                setTimeout(function() {
                    $response.fadeOut();
                }, 5000);
            }
        }
        
        function resetForm() {
            console.log('Resetting form');
            $payButton.prop('disabled', false).text($payButton.data('original-text') || 'Pay Now');
        }
        
        function showModal() {
            console.log('Showing modal');
            $modal.show();
        }
        
        function hideModal() {
            console.log('Hiding modal');
            $modal.hide();
        }
    });
    
})(jQuery);
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.psv-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.psv-response {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    display: none;
}

.psv-response.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.psv-response.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.psv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 9999;
}

.psv-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.psv-loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}