.elementor-940 .elementor-element.elementor-element-821ee50{--display:flex;}.elementor-940 .elementor-element.elementor-element-708ad83{--display:flex;}/* Start custom CSS for html, class: .elementor-element-a884894 */<div id="id-generator-app">
<!-- External Libraries -->
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ⭐ ANTI-PIRACY CSS */
@media print {
    body, #id-generator-app { display: none !important; }
}

/* ⭐ PREMIUM PROFESSIONAL CSS VARIABLES */
#id-generator-app { 
    --primary: #4f46e5; /* Premium Indigo */
    --primary-hover: #4338ca;
    --secondary-dark: #0f172a; /* Slate 900 */
    --success: #10b981; 
    --warning: #f59e0b; 
    --bg-color: #f8fafc; /* Softer background */
    --card-bg: #ffffff; 
    --text-main: #1e293b; 
    --text-muted: #64748b; 
    --border: #e2e8f0; 
    --border-focus: #818cf8;
    --radius-lg: 20px;
    --radius-md: 12px;
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.06);
    --shadow-hover: 0 20px 40px -10px rgba(79, 70, 229, 0.15);
    
    font-family: 'Poppins', sans-serif; 
    background-color: var(--bg-color); 
    padding: 40px 20px; 
    color: var(--text-main); 
    box-sizing: border-box; 
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
}

#id-generator-app * { box-sizing: border-box; }
#id-generator-app .header { text-align: center; margin-bottom: 40px; }
#id-generator-app .header h2 { font-weight: 700; font-size: 36px; margin: 0; color: var(--secondary-dark); letter-spacing: -0.5px;}
#id-generator-app .header h2 span { color: var(--primary); }
#id-generator-app .header p { color: var(--text-muted); font-size: 15px; margin-top: 5px; }

#id-generator-app .app-wrapper { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 550px 1fr; gap: 40px; align-items: start; }
@media (max-width: 1024px) { #id-generator-app .app-wrapper { grid-template-columns: 1fr; } }

#id-generator-app .card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid rgba(0,0,0,0.03); transition: all 0.3s ease; }
#id-generator-app .card:hover { box-shadow: 0 15px 50px -10px rgba(0,0,0,0.08); }

#id-generator-app .card-header { background: linear-gradient(135deg, var(--secondary-dark), #1e293b); color: white; padding: 22px 30px; }
#id-generator-app .card-header h3 { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; letter-spacing: 0.5px;}

#id-generator-app .card-body { padding: 35px 30px; }
#id-generator-app .form-group { margin-bottom: 24px; width: 100%; } 

/* Premium Labels */
#id-generator-app label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }

/* Modern Inputs & Textareas */
#id-generator-app input[type="text"], #id-generator-app select, #id-generator-app textarea { 
    width: 100%; 
    padding: 14px 18px; 
    border: 1.5px solid var(--border); 
    border-radius: var(--radius-md); 
    font-size: 15px; 
    font-weight: 500; 
    font-family: 'Poppins', sans-serif; 
    background-color: #f8fafc; 
    color: var(--secondary-dark);
    transition: all 0.25s ease; 
}
#id-generator-app input:hover, #id-generator-app select:hover, #id-generator-app textarea:hover { background-color: #fff; border-color: #cbd5e1; }
#id-generator-app input:focus, #id-generator-app select:focus, #id-generator-app textarea:focus { 
    outline: none; 
    border-color: var(--border-focus); 
    background-color: #fff; 
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); 
}

#id-generator-app .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } 
#id-generator-app .flex-group { display: flex; gap: 10px; width: 100%; } 

/* Beautiful Upload Box */
#id-generator-app .upload-box-photo { background: #f0fdfa; border: 2px dashed #14b8a6; padding: 25px; border-radius: var(--radius-md); margin-bottom: 30px; text-align: center; transition: all 0.3s ease;}
#id-generator-app .upload-box-photo:hover { background: #e6fffa; border-color: #0d9488; }
#id-generator-app .upload-box-photo label { color: #0f766e; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-transform: none; letter-spacing: 0;}
#id-generator-app .upload-box-photo label i { font-size: 28px; }
#id-generator-app .upload-box-photo input { margin-top: 12px; font-size: 13px; color: #64748b; }

/* Action Buttons */
#id-generator-app button { appearance: none; -webkit-appearance: none; outline: none; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px;}
#id-generator-app .secure-box { background: #fffbeb; border: 1.5px solid #fde68a; border-radius: var(--radius-md); padding: 25px; text-align: center; margin-top: 30px; }
#id-generator-app .secure-box h4 { margin: 0 0 8px 0; color: #b45309; font-size: 17px; font-weight: 600; }
#id-generator-app .success-box { display: none; background: #ecfdf5; border: 1.5px solid #a7f3d0; border-radius: var(--radius-md); padding: 25px; text-align: center; margin-top: 30px; }
#id-generator-app .success-box h4 { margin: 0 0 8px 0; color: #047857; font-size: 17px; font-weight: 600; }

#id-generator-app .btn-pay { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 16px; border: none; border-radius: var(--radius-md); cursor: pointer; width: 100%; font-size: 16px; font-weight: 600; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25); }
#id-generator-app .btn-pay:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35); }

#id-generator-app .btn-download { background: linear-gradient(135deg, #10b981, #059669); color: white; padding: 16px; border: none; border-radius: var(--radius-md); cursor: pointer; width: 100%; font-size: 16px; font-weight: 600; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25); }
#id-generator-app .btn-download:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35); }

/* Sticky Preview Panel */
#id-generator-app .preview-wrapper { position: sticky; top: 40px; }
#id-generator-app .preview-panel { background: white; padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(0,0,0,0.03); position: relative; }
#id-generator-app canvas { border: 1px solid var(--border); border-radius: 12px; width: 100%; height: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.08); background: white; display:block !important;}

/* ⭐ MOBILE VIEW CSS */
@media (max-width: 1024px) { 
    #id-generator-app .app-wrapper { grid-template-columns: 1fr; } 
    #id-generator-app .grid-2 { grid-template-columns: 1fr; gap: 0; } 
    #id-generator-app .flex-group select { width: 110px !important; } 
    #id-generator-app .flex-group input { flex-grow: 1; width: calc(100% - 120px); }
    #id-generator-app { padding: 20px 10px; }
    #id-generator-app .card-body { padding: 25px 20px; }
}
</style>

<div class="header">
    <h2>Smart ID <span>Pro Dashboard</span></h2>
    <p>Generate & Download High Definition A4 ID Cards</p>
</div>

<div class="app-wrapper">
    <div class="form-section card">
        <div class="card-header"><h3><i class="fa-solid fa-user-pen"></i> Enter Student Details</h3></div>
        <div class="card-body">
            
            <div class="upload-box-photo" id="photoBoxContainer">
                <label id="photoLabel"><i class="fa-solid fa-cloud-arrow-up"></i> Upload User Photo</label>
                <input type="file" id="userPhotoInput" accept="image/jpeg, image/png">
            </div>

            <div class="form-group"><label>Aadhaar / ID Number</label><input type="text" id="uidNo" value="4433 6677 4488"></div>
            
            <div class="grid-2">
                <div class="form-group"><label>Name (Hindi)</label><input type="text" id="hinName" value="प्रियंका चोपड़ा"></div>
                <div class="form-group"><label>Name (English)</label><input type="text" id="engName" value="Priyanka Chopra"></div>
            </div>

            <div class="grid-2">
                <div class="form-group"><label>Date of Birth</label><input type="text" id="dob" value="00/00/0000"></div>
                <div class="form-group"><label>Gender</label><select id="gender"><option value="पुरुष / Male">पुरुष / Male</option><option value="महिला / Female">महिला / Female</option></select></div>
            </div>
            
            <div class="grid-2">
                <div class="form-group">
                    <label>Care Of (Hindi)</label>
                    <div class="flex-group">
                        <select id="coTypeHin" style="width: 100px; cursor: pointer; font-weight: 600;">
                            <option value="S/O">S/O</option>
                            <option value="D/O">D/O</option>
                            <option value="W/O">W/O</option>
                            <option value="C/O">C/O</option>
                        </select>
                        <input type="text" id="coNameHin" value="सज्जाद अंसारी" placeholder="पिता/पति का नाम">
                    </div>
                </div>
                <div class="form-group">
                    <label>Care Of (English)</label>
                    <div class="flex-group">
                        <select id="coTypeEng" style="width: 100px; cursor: pointer; font-weight: 600;">
                            <option value="S/O">S/O</option>
                            <option value="D/O">D/O</option>
                            <option value="W/O">W/O</option>
                            <option value="C/O">C/O</option>
                        </select>
                        <input type="text" id="coNameEng" value="Sajjad Ansari" placeholder="Guardian Name">
                    </div>
                </div>
            </div>

            <div class="grid-2">
                <div class="form-group">
                    <label>Address (Hindi)</label>
                    <textarea id="hinAddress" rows="7" style="resize: vertical; min-height: 160px; line-height: 1.6;">पता: S/O सज्जाद अंसारी
ग्राम-शिवतल्ला, पोस्ट-खारुकदमा
थाना- शिकारीपाड़ा, दुमका,
झारखंड 816118</textarea>
                </div>
                <div class="form-group">
                    <label>Address (English)</label>
                    <textarea id="engAddress" rows="7" style="resize: vertical; min-height: 160px; line-height: 1.6;">Address: S/O Sajjad Ansari
Vill- Shivtalla, Post-Kharukadma
Thana-Shikaripara, Dumka
Jharkhand 816118</textarea>
                </div>
            </div>
            
            <!-- PAYMENT BOX -->
            <div class="secure-box" id="paymentSection">
                <h4><i class="fa-solid fa-lock"></i> Payment Required</h4>
                <p style="font-size: 13px; color: #92400e; margin-bottom: 20px;">A4 HD PDF (Without Watermark) ke liye ₹50 pay karein.</p>
                <button type="button" class="btn-pay" id="btnGoToPay"><i class="fa-solid fa-credit-card"></i> Pay Securely ₹50</button>
            </div>
            
            <!-- DOWNLOAD BOX -->
            <div class="success-box" id="downloadSection">
                <h4><i class="fa-solid fa-circle-check"></i> Payment Verified!</h4>
                <p style="font-size: 13px; color: #065f46; margin-bottom: 20px;">Form is securely locked. Your HD ID Card is ready.</p>
                <button type="button" class="btn-download" id="btnDownloadPDF"><i class="fa-solid fa-cloud-arrow-down"></i> Download HD PDF</button>
            </div>
        </div>
    </div>
    
    <div class="preview-wrapper">
        <div id="statusText" style="text-align: center; color: var(--primary); font-weight: 600;"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading High-Res Graphics...</div>
        <div class="preview-panel" id="previewContainer" style="display: none;">
            <div style="width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: var(--secondary-dark);"><i class="fa-solid fa-eye" style="color:var(--primary); margin-right: 8px;"></i> Live Preview</h3>
                <span id="watermarkBadge" style="background: #fef08a; color: #b45309; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.05);"><i class="fa-solid fa-lock" style="margin-right: 5px;"></i> Watermarked</span>
            </div>
            <canvas id="idCanvas"></canvas>
        </div>
    </div>
</div>
</div>

<script>
// ⭐ ANTI-PIRACY JAVASCRIPT
document.addEventListener('contextmenu', event => event.preventDefault()); 
document.addEventListener('keydown', function(e) {
    if(e.keyCode === 123 || 
       (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) || 
       (e.ctrlKey && (e.keyCode === 85 || e.keyCode === 80 || e.keyCode === 83))) {
        e.preventDefault();
        return false;
    }
});

let appStarted = false;
function checkLibrariesAndStart() {
    if (window.PDFLib && window.QRCode && !appStarted) {
        appStarted = true;
        runMainApp();
    } else {
        setTimeout(checkLibrariesAndStart, 200);
    }
}
document.addEventListener("DOMContentLoaded", checkLibrariesAndStart);
window.addEventListener("load", checkLibrariesAndStart);

function runMainApp() {
    let isUnlocked = false;

    // FORM LOCK ENGINE
    function lockFormInputs() {
        const inputIds = ['uidNo', 'hinName', 'engName', 'dob', 'gender', 'coTypeHin', 'coNameHin', 'coTypeEng', 'coNameEng', 'hinAddress', 'engAddress', 'userPhotoInput'];
        inputIds.forEach(id => {
            const el = document.getElementById(id);
            if(el) { el.disabled = true; el.style.backgroundColor = "#e2e8f0"; el.style.cursor = "not-allowed"; el.style.color = "#64748b"; }
        });

        const photoBox = document.getElementById('photoBoxContainer');
        const photoLabel = document.getElementById('photoLabel');
        if(photoBox && photoLabel) {
            photoBox.style.backgroundColor = "#f1f5f9"; photoBox.style.borderColor = "#94a3b8"; photoBox.style.cursor = "not-allowed";
            photoLabel.innerHTML = '<i class="fa-solid fa-lock"></i> Form Locked'; photoLabel.style.color = "#64748b";
        }
        
        const badge = document.getElementById('watermarkBadge');
        if(badge) {
            badge.style.background = "#dcfce7"; badge.style.color = "#166534"; badge.innerHTML = '<i class="fa-solid fa-unlock" style="margin-right: 5px;"></i> Unlocked';
        }
    }

    function checkPaymentStatus() {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('status') === 'success' || urlParams.get('unlock') === 'true') {
            isUnlocked = true;
            document.getElementById('paymentSection').style.display = 'none';
            document.getElementById('downloadSection').style.display = 'block';
            lockFormInputs(); 
            setTimeout(() => {
                const cleanURL = window.location.href.split('?')[0];
                window.history.replaceState({}, document.title, cleanURL); 
            }, 1000); 
        }
    }
    checkPaymentStatus();

    const CASHFREE_LINK = "https://payments.cashfree.com/forms/gplmonkey";
    const FRONT_LINK = "https://coursefreedownload.shop/wp-content/uploads/2026/05/Pokecut_1777829354352-scaled.png";
    const BACK_LINK = "https://coursefreedownload.shop/wp-content/uploads/2026/05/Pokecut_1777833530452-scaled.png";
    
    const CONFIG = { 
        foldGap: 2, cardWidth: 800, cardHeight: 500, photo: { x: 18, y: 121, width: 190, height: 240 }, 
        hinName: { x: 220, y: 160, size: 22, font: "Mangal", weight: "normal" }, 
        engName: { x: 220, y: 196, size: 23, font: "Arial", weight: "normal" }, 
        dob: { x: 220, y: 237, size: 20, font: "Arial", weight: "normal" }, 
        gender: { x: 220, y: 270, size: 20, font: "Mangal", weight: "normal" }, 
        uidFront: { x: 250, y: 400, size: 36, font: "Mangal", weight: "bold" }, 
        hinAddress: { x: 39, y: 140, size: 21, font: "Mangal", maxWidth: 350, lineHeight: 28, weight: "normal" }, 
        engAddress: { x: 410, y: 140, size: 21, font: "Arial", maxWidth: 350, lineHeight: 28, weight: "normal" }, 
        uidBack: { x: 250, y: 400, size: 36, font: "Mangal", weight: "bold" }, 
        qrCodeFront: { x: 565, y: 200, size: 175 } 
    };
    
    let frontImgObj = null, backImgObj = null, userPhotoObj = null, typingTimer;
    const canvas = document.getElementById('idCanvas');
    const ctx = canvas.getContext('2d');
    
    const scaleFactor = 2; 
    canvas.width = (CONFIG.cardWidth * 2) * scaleFactor; canvas.height = CONFIG.cardHeight * scaleFactor; 
    ctx.scale(scaleFactor, scaleFactor); 
    ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';

    document.getElementById('btnGoToPay').addEventListener('click', function() { window.location.href = CASHFREE_LINK; });
    document.getElementById('btnDownloadPDF').addEventListener('click', downloadA4PDF);
    document.getElementById('userPhotoInput').addEventListener('change', loadUserPhoto);
    
    function syncCareOfToAddress() {
        if(isUnlocked) return;
        const typeHin = document.getElementById('coTypeHin').value;
        const nameHin = document.getElementById('coNameHin').value;
        const typeEng = document.getElementById('coTypeEng').value;
        const nameEng = document.getElementById('coNameEng').value;
        const hinBox = document.getElementById('hinAddress');
        const engBox = document.getElementById('engAddress');

        if(hinBox.value !== undefined) {
            let hinLines = hinBox.value.split('\n');
            hinLines[0] = `पता: ${typeHin} ${nameHin}`;
            hinBox.value = hinLines.join('\n');
        }
        
        if(engBox.value !== undefined) {
            let engLines = engBox.value.split('\n');
            engLines[0] = `Address: ${typeEng} ${nameEng}`;
            engBox.value = engLines.join('\n');
        }
    }

    ['uidNo','hinName','engName','dob','gender','hinAddress','engAddress'].forEach(id => {
        document.getElementById(id).addEventListener('input', saveDataAndDraw);
    });

    ['coTypeHin', 'coNameHin', 'coTypeEng', 'coNameEng'].forEach(id => {
        document.getElementById(id).addEventListener('input', () => {
            syncCareOfToAddress();
            saveDataAndDraw();
        });
    });

    function loadImageFast(url) {
        return new Promise((resolve, reject) => {
            const img = new Image(); 
            img.crossOrigin = "Anonymous"; 
            img.onload = () => resolve(img); 
            img.onerror = () => {
                const proxyImg = new Image();
                proxyImg.crossOrigin = "Anonymous";
                proxyImg.onload = () => resolve(proxyImg);
                proxyImg.onerror = () => reject("Fail");
                proxyImg.src = "https://wsrv.nl/?url=" + url.replace(/^https?:\/\//, '') + "&output=png";
            };
            img.src = url; 
        });
    }

    async function initGraphics() {
        restoreData();
        try {
            const [imgF, imgB] = await Promise.all([ loadImageFast(FRONT_LINK), loadImageFast(BACK_LINK) ]);
            frontImgObj = imgF; 
            backImgObj = imgB;
            document.getElementById('statusText').style.display = 'none';
            document.getElementById('previewContainer').style.display = 'flex';
            drawCard();
        } catch (e) { 
            document.getElementById('statusText').innerHTML = "<i class='fa-solid fa-triangle-exclamation'></i> Graphics Load Error. Refresh kariye."; 
            document.getElementById('statusText').style.color = "red";
        }
    }
    initGraphics();

    function saveDataAndDraw() {
        if(isUnlocked) return; 
        try {
            const data = { 
                uidNo: document.getElementById('uidNo').value || "", hinName: document.getElementById('hinName').value || "", 
                engName: document.getElementById('engName').value || "", dob: document.getElementById('dob').value || "", 
                gender: document.getElementById('gender').value || "", 
                coTypeHin: document.getElementById('coTypeHin').value || "S/O", coNameHin: document.getElementById('coNameHin').value || "", 
                coTypeEng: document.getElementById('coTypeEng').value || "S/O", coNameEng: document.getElementById('coNameEng').value || "", 
                hinAddress: document.getElementById('hinAddress').value || "", engAddress: document.getElementById('engAddress').value || "" 
            };
            localStorage.setItem('idCardData', JSON.stringify(data));
        } catch(e) {}
        clearTimeout(typingTimer); 
        typingTimer = setTimeout(() => { drawCard(); }, 100);
    }

    function restoreData() {
        try {
            const saved = localStorage.getItem('idCardData');
            if(saved) {
                const data = JSON.parse(saved);
                document.getElementById('uidNo').value = data.uidNo; document.getElementById('hinName').value = data.hinName; 
                document.getElementById('engName').value = data.engName; document.getElementById('dob').value = data.dob; 
                document.getElementById('gender').value = data.gender; 
                if(data.coTypeHin) document.getElementById('coTypeHin').value = data.coTypeHin;
                if(data.coNameHin) document.getElementById('coNameHin').value = data.coNameHin;
                if(data.coTypeEng) document.getElementById('coTypeEng').value = data.coTypeEng;
                if(data.coNameEng) document.getElementById('coNameEng').value = data.coNameEng;
                document.getElementById('hinAddress').value = data.hinAddress; document.getElementById('engAddress').value = data.engAddress;
            }
            const savedPhoto = localStorage.getItem('idCardPhoto');
            if(savedPhoto) {
                userPhotoObj = new Image(); userPhotoObj.onload = () => drawCard(); userPhotoObj.src = savedPhoto;
            }
        } catch(e) {}
    }

    function loadUserPhoto(e) {
        if(isUnlocked) return;
        const reader = new FileReader();
        reader.onload = (ev) => {
            const img = new Image();
            img.onload = () => {
                const tmp = document.createElement('canvas'); tmp.width = 250; tmp.height = 300;
                tmp.getContext('2d').drawImage(img, 0, 0, 250, 300);
                try { localStorage.setItem('idCardPhoto', tmp.toDataURL('image/jpeg', 0.8)); } catch(e) {}
                userPhotoObj = img; drawCard(); 
            };
            img.src = ev.target.result;
        };
        if(e.target.files[0]) reader.readAsDataURL(e.target.files[0]);
    }

    function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
        const lines = text.split('\n');
        lines.forEach(l => {
            let words = l.split(' '), line = '';
            words.forEach(w => {
                let test = line + w + ' ';
                if (ctx.measureText(test).width > maxWidth) { ctx.fillText(line, x, y); line = w + ' '; y += lineHeight; }
                else { line = test; }
            });
            ctx.fillText(line, x, y); y += lineHeight;
        });
    }

    async function drawCard(hideWatermark = false) {
        if (!frontImgObj || !backImgObj) return;
        
        ctx.clearRect(0, 0, CONFIG.cardWidth * 2, CONFIG.cardHeight);
        ctx.drawImage(frontImgObj, 0, 0, CONFIG.cardWidth, CONFIG.cardHeight);
        ctx.drawImage(backImgObj, CONFIG.cardWidth, 0, CONFIG.cardWidth, CONFIG.cardHeight);
        
        if (userPhotoObj) { ctx.drawImage(userPhotoObj, CONFIG.photo.x, CONFIG.photo.y, CONFIG.photo.width, CONFIG.photo.height); } 
        else { ctx.fillStyle = "#e2e8f0"; ctx.fillRect(CONFIG.photo.x, CONFIG.photo.y, CONFIG.photo.width, CONFIG.photo.height); }
        
        ctx.fillStyle = "#28282B";
        
        ctx.font = `${CONFIG.hinName.weight} ${CONFIG.hinName.size}px ${CONFIG.hinName.font}`; ctx.fillText(document.getElementById('hinName').value, CONFIG.hinName.x, CONFIG.hinName.y);
        ctx.font = `${CONFIG.engName.weight} ${CONFIG.engName.size}px ${CONFIG.engName.font}`; ctx.fillText(document.getElementById('engName').value, CONFIG.engName.x, CONFIG.engName.y);
        ctx.font = `${CONFIG.dob.weight} ${CONFIG.dob.size}px ${CONFIG.dob.font}`; ctx.fillText(`जन्म तिथि/ DOB : ${document.getElementById('dob').value}`, CONFIG.dob.x, CONFIG.dob.y);
        ctx.font = `${CONFIG.gender.weight} ${CONFIG.gender.size}px ${CONFIG.gender.font}`; ctx.fillText(document.getElementById('gender').value, CONFIG.gender.x, CONFIG.gender.y);
        ctx.font = `${CONFIG.uidFront.weight} ${CONFIG.uidFront.size}px ${CONFIG.uidFront.font}`; ctx.fillText(document.getElementById('uidNo').value, CONFIG.uidFront.x, CONFIG.uidFront.y);
        ctx.font = `${CONFIG.hinAddress.weight} ${CONFIG.hinAddress.size}px ${CONFIG.hinAddress.font}`; wrapText(ctx, document.getElementById('hinAddress').value, CONFIG.hinAddress.x + CONFIG.cardWidth, CONFIG.hinAddress.y, CONFIG.hinAddress.maxWidth, CONFIG.hinAddress.lineHeight);
        ctx.font = `${CONFIG.engAddress.weight} ${CONFIG.engAddress.size}px ${CONFIG.engAddress.font}`; wrapText(ctx, document.getElementById('engAddress').value, CONFIG.engAddress.x + CONFIG.cardWidth, CONFIG.engAddress.y, CONFIG.engAddress.maxWidth, CONFIG.engAddress.lineHeight);
        ctx.font = `${CONFIG.uidBack.weight} ${CONFIG.uidBack.size}px ${CONFIG.uidBack.font}`; ctx.fillText(document.getElementById('uidNo').value, CONFIG.uidBack.x + CONFIG.cardWidth, CONFIG.uidBack.y);
        
        const uidClean = document.getElementById('uidNo').value.replace(/\s+/g,'');
        const genderCode = document.getElementById('gender').value.includes('Female') ? 'F' : 'M';
        const dobValue = document.getElementById('dob').value;
        const yob = dobValue.length >= 4 ? dobValue.slice(-4) : dobValue; 
        
        const engAddrFull = document.getElementById('engAddress').value;
        const pcMatch = engAddrFull.match(/\d{6}/);
        const pcValue = pcMatch ? pcMatch[0] : "";
        let cleanAddress = engAddrFull.split('\n').slice(1).join(', ').trim(); 
        if(!cleanAddress) cleanAddress = engAddrFull.replace(/\n/g, ', ').trim();
        
        const engName = document.getElementById('engName').value;
        const coNameFull = document.getElementById('coTypeEng').value + ": " + document.getElementById('coNameEng').value; 

        const qrDataXML = "<" + "?xml version=\"1.0\" encoding=\"UTF-8\"?" + ">\n<PrintLetterBarcodeData uid=\"" + uidClean + "\" name=\"" + engName + "\" gender=\"" + genderCode + "\" yob=\"" + yob + "\" co=\"" + coNameFull + "\" lm=\"" + cleanAddress + "\" pc=\"" + pcValue + "\" dob=\"" + dobValue + "\"/>";
        
        try { 
            const qrBase64 = await QRCode.toDataURL(qrDataXML, { margin: 1, width: CONFIG.qrCodeFront.size * scaleFactor, color: { dark: '#28282B', light: '#FFFFFF' } }); 
            const qimg = await loadImageFast(qrBase64); 
            ctx.drawImage(qimg, CONFIG.qrCodeFront.x, CONFIG.qrCodeFront.y, CONFIG.qrCodeFront.size, CONFIG.qrCodeFront.size); 
        } catch(e){}

        if (!isUnlocked && !hideWatermark) {
            ctx.save();
            ctx.fillStyle = "rgba(220, 38, 38, 0.25)"; 
            ctx.font = "bold 90px Arial";
            ctx.translate(CONFIG.cardWidth / 2, CONFIG.cardHeight / 2);
            ctx.rotate(-Math.PI / 6);
            ctx.fillText("PREVIEW ONLY", -350, 20);
            ctx.restore();

            ctx.save();
            ctx.fillStyle = "rgba(220, 38, 38, 0.25)";
            ctx.font = "bold 90px Arial";
            ctx.translate(CONFIG.cardWidth + (CONFIG.cardWidth / 2), CONFIG.cardHeight / 2);
            ctx.rotate(-Math.PI / 6);
            ctx.fillText("PREVIEW ONLY", -350, 20);
            ctx.restore();
        }
    }

    async function downloadA4PDF() {
        if (!frontImgObj) { alert("Please wait for graphics to load!"); return; }
        if (!isUnlocked) { alert("Please complete payment first!"); return; }
        
        const btn = document.getElementById('btnDownloadPDF');
        const origHtml = btn.innerHTML;
        
        try {
            btn.disabled = true; 
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing HD PDF...';

            await drawCard(true); 

            const halfWidth = CONFIG.cardWidth * scaleFactor;   
            const fullHeight = CONFIG.cardHeight * scaleFactor; 

            const frontCanvas = document.createElement('canvas'); 
            frontCanvas.width = halfWidth; frontCanvas.height = fullHeight; 
            const fCtx = frontCanvas.getContext('2d');
            fCtx.drawImage(canvas, 0, 0, halfWidth, fullHeight, 0, 0, halfWidth, fullHeight); 
            const frontData = frontCanvas.toDataURL('image/png', 1.0);

            const backCanvas = document.createElement('canvas'); 
            backCanvas.width = halfWidth; backCanvas.height = fullHeight; 
            const bCtx = backCanvas.getContext('2d');
            bCtx.drawImage(canvas, halfWidth, 0, halfWidth, fullHeight, 0, 0, halfWidth, fullHeight); 
            const backData = backCanvas.toDataURL('image/png', 1.0);

            const pdfDoc = await PDFLib.PDFDocument.create(); 
            const page = pdfDoc.addPage([595.28, 841.89]);
            
            const pdfFront = await pdfDoc.embedPng(frontData); 
            const pdfBack = await pdfDoc.embedPng(backData);
            
            const printWidth = 260; const printHeight = 162.5; 
            const yPos = 841.89 - printHeight - 50; 
            
            page.drawImage(pdfFront, { x: 27, y: yPos, width: printWidth, height: printHeight });
            page.drawImage(pdfBack, { x: 27 + printWidth + CONFIG.foldGap, y: yPos, width: printWidth, height: printHeight });
            
            const pdfBytes = await pdfDoc.save(); 
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            const link = document.createElement('a'); 
            link.href = URL.createObjectURL(blob); 
            link.download = `Student_ID_A4_HQ.pdf`; 
            link.click();
            
            await drawCard(); 
        } catch (error) { 
            console.error(error);
            alert("Error saving PDF."); 
        } finally { 
            btn.innerHTML = origHtml; btn.disabled = false; 
        }
    }
}
</script>
</div>/* End custom CSS */