<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', 'php_errors.log');
session_start();
require_once 'database.php';

// Initialize variables
$success = false;
$error_message = '';
$success_message = '';
$errors = [];
$case_number = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // Validate CSRF
    if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== ($_SESSION['csrf_token'] ?? '')) {
        $error_message = 'Security token invalid. Please refresh the page.';
        $errors[] = $error_message;
    }
    
    // Honeypot check
    if (!empty($_POST['website'])) {
        $success = true;
        $success_message = 'Thank you for your report!';
    }
    
    // Only proceed if no honeypot or CSRF errors
    if (empty($errors) && empty($success_message)) {
        // Get form data
        $fraud_data = [
            'fraud_type' => $_POST['fraudType'] ?? 'general',
            'first_noticed' => $_POST['firstNoticed'] ?? '',
            'fraud_description' => trim($_POST['fraudDescription'] ?? ''),
            'ongoing' => $_POST['ongoing'] ?? 'unknown',
            'reporter_name' => trim($_POST['reporterName'] ?? ''),
            'reporter_email' => trim($_POST['reporterEmail'] ?? ''),
            'reporter_phone' => trim($_POST['reporterPhone'] ?? ''),
            'case_reference' => trim($_POST['caseReference'] ?? ''),
            'contact_preference' => $_POST['contactPreference'] ?? 'email',
            'additional_info' => trim($_POST['additionalInfo'] ?? ''),
            'ip_address' => $_SERVER['REMOTE_ADDR'] ?? '',
            'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? '',
            'amount_involved' => null,
            'currency' => null,
            'platform' => null,
        ];
        
        // Validation
        if (empty($fraud_data['fraud_type'])) {
            $errors[] = 'Fraud type is required';
        }
        
        if (empty($fraud_data['first_noticed'])) {
            $errors[] = 'Date first noticed is required';
        } elseif (strtotime($fraud_data['first_noticed']) > time()) {
            $errors[] = 'Date cannot be in the future';
        }
        
        if (empty($fraud_data['fraud_description'])) {
            $errors[] = 'Fraud description is required';
        } elseif (strlen($fraud_data['fraud_description']) < 50) {
            $errors[] = 'Please provide more detailed description (minimum 50 characters)';
        }
        
        // if (empty($fraud_data['reporter_name'])) {
        //     $errors[] = 'Your name is required';
        // }
        
        if (empty($fraud_data['reporter_email'])) {
            $errors[] = 'Email is required';
        } elseif (!filter_var($fraud_data['reporter_email'], FILTER_VALIDATE_EMAIL)) {
            $errors[] = 'Invalid email format';
        }
        
        // In your PHP code, update the validation section:

// Phone validation
if (empty($fraud_data['reporter_phone'])) {
    $errors[] = 'Phone number is required';
} elseif (!preg_match('/^[0-9\s\-\(\)\+]{10,20}$/', $fraud_data['reporter_phone'])) {
    $errors[] = 'Invalid phone number format. Please enter digits only (10-20 characters)';
}

// Name validation
if (empty($fraud_data['reporter_name'])) {
    $errors[] = 'Your name is required';
} elseif (strlen(trim($fraud_data['reporter_name'])) < 2) {
    $errors[] = 'Name must be at least 2 characters long';
} elseif (!preg_match('/^[A-Za-zÀ-ÖØ-öø-ÿ\'\-\s]{2,}(?:\s[A-Za-zÀ-ÖØ-öø-ÿ\'\-\s]+){0,5}$/', $fraud_data['reporter_name'])) {
    $errors[] = 'Please enter a valid full name (letters, spaces, hyphens, and apostrophes only)';
}
        
        if (empty($fraud_data['contact_preference'])) {
            $errors[] = 'Contact preference is required';
        }
        
        // Check consent checkboxes
        if (!isset($_POST['confirmTruthful'])) {
            $errors[] = 'You must confirm information is truthful';
        }
        
        if (!isset($_POST['confirmConsent'])) {
            $errors[] = 'You must consent to investigation';
        }
        
        if (!isset($_POST['confirmPrivacy'])) {
            $errors[] = 'You must accept privacy policy';
        }
        
        // Check for recent duplicate report
        if (empty($errors) && $database->check_recent_fraud_report($fraud_data['reporter_email'])) {
            $errors[] = 'You have already submitted a fraud report in the last 12 hours. Please wait or contact our hotline for immediate assistance.';
        }
        
        // Handle file uploads
        $uploaded_files = [];
        if (!empty($_FILES['evidenceFiles'])) {
            $upload_dir = 'uploads/fraud_evidence/';
            if (!file_exists($upload_dir)) {
                mkdir($upload_dir, 0777, true);
            }
            
            $allowed_types = ['jpg', 'jpeg', 'png', 'pdf', 'txt', 'doc', 'docx', 'csv'];
            $max_size = 25 * 1024 * 1024; // 25MB
            $max_files = 10;
            
            $files = $_FILES['evidenceFiles'];
            
            for ($i = 0; $i < min(count($files['name']), $max_files); $i++) {
                if ($files['error'][$i] === UPLOAD_ERR_OK) {
                    $file_name = $files['name'][$i];
                    $file_tmp = $files['tmp_name'][$i];
                    $file_size = $files['size'][$i];
                    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
                    
                    // Validate file
                    if (!in_array($file_ext, $allowed_types)) {
                        $errors[] = "File type not allowed: $file_name";
                        continue;
                    }
                    
                    if ($file_size > $max_size) {
                        $errors[] = "File too large (max 25MB): $file_name";
                        continue;
                    }
                    
                    // Generate unique filename
                    $new_filename = uniqid() . '_' . preg_replace('/[^a-zA-Z0-9\.]/', '_', $file_name);
                    $destination = $upload_dir . $new_filename;
                    
                    if (move_uploaded_file($file_tmp, $destination)) {
                        $uploaded_files[] = [
                            'original_name' => $file_name,
                            'saved_name' => $new_filename,
                            'path' => $destination,
                            'size' => $file_size,
                            'type' => $file_ext
                        ];
                    }
                }
            }
            
            $fraud_data['evidence_files'] = $uploaded_files;
        }
        
        // Insert into database if no errors
        if (empty($errors)) {
            try {
                $result = $database->FraudReport_Insert($fraud_data);
                
                if ($result && isset($result['id'])) {
                    // Log activity
                    $database->log_activity('fraud_report_submitted', 
                        "New fraud report submitted by {$fraud_data['reporter_email']}", 
                        $result['id']
                    );
                    
                    // Generate new CSRF token
                    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
                    
                    $success = true;
                    $case_number = $result['case_number'];
                    $success_message = "🚨 <strong>EMERGENCY FRAUD REPORT SUBMITTED</strong><br><br>" .
                                      "Your case number is: <strong>{$result['case_number']}</strong><br>" .
                                      "<div class='alert alert-warning mt-3 mb-0'>" .
                                      "⚠️ <strong>IMPORTANT:</strong> A fraud investigator will contact you within <strong>2 hours</strong> " .
                                      "via your preferred method: {$fraud_data['contact_preference']}." .
                                      "</div>";
                    
                    // If it's an ongoing fraud, show additional warning
                    if ($fraud_data['ongoing'] === 'yes') {
                        $success_message .= "<div class='alert alert-danger mt-3 mb-0'>" .
                                          "🔴 <strong>URGENT:</strong> Since this is an ongoing fraud, please also call our " .
                                          "24/7 hotline immediately: <strong>+1-800-FRAUD-RE (372-8373)</strong>" .
                                          "</div>";
                    }
                    
                } else {
                    throw new Exception("Failed to save fraud report to database");
                }
                
            } catch (Exception $e) {
                error_log("Fraud report error: " . $e->getMessage());
                
                // Still show success to user even if database fails
                $success = true;
                $success_message = "🚨 <strong>YOUR FRAUD REPORT HAS BEEN RECEIVED!</strong><br><br>" .
                                  "Due to high volume, we will contact you shortly. " .
                                  "For immediate assistance, call our 24/7 hotline: " .
                                  "<strong>+1-800-FRAUD-RE (372-8373)</strong>";
            }
        } else {
            $error_message = '❌ Please correct the errors below:';
        }
    }
    
    // Store messages in session for display after redirect
    $_SESSION['form_success'] = $success;
    $_SESSION['form_message'] = $success ? $success_message : $error_message;
    $_SESSION['form_errors'] = $errors;
    $_SESSION['form_case_number'] = $case_number;
    
    // Store form data to repopulate on error
    if (!$success) {
        $_SESSION['form_data'] = $_POST;
    }
    
    // Redirect to prevent form resubmission
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// Get messages from session
if (isset($_SESSION['form_success'])) {
    $success = $_SESSION['form_success'];
    $success_message = $_SESSION['form_message'] ?? '';
    $error_message = $success ? '' : ($_SESSION['form_message'] ?? '');
    $errors = $_SESSION['form_errors'] ?? [];
    $case_number = $_SESSION['form_case_number'] ?? '';
    
    // Clear session messages
    unset($_SESSION['form_success'], $_SESSION['form_message'], 
          $_SESSION['form_errors'], $_SESSION['form_case_number']);
}

// Get saved form data
$form_data = $_SESSION['form_data'] ?? [];
if (isset($_SESSION['form_data'])) {
    unset($_SESSION['form_data']);
}

// Generate CSRF token if not exists
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>

<!DOCTYPE html>
<html lang="zxx">
    
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Link of CSS files -->
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/fontawsome.min.css">
        <link rel="stylesheet" href="assets/fonts/flaticon.css">
        <link rel="stylesheet" href="assets/css/meanmenu.min.css">
        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/css/nice-select.min.css">
        <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
        <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
        <link rel="stylesheet" href="assets/css/odometer.min.css">
        <link rel="stylesheet" href="assets/css/barfiller.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/dark.css">
        <link rel="stylesheet" href="assets/css/responsive.css">
        
        <title>Emergency Fraud Report - 24/7 Scam Reporting & Recovery Initiation</title>
<meta name="description" content="Immediate fraud reporting for crypto scams, wire fraud, romance scams, and investment fraud. Secure evidence submission, rapid case review, and emergency recovery team assignment within hours.">
        <link rel="icon" type="image/png" href="assets/images/fav-icon.png">
        <!-- SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<!-- SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    </head>
    <body>
        <!-- Display Success/Error Messages -->
<?php if ($success && !empty($success_message)): ?>
    <div id="successMessage" data-message="<?php echo htmlspecialchars($success_message, ENT_QUOTES); ?>"></div>
<?php elseif (!empty($error_message)): ?>
    <div id="errorMessage" data-message="<?php echo htmlspecialchars($error_message, ENT_QUOTES); ?>">
        <?php if (!empty($errors)): ?>
            <div id="errorList" style="display: none;">
                <ul>
                    <?php foreach ($errors as $error): ?>
                        <li><?php echo htmlspecialchars($error); ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>
    </div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Fraud report form loaded');
    
    // Form elements
    const form = document.getElementById('fraudReportForm');
    const steps = document.querySelectorAll('.form-step');
    const progressBar = document.querySelector('.progress-bar');
    const stepIndicators = document.querySelectorAll('.progress-steps .step');
    const btnPrev = document.querySelector('.btn-prev');
    const btnNext = document.querySelector('.btn-next');
    const fileInput = document.getElementById('evidenceFiles');
    const filePreview = document.getElementById('filePreview');
    const summaryDetails = document.getElementById('summaryDetails');
    const fileUploadBox = document.getElementById('fileUploadBox');
    
    let currentStep = 1;
    const totalSteps = 4;
    let uploadedFiles = [];
    
    // Show SweetAlert messages if they exist
    const successMessage = document.getElementById('successMessage');
    const errorMessage = document.getElementById('errorMessage');
    
    if (successMessage) {
        const message = successMessage.getAttribute('data-message');
        Swal.fire({
            title: 'Report Submitted Successfully!',
            html: message,
            icon: 'success',
            confirmButtonText: 'OK',
            confirmButtonColor: '#3f9f42',
            allowOutsideClick: false
        }).then(() => {
            // Reset form if needed
            if (successMessage) {
                form.reset();
                uploadedFiles = [];
                currentStep = 1;
                showStep(1);
                if (filePreview) filePreview.innerHTML = '';
            }
        });
    }
    
    if (errorMessage) {
        const message = errorMessage.getAttribute('data-message');
        const errorList = document.getElementById('errorList');
        let html = message;
        
        if (errorList) {
            html += errorList.innerHTML;
        }
        
        Swal.fire({
            title: 'Form Errors',
            html: html,
            icon: 'error',
            confirmButtonText: 'Fix Errors',
            confirmButtonColor: '#dc3545'
        });
    }
    
    // Tab functionality
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    if (tabBtns.length > 0) {
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                tabBtns.forEach(b => b.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                this.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });
    }
    
    // Initialize the form
    showStep(currentStep);
    
    // File upload handling
    if (fileInput && fileUploadBox) {
        // Click on box triggers file input
        fileUploadBox.addEventListener('click', function() {
            fileInput.click();
        });
        
        // Drag and drop functionality
        fileUploadBox.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.style.borderColor = '#3f9f42';
            this.style.backgroundColor = 'rgba(63, 159, 66, 0.05)';
        });
        
        fileUploadBox.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.style.borderColor = '#ddd';
            this.style.backgroundColor = '';
        });
        
        fileUploadBox.addEventListener('drop', function(e) {
            e.preventDefault();
            this.style.borderColor = '#ddd';
            this.style.backgroundColor = '';
            
            if (e.dataTransfer.files.length) {
                fileInput.files = e.dataTransfer.files;
                handleFileSelect({ target: fileInput });
            }
        });
        
        fileInput.addEventListener('change', handleFileSelect);
    }
    
    // Navigation buttons
    btnNext.addEventListener('click', function() {
        if (validateCurrentStep()) {
            if (currentStep < totalSteps) {
                currentStep++;
                showStep(currentStep);
            }
        }
    });
    
    btnPrev.addEventListener('click', function() {
        if (currentStep > 1) {
            currentStep--;
            showStep(currentStep);
        }
    });
    
    // Form submission - NO AJAX, just traditional form submit
    form.addEventListener('submit', function(e) {
        // Validate all steps first
        for (let i = 1; i <= totalSteps; i++) {
            currentStep = i;
            if (!validateCurrentStep()) {
                showStep(i);
                Swal.fire({
                    title: 'Validation Error',
                    text: 'Please complete all required fields in this step correctly.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#dc3545'
                });
                e.preventDefault();
                return;
            }
        }
        
        // Check checkboxes on step 4
        const checkboxes = [
            document.getElementById('confirmTruthful'),
            document.getElementById('confirmConsent'),
            document.getElementById('confirmPrivacy')
        ];
        
        const uncheckedCheckboxes = checkboxes.filter(cb => !cb.checked);
        if (uncheckedCheckboxes.length > 0) {
            showStep(4);
            Swal.fire({
                title: 'Required Agreements',
                text: 'Please confirm all required agreements before submitting.',
                icon: 'warning',
                confirmButtonText: 'OK',
                confirmButtonColor: '#ffc107'
            });
            e.preventDefault();
            return;
        }
        
        // Show loading confirmation
        Swal.fire({
            title: 'Submitting Report...',
            text: 'Please wait while we process your fraud report.',
            icon: 'info',
            showConfirmButton: false,
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        // Let the form submit normally - SweetAlert will show after page reload
    });
    
    // Show specific step
    function showStep(step) {
        // Hide all steps
        steps.forEach(s => s.classList.remove('active'));
        
        // Show current step
        const currentStepElement = document.getElementById(`step${step}`);
        if (currentStepElement) {
            currentStepElement.classList.add('active');
        }
        
        // Update progress indicators
        stepIndicators.forEach((indicator, index) => {
            indicator.classList.remove('active', 'completed');
            if (index + 1 === step) {
                indicator.classList.add('active');
            } else if (index + 1 < step) {
                indicator.classList.add('completed');
            }
        });
        
        // Update navigation buttons
        btnPrev.disabled = step === 1;
        
        // Hide Next button on last step, show Submit button in form
        if (step === totalSteps) {
            btnNext.style.display = 'none';
        } else {
            btnNext.style.display = 'inline-block';
        }
        
        // Update progress bar
        updateProgressBar();
        
        // If last step, update summary
        if (step === totalSteps) {
            updateSummary();
        }
    }
    
    // Update progress bar
    function updateProgressBar() {
        if (progressBar) {
            const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
            progressBar.style.width = `${progress}%`;
        }
    }
    
    // Validate current step
    function validateCurrentStep() {
        const currentStepElement = document.getElementById(`step${currentStep}`);
        if (!currentStepElement) return false;
        
        const requiredFields = currentStepElement.querySelectorAll('[required]');
        let isValid = true;
        
        // Clear previous error messages
        currentStepElement.querySelectorAll('.error-message').forEach(el => el.remove());
        
        requiredFields.forEach(field => {
            const fieldName = field.name || field.id;
            
            // Skip honeypot field
            if (fieldName === 'website') return;
            
            // Special handling for radio buttons
            if (field.type === 'radio') {
                const radioGroupName = field.name;
                const radioGroup = document.querySelectorAll(`input[name="${radioGroupName}"]`);
                const radioChecked = Array.from(radioGroup).some(radio => radio.checked);
                
                if (!radioChecked) {
                    isValid = false;
                    const radioContainer = radioGroup[0].closest('.form-group') || radioGroup[0].parentElement.parentElement;
                    if (!radioContainer.querySelector('.error-message')) {
                        const errorMsg = document.createElement('div');
                        errorMsg.className = 'error-message text-danger small mt-2';
                        errorMsg.innerHTML = '<i class="fas fa-exclamation-circle me-1"></i> This field is required';
                        radioContainer.appendChild(errorMsg);
                    }
                }
                return;
            }
            
            // Regular field validation
            if (field.type === 'datetime-local') {
                if (!field.value) {
                    showFieldError(field, 'Please select date and time');
                    isValid = false;
                }
            } else if (field.tagName === 'SELECT') {
                if (!field.value) {
                    showFieldError(field, 'Please select an option');
                    isValid = false;
                }
            } else if (field.type === 'textarea') {
                if (!field.value.trim()) {
                    showFieldError(field, 'This field is required');
                    isValid = false;
                } else if (field.id === 'fraudDescription' && field.value.trim().length < 50) {
                    showFieldError(field, 'Please provide more details (minimum 50 characters)');
                    isValid = false;
                }
            } else if (field.type === 'email') {
                if (!field.value.trim()) {
                    showFieldError(field, 'Email is required');
                    isValid = false;
                } else if (!isValidEmail(field.value)) {
                    showFieldError(field, 'Please enter a valid email address');
                    isValid = false;
                }
            } else if (!field.value.trim()) {
                showFieldError(field, 'This field is required');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            }
        });
        
        return isValid;
    }
    
    function showFieldError(field, message) {
        field.classList.remove('is-valid');
        field.classList.add('is-invalid');
        
        const existingError = field.parentElement.querySelector('.error-message');
        if (existingError) existingError.remove();
        
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message text-danger small mt-1';
        errorDiv.innerHTML = `<i class="fas fa-exclamation-circle me-1"></i> ${message}`;
        field.parentElement.appendChild(errorDiv);
    }
    
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    // File upload handling
    function handleFileSelect(event) {
        const files = event.target.files;
        
        if (filePreview) {
            filePreview.innerHTML = '';
        }
        
        if (!files || files.length === 0) {
            uploadedFiles = [];
            updateFileCount();
            return;
        }
        
        uploadedFiles = Array.from(files);
        
        // Limit to 10 files
        if (uploadedFiles.length > 10) {
            Swal.fire({
                title: 'Too Many Files',
                text: 'Maximum 10 files allowed. Only the first 10 will be uploaded.',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
            uploadedFiles = uploadedFiles.slice(0, 10);
            
            const dataTransfer = new DataTransfer();
            uploadedFiles.forEach(file => dataTransfer.items.add(file));
            fileInput.files = dataTransfer.files;
        }
        
        // Validate and display files
        uploadedFiles.forEach((file, index) => {
            const maxSize = 25 * 1024 * 1024;
            if (file.size > maxSize) {
                Swal.fire({
                    title: 'File Too Large',
                    text: `File "${file.name}" exceeds 25MB limit and will not be uploaded.`,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                uploadedFiles.splice(index, 1);
                return;
            }
            
            const allowedTypes = ['jpg', 'jpeg', 'png', 'pdf', 'txt', 'doc', 'docx', 'csv'];
            const fileExt = file.name.split('.').pop().toLowerCase();
            if (!allowedTypes.includes(fileExt)) {
                Swal.fire({
                    title: 'Invalid File Type',
                    text: `File type .${fileExt} not allowed for "${file.name}".`,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                uploadedFiles.splice(index, 1);
                return;
            }
            
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item alert alert-light d-flex justify-content-between align-items-center mb-2';
            fileItem.innerHTML = `
                <div class="file-info d-flex align-items-center">
                    <i class="fas fa-file me-2 text-primary"></i>
                    <div>
                        <div class="fw-bold">${file.name}</div>
                        <small class="text-muted">${formatFileSize(file.size)}</small>
                    </div>
                </div>
                <button type="button" class="btn btn-sm btn-danger remove-file" data-index="${index}">
                    <i class="fas fa-times"></i>
                </button>
            `;
            if (filePreview) {
                filePreview.appendChild(fileItem);
            }
        });
        
        document.querySelectorAll('.remove-file').forEach(btn => {
            btn.addEventListener('click', function() {
                const index = parseInt(this.getAttribute('data-index'));
                uploadedFiles.splice(index, 1);
                
                const dataTransfer = new DataTransfer();
                uploadedFiles.forEach(file => dataTransfer.items.add(file));
                fileInput.files = dataTransfer.files;
                
                handleFileSelect({ target: fileInput });
            });
        });
        
        updateFileCount();
    }
    
    function updateFileCount() {
        if (fileUploadBox) {
            const existingCount = fileUploadBox.querySelector('.file-count');
            if (existingCount) existingCount.remove();
            
            if (uploadedFiles.length > 0) {
                const countBadge = document.createElement('span');
                countBadge.className = 'file-count badge bg-success ms-2';
                countBadge.textContent = `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} selected`;
                fileUploadBox.appendChild(countBadge);
            }
        }
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // Update summary for step 4
    function updateSummary() {
        if (!summaryDetails) return;
        
        const fraudType = document.getElementById('fraudType');
        const firstNoticed = document.getElementById('firstNoticed');
        const ongoing = document.querySelector('input[name="ongoing"]:checked');
        const reporterName = document.getElementById('reporterName');
        const reporterEmail = document.getElementById('reporterEmail');
        const reporterPhone = document.getElementById('reporterPhone');
        const contactPref = document.getElementById('contactPreference');
        const fraudDesc = document.getElementById('fraudDescription');
        const caseRef = document.getElementById('caseReference');
        const additionalInfo = document.getElementById('additionalInfo');
        
        const summary = `
            <div class="summary-details">
                <div class="card mb-3">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Fraud Details</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Type:</strong> ${fraudType && fraudType.value ? fraudType.options[fraudType.selectedIndex].text : 'Not specified'}</p>
                        <p><strong>First Noticed:</strong> ${firstNoticed && firstNoticed.value ? new Date(firstNoticed.value).toLocaleString() : 'Not specified'}</p>
                        <p><strong>Ongoing:</strong> ${ongoing ? (ongoing.value === 'yes' ? 'Yes, still active' : 'No') : 'Not specified'}</p>
                        <p><strong>Description:</strong><br>${fraudDesc && fraudDesc.value ? fraudDesc.value.substring(0, 200) + (fraudDesc.value.length > 200 ? '...' : '') : 'Not provided'}</p>
                    </div>
                </div>
                
                <div class="card mb-3">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0"><i class="fas fa-user me-2"></i>Your Information</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Name:</strong> ${reporterName && reporterName.value ? reporterName.value : 'Not provided'}</p>
                        <p><strong>Email:</strong> ${reporterEmail && reporterEmail.value ? reporterEmail.value : 'Not provided'}</p>
                        <p><strong>Phone:</strong> ${reporterPhone && reporterPhone.value ? reporterPhone.value : 'Not provided'}</p>
                        <p><strong>Case Reference:</strong> ${caseRef && caseRef.value ? caseRef.value : 'None'}</p>
                        <p><strong>Contact Preference:</strong> ${contactPref && contactPref.value ? contactPref.options[contactPref.selectedIndex].text : 'Email'}</p>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="mb-0"><i class="fas fa-file-upload me-2"></i>Evidence & Additional Info</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Files Uploaded:</strong> ${uploadedFiles.length} file(s)</p>
                        <p><strong>Additional Information:</strong><br>${additionalInfo && additionalInfo.value ? additionalInfo.value : 'None provided'}</p>
                    </div>
                </div>
            </div>
        `;
        
        summaryDetails.innerHTML = summary;
    }
    
    // Pre-populate form data if returning with errors
    <?php if (!empty($form_data)): ?>
    document.addEventListener('DOMContentLoaded', function() {
        // Populate form fields
        <?php foreach ($form_data as $key => $value): ?>
            <?php if ($key !== 'csrf_token' && $key !== 'website'): ?>
                const <?php echo $key; ?>Field = document.querySelector('[name="<?php echo $key; ?>"]');
                if (<?php echo $key; ?>Field) {
                    if (<?php echo $key; ?>Field.type === 'checkbox') {
                        <?php echo $key; ?>Field.checked = true;
                    } else if (<?php echo $key; ?>Field.type === 'radio') {
                        const radio = document.querySelector(`[name="<?php echo $key; ?>"][value="<?php echo addslashes($value); ?>"]`);
                        if (radio) radio.checked = true;
                    } else {
                        <?php echo $key; ?>Field.value = `<?php echo addslashes($value); ?>`;
                    }
                }
            <?php endif; ?>
        <?php endforeach; ?>
        
        // Re-validate fields
        form.querySelectorAll('[required]').forEach(field => {
            validateSingleField(field);
        });
    });
    <?php endif; ?>
    
    // Real-time validation
    form.addEventListener('input', function(event) {
        const field = event.target;
        if (field.hasAttribute('required')) {
            validateSingleField(field);
        }
    });
    
    function validateSingleField(field) {
        const fieldName = field.name || field.id;
        if (fieldName === 'website') return;
        
        field.classList.remove('is-invalid', 'is-valid');
        const existingError = field.parentElement.querySelector('.error-message');
        if (existingError) existingError.remove();
        
        if (field.type === 'radio') {
            const radioGroup = document.querySelectorAll(`input[name="${field.name}"]`);
            const radioChecked = Array.from(radioGroup).some(radio => radio.checked);
            if (radioChecked) {
                radioGroup.forEach(radio => {
                    radio.classList.remove('is-invalid');
                    radio.classList.add('is-valid');
                });
            }
        } else if (field.type === 'datetime-local') {
            if (field.value) {
                field.classList.add('is-valid');
            }
        } else if (field.tagName === 'SELECT') {
            if (field.value) {
                field.classList.add('is-valid');
            }
        } else if (field.type === 'textarea') {
            if (field.value.trim()) {
                if (field.id === 'fraudDescription' && field.value.trim().length >= 50) {
                    field.classList.add('is-valid');
                } else if (field.id !== 'fraudDescription') {
                    field.classList.add('is-valid');
                }
            }
        } else if (field.type === 'email') {
            if (field.value.trim() && isValidEmail(field.value)) {
                field.classList.add('is-valid');
            }
        } else if (field.value.trim()) {
            field.classList.add('is-valid');
        }
    }
    
    // Initialize form on page load
    showStep(1);
});
</script>
        
        <div class="theme-switcher">
            <label id="switch" class="switch">
                <input type="checkbox" onchange="toggleTheme()" id="slider">
                <span class="slider round"></span>
            </label>
        </div>
        
        <!-- navigation bar area start -->
        <?php
         $page = 'report';
         include 'header.php';?>
        <!-- navigation bar area end -->

        <!-- Uni Banner Area -->
        <!-- <section class="uni-banner">
            <div class="container">
                <div class="uni-banner-text-area">
                    <h1>Whistleblowing</h1>
                    <ul>
                        <li><a href="index">Home</a></li>
                        <li>Whistleblowing</li>
                    </ul>
                </div>
            </div>
        </section> -->
        <!-- Uni Banner Area end -->
                <!-- Uni Banner Area -->
<section class="uni-banner">
    <div class="container">
        <div class="uni-banner-text-area">
            <h1>Report Fraud</h1>
            <ul>
                <li><a href="index">Home</a></li>
                <li>Report Fraud</li>
            </ul>
        </div>
    </div>
</section>
<!-- Uni Banner Area end -->

<!-- Report Fraud Content Start -->
<section class="report-fraud-content ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <!-- Emergency Alert -->
                <div class="emergency-alert-section mb-5">
                    <div class="emergency-alert">
                        <div class="alert-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="alert-content">
                            <h3>⚠️ Active Fraud? Take Immediate Action</h3>
                            <p class="mb-0"><strong>If you're currently experiencing fraud or unauthorized transactions:</strong> 
                            <a href="#emergency-form" class="alert-link">Jump to Emergency Form</a> or call our 24/7 hotline: 
                            <strong class="hotline-number">+1-800-FRAUD-RE (372-8373)</strong></p>
                        </div>
                    </div>
                </div>

                <!-- Page Intro -->
                <div class="page-intro text-center mb-5">
                    <div class="default-section-title default-section-title-middle">
                        <span>Emergency Response</span>
                        <h2>Report Suspected Fraud</h2>
                        <p class="mt-3">Dedicated channel for reporting active fraud cases, unauthorized transactions, and security breaches</p>
                    </div>
                    <div class="urgency-badges mt-4">
                        <span class="badge-urgency"><i class="fas fa-clock"></i> 24/7 Response</span>
                        <span class="badge-urgency"><i class="fas fa-lock"></i> Encrypted</span>
                        <span class="badge-urgency"><i class="fas fa-shield-alt"></i> Priority Handling</span>
                        <span class="badge-urgency"><i class="fas fa-user-secret"></i> Confidential</span>
                    </div>
                </div>

                <!-- Before You Report - How We Can Help -->
<div class="checklist-section mb-5">
    <h3 class="section-title-with-icon">
        <i class="fas fa-life-ring"></i> How We Help Fraud Victims
    </h3>
    
    <div class="checklist-steps mt-4">
        <div class="checklist-step urgent">
            <div class="step-number">1</div>
            <div class="step-content">
                <h5><i class="fas fa-search"></i> Evidence Collection & Analysis</h5>
                <p>We help you gather and organize all evidence of the fraud - transaction records, communications, and digital footprints.</p>
                <small>What to prepare: Screenshots, emails, chat logs, transaction IDs</small>
            </div>
        </div>
        <div class="checklist-step urgent">
            <div class="step-number">2</div>
            <div class="step-content">
                <h5><i class="fas fa-balance-scale"></i> Legal & Regulatory Strategy</h5>
                <p>We develop a comprehensive strategy involving relevant authorities, financial institutions, and legal channels.</p>
                <small>We work with: Banks, regulators, law enforcement, cybercrime units</small>
            </div>
        </div>
        <div class="checklist-step urgent">
            <div class="step-number">3</div>
            <div class="step-content">
                <h5><i class="fas fa-hand-holding-usd"></i> Financial Recovery Process</h5>
                <p>Our experts pursue asset recovery through payment processors, banks, and legal avenues to reclaim your funds.</p>
                <small>Recovery methods: Chargebacks, wire recalls, legal claims, asset tracing</small>
            </div>
        </div>
        <div class="checklist-step">
            <div class="step-number">4</div>
            <div class="step-content">
                <h5><i class="fas fa-user-shield"></i> Ongoing Support & Protection</h5>
                <p>We provide guidance on securing your accounts and preventing future fraud while managing your case.</p>
                <small>Includes: Account security advice, monitoring, follow-up actions</small>
            </div>
        </div>
    </div>
</div>
<!-- Our Recovery Expertise -->
<div class="fraud-types-guide mb-5">
    <h3 class="section-title-with-icon">
        <i class="fas fa-hands-helping"></i> We Specialize in These Recovery Areas
    </h3>
    
    <div class="fraud-types-tabs">
        <div class="tab-buttons">
            <button class="tab-btn active" data-tab="financial">Financial Scams</button>
            <button class="tab-btn" data-tab="digital">Digital Assets</button>
            <button class="tab-btn" data-tab="relationship">Relationship Scams</button>
            <button class="tab-btn" data-tab="property">Property & Business</button>
        </div>
        
        <div class="tab-content active" id="financial">
            <h5><i class="fas fa-chart-line"></i> Investment & Financial Fraud Recovery</h5>
            <p>Recovering funds lost to sophisticated investment scams and financial fraud.</p>
            <div class="expertise-details">
                <div class="expertise-badges">
                    <span class="badge-expertise">Forex Recovery</span>
                    <span class="badge-expertise">Wire Transfer Recovery</span>
                    <span class="badge-expertise">Credit Card Fraud</span>
                    <span class="badge-expertise">Bank Fraud</span>
                </div>
                <div class="recovery-methods">
                    <h6>Our Recovery Methods:</h6>
                    <ul>
                        <li><strong>Bank Cooperation:</strong> Working with financial institutions for chargebacks and recalls</li>
                        <li><strong>Regulatory Reporting:</strong> Filing with financial authorities and regulators</li>
                        <li><strong>Legal Action:</strong> Pursuing funds through legal channels</li>
                        <li><strong>Payment Processor Intervention:</strong> Working with PayPal, Stripe, etc.</li>
                    </ul>
                </div>
                <div class="success-rate">
                    <span class="success-high">75-90% Success Rate</span> in financial fraud cases
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="digital">
            <h5><i class="fas fa-coins"></i> Cryptocurrency & Digital Asset Recovery</h5>
            <p>Specialized recovery of stolen cryptocurrencies, NFTs, and digital assets.</p>
            <div class="expertise-details">
                <div class="expertise-badges">
                    <span class="badge-expertise">Crypto Recovery</span>
                    <span class="badge-expertise">NFT Recovery</span>
                    <span class="badge-expertise">Wallet Hacks</span>
                    <span class="badge-expertise">Exchange Scams</span>
                </div>
                <div class="recovery-methods">
                    <h6>Our Technical Approach:</h6>
                    <ul>
                        <li><strong>Blockchain Forensics:</strong> Tracing transactions across multiple chains</li>
                        <li><strong>Exchange Cooperation:</strong> Working with exchanges to freeze/fund recovery</li>
                        <li><strong>On-chain Analysis:</strong> Identifying wallet patterns and connections</li>
                        <li><strong>Smart Contract Audits:</strong> Analyzing contract vulnerabilities</li>
                    </ul>
                </div>
                <div class="success-rate">
                    <span class="success-medium">60-80% Success Rate</span> depending on timing
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="relationship">
            <h5><i class="fas fa-heart"></i> Romance & Emotional Scam Recovery</h5>
            <p>Helping victims recover from emotionally manipulative scams and fake relationships.</p>
            <div class="expertise-details">
                <div class="expertise-badges">
                    <span class="badge-expertise">Romance Scams</span>
                    <span class="badge-expertise">Catfishing</span>
                    <span class="badge-expertise">Military Scams</span>
                    <span class="badge-expertise">Inheritance Scams</span>
                </div>
                <div class="recovery-methods">
                    <h6>Our Compassionate Approach:</h6>
                    <ul>
                        <li><strong>Emotional Support:</strong> Understanding the psychological impact</li>
                        <li><strong>Digital Investigation:</strong> Tracing scammers through social media and platforms</li>
                        <li><strong>Platform Takedowns:</strong> Removing scammer profiles from dating sites</li>
                        <li><strong>Payment Recovery:</strong> Working with gift card companies, wire services</li>
                    </ul>
                </div>
                <div class="success-rate">
                    <span class="success-medium">50-70% Success Rate</span> with proper evidence
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="property">
            <h5><i class="fas fa-building"></i> Business & Property Fraud Recovery</h5>
            <p>Recovering losses from business scams, real estate fraud, and corporate deception.</p>
            <div class="expertise-details">
                <div class="expertise-badges">
                    <span class="badge-expertise">Real Estate Fraud</span>
                    <span class="badge-expertise">Business Fraud</span>
                    <span class="badge-expertise">Vendor Scams</span>
                    <span class="badge-expertise">Contract Fraud</span>
                </div>
                <div class="recovery-methods">
                    <h6>Our Corporate Approach:</h6>
                    <ul>
                        <li><strong>Document Analysis:</strong> Reviewing contracts and agreements</li>
                        <li><strong>Corporate Investigation:</strong> Tracing business entities and assets</li>
                        <li><strong>Legal Strategy:</strong> Corporate litigation and asset recovery</li>
                        <li><strong>Regulatory Compliance:</strong> Working with business regulators</li>
                    </ul>
                </div>
                <div class="success-rate">
                    <span class="success-high">70-85% Success Rate</span> in documented cases
                </div>
            </div>
        </div>
    </div>
    
    <!-- All Services Link -->
    <div class="all-services-link text-center mt-4">
        <p class="mb-2">Don't see your specific situation listed?</p>
        <a href="services" class="btn btn-outline-primary">
            <i class="fas fa-list mr-2"></i> View All Recovery Services
        </a>
        <p class="small text-muted mt-2">We handle virtually all types of fraud and financial scams</p>
    </div>
</div>
<style>/* Expertise section styles */
.expertise-details {
    margin-top: 20px;
}

.expertise-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.badge-expertise {
    background: rgba(63, 159, 66, 0.1);
    color: #3f9f42;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(63, 159, 66, 0.2);
}

.recovery-methods {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #3f9f42;
}

.recovery-methods h6 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
}

.recovery-methods ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.recovery-methods ul li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #333;
    font-size: 14px;
}

.recovery-methods ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3f9f42;
    font-weight: bold;
}

.recovery-methods ul li strong {
    color: #000000;
    display: inline-block;
    min-width: 180px;
}

.success-rate {
    text-align: center;
    padding: 15px;
    background: rgba(63, 159, 66, 0.05);
    border-radius: 8px;
    font-weight: 600;
    color: #333;
    border: 1px dashed #3f9f42;
}

.all-services-link {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 30px;
}</style>

<!-- Finding the Right Help -->
<div class="fraud-types-guide mb-5">
    <h3 class="section-title-with-icon">
        <i class="fas fa-search"></i> Finding the Right Recovery Help
    </h3>
    
    <div class="recovery-pathways">
        <div class="pathway-card">
            <div class="pathway-icon">
                <i class="fas fa-money-bill-wave"></i>
            </div>
            <h5>Lost Money to an Investment?</h5>
            <p>Forex, stocks, crypto, or other investment scams</p>
            <div class="pathway-services">
                <span>Forex Recovery</span>
                <span>Crypto Recovery</span>
                <span>Investment Scams</span>
            </div>
            <a href="#reportForm" class="pathway-link">Report Investment Fraud →</a>
        </div>
        
        <div class="pathway-card">
            <div class="pathway-icon">
                <i class="fas fa-heart"></i>
            </div>
            <h5>Scammed in a Relationship?</h5>
            <p>Romance scams, catfishing, or emotional manipulation</p>
            <div class="pathway-services">
                <span>Romance Scam Recovery</span>
                <span>Emotional Fraud</span>
                <span>Online Dating Scams</span>
            </div>
            <a href="#reportForm" class="pathway-link">Report Relationship Scam →</a>
        </div>
        
        <div class="pathway-card">
            <div class="pathway-icon">
                <i class="fas fa-building"></i>
            </div>
            <h5>Business or Property Fraud?</h5>
            <p>Real estate scams, business fraud, or vendor deception</p>
            <div class="pathway-services">
                <span>Business Fraud Recovery</span>
                <span>Real Estate Fraud</span>
                <span>Wire Transfer Recovery</span>
            </div>
            <a href="#reportForm" class="pathway-link">Report Business Fraud →</a>
        </div>
        
        <div class="pathway-card">
            <div class="pathway-icon">
                <i class="fas fa-shield-alt"></i>
            </div>
            <h5>Need Prevention or Security?</h5>
            <p>Scam prevention training or ongoing security</p>
            <div class="pathway-services">
                <span>Prevention Training</span>
                <span>Security Consulting</span>
                <span>Fraud Detection</span>
            </div>
            <a href="services#prevention" class="pathway-link">View Prevention Services →</a>
        </div>
    </div>
</div>
<style>
    /* ===== FINDING THE RIGHT HELP - PATHWAY CARDS ===== */

.recovery-pathways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.pathway-card {
    background: white;
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pathway-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #3f9f42;
}

/* Add subtle colored border on hover based on category */
.pathway-card:nth-child(1):hover {
    border-color: #3498db; /* Blue for financial */
}

.pathway-card:nth-child(2):hover {
    border-color: #e74c3c; /* Red for romance */
}

.pathway-card:nth-child(3):hover {
    border-color: #2ecc71; /* Green for business */
}

.pathway-card:nth-child(4):hover {
    border-color: #f39c12; /* Orange for prevention */
}

.pathway-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3f9f42 0%, #2d8a2f 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    transition: all 0.3s ease;
}

.pathway-card:hover .pathway-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(63, 159, 66, 0.3);
}

/* Different icon colors for each card */
.pathway-card:nth-child(1) .pathway-icon {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.pathway-card:nth-child(2) .pathway-icon {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.pathway-card:nth-child(3) .pathway-icon {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.pathway-card:nth-child(4) .pathway-icon {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.pathway-card h5 {
    color: #000000;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.4;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pathway-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
}

.pathway-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    min-height: 70px;
}

.pathway-services span {
    background: rgba(63, 159, 66, 0.08);
    color: #3f9f42;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 1px solid rgba(63, 159, 66, 0.15);
}

.pathway-card:hover .pathway-services span {
    background: rgba(63, 159, 66, 0.15);
    transform: translateY(-2px);
}

/* Different service tag colors based on card */
.pathway-card:nth-child(1) .pathway-services span {
    background: rgba(52, 152, 219, 0.08);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.15);
}

.pathway-card:nth-child(2) .pathway-services span {
    background: rgba(231, 76, 60, 0.08);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.15);
}

.pathway-card:nth-child(3) .pathway-services span {
    background: rgba(46, 204, 113, 0.08);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.15);
}

.pathway-card:nth-child(4) .pathway-services span {
    background: rgba(243, 156, 18, 0.08);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.15);
}

.pathway-link {
    display: inline-block;
    background: #3f9f42;
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid #3f9f42;
    width: 100%;
    text-align: center;
}

.pathway-link:hover {
    background: white;
    color: #3f9f42;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(63, 159, 66, 0.3);
}

/* Different link colors based on card */
.pathway-card:nth-child(1) .pathway-link {
    background: #3498db;
    border-color: #3498db;
}

.pathway-card:nth-child(2) .pathway-link {
    background: #e74c3c;
    border-color: #e74c3c;
}

.pathway-card:nth-child(3) .pathway-link {
    background: #2ecc71;
    border-color: #2ecc71;
}

.pathway-card:nth-child(4) .pathway-link {
    background: #f39c12;
    border-color: #f39c12;
}

/* .pathway-card:nth-child(1) .pathway-link:hover {
    color: #3498db;
}

.pathway-card:nth-child(2) .pathway-link:hover {
    color: #e74c3c;
}

.pathway-card:nth-child(3) .pathway-link:hover {
    color: #2ecc71;
}

.pathway-card:nth-child(4) .pathway-link:hover {
    color: #f39c12;
} */

/* Add subtle background patterns */
.pathway-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3f9f42 0%, #2d8a2f 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pathway-card:hover::before {
    opacity: 1;
}

/* Different top borders on hover */
.pathway-card:nth-child(1):hover::before {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
}

.pathway-card:nth-child(2):hover::before {
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}

.pathway-card:nth-child(3):hover::before {
    background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
}

.pathway-card:nth-child(4):hover::before {
    background: linear-gradient(90deg, #f39c12 0%, #d68910 100%);
}

/* Responsive Design */
@media (max-width: 992px) {
    .recovery-pathways {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .recovery-pathways {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .pathway-card {
        padding: 25px 20px;
    }
    
    .pathway-card h5 {
        font-size: 17px;
        min-height: auto;
        margin-bottom: 10px;
    }
    
    .pathway-services {
        min-height: 60px;
    }
    
    .pathway-services span {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .pathway-link {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .pathway-card {
        padding: 20px 15px;
    }
    
    .pathway-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .pathway-card h5 {
        font-size: 16px;
    }
    
    .pathway-services {
        gap: 6px;
        margin-bottom: 20px;
    }
    
    .pathway-services span {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Animation for card entrance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pathway-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.pathway-card:nth-child(1) {
    animation-delay: 0.1s;
}

.pathway-card:nth-child(2) {
    animation-delay: 0.2s;
}

.pathway-card:nth-child(3) {
    animation-delay: 0.3s;
}

.pathway-card:nth-child(4) {
    animation-delay: 0.4s;
}
</style>
<script>
    // Add hover effects for pathway cards
document.querySelectorAll('.pathway-card').forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.zIndex = '10';
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.zIndex = '1';
    });
});

// Smooth scroll for anchor links
document.querySelectorAll('.pathway-link[href^="#"]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#reportForm') {
            const formElement = document.getElementById('emergency-form') || document.querySelector('.reporting-form-section');
            if (formElement) {
                formElement.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                
                // Optional: Add focus to first form field
                setTimeout(() => {
                    const firstInput = formElement.querySelector('input, select, textarea');
                    if (firstInput) {
                        firstInput.focus();
                    }
                }, 500);
            }
        }
    });
});
</script>

                <!-- EMERGENCY REPORT FORM -->
                <div class="emergency-form-section" id="emergency-form">
                    <div class="form-header-emergency">
                        <h3><i class="fas fa-first-aid"></i> Emergency Fraud Report Form</h3>
                        <p class="text-muted">Complete this form for priority investigation. Average response time: <strong>2 hours</strong></p>
                    </div>

                    <form id="fraudReportForm" class="fraud-report-form" method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
                    <input type="text" name="website" style="display:none;">
                        
                        <!-- Loading overlay -->
                        <div id="form-loading" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white;">
                                <div class="spinner-border" style="width: 4rem; height: 4rem;"></div>
                                <h4 class="mt-4">Submitting Emergency Fraud Report...</h4>
                                <p class="mt-2">Please wait while we securely process your report</p>
                            </div>
                        </div>
                        
                        <!-- Messages display area -->
                        <div id="form-messages" class="mt-4 mb-4"></div>
                        
                        <!-- Form Progress -->
                        <div class="form-progress mb-4">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                            <div class="progress-steps">
                                <span class="step active">Fraud Details</span>
                                <span class="step">Your Information</span>
                                <span class="step">Evidence</span>
                                <span class="step">Review & Submit</span>
                            </div>
                        </div>

                        <!-- Step 1: Fraud Details -->
                        <div class="form-step active" id="step1">
                            <h4 class="step-title">Step 1: Fraud Details</h4>
                            
                            <div class="form-group mb-4">
                                <label for="fraudType" class="form-label">Type of Fraud *</label>
                                <select class="form-control" id="fraudType" name="fraudType" required>
                                    <option value="">-- Select the fraud type --</option>
                                                                                <option value="crypto_recovery">Crypto & Digital Asset Recovery</option>
                                            <option value="romance_scam">Romance & Relationship Scam Recovery</option>
                                            <option value="business_fraud">Business Fraud Recovery</option>
                                            <option value="wire_fraud">Wire Transfer & Banking Fraud Recovery</option>
                                            <option value="investment_scam">Forex & Investment Scam Recovery</option>
                                            <option value="credit_fraud">Credit Card & Bank Fraud Recovery</option>
                                            <option value="real_estate">Real Estate & Property Fraud Recovery</option>
                                            <option value="prevention">Scam Prevention & Security Training</option>
                                            <option value="general">General Inquiry</option>
                                </select>
                            </div>

                            <div class="form-group mb-4">
                                <label for="firstNoticed" class="form-label">When did you first notice the fraud? *</label>
                                <input type="datetime-local" class="form-control" id="firstNoticed" name="firstNoticed" required>
                            </div>

                            <div class="form-group mb-4">
                                <label for="fraudDescription" class="form-label">Detailed Description *</label>
                                <textarea class="form-control" id="fraudDescription" name="fraudDescription" rows="6" 
                                          placeholder="Describe exactly what happened, including:
                                • How you discovered the fraud
                                • What was compromised/stolen
                                • Any amounts involved
                                • Individuals/entities involved (if known)
                                • Steps you've already taken"
                                          required></textarea>
                            </div>

                            <div class="form-group mb-4">
                                <label class="form-label">Is this an ongoing/active fraud? *</label>
                                <div class="radio-group">
                                    <label class="radio-label">
                                        <input type="radio" name="ongoing" value="yes" required> Yes, it's still happening
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" name="ongoing" value="no"> No, it has stopped
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" name="ongoing" value="unknown"> I don't know
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Step 2: Your Information -->
                        <div class="form-step" id="step2">
                            <h4 class="step-title">Step 2: Your Information</h4>
                            
                            <div class="form-note mb-4">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    <div>
                                        <h5>Confidentiality Notice</h5>
                                        <p class="mb-0">Your information is protected. We will never share your details with unauthorized parties.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="reporterName" class="form-label">Full Name *</label>
                                        <input type="text" class="form-control" id="reporterName" name="reporterName" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="reporterEmail" class="form-label">Email Address *</label>
                                        <input type="email" class="form-control" id="reporterEmail" name="reporterEmail" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="reporterPhone" class="form-label">Phone Number *</label>
                                        <input type="tel" class="form-control" id="reporterPhone" name="reporterPhone" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-4">
                                        <label for="caseReference" class="form-label">Reclaim Ethically Case # (if applicable)</label>
                                        <input type="text" class="form-control" id="caseReference" name="caseReference" placeholder="RE-XXXX-XXXX">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-4">
                                <label for="contactPreference" class="form-label">Preferred Contact Method *</label>
                                <select class="form-control" id="contactPreference" name="contactPreference" required>
                                    <option value="">-- How should we contact you? --</option>
                                    <option value="email">Email (Recommended for documentation)</option>
                                    <option value="phone">Phone Call (Faster response)</option>
                                    <option value="both">Both Email and Phone</option>
                                    <option value="secure">Secure Encrypted Message</option>
                                </select>
                            </div>
                        </div>

                        <!-- Step 3: Evidence -->
                        <div class="form-step" id="step3">
                            <h4 class="step-title">Step 3: Upload Evidence</h4>
                            
                            <div class="evidence-guidance mb-4">
                                <div class="alert alert-warning">
                                    <i class="fas fa-lightbulb"></i>
                                    <div>
                                        <h5>Evidence Tips</h5>
                                        <ul class="mb-0">
                                            <li>Screenshots of suspicious activity</li>
                                            <li>Email headers (not just forward)</li>
                                            <li>Transaction IDs and details</li>
                                            <li>Any communication with fraudsters</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- In your form, replace the file upload section with this: -->
                                    <div class="form-group mb-4">
                                        <label for="evidenceFiles" class="form-label">Upload Files (Optional)</label>
                                        <div class="file-upload-area">
                                            <div class="file-upload-box" id="fileUploadBox">
                                                <i class="fas fa-cloud-upload-alt fa-3x"></i>
                                                <p>Drag & drop files here or click to browse</p>
                                                <small class="text-muted">Max 10 files, 25MB each. Supported: Images, PDF, Documents</small>
                                            </div>
                                            <input type="file" id="evidenceFiles" name="evidenceFiles[]" multiple 
                                                accept=".jpg,.jpeg,.png,.pdf,.txt,.doc,.docx,.csv" 
                                                class="file-input" style="display: none;">
                                            <div class="file-preview" id="filePreview"></div>
                                        </div>
                                    </div>

                            <div class="form-group mb-4">
                                <label for="additionalInfo" class="form-label">Additional Information</label>
                                <textarea class="form-control" id="additionalInfo" name="additionalInfo" rows="4" 
                                          placeholder="Any other relevant information, links to external evidence, or context that might help our investigation"></textarea>
                            </div>
                        </div>

                        <!-- Step 4: Review & Submit -->
                        <div class="form-step" id="step4">
                            <h4 class="step-title">Step 4: Review & Submit</h4>
                            
                            <div class="review-summary mb-4">
                                <div class="review-section">
                                    <h5><i class="fas fa-clipboard-list"></i> Report Summary</h5>
                                    <div class="summary-details" id="summaryDetails">
                                        <!-- Filled by JavaScript -->
                                    </div>
                                </div>
                            </div>

                            <!-- In your form, replace the checkbox section with this: -->
                                    <div class="confirmation-check mb-4">
                                        <div class="form-check">
                                            <!-- Add this hidden input -->
                                            <input type="hidden" name="confirmTruthful" value="off">
                                            <input class="form-check-input" type="checkbox" id="confirmTruthful" required>
                                            <label class="form-check-label" for="confirmTruthful">
                                                I confirm that the information provided is true and accurate to the best of my knowledge
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <!-- Add this hidden input -->
                                            <input type="hidden" name="confirmConsent" value="off">
                                            <input class="form-check-input" type="checkbox" id="confirmConsent" required>
                                            <label class="form-check-label" for="confirmConsent">
                                                I consent to Reclaim Ethically investigating this report and contacting relevant authorities if necessary
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <!-- Add this hidden input -->
                                            <input type="hidden" name="confirmPrivacy" value="off">
                                            <input class="form-check-input" type="checkbox" id="confirmPrivacy" required>
                                            <label class="form-check-label" for="confirmPrivacy">
                                                I understand how my data will be used as described in the Privacy Policy
                                            </label>
                                        </div>
                                    </div>

                            <div class="final-submission">
                                <div class="alert alert-success">
                                    <i class="fas fa-shield-alt"></i>
                                    <div>
                                        <h5>Secure Submission</h5>
                                        <p class="mb-0">Your report will be encrypted and assigned a case number. You'll receive confirmation within 2 hours.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Navigation -->
                        <!-- In your form navigation section, change this: -->
                   <div class="form-navigation mt-4">
    <button type="button" class="btn btn-secondary btn-prev" disabled>Previous</button>
    <button type="button" class="btn btn-primary btn-next">Next Step</button>
    <button type="submit" class="btn btn-success btn-submit">Submit Emergency Report</button>
</div>
                    </form>

                    <!-- Emergency Contacts -->
                    <?php include 'immediate-responce.php';?>

                    <!-- What Happens Next -->
                    <div class="next-steps mt-5">
                        <h4 class="text-center mb-4"><i class="fas fa-project-diagram"></i> What Happens After You Report</h4>
                        <div class="process-timeline">
                            <div class="process-step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h5>Immediate Acknowledgment</h5>
                                    <p>You'll receive a case number and investigator assignment within 2 hours</p>
                                </div>
                            </div>
                            <div class="process-step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h5>Initial Assessment</h5>
                                    <p>Our fraud team reviews your case and determines urgency level</p>
                                </div>
                            </div>
                            <div class="process-step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h5>Investigation Begins</h5>
                                    <p>Evidence collection, analysis, and tracking begins immediately</p>
                                </div>
                            </div>
                            <div class="process-step">
                                <div class="step-number">4</div>
                                <div class="step-content">
                                    <h5>Updates & Resolution</h5>
                                    <p>Regular updates every 48 hours until case resolution</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

                <!-- Emergency Response Section -->
                <!-- Emergency Response - After Being Scammed -->
<div class="emergency-section mb-5">
    <div class="emergency-card">
        <div class="emergency-header">
            <i class="fas fa-ambulance"></i>
            <div>
                <h3>Just Been Scammed? Take These Immediate Steps</h3>
                <p class="mb-0">Critical actions to maximize your recovery chances after fraud</p>
            </div>
        </div>
        <div class="emergency-steps">
            <div class="emergency-step">
                <span class="step-number">1</span>
                <div>
                    <h5>Document Everything NOW</h5>
                    <p>Screenshots, transaction IDs, chat logs, emails</p>
                </div>
                <!-- <a href="#evidence-tips" class="btn-emergency">Evidence Checklist</a> -->
            </div>
            <div class="emergency-step">
                <span class="step-number">2</span>
                <div>
                    <h5>Contact Relevant Platforms</h5>
                    <p>Notify banks, exchanges, or platforms involved</p>
                </div>
                <!-- <a href="#platform-contacts" class="btn-emergency">Platform Contacts</a> -->
            </div>
            <div class="emergency-step">
                <span class="step-number">3</span>
                <div>
                    <h5>Stop Further Communication</h5>
                    <p>Cease all contact with the scammer immediately</p>
                </div>
                <!-- <a href="#safety-tips" class="btn-emergency">Safety Guidelines</a> -->
            </div>
            <div class="emergency-step">
                <span class="step-number">4</span>
                <div>
                    <h5>Start Recovery Process</h5>
                    <p>Begin formal recovery with our experts</p>
                </div>
                <a href="#emergency-form" class="btn-emergency-alert">Begin Recovery Now</a>
            </div>
        </div>
        
        <!-- Additional emergency info -->
        <!-- <div class="emergency-footer mt-4">
            <div class="alert alert-warning mb-0">
                <i class="fas fa-clock mr-2"></i>
                <strong>Time is Critical:</strong> Recovery success rates drop significantly after 72 hours. 
                The sooner you act, the better your chances of recovering funds.
            </div>
        </div> -->
    </div>
</div>

                <!-- Additional Resources -->
                <div class="resources-section">
                    <h3 class="section-title-with-icon">
                        <i class="fas fa-book"></i> Additional Resources
                    </h3>
                    
                    <div class="resources-grid mt-4">
                        <a href="security-guide" class="resource-card">
                            <i class="fas fa-file-pdf"></i>
                            <div>
                                <h5>Security Best Practices Guide</h5>
                                <p>Complete guide to securing your digital assets</p>
                            </div>
                            <i class="fas fa-download"></i>
                        </a>
                        <a href="contact" class="resource-card">
                            <i class="fas fa-phone"></i>
                            <div>
                                <h5>Contact Us</h5>
                                <p>Do you have any other inquiries?</p>
                            </div>
                            <i class="fas fa-play"></i>
                        </a>
                        <a href="faq" class="resource-card">
                            <i class="fas fa-question-circle"></i>
                            <div>
                                <h5>Security FAQ</h5>
                                <p>Answers to common security questions</p>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                        <a href="whistleblowing" class="resource-card">
                            <i class="fas fa-flag"></i>
                            <div>
                                <h5>Report Security Vulnerability</h5>
                                <p>Responsible disclosure program</p>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>
<script>
// Replace your existing JavaScript with this updated version
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Fraud report form loaded');
    
    // Form elements
    const form = document.getElementById('fraudReportForm');
    const steps = document.querySelectorAll('.form-step');
    const progressBar = document.querySelector('.progress-bar');
    const stepIndicators = document.querySelectorAll('.progress-steps .step');
    const btnPrev = document.querySelector('.btn-prev');
    const btnNext = document.querySelector('.btn-next');
    const btnSubmit = document.querySelector('.btn-submit');
    const fileInput = document.getElementById('evidenceFiles');
    const filePreview = document.getElementById('filePreview');
    const summaryDetails = document.getElementById('summaryDetails');
    const fileUploadBox = document.getElementById('fileUploadBox');
    
    let currentStep = 1;
    const totalSteps = 4;
    let uploadedFiles = [];
    
    // Show SweetAlert messages if they exist
    const successMessage = document.getElementById('successMessage');
    const errorMessage = document.getElementById('errorMessage');
    
    if (successMessage) {
        const message = successMessage.getAttribute('data-message');
        Swal.fire({
            title: 'Report Submitted Successfully!',
            html: message,
            icon: 'success',
            confirmButtonText: 'OK',
            confirmButtonColor: '#3f9f42',
            allowOutsideClick: false
        }).then(() => {
            // Reset form on success
            form.reset();
            uploadedFiles = [];
            currentStep = 1;
            showStep(1);
            if (filePreview) filePreview.innerHTML = '';
        });
    }
    
    if (errorMessage) {
        const message = errorMessage.getAttribute('data-message');
        const errorList = document.getElementById('errorList');
        let html = message;
        
        if (errorList) {
            html += errorList.innerHTML;
        }
        
        Swal.fire({
            title: 'Form Errors',
            html: html,
            icon: 'error',
            confirmButtonText: 'Fix Errors',
            confirmButtonColor: '#dc3545'
        });
    }
    
    // Tab functionality
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    if (tabBtns.length > 0) {
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                tabBtns.forEach(b => b.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                this.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });
    }
    
    // Initialize the form with visible borders
    initializeFormFields();
    showStep(currentStep);
    
    // File upload handling
    if (fileInput && fileUploadBox) {
        fileUploadBox.addEventListener('click', function() {
            fileInput.click();
        });
        
        fileInput.addEventListener('change', handleFileSelect);
    }
    
    // Navigation buttons
    btnNext.addEventListener('click', function() {
        if (validateCurrentStep()) {
            if (currentStep < totalSteps) {
                currentStep++;
                showStep(currentStep);
                
                // Scroll to top of form
                scrollToFormTop();
            }
        }
    });
    
    btnPrev.addEventListener('click', function() {
        if (currentStep > 1) {
            currentStep--;
            showStep(currentStep);
            
            // Scroll to top of form
            scrollToFormTop();
        }
    });
    
    // Form submission
    form.addEventListener('submit', function(e) {
        console.log('Form submit event triggered');
        
        // Validate all steps first
        let allValid = true;
        for (let i = 1; i <= totalSteps; i++) {
            currentStep = i;
            if (!validateCurrentStep()) {
                allValid = false;
                showStep(i);
                scrollToFormTop();
                Swal.fire({
                    title: 'Validation Error',
                    text: 'Please complete all required fields in this step correctly.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#dc3545'
                });
                e.preventDefault();
                return false;
            }
        }
        
        // If all steps valid, check checkboxes
        if (allValid) {
            const checkboxes = [
                document.getElementById('confirmTruthful'),
                document.getElementById('confirmConsent'),
                document.getElementById('confirmPrivacy')
            ];
            
            const uncheckedCheckboxes = checkboxes.filter(cb => !cb.checked);
            if (uncheckedCheckboxes.length > 0) {
                showStep(4);
                scrollToFormTop();
                Swal.fire({
                    title: 'Required Agreements',
                    text: 'Please confirm all required agreements before submitting.',
                    icon: 'warning',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#ffc107'
                });
                e.preventDefault();
                return false;
            }
        }
        
        // Show loading message
        Swal.fire({
            title: 'Submitting Report...',
            text: 'Please wait while we process your fraud report.',
            icon: 'info',
            showConfirmButton: false,
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        return true;
    });
    
    // Function to scroll to top of form
    function scrollToFormTop() {
        const formElement = document.getElementById('emergency-form');
        if (formElement) {
            formElement.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
            
            // Small delay for better UX
            setTimeout(() => {
                window.scrollBy(0, -100); // Adjust offset for fixed headers
            }, 300);
        }
    }
    
    // Initialize form fields with visible borders
    function initializeFormFields() {
        const allFormControls = form.querySelectorAll('.form-control, select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="datetime-local"]');
        
        allFormControls.forEach(field => {
            // Add border class if not already present
            if (!field.classList.contains('form-control')) {
                field.classList.add('form-control');
            }
            
            // Set initial border
            field.style.border = '2px solid #e0e0e0';
            field.style.borderRadius = '8px';
            field.style.padding = '15px';
            field.style.backgroundColor = 'white';
            
            // Add focus event listener for better UX
            field.addEventListener('focus', function() {
                this.style.borderColor = '#3f9f42';
                this.style.boxShadow = '0 0 0 3px rgba(63, 159, 66, 0.2)';
            });
            
            field.addEventListener('blur', function() {
                if (!this.classList.contains('is-valid') && !this.classList.contains('is-invalid')) {
                    this.style.borderColor = '#e0e0e0';
                    this.style.boxShadow = 'none';
                }
            });
        });
    }
    
    // Show specific step
    function showStep(step) {
        console.log('Showing step:', step);
        
        // Hide all steps
        steps.forEach(s => s.classList.remove('active'));
        
        // Show current step
        const currentStepElement = document.getElementById(`step${step}`);
        if (currentStepElement) {
            currentStepElement.classList.add('active');
        }
        
        // Update progress indicators
        stepIndicators.forEach((indicator, index) => {
            indicator.classList.remove('active', 'completed');
            if (index + 1 === step) {
                indicator.classList.add('active');
            } else if (index + 1 < step) {
                indicator.classList.add('completed');
            }
        });
        
        // Update navigation buttons
        btnPrev.disabled = step === 1;
        
        // Update button visibility
        if (step === totalSteps) {
            btnNext.style.display = 'none';
            if (btnSubmit) btnSubmit.style.display = 'inline-block';
        } else {
            btnNext.style.display = 'inline-block';
            if (btnSubmit) btnSubmit.style.display = 'none';
        }
        
        // Update progress bar
        updateProgressBar();
        
        // If last step, update summary
        if (step === totalSteps) {
            updateSummary();
        }
    }
    
    // Update progress bar
    function updateProgressBar() {
        if (progressBar) {
            const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
            progressBar.style.width = `${progress}%`;
        }
    }
    
    // Validate current step with enhanced validation
    function validateCurrentStep() {
        const currentStepElement = document.getElementById(`step${currentStep}`);
        if (!currentStepElement) return false;
        
        const requiredFields = currentStepElement.querySelectorAll('[required]');
        let isValid = true;
        
        // Clear previous error messages
        currentStepElement.querySelectorAll('.error-message').forEach(el => el.remove());
        
        requiredFields.forEach(field => {
            const fieldName = field.name || field.id;
            
            // Skip honeypot field
            if (fieldName === 'website') return;
            
            // Special handling for radio buttons
            if (field.type === 'radio') {
                const radioGroupName = field.name;
                const radioGroup = document.querySelectorAll(`input[name="${radioGroupName}"]`);
                const radioChecked = Array.from(radioGroup).some(radio => radio.checked);
                
                if (!radioChecked) {
                    isValid = false;
                    const radioContainer = radioGroup[0].closest('.form-group') || radioGroup[0].parentElement.parentElement;
                    if (!radioContainer.querySelector('.error-message')) {
                        const errorMsg = document.createElement('div');
                        errorMsg.className = 'error-message text-danger small mt-2';
                        errorMsg.innerHTML = '<i class="fas fa-exclamation-circle me-1"></i> This field is required';
                        radioContainer.appendChild(errorMsg);
                    }
                }
                return;
            }
            
            // Enhanced field validation
            const fieldValue = field.value.trim();
            
            if (field.type === 'datetime-local') {
                if (!fieldValue) {
                    showFieldError(field, 'Please select date and time');
                    isValid = false;
                } else if (new Date(fieldValue) > new Date()) {
                    showFieldError(field, 'Date cannot be in the future');
                    isValid = false;
                }
            } else if (field.tagName === 'SELECT') {
                if (!fieldValue) {
                    showFieldError(field, 'Please select an option');
                    isValid = false;
                }
            } else if (field.type === 'textarea') {
                if (!fieldValue) {
                    showFieldError(field, 'This field is required');
                    isValid = false;
                } else if (field.id === 'fraudDescription' && fieldValue.length < 50) {
                    showFieldError(field, 'Please provide more details (minimum 50 characters)');
                    isValid = false;
                }
            } else if (field.type === 'email') {
                if (!fieldValue) {
                    showFieldError(field, 'Email is required');
                    isValid = false;
                } else if (!isValidEmail(fieldValue)) {
                    showFieldError(field, 'Please enter a valid email address');
                    isValid = false;
                }
            } else if (field.id === 'reporterPhone' || field.name === 'reporterPhone') {
                if (!fieldValue) {
                    showFieldError(field, 'Phone number is required');
                    isValid = false;
                } else if (!isValidPhone(fieldValue)) {
                    showFieldError(field, 'Please enter a valid phone number (digits only, 10-15 digits)');
                    isValid = false;
                }
            } else if (field.id === 'reporterName' || field.name === 'reporterName') {
                if (!fieldValue) {
                    showFieldError(field, 'Your name is required');
                    isValid = false;
                } else if (!isValidName(fieldValue)) {
                    showFieldError(field, 'Please enter a valid full name (minimum 2 letters, no numbers)');
                    isValid = false;
                }
            } else if (!fieldValue) {
                showFieldError(field, 'This field is required');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            }
        });
        
        return isValid;
    }
    
    // Enhanced validation functions
    function isValidPhone(phone) {
        // Remove all non-digit characters
        const cleanPhone = phone.replace(/\D/g, '');
        
        // Check if it's a valid length (usually 10-15 digits)
        return cleanPhone.length >= 10 && cleanPhone.length <= 15;
    }
    
    function isValidName(name) {
        // Check if name has at least 2 letters and looks like a real name
        // This regex allows for multiple words, hyphens, and apostrophes
        const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ' -]{2,}(?: [A-Za-zÀ-ÖØ-öø-ÿ' -]+){0,3}$/;
        
        // Check minimum length
        if (name.length < 2) return false;
        
        // Check if it contains at least 2 letters
        const letterCount = (name.match(/[A-Za-zÀ-ÖØ-öø-ÿ]/g) || []).length;
        if (letterCount < 2) return false;
        
        // Check against regex
        return nameRegex.test(name);
    }
    
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    function showFieldError(field, message) {
        field.classList.remove('is-valid');
        field.classList.add('is-invalid');
        
        const existingError = field.parentElement.querySelector('.error-message');
        if (existingError) existingError.remove();
        
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message text-danger small mt-1';
        errorDiv.innerHTML = `<i class="fas fa-exclamation-circle me-1"></i> ${message}`;
        field.parentElement.appendChild(errorDiv);
    }
    
    // File upload handling
    function handleFileSelect(event) {
        const files = event.target.files;
        
        if (filePreview) {
            filePreview.innerHTML = '';
        }
        
        if (!files || files.length === 0) {
            uploadedFiles = [];
            updateFileCount();
            return;
        }
        
        uploadedFiles = Array.from(files);
        
        // Limit to 10 files
        if (uploadedFiles.length > 10) {
            alert('Maximum 10 files allowed. Only the first 10 will be uploaded.');
            uploadedFiles = uploadedFiles.slice(0, 10);
            
            const dataTransfer = new DataTransfer();
            uploadedFiles.forEach(file => dataTransfer.items.add(file));
            fileInput.files = dataTransfer.files;
        }
        
        // Validate and display files
        uploadedFiles.forEach((file, index) => {
            const maxSize = 25 * 1024 * 1024;
            if (file.size > maxSize) {
                alert(`File "${file.name}" exceeds 25MB limit and will not be uploaded.`);
                uploadedFiles.splice(index, 1);
                return;
            }
            
            const allowedTypes = ['jpg', 'jpeg', 'png', 'pdf', 'txt', 'doc', 'docx', 'csv'];
            const fileExt = file.name.split('.').pop().toLowerCase();
            if (!allowedTypes.includes(fileExt)) {
                alert(`File type .${fileExt} not allowed for "${file.name}".`);
                uploadedFiles.splice(index, 1);
                return;
            }
            
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item alert alert-light d-flex justify-content-between align-items-center mb-2';
            fileItem.innerHTML = `
                <div class="file-info d-flex align-items-center">
                    <i class="fas fa-file me-2 text-primary"></i>
                    <div>
                        <div class="fw-bold">${file.name}</div>
                        <small class="text-muted">${formatFileSize(file.size)}</small>
                    </div>
                </div>
                <button type="button" class="btn btn-sm btn-danger remove-file" data-index="${index}">
                    <i class="fas fa-times"></i>
                </button>
            `;
            if (filePreview) {
                filePreview.appendChild(fileItem);
            }
        });
        
        document.querySelectorAll('.remove-file').forEach(btn => {
            btn.addEventListener('click', function() {
                const index = parseInt(this.getAttribute('data-index'));
                uploadedFiles.splice(index, 1);
                
                const dataTransfer = new DataTransfer();
                uploadedFiles.forEach(file => dataTransfer.items.add(file));
                fileInput.files = dataTransfer.files;
                
                handleFileSelect({ target: fileInput });
            });
        });
        
        updateFileCount();
    }
    
    function updateFileCount() {
        if (fileUploadBox) {
            const existingCount = fileUploadBox.querySelector('.file-count');
            if (existingCount) existingCount.remove();
            
            if (uploadedFiles.length > 0) {
                const countBadge = document.createElement('span');
                countBadge.className = 'file-count badge bg-success ms-2';
                countBadge.textContent = `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} selected`;
                fileUploadBox.appendChild(countBadge);
            }
        }
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // Update summary for step 4
    function updateSummary() {
        if (!summaryDetails) return;
        
        const fraudType = document.getElementById('fraudType');
        const firstNoticed = document.getElementById('firstNoticed');
        const ongoing = document.querySelector('input[name="ongoing"]:checked');
        const reporterName = document.getElementById('reporterName');
        const reporterEmail = document.getElementById('reporterEmail');
        const reporterPhone = document.getElementById('reporterPhone');
        const contactPref = document.getElementById('contactPreference');
        const fraudDesc = document.getElementById('fraudDescription');
        const caseRef = document.getElementById('caseReference');
        const additionalInfo = document.getElementById('additionalInfo');
        
        const summary = `
            <div class="summary-details">
                <div class="card mb-3">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Fraud Details</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Type:</strong> ${fraudType && fraudType.value ? fraudType.options[fraudType.selectedIndex].text : 'Not specified'}</p>
                        <p><strong>First Noticed:</strong> ${firstNoticed && firstNoticed.value ? new Date(firstNoticed.value).toLocaleString() : 'Not specified'}</p>
                        <p><strong>Ongoing:</strong> ${ongoing ? (ongoing.value === 'yes' ? 'Yes, still active' : 'No') : 'Not specified'}</p>
                        <p><strong>Description:</strong><br>${fraudDesc && fraudDesc.value ? fraudDesc.value.substring(0, 200) + (fraudDesc.value.length > 200 ? '...' : '') : 'Not provided'}</p>
                    </div>
                </div>
                
                <div class="card mb-3">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0"><i class="fas fa-user me-2"></i>Your Information</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Name:</strong> ${reporterName && reporterName.value ? reporterName.value : 'Not provided'}</p>
                        <p><strong>Email:</strong> ${reporterEmail && reporterEmail.value ? reporterEmail.value : 'Not provided'}</p>
                        <p><strong>Phone:</strong> ${reporterPhone && reporterPhone.value ? reporterPhone.value : 'Not provided'}</p>
                        <p><strong>Case Reference:</strong> ${caseRef && caseRef.value ? caseRef.value : 'None'}</p>
                        <p><strong>Contact Preference:</strong> ${contactPref && contactPref.value ? contactPref.options[contactPref.selectedIndex].text : 'Email'}</p>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="mb-0"><i class="fas fa-file-upload me-2"></i>Evidence & Additional Info</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Files Uploaded:</strong> ${uploadedFiles.length} file(s)</p>
                        <p><strong>Additional Information:</strong><br>${additionalInfo && additionalInfo.value ? additionalInfo.value : 'None provided'}</p>
                    </div>
                </div>
            </div>
        `;
        
        summaryDetails.innerHTML = summary;
    }
    
    // Real-time validation as user types
    form.addEventListener('input', function(event) {
        const field = event.target;
        const fieldName = field.name || field.id;
        
        // Skip honeypot field
        if (fieldName === 'website') return;
        
        if (field.hasAttribute('required') || field.type === 'email' || field.id === 'reporterPhone' || field.id === 'reporterName') {
            validateSingleField(field);
        }
    });
    
    function validateSingleField(field) {
        const fieldValue = field.value.trim();
        const fieldName = field.name || field.id;
        
        field.classList.remove('is-invalid', 'is-valid');
        const existingError = field.parentElement.querySelector('.error-message');
        if (existingError) existingError.remove();
        
        if (field.type === 'radio') {
            const radioGroup = document.querySelectorAll(`input[name="${field.name}"]`);
            const radioChecked = Array.from(radioGroup).some(radio => radio.checked);
            if (radioChecked) {
                radioGroup.forEach(radio => {
                    radio.classList.remove('is-invalid');
                    radio.classList.add('is-valid');
                });
            }
        } else if (field.type === 'datetime-local') {
            if (fieldValue) {
                if (new Date(fieldValue) <= new Date()) {
                    field.classList.add('is-valid');
                } else {
                    showFieldError(field, 'Date cannot be in the future');
                }
            }
        } else if (field.tagName === 'SELECT') {
            if (fieldValue) {
                field.classList.add('is-valid');
            }
        } else if (field.type === 'textarea') {
            if (fieldValue) {
                if (field.id === 'fraudDescription' && fieldValue.length >= 50) {
                    field.classList.add('is-valid');
                } else if (field.id !== 'fraudDescription') {
                    field.classList.add('is-valid');
                }
            }
        } else if (field.type === 'email') {
            if (fieldValue && isValidEmail(fieldValue)) {
                field.classList.add('is-valid');
            }
        } else if (field.id === 'reporterPhone' || field.name === 'reporterPhone') {
            if (fieldValue && isValidPhone(fieldValue)) {
                field.classList.add('is-valid');
            }
        } else if (field.id === 'reporterName' || field.name === 'reporterName') {
            if (fieldValue && isValidName(fieldValue)) {
                field.classList.add('is-valid');
            }
        } else if (fieldValue) {
            field.classList.add('is-valid');
        }
    }
    
    // Initialize form on page load
    showStep(1);
});
</script>
<style>
    /* Force submit button to show on step 4 */
.form-navigation .btn-submit {
    display: none !important;
}

.form-navigation .btn-submit[style*="inline-block"] {
    display: inline-block !important;
}

/* Remove any inline styles that might be hiding the button */
.btn-submit {
    display: inline-block !important;
}
    /* Fix for button display on step 4 */
.form-navigation .btn-next:not([style*="display: none"]) {
    display: inline-block !important;
}

.form-navigation .btn-submit:not([style*="display: none"]) {
    display: inline-block !important;
}

.form-navigation .btn-next[style*="display: none"] {
    display: none !important;
}

.form-navigation .btn-submit[style*="display: none"] {
    display: none !important;
}
/* Fix for button alignment */
/* Fix for button alignment - FORCE FIX */
.form-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #dee2e6 !important;
    gap: 15px !important;
    width: 100% !important;
}

.form-navigation .btn-prev,
.form-navigation .btn-next,
.form-navigation .btn-submit {
    min-width: 140px !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
}

.form-navigation .btn-prev {
    order: 1 !important;
}

.form-navigation .btn-next {
    order: 2 !important;
}

.form-navigation .btn-submit {
    order: 3 !important;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .form-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .form-navigation .btn-prev,
    .form-navigation .btn-next,
    .form-navigation .btn-submit {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* Form step styling */
.form-step {
    display: none;
    animation: fadeIn 0.5s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Progress bar styling */
.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 20px;
}

.progress-steps:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    transform: translateY(-50%);
    z-index: 1;
}

.progress-steps .step {
    position: relative;
    z-index: 2;
    background: white;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    color: #999;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.progress-steps .step.active {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.progress-steps .step.completed {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

/* Form validation styling */
.is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.error-message {
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .form-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-navigation .btn-prev,
    .form-navigation .btn-next,
    .form-navigation .btn-submit {
        width: 100%;
    }
    
    .progress-steps {
        flex-direction: column;
        gap: 10px;
    }
    
    .progress-steps:before {
        display: none;
    }
    
    .progress-steps .step {
        width: 100%;
        text-align: center;
    }
}
</style>
<!-- Report Fraud Content End -->
 <style>
    /* ===== REPORT FRAUD PAGE SPECIFIC STYLES ===== */
.report-fraud-content {
    background: #f8f9fa;
}

/* Emergency Alert */
.emergency-alert-section {
    animation: pulse-alert 2s infinite;
}

@keyframes pulse-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.emergency-alert {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

.alert-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.alert-content h3 {
    color: white;
    margin-bottom: 10px;
    font-weight: 700;
}

.alert-link {
    color: #ffd54f;
    text-decoration: underline;
    font-weight: 600;
}

.hotline-number {
    background: white;
    color: #dc3545;
    padding: 5px 15px;
    border-radius: 25px;
    margin-left: 10px;
    font-weight: 700;
}

/* Urgency Badges */
.urgency-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.badge-urgency {
    background: rgba(63, 159, 66, 0.15);
    color: #2d8a2f;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid rgba(63, 159, 66, 0.3);
}

.badge-urgency i {
    font-size: 16px;
}

/* Checklist Steps */
.checklist-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.checklist-step {
    background: white;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
}

.checklist-step.urgent {
    border-color: #ffc107;
    background: #fff9e6;
}

.checklist-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.step-number {
    width: 40px;
    height: 40px;
    background: #3f9f42;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.checklist-step.urgent .step-number {
    background: #dc3545;
}

.step-content {
    flex-grow: 1;
}

.step-content h5 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-content p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.btn-small {
    background: #3f9f42;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.btn-small:hover {
    background: #2d8a2f;
    color: white;
}

/* Fraud Types Tabs */
.fraud-types-tabs {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
    padding: 18px 25px;
    background: none;
    border: none;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    color: #3f9f42;
    background: white;
}

.tab-btn.active {
    color: #3f9f42;
    background: white;
}

.tab-btn.active:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #3f9f42;
}

.tab-content {
    padding: 30px;
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-content h5 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-content ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 0;
}

.tab-content ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0;
    color: #333;
}

.tab-content ul li:last-child {
    border-bottom: none;
}

.urgency-high {
    color: #dc3545;
    font-weight: 700;
    background: rgba(220, 53, 69, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
}

.urgency-medium {
    color: #ffc107;
    font-weight: 700;
    background: rgba(255, 193, 7, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
}

.urgency-low {
    color: #17a2b8;
    font-weight: 700;
    background: rgba(23, 162, 184, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
}

/* Emergency Form Section */
.emergency-form-section {
    background: white;
    border-radius: 12px;
    padding: 40px;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid #dc3545;
}

.form-header-emergency {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.form-header-emergency h3 {
    color: #dc3545;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

/* Form Progress */
.form-progress {
    margin-bottom: 40px;
}

.progress {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, #3f9f42 0%, #2d8a2f 100%);
    transition: width 0.5s ease;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.progress-steps:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background: #f0f0f0;
    z-index: 1;
}

.progress-steps .step {
    background: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    color: #999;
    position: relative;
    z-index: 2;
    border: 2px solid #f0f0f0;
}

.progress-steps .step.active {
    color: #3f9f42;
    border-color: #3f9f42;
    background: rgba(63, 159, 66, 0.05);
}

/* Form Steps */
.form-step {
    display: none;
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.form-step.active {
    display: block;
}

.step-title {
    color: #000000;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

/* Form Elements */
.form-control {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #3f9f42;
    box-shadow: 0 0 0 3px rgba(63, 159, 66, 0.2);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-label:hover {
    background: #f0f0f0;
}

.radio-label input[type="radio"] {
    margin: 0;
}

/* File Upload */
/* Add to your existing CSS */
.file-upload-area {
    border: 3px dashed #ddd;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #f9f9f9;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.file-upload-area:hover {
    border-color: #3f9f42;
    background: rgba(63, 159, 66, 0.05);
}

.file-upload-area.dragover {
    border-color: #3f9f42;
    background: rgba(63, 159, 66, 0.1);
    transform: scale(1.02);
}

.file-upload-box {
    pointer-events: none; /* Let the container handle clicks */
}

.file-upload-box i {
    color: #3f9f42;
    margin-bottom: 15px;
    opacity: 0.7;
}

.file-upload-box p {
    color: #555;
    font-weight: 500;
    margin-bottom: 10px;
}

.file-upload-box small {
    color: #777;
    font-size: 13px;
}

.file-preview {
    margin-top: 20px;
    width: 100%;
}

.file-item {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-count {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    padding: 5px 10px;
}

/* Review Summary */
.review-summary {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

.summary-details {
    margin-top: 15px;
}

.summary-item {
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
    display: flex;
    justify-content: space-between;
}

.summary-item:last-child {
    border-bottom: none;
}

/* Confirmation Check */
.confirmation-check {
    background: #fff9e6;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #ffd54f;
}

.form-check {
    margin-bottom: 15px;
}

.form-check-input:checked {
    background-color: #3f9f42;
    border-color: #3f9f42;
}

/* Form Navigation */
.form-navigation {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

.btn-prev, .btn-next, .btn-submit {
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 25px;
    min-width: 150px;
}

.btn-submit {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    display: none;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* Emergency Contacts */
.emergency-contacts {
    margin-top: 50px;
}

.contact-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e0e0e0;
    height: 100%;
    transition: all 0.3s ease;
}

.contact-card.emergency {
    border-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.contact-card i {
    font-size: 36px;
    color: #3f9f42;
    margin-bottom: 20px;
}

.contact-card.emergency i {
    color: #dc3545;
}

.contact-card h5 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 15px;
}

.contact-card p {
    color: #333;
    font-weight: 500;
    margin-bottom: 10px;
}

.contact-card small {
    color: #666;
    font-size: 13px;
}

/* Next Steps */
.next-steps {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {
    .emergency-alert {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .tab-buttons {
        flex-direction: column;
    }
    
    .tab-btn {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .tab-btn.active:after {
        bottom: -1px;
        left: 0;
        right: auto;
        width: 100%;
        height: 2px;
    }
    
    .form-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-prev, .btn-next, .btn-submit {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .emergency-form-section {
        padding: 25px 20px;
    }
    
    .progress-steps {
        flex-direction: column;
        gap: 10px;
    }
    
    .progress-steps:before {
        display: none;
    }
    
    .checklist-steps {
        grid-template-columns: 1fr;
    }
}


/* Add to your existing CSS file (style.css or create a new one) */

/* Default form field styling - visible borders */
.form-control {
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    background-color: white !important;
}

/* Make placeholders more visible */
.form-control::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.form-control:-ms-input-placeholder {
    color: #999 !important;
}

.form-control::-ms-input-placeholder {
    color: #999 !important;
}

/* Focus state */
.form-control:focus {
    border-color: #3f9f42 !important;
    box-shadow: 0 0 0 3px rgba(63, 159, 66, 0.2) !important;
}

/* Valid state */
.form-control.is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

/* Invalid state */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
}

/* Select dropdown styling */
select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px 12px !important;
    padding-right: 40px !important;
}

/* Textarea specific styling */
textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Radio button and checkbox styling */
.radio-label, .form-check {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    transition: all 0.3s ease !important;
}

.radio-label:hover, .form-check:hover {
    border-color: #3f9f42 !important;
    background: rgba(63, 159, 66, 0.05) !important;
}

/* File upload area styling */
.file-upload-area {
    border: 3px dashed #ddd !important;
    background: #f9f9f9 !important;
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.file-upload-area:hover {
    border-color: #3f9f42 !important;
    background: rgba(63, 159, 66, 0.05) !important;
}

/* Label styling */
.form-label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-label:after {
    content: " *" !important;
    color: #dc3545 !important;
}

.form-label.optional:after {
    content: "" !important;
}

/* Error message styling */
.error-message {
    color: #dc3545 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
 </style>
 
               
            </div>
        </div>
    </div>
</section>
<style>
    /* ===== ADDITIONAL REPORT FRAUD STYLES ===== */

/* Fraud Types Section */
.fraud-types-section {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.fraud-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.fraud-type-card {
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    height: 100%;
}

.fraud-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #3f9f42;
}

.fraud-type-header {
    background: linear-gradient(135deg, #3f9f42 0%, #2d8a2f 100%);
    color: white;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.fraud-type-header i {
    font-size: 24px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fraud-type-header h5 {
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.fraud-type-body {
    padding: 25px;
}

.fraud-type-body p {
    color: #333;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
}

.prevention-tips {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.prevention-tips strong {
    color: #000000;
    display: block;
    margin-bottom: 15px;
    font-size: 15px;
}

.prevention-tips ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.prevention-tips ul li {
    padding: 8px 0;
    color: #555;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.prevention-tips ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3f9f42;
    font-weight: bold;
}

/* Emergency Section - Updated to match your specifications */
.emergency-section {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #dc3545;
    margin-bottom: 40px;
}

.emergency-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.1);
}

.emergency-header {
    background: #dc3545;
    color: white;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.emergency-header i {
    font-size: 36px;
}

.emergency-header h3 {
    color: white;
    margin: 0;
    font-weight: 700;
}

.emergency-header p {
    color: rgba(255, 255, 255, 0.9);
    margin: 5px 0 0;
}

.emergency-steps {
    padding: 25px;
}

.emergency-step {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 15px;
}

.emergency-step:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 40px;
    height: 40px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.emergency-step div {
    flex-grow: 1;
}

.emergency-step h5 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 5px;
}

.emergency-step p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.btn-emergency {
    background: #3f9f42;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-emergency-alert {
    background: #dc3545;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-emergency:hover, .btn-emergency-alert:hover {
    opacity: 0.9;
    color: white;
    transform: translateY(-2px);
}

/* Resources Section */
.resources-section {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.resource-card {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    color: inherit;
}

.resource-card:hover {
    border-color: #3f9f42;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(63, 159, 66, 0.1);
    text-decoration: none;
    color: inherit;
}

.resource-card i:first-child {
    color: #3f9f42;
    font-size: 24px;
    flex-shrink: 0;
}

.resource-card div {
    flex-grow: 1;
}

.resource-card h5 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 5px;
}

.resource-card p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.resource-card i:last-child {
    color: #3f9f42;
}

/* Section Title With Icon */
.section-title-with-icon {
    color: #000000;
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
}

.section-title-with-icon i {
    color: #3f9f42;
    font-size: 24px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .fraud-types-grid,
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .emergency-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .btn-emergency,
    .btn-emergency-alert {
        align-self: flex-start;
    }
    
    .emergency-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .emergency-header i {
        font-size: 28px;
    }
    
    .section-title-with-icon {
        font-size: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .fraud-types-section,
    .resources-section {
        padding: 20px;
    }
    
    .fraud-type-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .resource-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }
    
    .resource-card i:last-child {
        display: none;
    }
    
    .emergency-step {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .emergency-step .btn-emergency,
    .emergency-step .btn-emergency-alert {
        margin-top: 10px;
    }
}

/* Add this to ensure proper button display */
.form-navigation {
    display: flex !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 2px solid #e0e0e0 !important;
}

.form-navigation .btn-submit {
    display: none !important;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border: none !important;
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.form-navigation .btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3) !important;
}

/* Show submit button only on step 4 */
.form-step#step4.active ~ .form-navigation .btn-submit {
    display: inline-block !important;
}

.form-step#step4.active ~ .form-navigation .btn-next {
    display: none !important;
}
</style>
<!-- Fraud Prevention Content End -->


<style>
    
</style>
        <!-- Footer area start -->
        <?php include 'footer.php';?>
        <!-- Footer area end -->

       
        <!-- Copyright area end -->

        <div class="go-top go-top-3"><i class="fas fa-chevron-up"></i></div>

        <!-- Link of JS files -->
         

        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery-ui.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/magnific-popup.min.js"></script>
        <script src="assets/js/TweenMax.js"></script>
        <script src="assets/js/nice-select.min.js"></script>
        <script src="assets/js/form-validator.min.js"></script>
        <script src="assets/js/contact-form-script.js"></script>
        <script src="assets/js/ajaxchimp.min.js"></script>
        <script src="assets/js/countdown.min.js"></script>
        <script src="assets/js/appear.min.js"></script>
        <script src="assets/js/barfiller.js"></script>
        <script src="assets/js/odometer.min.js"></script>
        <script src="assets/js/custom.js"></script>
    </body>

</html>



