<?php
date_default_timezone_set("Asia/Kolkata");

// Define the base directory constant
define('ROOT_DIR', realpath(dirname(__FILE__)) . '/../');

// Securely include files using the ROOT_DIR constant
include ROOT_DIR . 'pages/dbFunctions.php';
include ROOT_DIR . 'pages/dbInfo.php';

$link_token = sanitizeInput($_GET["token"]);

// Fetch order_id based on the token from the payment_links table
$sql_fetch_order_id = "SELECT order_id, created_at FROM payment_links WHERE link_token = '$link_token'";
$result = getXbyY($sql_fetch_order_id);

if (count($result) === 0) {
    // Token not found or expired
    echo "Token not found or expired";
    exit;
}

$order_id = $result[0]['order_id'];
$created_at = strtotime($result[0]['created_at']);
$current_time = time();

// Check if the token has expired (more than 5 minutes)
if (($current_time - $created_at) > (5 * 60)) {
    // Mark the underlying order as FAILURE instead of leaving it PENDING forever
    $safe_order_id = addslashes($order_id);
    setXbyY("UPDATE orders SET status='FAILURE' WHERE order_id='$safe_order_id'");
    include ROOT_DIR . 'includes/expired_page.php';
    exit;
}

$slq_p = "SELECT * FROM orders where order_id='$order_id'";
$res_p = getXbyY($slq_p);
$isTestOrder = !empty($res_p[0]['is_test']);
$amount = $res_p[0]['amount'];
$user_token = $res_p[0]['user_token'];
$redirect_url = $res_p[0]['redirect_url'];
$cxrkalwaremark = $res_p[0]['byteTransactionId'];  //remark
$cxrbytectxnref = $res_p[0]['paytm_txn_ref'];

if ($redirect_url == '') {
    $redirect_url = 'https://' . $_SERVER["SERVER_NAME"] . '/';
}

// Append a status flag to the redirect URL so the destination page can tell
// success apart from a failed/cancelled payment, instead of always showing "success".
function withPaymentStatus($url, $status) {
    // Don't blindly append - if the merchant's own redirect_url already has
    // payment_status / order_id in it, appending again produced duplicated
    // params like "...&order_id=X&order_id=X" in the final redirect.
    $parts = parse_url($url);
    parse_str($parts['query'] ?? '', $query);
    $query['payment_status'] = $status;
    $query['order_id'] = $GLOBALS['order_id'];
    $newQuery = http_build_query($query);

    $rebuilt = '';
    if (!empty($parts['scheme'])) $rebuilt .= $parts['scheme'] . '://';
    if (!empty($parts['host'])) $rebuilt .= $parts['host'];
    if (!empty($parts['port'])) $rebuilt .= ':' . $parts['port'];
    $rebuilt .= $parts['path'] ?? '';
    if ($newQuery !== '') $rebuilt .= '?' . $newQuery;
    if (!empty($parts['fragment'])) $rebuilt .= '#' . $parts['fragment'];

    return $rebuilt;
}
$redirect_url_success = withPaymentStatus($redirect_url, 'success');
$redirect_url_failed  = withPaymentStatus($redirect_url, 'failed');

// Fetch UPI ID
$slq_p = "SELECT * FROM paytm_tokens where user_token='$user_token'";
$res_p = getXbyY($slq_p);
$upi_id = $res_p[0]['Upiid']; // UPI ID from Paytm tokens

// Fetch user information
$slq_p = "SELECT * FROM users where user_token='$user_token'";
$res_p = getXbyY($slq_p);
$unitId = $res_p[0]['name'];

// Checkout page customization (logo / brand color / display name)
$checkoutDisplayName = !empty($res_p[0]['checkout_business_name']) ? $res_p[0]['checkout_business_name'] : $unitId;

function cxr_valid_hex($val, $default) {
    return (!empty($val) && preg_match('/^#[0-9A-Fa-f]{6}$/', $val)) ? $val : $default;
}
$checkoutPrimaryColor = cxr_valid_hex($res_p[0]['checkout_primary_color'] ?? null, '#0F6B5C');
$checkoutSecondaryColor = cxr_valid_hex($res_p[0]['checkout_secondary_color'] ?? null, '#E8A33D');
$checkoutSuccessColor = cxr_valid_hex($res_p[0]['checkout_success_color'] ?? null, '#1FAA59');
$checkoutBgColor = cxr_valid_hex($res_p[0]['checkout_bg_color'] ?? null, '#EAF3F0');
$checkoutTextColor = cxr_valid_hex($res_p[0]['checkout_text_color'] ?? null, '#0B1F1C');

$checkoutLogoUrl = !empty($res_p[0]['checkout_logo_url']) ? $res_p[0]['checkout_logo_url'] : null;

function cxr_darken_hex($hex, $percent = 0.18) {
    $hex = ltrim($hex, '#');
    if (strlen($hex) !== 6) return '#0A4F44';
    $r = max(0, (int)round(hexdec(substr($hex, 0, 2)) * (1 - $percent)));
    $g = max(0, (int)round(hexdec(substr($hex, 2, 2)) * (1 - $percent)));
    $b = max(0, (int)round(hexdec(substr($hex, 4, 2)) * (1 - $percent)));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}
$checkoutPrimaryColorDark = cxr_darken_hex($checkoutPrimaryColor);

$checkoutShowQr = isset($res_p[0]['checkout_show_qr']) ? (bool)$res_p[0]['checkout_show_qr'] : true;
$checkoutShowGpay = isset($res_p[0]['checkout_show_googlepay']) ? (bool)$res_p[0]['checkout_show_googlepay'] : true;
$checkoutShowPhonepe = isset($res_p[0]['checkout_show_phonepe']) ? (bool)$res_p[0]['checkout_show_phonepe'] : true;
$checkoutShowOtherUpi = isset($res_p[0]['checkout_show_other_upi']) ? (bool)$res_p[0]['checkout_show_other_upi'] : true;
if (!$checkoutShowQr && !$checkoutShowGpay && !$checkoutShowPhonepe && !$checkoutShowOtherUpi) {
    $checkoutShowQr = true;
}


// Generate a unique transaction remark
$asdasd23 = "TXN" . rand(111, 999) . time() . rand(1, 100);

$orders = "upi://pay?pa=$upi_id&am=$amount&pn=$unitId&tn=$asdasd23&tr=$cxrbytectxnref";
$paytm  = "paytmmp://cash_wallet?pa=$upi_id&am=$amount&pn=$unitId&tn=$asdasd23&tr=$cxrbytectxnref&amp;mc=5641&amp;cu=INR&amp;url=&amp;mode=02&amp;purpose=00&amp;orgid=159002&amp;sign=MEUCIHldtBS8sv53BbdI9jtTN4vRokbPT91Fm6wlPQCN/sVkAiEAs4p9TPwTvLvPsceQLjSOBL1lAKhrsHdHMnfiDFyu1Aw=&amp;featuretype=money_transfer";

// GoQR API URL generate karna
$qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" . urlencode($orders) . "&size=300x300&ecc=M";

// Generate UPI links for PhonePe and Google Pay
$phonepe_link   = "phonepe://pay?pa=$upi_id&am=$amount&pn=$unitId&tn=$asdasd23&tr=$cxrbytectxnref";
$googlepay_link = "tez://upi/pay?pa=$upi_id&am=$amount&pn=$unitId&tn=$asdasd23&tr=$cxrbytectxnref";

// Real remaining time (server-side truth) instead of always resetting to 5:00
$expirySeconds = max(0, (5 * 60) - ($current_time - $created_at));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout...</title>
<link rel="icon" href="https://panel.mgamer.online/assets/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://panel.mgamer.online/assets/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="https://panel.mgamer.online/assets/favicon-192x192.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://panel.mgamer.online/assets/brite-dialog.css">
<style>
:root {
            --zap-c1:#E67E22;
        --zap-c2:#D35400;
        --zap-c3:#F39C12;
        --zap-c4:#FFF3E0;
        --zap-c5:#333333;
        --zap-c6:#4A4A4A;
        --zap-c7:#FAFAFA;
        --zap-c8:#FF8000;
        --primary:#FF8000;
        --primary-light:#FF8000;
        --primary: var(--zap-c8, #4a6cf7);
    --primary-light: var(--zap-c8, #6c8cff);
    --success: #00d09c;
    --error: #ff4757;
    --warning: #ffa502;
    --dark-bg: #0f172a;
    --light-bg: #f8fafc;
    --card-dark: #1e293b;
    --card-light: #ffffff;
    --text-dark: #1e293b;
    --text-light: #f1f5f9;
    --shadow: 0 8px 30px rgba(0,0,0,0.08);
    --transition: all 0.25s ease;
}

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--light-bg);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    transition: var(--transition);
}

body.dark-mode {
    background: var(--dark-bg);
    color: var(--text-light);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* PAGE LOADER */
.page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--light-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.4s ease;
}
body.dark-mode .page-loader { background: var(--dark-bg); }
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-circle {
    width: 60px; height: 60px;
    border: 3px solid rgba(74,108,247,0.1);
    border-radius: 50%;
    border-top-color: #4a6cf7;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.loader-text { font-size: 0.95rem; font-weight: 500; color: #4a6cf7; }

/* VERIFICATION SHEET */
.verification-bottom-sheet {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: var(--card-light);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 1500;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px 0px 30px;
}
body.dark-mode .verification-bottom-sheet { background: var(--card-dark); }
.verification-bottom-sheet.active { transform: translateY(0); }

.verification-header {
    text-align: center;
    margin-bottom: 30px;
    display: flex;           /* add karo */
    flex-direction: column;  /* add karo */
    align-items: center;     /* add karo */
}
.verification-handle {
    width: 40px; height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 0 auto 35px;
}


.verification-icon-container {
    position: relative;
    width: 120px; height: 120px;
    margin: 10px auto 25px;
}

.plan-boost-icon {
    position: absolute;
    top: 52%;
    left: 52%;
    width: 70px; height: 70px;
    z-index: 2;
    /* transform aur animation alag mat rakho */
    animation: fastRotate 0.6s linear infinite;
}

@keyframes fastRotate {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px) {
    .verification-icon-container { width: 100px; height: 100px; }
      .plan-boost-icon { width: 55px; height: 55px; }
}

.pulse-ring {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 3px solid var(--primary);
    top: 0; left: 0;
    animation: fastPulse 0.8s cubic-bezier(0.4,0,0.6,1) infinite;
    opacity: 0;
}


.pulse-ring:nth-child(2) { animation-delay: 0.2s; }
.pulse-ring:nth-child(3) { animation-delay: 0.4s; }
.pulse-ring:nth-child(4) { animation-delay: 0.6s; }
@keyframes fastPulse {
    0%   { transform: scale(0.7); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}
.verification-title {
    font-size: 1.3rem; font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary);
    letter-spacing: 0.5px;
}
.verification-subtitle { font-size: 0.95rem; color: #64748b; line-height: 1.6; margin-bottom: 25px; }

.progress-bars { display: flex; justify-content: space-between; margin: 25px 0 30px; }
.progress-bar-container {
    flex: 1; height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px; overflow: hidden;
    margin: 0px 20px 0px;
}
body.dark-mode .progress-bar-container { background: rgba(255,255,255,0.08); }
.progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 3px;
    animation: fastProgress 0.5s linear infinite alternate;
}
.progress-bar:nth-child(1) { animation-delay: 0s; }
.progress-bar:nth-child(2) { animation-delay: 0.1s; }
.progress-bar:nth-child(3) { animation-delay: 0.2s; }
.progress-bar:nth-child(4) { animation-delay: 0.3s; }
.progress-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes fastProgress {
    0%   { width: 20%; background: var(--primary); }
    100% { width: 100%; background: var(--primary-light); }
}

.processing-steps {
    display: flex; justify-content: center;
    gap: 15px; margin: 25px 0 30px; flex-wrap: wrap;
}
.step {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    opacity: 0.5; transition: all 0.3s;
    animation: stepBlink 0.8s ease-in-out infinite;
}
.step.active { opacity: 1; animation: none; }
.step-icon {
    width: 40px; height: 40px;
    background: rgba(74,108,247,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--primary);
}
.step-text { font-size: 0.75rem; font-weight: 600; color: var(--primary); }
@keyframes stepBlink { 0%,100%{opacity:0.4} 50%{opacity:1} }
.step:nth-child(1) { animation-delay: 0s; }
.step:nth-child(2) { animation-delay: 0.2s; }
.step:nth-child(3) { animation-delay: 0.4s; }

.speed-indicator {
    margin-top: 20px; font-size: 0.8rem; color: #64748b;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.speed-dot {
    width: 6px; height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: speedDot 0.3s ease-in-out infinite;
}
.speed-dot:nth-child(2) { animation-delay: 0.1s; }
.speed-dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes speedDot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* RESULT SHEET */
.result-bottom-sheet {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: var(--card-light);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    z-index: 1500;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    max-height: 80vh;
    overflow-y: auto;
}
body.dark-mode .result-bottom-sheet { background: var(--card-dark); }
.result-bottom-sheet.active { transform: translateY(0); }

/* OVERLAY — click behaviour controlled via JS flags */
.sheet-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1499;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.sheet-overlay.active { opacity: 1; pointer-events: all; }

.sheet-header { padding: 20px 24px 16px; text-align: center; }
.sheet-handle { width: 40px; height: 4px; background: #cbd5e1; border-radius: 2px; margin: 0 auto 20px; }
.result-icon { font-size: 3.2rem; margin-bottom: 16px; }
.result-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.result-success .result-icon { color: var(--success); }
.result-failed  .result-icon { color: var(--error); }
.result-timeout .result-icon { color: var(--warning); }

.sheet-body { padding: 0 24px 24px; }
.details-card {
    background: rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}
body.dark-mode .details-card { background: rgba(255,255,255,0.03); }
.detail-item {
    display: flex; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.dark-mode .detail-item { border-bottom-color: rgba(255,255,255,0.05); }
.detail-item:last-child { border-bottom: none; }
.detail-label { font-size: 0.85rem; font-weight: 500; color: #64748b; }
.detail-value { font-size: 0.9rem; font-weight: 600;
/* font-family: 'SF Mono','Monaco',monospace;  */
color: var(--primary); }

.countdown-box {
    text-align: center; font-size: 0.9rem;
    padding: 14px;
    background: rgba(74,108,247,0.08);
    border-radius: 12px;
    margin: 20px 0;
    font-weight: 500;
}
.countdown-number { color: var(--primary); font-weight: 600; font-size: 1rem; }

.action-btn-primary {
    width: 100%; padding: 14px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.action-btn-primary:hover { filter: brightness(1.08); }

/* TIMEOUT SCREEN */
.timeout-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--light-bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 3000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
body.dark-mode .timeout-screen { background: var(--dark-bg); }
.timeout-screen.active { opacity: 1; pointer-events: all; }
.timeout-icon { font-size: 4.5rem; color: var(--error); margin-bottom: 20px; animation: shake 0.5s ease-in-out infinite alternate; }
@keyframes shake { 0%{transform:translateX(-2px)} 100%{transform:translateX(2px)} }
.timeout-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 12px; color: var(--error); }
.timeout-text { font-size: 0.9rem; max-width: 400px; margin-bottom: 30px; color: #64748b; line-height: 1.6; }
.refresh-btn {
    padding: 14px 32px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-family: inherit;
}
.status-success .timeout-icon, .status-success .timeout-title { color: #28a745; }
.status-pending .timeout-icon, .status-pending .timeout-title { color: #ffc107; }
.status-failed  .timeout-icon, .status-failed  .timeout-title { color: #dc3545; }
.status-error   .timeout-icon, .status-error    .timeout-title { color: #b02a37; }

/* TEST FAB */
.test-mode-fab {
    position: fixed; right: 30px; bottom: 30px;
    background: var(--primary);
    border-radius: 30px; padding: 10px 16px;
    display: flex; align-items: center; gap: 8px;
    color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 4000; transition: 0.25s;
    opacity: 0; visibility: hidden; transform: scale(0.85); pointer-events: none;
}
.test-mode-fab.show { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
.fab-text { white-space: nowrap; }
.test-mode-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3999; opacity: 0; pointer-events: none; transition: 0.3s;
}
.test-mode-overlay.active { opacity: 1; pointer-events: auto; }
.test-mode-dialog {
    position: fixed; right: 20px; bottom: 90px;
    background: var(--card-light);
    padding: 18px; border-radius: 16px;
    box-shadow: var(--shadow); width: 220px;
    z-index: 4000; transform: scale(0.8);
    opacity: 0; pointer-events: none; transition: 0.25s;
}
body.dark-mode .test-mode-dialog { background: var(--card-dark); }
.test-mode-dialog.active { transform: scale(1); opacity: 1; pointer-events: auto; }

.confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 4998; opacity: 0; pointer-events: none; transition: 0.25s;
}
.confirm-overlay.active { opacity: 1; pointer-events: auto; }
.confirm-dialog {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.85);
    background: #fff; border-radius: 20px; padding: 32px 26px 26px;
    width: 90%; max-width: 340px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    z-index: 4999; opacity: 0; pointer-events: none; transition: 0.25s;
}
.confirm-dialog.active { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: auto; }
.confirm-icon-wrap {
    width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--zap-c3, #F39C12), var(--zap-c2, #D35400));
    box-shadow: 0 8px 22px -8px rgba(232,163,61,.6);
}
.confirm-icon-wrap i { color: #fff; font-size: 28px; }
.confirm-dialog h3 { font-size: 21px; color: var(--t3-on-c7, #222); margin-bottom: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; }
.confirm-dialog p { font-size: 14px; color: var(--t3-hint-color, #777); margin-bottom: 24px; line-height: 1.5; }
.confirm-btn-row { display: flex; gap: 12px; }
.confirm-btn-no, .confirm-btn-yes {
    flex: 1; padding: 13px; border-radius: 12px; border: none;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s;
    font-family: 'Poppins', sans-serif;
}
.confirm-btn-no { background: var(--t3-inner-bg, #f1f1f1); color: var(--t3-on-c7, #222); }
.confirm-btn-no:active { transform: scale(.97); }
.confirm-btn-yes { background: var(--primary, #6c63ff); color: #fff; }
.confirm-btn-yes:active { transform: scale(.97); }
.test-mode-dialog h3 { font-size: 14px; margin-bottom: 12px; text-align: center; color: var(--primary); }
.test-btn {
    width: 100%; padding: 10px; border-radius: 10px;
    border: none; font-weight: 600; margin-bottom: 8px;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-family: inherit;
}
.test-btn.success { background: rgba(0,208,156,0.12); color: var(--success); }
.test-btn.failed  { background: rgba(255,71,87,0.12);  color: var(--error); }
.test-btn.timeout { background: rgba(255,165,2,0.15);  color: var(--warning); }

@media (max-width: 768px) {
    .progress-bar-container:nth-child(4),
    .progress-bar-container:nth-child(5) { display: none; }
    .verification-bottom-sheet { padding: 20px 0px 25px; }
    .step-icon { width: 35px; height: 35px; font-size: 1rem; }
    .sheet-header, .sheet-body { padding: 20px; }
    .timeout-screen { padding: 24px 18px; }
    .timeout-icon { font-size: 4rem; }
    .refresh-btn { width: 100%; max-width: 280px; justify-content: center; }
}
@media (max-width: 480px) {
    .result-title { font-size: 1.2rem; }
    .step-text { font-size: 0.7rem; }
}

@media (hover: hover) {
    .t5-app-btn,
    #zap-upiBtn,
    .t5-action-btn,
    #zap-qrDownloadBtn,
    button {
        cursor: pointer;
    }
}

.t5-app-btn,
#zap-upiBtn,
.t5-action-btn,
#zap-qrDownloadBtn,
button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
</style>
</head>
<body>

<div class="page-loader" id="pageLoader">
    <div class="loader-circle"></div>
    <div class="loader-text">Verifying transaction...</div>
</div>

<div class="timeout-screen" id="timeoutScreen">
    <i class="fas fa-exclamation-circle timeout-icon"></i>
    <h2 class="timeout-title" id="timeoutTitle"></h2>
    <p class="timeout-text" id="timeoutText"></p>
    <button class="refresh-btn" id="refreshButton"><i class="fas fa-redo"></i> Refresh Page</button>
</div>

<div class="sheet-overlay" id="sheetOverlay"></div>

<div class="verification-bottom-sheet" id="verificationBottomSheet">
    <div class="verification-header">
        <div class="verification-handle"></div>
        <div class="verification-icon-container">
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
            <svg class="plan-boost-icon" viewBox="0 0 60 60" fill="none">
                <circle cx="30" cy="30" r="24" 
                        stroke="rgba(74,108,247,0.15)" 
                        stroke-width="8"/>
                <circle cx="30" cy="30" r="24" 
                        stroke="var(--primary)" 
                        stroke-width="8"
                        stroke-linecap="round"
                        stroke-dasharray="100 51"
                        transform="rotate(-90 30 30)"/>
            </svg>
        </div>
        <h3 class="verification-title" id="verificationTitle">Securing Payment</h3>
        <p class="verification-subtitle" id="verificationSubtitle">Please wait while we verify your transaction</p>
    </div>
    <div class="processing-steps">
        <div class="step active" id="step1">
            <div class="step-icon"><i class="fas fa-lock"></i></div>
            <div class="step-text">Encrypting</div>
        </div>
        <div class="step" id="step2">
            <div class="step-icon"><i class="fas fa-shield-alt"></i></div>
            <div class="step-text">Verifying</div>
        </div>
        <div class="step" id="step3">
            <div class="step-icon"><i class="fas fa-check-circle"></i></div>
            <div class="step-text">Confirming</div>
        </div>
    </div>
    <div class="progress-bars">
        <div class="progress-bar-container"><div class="progress-bar"></div></div>
        <div class="progress-bar-container"><div class="progress-bar"></div></div>
        <div class="progress-bar-container"><div class="progress-bar"></div></div>
        <div class="progress-bar-container"><div class="progress-bar"></div></div>
        <div class="progress-bar-container"><div class="progress-bar"></div></div>
    </div>
    <div class="speed-indicator">
        <div class="speed-dot"></div>
        <div class="speed-dot"></div>
        <div class="speed-dot"></div>
        <span>Finalizing payment</span>
    </div>
</div>

<div class="result-bottom-sheet" id="resultBottomSheet">
    <div class="sheet-header" id="sheetHeader">
        <div class="sheet-handle"></div>
        <i class="fas fa-check-circle result-icon" id="resultIcon"></i>
        <h3 class="result-title" id="resultTitle">Processing...</h3>
    </div>
    <div class="sheet-body">
        <div class="details-card">
            <div class="detail-item">
                <span class="detail-label">TXN ID</span>
                <span class="detail-value" id="txnId">-</span>
            </div>
            <div class="detail-item" id="utrRow">
                <span class="detail-label" id="utrLabel">UTR Number</span>
                <span class="detail-value" id="utrNumber">-</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Amount</span>
                <span class="detail-value" id="amountValue">-</span>
            </div>
            <div class="detail-item">
                <span class="detail-label" id="dateLabel">Date &amp; Time</span>
                <span class="detail-value" id="dateTime">-</span>
            </div>
        </div>
        <div class="countdown-box">
            Redirecting in <span class="countdown-number" id="countdownNumber">5</span> seconds...
        </div>
        <button class="action-btn-primary" id="okButton">OK</button>
    </div>
</div>

<div class="test-mode-fab" id="testModeFab">
    <i class="fas fa-flask"></i>
    <span class="fab-text">Test Action</span>
</div>
<div class="test-mode-overlay" id="testModeOverlay"></div>
<div class="test-mode-dialog" id="testModeDialog">
    <h3>Test Payment Mode</h3>
    <button class="test-btn success" id="testSuccess"><i class="fas fa-check-circle"></i> Success Payment</button>
    <button class="test-btn failed"  id="testFailed"><i class="fas fa-times-circle"></i> Failed Payment</button>
    <button class="test-btn timeout" id="testTimeout"><i class="fas fa-clock"></i> Timeout Payment</button>
</div>

<div class="confirm-overlay" id="cancelConfirmOverlay"></div>
<div class="confirm-dialog" id="cancelConfirmDialog">
    <div class="confirm-icon-wrap"><i class="fas fa-triangle-exclamation"></i></div>
    <h3>Cancel Payment?</h3>
    <p>Are you sure you want to cancel this payment?</p>
    <div class="confirm-btn-row">
        <button class="confirm-btn-no" id="cancelConfirmNo">No</button>
        <button class="confirm-btn-yes" id="cancelConfirmYes">Yes, Cancel</button>
    </div>
</div>

<div class="container">
    <!-- <button id="cancelPaymentBtn">CANCEL</button> -->
    <main>
        <style>
/* Font Awesome icon fix */
i[class^="fa"], i[class*=" fa"] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

:root {
  --zap-c1: #e67e22;
  --zap-c2: #d35400;
  --zap-c3: #f39c12;
  --zap-c4: #fff3e0;
  --zap-c5: #333333;
  --zap-c6: #e74c3c;
  --zap-c7: #ffffff;
  --zap-c8: #8e44ad;
  --t3-on-c5: #ffffff;
  --t3-on-c7: #333333;
  --t3-on-c1: #ffffff;
  --t3-hint-color: rgba(51,51,51,0.5);
  --t3-inner-bg: rgba(0,0,0,0.03);
  --t3-inner-border: rgba(0,0,0,0.08);
  --wm-color: rgba(51,51,51,0.5);
}

.container { padding: 0 !important; max-width: 100% !important; }
main { padding: 0 !important; }

.t3 {
  min-height: 100vh; background: var(--zap-c4);
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 24px;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

/* HEADER */
.t3-hdr {
  width: 100%; background: var(--zap-c5);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; position: relative; overflow: hidden;
}
.t3-hdr::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--zap-c1), var(--zap-c3), var(--zap-c2));
}
.t3-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--zap-c1), var(--zap-c2));
  overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#zap-companyLogo { width: 100%; height: 100%; object-fit: contain; display: none; }
.t3-logo-i { font-size: 18px; color: #fff; }
.t3-hdr-info { flex: 1; min-width: 0; }
.t3-name {
  font-size: 14px; font-weight: 700; color: var(--t3-on-c5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.t3-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--zap-c3); font-weight: 500; margin-top: 2px;
}
.t3-secure-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--zap-c3); font-size: 14px; flex-shrink: 0;
}

/* HERO */
.t3-hero {
  width: 100%;
  background: linear-gradient(135deg, var(--zap-c5) 0%, var(--zap-c6) 100%);
  padding: 20px 20px 24px; text-align: center;
  position: relative; overflow: hidden; box-sizing: border-box;
}
.t3-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(230,126,34,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.t3-pay-lbl {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px;
}
.t3-pay-to {
  font-size: 13px; color: var(--zap-c3); font-weight: 600; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.t3-txn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  font-size: 10px; color: rgba(255,255,255,0.4); font-family: monospace;
  margin-bottom: 10px;
}
.t3-amt-row {
  display: flex; align-items: flex-start; justify-content: center; gap: 4px;
  line-height: 1; margin-bottom: 14px;
}
.t3-amt-sym { font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 10px; }
.t3-amt-num { font-size: 52px; font-weight: 800; color: #fff; letter-spacing: -2px; }
.t3-hero-timer {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 0;
}
.t3-hero-timer-ico {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--zap-c1); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(230,126,34,0.5);
}
.t3-hero-timer-txt { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; }
#zap-qrTimer {
  font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 2px; line-height: 1;
}
#zap-qrTimer.urgent { color: #ff6b6b !important; animation: t3blink 1s ease infinite; }
@keyframes t3blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* BODY */
.t3-body {
  width: 100%; max-width: 940px; padding: 16px 20px 0;
  display: flex; gap: 16px; align-items: flex-start; box-sizing: border-box;
}
.t3-left-col  { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t3-right-col { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; width: 270px; }

/* CARD */
.t3-card {
  background: var(--zap-c7); border-radius: 12px; padding: 18px;
  border: 1px solid var(--t3-inner-border);
  border-left: 4px solid var(--zap-c1);
  position: relative; overflow: hidden; box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.t3-card-ttl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--zap-c3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.t3-card-ttl i { color: var(--zap-c1); font-size: 12px; }

/* QR CARD */
.t3-qr-card {
  background: var(--zap-c7); border-radius: 12px; padding: 18px;
  border: 1px solid var(--t3-inner-border);
  border-left: 4px solid var(--zap-c3);
  position: relative; overflow: hidden; box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-align: center;
}
.t3-qr-card-ttl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--zap-c3); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.t3-qr-card-ttl i { color: var(--zap-c1); }
.t3-qr-lbl { font-size: 11px; color: var(--t3-hint-color); margin-bottom: 10px; }

/* App icons */
.t3-app-icons {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px;
}
.t3-app-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: #f8f9fa; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.08); overflow: hidden;
}

/* QR box */
.t3-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.t3-qr-box {
  position: relative; padding: 10px; background: #fff; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  /* border: 2px solid rgba(230,126,34,0.15); box-shadow: 0 2px 10px rgba(0,0,0,0.08); */
}
.t3-qr-box::before {
  content: ''; position: absolute; width: 20px; height: 20px; top: -2px; left: -2px;
  border-top: 3px solid var(--zap-c1); border-left: 3px solid var(--zap-c1); border-radius: 6px 0 0 0;
}
.t3-qr-box::after {
  content: ''; position: absolute; width: 20px; height: 20px; bottom: -2px; right: -2px;
  border-bottom: 3px solid var(--zap-c1); border-right: 3px solid var(--zap-c1); border-radius: 0 0 6px 0;
}
.t3-qr-tr {
  position: absolute; width: 20px; height: 20px; top: -2px; right: -2px;
  border-top: 3px solid var(--zap-c2); border-right: 3px solid var(--zap-c2);
  border-radius: 0 6px 0 0; pointer-events: none;
}
.t3-qr-bl {
  position: absolute; width: 20px; height: 20px; bottom: -2px; left: -2px;
  border-bottom: 3px solid var(--zap-c2); border-left: 3px solid var(--zap-c2);
  border-radius: 0 0 0 6px; pointer-events: none;
}
#zap-qrCode, #t3-qrCode-mobile {
  display: flex !important; align-items: center; justify-content: center;
  min-width: 190px; min-height: 190px;
}
#zap-qrCode canvas, #zap-qrCode img,
#t3-qrCode-mobile canvas, #t3-qrCode-mobile img {
  display: block !important; max-width: 100%; border-radius: 3px;
}

.t3-qr-expiry {
  font-size: 10px; color: var(--t3-hint-color);
  display: flex; align-items: center; gap: 4px;
}

/* Download buttons */
#zap-qrDownloadBtn, .t3-dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 8px; width: 100%; justify-content: center;
  border: 1.5px solid var(--zap-c1); background: transparent; color: var(--zap-c1);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s;
  -webkit-tap-highlight-color: transparent; font-family: inherit; box-sizing: border-box;
}
#zap-qrDownloadBtn:hover, .t3-dl-btn:hover { background: var(--zap-c1); color: #fff; }

/* APP BUTTONS */
.t3-apps { display: flex; flex-direction: column; gap: 8px; }
.t3-app-btn {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--t3-inner-border); background: var(--t3-inner-bg);
  cursor: pointer; transition: .2s; width: 100%;
  text-align: left; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; font-family: inherit;
}
.t3-app-btn:hover { border-color: var(--zap-c1); background: rgba(230,126,34,0.04); }
.t3-app-btn:active { transform: scale(.98); }
.t3-app-ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.t3-app-info { flex: 1; min-width: 0; }
.t3-app-name { font-size: 13px; font-weight: 600; color: var(--t3-on-c7); line-height: 1.2; }
.t3-app-sub  { font-size: 10px; margin-top: 1px; color: var(--t3-hint-color); }
.t3-app-arrow { color: var(--t3-hint-color); font-size: 11px; flex-shrink: 0; }

#zap-upiBtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--zap-c1), var(--zap-c2));
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: .2s; margin-top: 8px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit;
  /* box-shadow: 0 4px 15px rgba(230,126,34,0.4); */
}
#zap-upiBtn:hover { filter: brightness(1.06); }
#zap-upiBtn:active { transform: scale(.98); }

/* INPUTS */
.t3-input-row { display: flex; gap: 8px; align-items: stretch; }
.t3-input {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--t3-inner-border); background: var(--t3-inner-bg);
  font-size: 13px; color: var(--t3-on-c7); outline: none; transition: .2s;
  min-width: 0; font-family: inherit;
}
.t3-input::placeholder { color: var(--t3-hint-color); }
.t3-input:focus { border-color: var(--zap-c1); box-shadow: 0 0 0 3px rgba(230,126,34,0.12); background: #fff; }
.t3-sub-btn {
  padding: 12px 18px; border-radius: 10px; border: none;
  background: var(--zap-c1); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; transition: .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit;
  box-shadow: 0 3px 10px rgba(230,126,34,0.3);
}
.t3-sub-btn:hover { filter: brightness(1.08); }
.t3-sub-btn:active { transform: scale(.97); }
.t3-hint { font-size: 11px; color: var(--t3-hint-color); margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.t3-hint i { font-size: 10px; color: var(--zap-c3); }

/* SECURITY */
.t3-security {
  width: 100%; max-width: 940px; padding: 14px 20px 0;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; box-sizing: border-box;
}
.t3-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--zap-c3); opacity: 0.85;
}
.t3-badge i { font-size: 14px; color: var(--zap-c3); }

/* WATERMARK */
#zap-watermark {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 600; margin-top: 12px; user-select: none;
  color: var(--wm-color); text-decoration: none;
}
#zap-watermark i { font-size: 10px; color: var(--wm-color); }

/* PC */
@media (min-width: 700px) {
  .t3-body { padding: 18px 24px 0; }
  .t3-right-col { width: 280px; }
  #zap-removeQrCode2 { display: none !important; }
}

/* MOBILE */
@media (max-width: 699px) {
  .t3-body { flex-direction: column; padding: 10px 14px 0; gap: 12px; }
  .t3-left-col, .t3-right-col { width: 100%; }
  .t3-amt-num { font-size: 42px; }
  .t3-card, .t3-qr-card { padding: 14px; }
  .t3-right-col { display: none !important; }
  #zap-removeQrCode2 { display: block !important; }
}

/* Cancel button in header */
.t3-hdr #cancelPaymentBtn {
    transition: 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.t3-hdr #cancelPaymentBtn:hover {
    background: rgba(239,68,68,0.3) !important;
    border-color: rgba(239,68,68,0.5) !important;
}
</style>

<div class="t3">

  <!-- SENTINEL — index.php yahi hide/show karta hai, layout pe koi asar nahi -->
  <div id="zap-removeQrCode" style="position:fixed;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0;z-index:-1;"></div>

  <!-- HEADER -->
<div class="t3-hdr">
    <div class="t3-logo">
        <img id="zap-companyLogo" src="" alt="Logo">
        <i class="fa-solid fa-store t3-logo-i" id="t3LogoIco"></i>
    </div>
    <div class="t3-hdr-info">
        <div class="t3-name" id="zap-companyName">Loading...</div>
        <div class="t3-verified"><i class="fa-solid fa-circle-check"></i> Verified Merchant</div>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
        <!-- <div class="t3-secure-icon"><i class="fa-solid fa-lock"></i></div> -->
        <button id="cancelPaymentBtn" style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: 0.15s; font-family: inherit;">
            <i class="fa-solid fa-times"></i>
        </button>
    </div>
</div>

  <!-- HERO -->
  <div class="t3-hero">
    <div class="t3-pay-lbl">Total Amount Due</div>
    <div class="t3-pay-to">
      <i class="fa-solid fa-arrow-right"></i>
      Pay to <span id="zap-companyName2" style="color:#fff;margin-left:4px;">Merchant</span>
    </div>
    <div class="t3-txn-pill">
      <i class="fa-solid fa-hashtag" style="font-size:9px"></i>
      <span id="zap-txnId">—</span>
    </div>
    <div class="t3-amt-row">
      <span class="t3-amt-sym">₹</span>
      <span class="t3-amt-num" id="zap-payAmount">0.00</span>
    </div>
    <div class="t3-hero-timer">
      <!-- <div class="t3-hero-timer-ico"><i class="fa-solid fa-clock"></i></div> -->
      <div>
        <div class="t3-hero-timer-txt">Expires in</div>
        <div id="zap-qrTimer">08:00</div>
      </div>
    </div>
  </div>

  <!-- BODY -->
  <div class="t3-body">

    <!-- LEFT COL -->
    <div class="t3-left-col">

      <!-- MOBILE QR CARD -->
      <div class="t3-qr-card" id="zap-removeQrCode2">
        <div class="t3-qr-card-ttl">
          <i class="fa-solid fa-qrcode"></i> Scan QR Code
        </div>
        <div class="t3-qr-lbl">Use any UPI app on your phone</div>
        <div class="t3-app-icons">
          <div class="t3-app-icon">
            <svg width="18" height="18" viewBox="0 0 48 48" fill="none">
              <path d="M44 24.5c0-1.4-.1-2.7-.4-4H24v7.6h11.3a9.7 9.7 0 01-4.2 6.4v5.3h6.8C41.8 36.1 44 30.8 44 24.5z" fill="#4285F4"/>
              <path d="M24 45c5.7 0 10.5-1.9 14-5.1l-6.8-5.3c-1.9 1.3-4.3 2-7.2 2-5.5 0-10.2-3.7-11.9-8.8H5.1v5.5A21 21 0 0024 45z" fill="#34A853"/>
              <path d="M12.1 27.8A12.7 12.7 0 0111.4 24c0-1.3.2-2.6.7-3.8v-5.5H5.1A21 21 0 003 24c0 3.4.8 6.6 2.1 9.3l7-5.5z" fill="#FBBC05"/>
              <path d="M24 11.4c3.1 0 5.9 1.1 8.1 3.1l6-6A21 21 0 0024 3 21 21 0 005.1 14.7l7 5.5c1.7-5.1 6.4-8.8 11.9-8.8z" fill="#EA4335"/>
            </svg>
          </div>
          <div class="t3-app-icon" style="padding: 3px; box-sizing: border-box;">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="paytm" x="0" y="0" style="enable-background:new -164 191.6 512 193" version="1.1" viewBox="-164 191.6 512 193">
                <g>
                  <path d="M229.8,243.2c2-1.6,3-2.4,4-3.2c13.9-11.8,31.7-10.5,43.6,3.5c1.2,1.4,1.8,1.5,3,0.3c0.8-0.9,1.7-1.6,2.5-2.5   c9.3-9.1,21.6-11.8,33.1-6.7c12.1,5.4,18.6,14.9,18.7,28.2c0.2,28.7,0.1,57.3,0.1,86c0,10.2-6.3,16.6-16.4,16.6c-4,0-8-0.3-12,0.1   c-4.1,0.4-5.3-0.9-5.3-5.2c0.2-28,0.1-56,0.1-84c0-1.2,0-2.3,0-3.5c-0.1-6.5-2.7-9.2-8.9-9.5c-5.6-0.3-9.5,3.1-10.1,8.8   c-0.1,1.3,0,2.7,0,4c0,24.2,0,48.3,0,72.5c0,10.6-6.1,16.8-16.7,16.7c-5.4-0.1-12.7,2.4-15.8-1.1c-2.7-3-0.9-10.1-0.9-15.4   c0-24.8,0-49.7,0-74.5c0-8.8-5.7-13.3-13.1-10.3c-4.6,1.9-6.1,5.6-6.1,10.4c0.1,23.2,0,46.3,0,69.5c0,1.8,0,3.7,0,5.5   c-0.3,9.7-6.5,15.8-16.1,15.9c-4,0.1-8-0.3-12,0.1c-4.3,0.4-5.6-0.8-5.5-5.4c0.2-39.3,0.1-78.6,0.1-118c0-1.7,0.1-3.3,0-5   c-0.2-2.2,0.7-2.9,2.9-2.9c9.2,0.1,18.3,0.1,27.5,0c2.3,0,3.4,0.6,3.2,3.1C229.5,239,229.7,240.6,229.8,243.2z" style="fill:#02b9ef"></path>
                  <path d="M17.8 297.4c0 13.7 0 27.3 0 41-.1 17.8-9.4 27-27.2 27.1-7.8 0-15.7.1-23.5 0-15.8-.2-27.4-10.7-28.2-26.5-.6-11.3-.7-22.7-.1-34 .8-16.2 13.2-27.6 29.6-27.8 4.3-.1 8.7 0 13 0 4.2-.1 5.8-2.5 5.7-6.5 0-4-1.8-5.8-5.8-5.6-4.5.1-9 .1-13.5 0-11-.2-17.1-6.2-17-17 0-4.4-2-10.3.9-12.9 2.5-2.2 8.2-.8 12.5-.8 11.2-.1 22.3 0 33.5 0 11.9 0 20 8.1 20.1 20.1C17.9 268.7 17.8 283.1 17.8 297.4zM-12.8 320.1c0-1.7 0-3.3 0-5 0-10.2 0-10.2-10.2-9.8-5.1.2-7.9 2.8-8 8.1-.1 4.2-.1 8.3 0 12.5.1 7.2 3.3 9.1 13.7 9.4 7.7.2 3.8-5.2 4.5-8.2C-12.4 324.9-12.9 322.4-12.8 320.1zM106.8 286.5c0 15.3.2 30.7-.1 46-.2 11.8-3 22.5-14.4 28.8-4.6 2.5-9.6 3.9-14.8 4-11.5.2-23 0-34.5.2-2.8 0-3.4-1-3.3-3.5.2-4.2-.1-8.3.1-12.5.2-8 6.3-14.1 14.3-14.4 5.2-.2 10.3-.1 15.5 0 4.2 0 6.5-1.7 6.5-6.2 0-4.6-2.2-6.2-6.4-6.3-7-.2-14 .8-20.9-1.2-11.9-3.5-20.6-13.4-20.9-25.7-.6-19.5-.2-39-.3-58.5 0-2.2.7-2.9 2.9-2.8 8.2.1 16.3.2 24.5 0 3.6-.1 3.1 1.9 3.1 4.1 0 14.7 0 29.3 0 44 0 6.4 3 9.8 8.6 10 6.6.2 9.5-2.5 9.5-9.2 0-14.8.1-29.7-.1-44.5 0-3.5.9-4.5 4.4-4.4 7.3.3 14.7.4 22 0 4-.2 4.6 1.3 4.5 4.8C106.7 254.9 106.8 270.7 106.8 286.5zM-148 309.2c0-16.3 0-32.7 0-49 0-16 9.8-26 25.9-25.8 10.5.1 21-1.2 31.4.8 13.3 2.6 21.7 12.9 21.8 26.6.1 14.5 0 29 0 43.5 0 18.2-10.7 29.3-28.9 29.8-5.5.2-11 .1-16.5 0-2.5-.1-3.6.7-3.5 3.4.2 4 .1 8 0 12-.2 8.6-6.3 14.8-14.8 14.9-5 .1-11.3 2.1-14.5-.8-3-2.7-.8-9.1-.9-13.9C-148.1 336.9-148 323-148 309.2zM-117.8 284.7c0 3.2 0 6.3 0 9.5 0 11.3 0 11.3 11.3 10.3 4.9-.4 7.2-2.8 7.3-7.7.1-5.6-.2-11.3.1-16.9.6-16.2-2.4-14.6-15.6-14.7-2.4 0-3.2.7-3.2 3.1C-117.7 273.7-117.8 279.2-117.8 284.7z" style="fill:#06306f"></path>
                  <path d="M135.1,309.4c0-13.3-0.1-26.7,0.1-40c0-3.1-0.7-4.4-4.1-4.3c-4.5,0.2-10.5,1.5-13-0.7   c-3.1-2.9-0.7-9.1-1.1-13.9c0-0.3,0-0.7,0-1c0-4.7-1.5-10.2,0.5-13.7s8.1-1.3,12.4-2.4c8.5-2.2,14.9-7.1,20.1-13.9   c3.6-4.6,8.1-7.9,13.9-9c3.1-0.6,5-0.2,4.8,3.8c-0.3,5.6,0,11.3-0.1,17c-0.1,2.4,0.8,3.2,3.2,3.1c4-0.1,8,0.1,12-0.1   c2.4-0.1,3.2,0.8,3.1,3.2c-0.1,8.2-0.1,16.3,0,24.5c0,2.3-0.6,3.5-3.1,3.2c-0.5-0.1-1,0-1.5,0c-4.4,0.4-10.5-2-12.8,1   c-2.2,2.8-0.8,8.6-0.8,13.1c0,27.2-0.1,54.3,0.1,81.5c0,3.8-1,5-4.8,4.7c-3.6-0.3-7.3,0-11-0.1c-10.8-0.4-17.9-7.7-17.9-18.5   C135.1,334.4,135.1,321.9,135.1,309.4z" style="fill:#02b9ef"></path>
                </g>
              </svg>
          </div>
          <div class="t3-app-icon" style="font-size:8px;font-weight:800;color:#6739b7;">BHIM</div>
          <div class="t3-app-icon" style="font-size:8px;font-weight:700;color:var(--zap-c1);">&amp; More</div>
        </div>
        <div class="t3-qr-wrap">
          <div class="t3-qr-box" id="zap-qrCodeBox">
            <span class="t3-qr-tr"></span>
            <span class="t3-qr-bl"></span>
            <div id="t3-qrCode-mobile"></div>
          </div>
          <button class="t3-dl-btn" id="t3-dl-mobile">
            <i class="fa-solid fa-download"></i> Download QR
          </button>
        </div>
      </div>

      <!-- PAY VIA APP -->
      <div class="t3-card" id="zap-payButtons">
        <div class="t3-card-ttl"><i class="fa-solid fa-mobile-screen"></i> Pay via App</div>
        <div class="t3-apps">
          <button class="t3-app-btn" id="zap-gpayBtn">
            <div class="t3-app-ico">
              <svg width="20" height="20" viewBox="0 0 48 48" fill="none">
                <path d="M44 24.5c0-1.4-.1-2.7-.4-4H24v7.6h11.3a9.7 9.7 0 01-4.2 6.4v5.3h6.8C41.8 36.1 44 30.8 44 24.5z" fill="#4285F4"/>
                <path d="M24 45c5.7 0 10.5-1.9 14-5.1l-6.8-5.3c-1.9 1.3-4.3 2-7.2 2-5.5 0-10.2-3.7-11.9-8.8H5.1v5.5A21 21 0 0024 45z" fill="#34A853"/>
                <path d="M12.1 27.8A12.7 12.7 0 0111.4 24c0-1.3.2-2.6.7-3.8v-5.5H5.1A21 21 0 003 24c0 3.4.8 6.6 2.1 9.3l7-5.5z" fill="#FBBC05"/>
                <path d="M24 11.4c3.1 0 5.9 1.1 8.1 3.1l6-6A21 21 0 0024 3 21 21 0 005.1 14.7l7 5.5c1.7-5.1 6.4-8.8 11.9-8.8z" fill="#EA4335"/>
              </svg>
            </div>
            <div class="t3-app-info">
              <div class="t3-app-name">Google Pay</div>
              <div class="t3-app-sub">Instant payment</div>
            </div>
            <i class="fa-solid fa-chevron-right t3-app-arrow"></i>
          </button>
          <button class="t3-app-btn" id="zap-paytmBtn">
            <div class="t3-app-ico" style="padding: 4px; box-sizing: border-box;">
              <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="paytm" x="0" y="0" style="enable-background:new -164 191.6 512 193" version="1.1" viewBox="-164 191.6 512 193">
                <g>
                  <path d="M229.8,243.2c2-1.6,3-2.4,4-3.2c13.9-11.8,31.7-10.5,43.6,3.5c1.2,1.4,1.8,1.5,3,0.3c0.8-0.9,1.7-1.6,2.5-2.5   c9.3-9.1,21.6-11.8,33.1-6.7c12.1,5.4,18.6,14.9,18.7,28.2c0.2,28.7,0.1,57.3,0.1,86c0,10.2-6.3,16.6-16.4,16.6c-4,0-8-0.3-12,0.1   c-4.1,0.4-5.3-0.9-5.3-5.2c0.2-28,0.1-56,0.1-84c0-1.2,0-2.3,0-3.5c-0.1-6.5-2.7-9.2-8.9-9.5c-5.6-0.3-9.5,3.1-10.1,8.8   c-0.1,1.3,0,2.7,0,4c0,24.2,0,48.3,0,72.5c0,10.6-6.1,16.8-16.7,16.7c-5.4-0.1-12.7,2.4-15.8-1.1c-2.7-3-0.9-10.1-0.9-15.4   c0-24.8,0-49.7,0-74.5c0-8.8-5.7-13.3-13.1-10.3c-4.6,1.9-6.1,5.6-6.1,10.4c0.1,23.2,0,46.3,0,69.5c0,1.8,0,3.7,0,5.5   c-0.3,9.7-6.5,15.8-16.1,15.9c-4,0.1-8-0.3-12,0.1c-4.3,0.4-5.6-0.8-5.5-5.4c0.2-39.3,0.1-78.6,0.1-118c0-1.7,0.1-3.3,0-5   c-0.2-2.2,0.7-2.9,2.9-2.9c9.2,0.1,18.3,0.1,27.5,0c2.3,0,3.4,0.6,3.2,3.1C229.5,239,229.7,240.6,229.8,243.2z" style="fill:#02b9ef"></path>
                  <path d="M17.8 297.4c0 13.7 0 27.3 0 41-.1 17.8-9.4 27-27.2 27.1-7.8 0-15.7.1-23.5 0-15.8-.2-27.4-10.7-28.2-26.5-.6-11.3-.7-22.7-.1-34 .8-16.2 13.2-27.6 29.6-27.8 4.3-.1 8.7 0 13 0 4.2-.1 5.8-2.5 5.7-6.5 0-4-1.8-5.8-5.8-5.6-4.5.1-9 .1-13.5 0-11-.2-17.1-6.2-17-17 0-4.4-2-10.3.9-12.9 2.5-2.2 8.2-.8 12.5-.8 11.2-.1 22.3 0 33.5 0 11.9 0 20 8.1 20.1 20.1C17.9 268.7 17.8 283.1 17.8 297.4zM-12.8 320.1c0-1.7 0-3.3 0-5 0-10.2 0-10.2-10.2-9.8-5.1.2-7.9 2.8-8 8.1-.1 4.2-.1 8.3 0 12.5.1 7.2 3.3 9.1 13.7 9.4 7.7.2 3.8-5.2 4.5-8.2C-12.4 324.9-12.9 322.4-12.8 320.1zM106.8 286.5c0 15.3.2 30.7-.1 46-.2 11.8-3 22.5-14.4 28.8-4.6 2.5-9.6 3.9-14.8 4-11.5.2-23 0-34.5.2-2.8 0-3.4-1-3.3-3.5.2-4.2-.1-8.3.1-12.5.2-8 6.3-14.1 14.3-14.4 5.2-.2 10.3-.1 15.5 0 4.2 0 6.5-1.7 6.5-6.2 0-4.6-2.2-6.2-6.4-6.3-7-.2-14 .8-20.9-1.2-11.9-3.5-20.6-13.4-20.9-25.7-.6-19.5-.2-39-.3-58.5 0-2.2.7-2.9 2.9-2.8 8.2.1 16.3.2 24.5 0 3.6-.1 3.1 1.9 3.1 4.1 0 14.7 0 29.3 0 44 0 6.4 3 9.8 8.6 10 6.6.2 9.5-2.5 9.5-9.2 0-14.8.1-29.7-.1-44.5 0-3.5.9-4.5 4.4-4.4 7.3.3 14.7.4 22 0 4-.2 4.6 1.3 4.5 4.8C106.7 254.9 106.8 270.7 106.8 286.5zM-148 309.2c0-16.3 0-32.7 0-49 0-16 9.8-26 25.9-25.8 10.5.1 21-1.2 31.4.8 13.3 2.6 21.7 12.9 21.8 26.6.1 14.5 0 29 0 43.5 0 18.2-10.7 29.3-28.9 29.8-5.5.2-11 .1-16.5 0-2.5-.1-3.6.7-3.5 3.4.2 4 .1 8 0 12-.2 8.6-6.3 14.8-14.8 14.9-5 .1-11.3 2.1-14.5-.8-3-2.7-.8-9.1-.9-13.9C-148.1 336.9-148 323-148 309.2zM-117.8 284.7c0 3.2 0 6.3 0 9.5 0 11.3 0 11.3 11.3 10.3 4.9-.4 7.2-2.8 7.3-7.7.1-5.6-.2-11.3.1-16.9.6-16.2-2.4-14.6-15.6-14.7-2.4 0-3.2.7-3.2 3.1C-117.7 273.7-117.8 279.2-117.8 284.7z" style="fill:#06306f"></path>
                  <path d="M135.1,309.4c0-13.3-0.1-26.7,0.1-40c0-3.1-0.7-4.4-4.1-4.3c-4.5,0.2-10.5,1.5-13-0.7   c-3.1-2.9-0.7-9.1-1.1-13.9c0-0.3,0-0.7,0-1c0-4.7-1.5-10.2,0.5-13.7s8.1-1.3,12.4-2.4c8.5-2.2,14.9-7.1,20.1-13.9   c3.6-4.6,8.1-7.9,13.9-9c3.1-0.6,5-0.2,4.8,3.8c-0.3,5.6,0,11.3-0.1,17c-0.1,2.4,0.8,3.2,3.2,3.1c4-0.1,8,0.1,12-0.1   c2.4-0.1,3.2,0.8,3.1,3.2c-0.1,8.2-0.1,16.3,0,24.5c0,2.3-0.6,3.5-3.1,3.2c-0.5-0.1-1,0-1.5,0c-4.4,0.4-10.5-2-12.8,1   c-2.2,2.8-0.8,8.6-0.8,13.1c0,27.2-0.1,54.3,0.1,81.5c0,3.8-1,5-4.8,4.7c-3.6-0.3-7.3,0-11-0.1c-10.8-0.4-17.9-7.7-17.9-18.5   C135.1,334.4,135.1,321.9,135.1,309.4z" style="fill:#02b9ef"></path>
                </g>
              </svg>
            </div>
            <div class="t3-app-info">
              <div class="t3-app-name">Paytm</div>
              <div class="t3-app-sub">Wallet &amp; UPI</div>
            </div>
            <i class="fa-solid fa-chevron-right t3-app-arrow"></i>
          </button>
        </div>
        <div id="zap-upiSection">
          <button id="zap-upiBtn"><i class="fa-solid fa-bolt"></i> Pay with Any UPI App</button>
        </div>
      </div>

      <!-- VPA -->
      <div class="t3-card" id="zap-vpaSection" style="display:none;">
        <div class="t3-card-ttl"><i class="fa-solid fa-at"></i> UPI ID</div>
        <div class="t3-input-row">
          <input class="t3-input" type="text" id="zap-vpaInput" placeholder="yourname@bank" autocomplete="off" inputmode="email">
          <button class="t3-sub-btn" id="zap-vpaSubmitBtn"><i class="fa-solid fa-paper-plane"></i> Pay</button>
        </div>
        <div class="t3-hint"><i class="fa-solid fa-circle-info"></i> e.g. 9876543210@upi or name@okaxis</div>
      </div>

      <!-- UTR -->
      <div class="t3-card" id="zap-utrSection" style="display:none;">
        <div class="t3-card-ttl"><i class="fa-solid fa-receipt"></i> Already Paid? Enter UTR</div>
        <div class="t3-input-row">
          <input class="t3-input" type="text" id="zap-utrInput" placeholder="UTR / Reference number" autocomplete="off" inputmode="text">
          <button class="t3-sub-btn" id="zap-utrSubmitBtn"><i class="fa-solid fa-check-double"></i> Verify</button>
        </div>
        <div class="t3-hint"><i class="fa-solid fa-circle-info"></i> Find UTR in your bank app transaction history</div>
      </div>

    </div>

    <!-- RIGHT COL: PC QR -->
    <div class="t3-right-col">
      <div class="t3-qr-card" id="t3-pc-qr-card">
        <div class="t3-qr-card-ttl">
          <i class="fa-solid fa-qrcode"></i> Scan QR Code
        </div>
        <div class="t3-qr-lbl">Use any UPI app on your phone</div>
        <div class="t3-app-icons">
          <div class="t3-app-icon">
            <svg width="18" height="18" viewBox="0 0 48 48" fill="none">
              <path d="M44 24.5c0-1.4-.1-2.7-.4-4H24v7.6h11.3a9.7 9.7 0 01-4.2 6.4v5.3h6.8C41.8 36.1 44 30.8 44 24.5z" fill="#4285F4"/>
              <path d="M24 45c5.7 0 10.5-1.9 14-5.1l-6.8-5.3c-1.9 1.3-4.3 2-7.2 2-5.5 0-10.2-3.7-11.9-8.8H5.1v5.5A21 21 0 0024 45z" fill="#34A853"/>
              <path d="M12.1 27.8A12.7 12.7 0 0111.4 24c0-1.3.2-2.6.7-3.8v-5.5H5.1A21 21 0 003 24c0 3.4.8 6.6 2.1 9.3l7-5.5z" fill="#FBBC05"/>
              <path d="M24 11.4c3.1 0 5.9 1.1 8.1 3.1l6-6A21 21 0 0024 3 21 21 0 005.1 14.7l7 5.5c1.7-5.1 6.4-8.8 11.9-8.8z" fill="#EA4335"/>
            </svg>
          </div>
          <div class="t3-app-icon" style="padding: 3px; box-sizing: border-box;">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="paytm" x="0" y="0" style="enable-background:new -164 191.6 512 193" version="1.1" viewBox="-164 191.6 512 193">
                <g>
                  <path d="M229.8,243.2c2-1.6,3-2.4,4-3.2c13.9-11.8,31.7-10.5,43.6,3.5c1.2,1.4,1.8,1.5,3,0.3c0.8-0.9,1.7-1.6,2.5-2.5   c9.3-9.1,21.6-11.8,33.1-6.7c12.1,5.4,18.6,14.9,18.7,28.2c0.2,28.7,0.1,57.3,0.1,86c0,10.2-6.3,16.6-16.4,16.6c-4,0-8-0.3-12,0.1   c-4.1,0.4-5.3-0.9-5.3-5.2c0.2-28,0.1-56,0.1-84c0-1.2,0-2.3,0-3.5c-0.1-6.5-2.7-9.2-8.9-9.5c-5.6-0.3-9.5,3.1-10.1,8.8   c-0.1,1.3,0,2.7,0,4c0,24.2,0,48.3,0,72.5c0,10.6-6.1,16.8-16.7,16.7c-5.4-0.1-12.7,2.4-15.8-1.1c-2.7-3-0.9-10.1-0.9-15.4   c0-24.8,0-49.7,0-74.5c0-8.8-5.7-13.3-13.1-10.3c-4.6,1.9-6.1,5.6-6.1,10.4c0.1,23.2,0,46.3,0,69.5c0,1.8,0,3.7,0,5.5   c-0.3,9.7-6.5,15.8-16.1,15.9c-4,0.1-8-0.3-12,0.1c-4.3,0.4-5.6-0.8-5.5-5.4c0.2-39.3,0.1-78.6,0.1-118c0-1.7,0.1-3.3,0-5   c-0.2-2.2,0.7-2.9,2.9-2.9c9.2,0.1,18.3,0.1,27.5,0c2.3,0,3.4,0.6,3.2,3.1C229.5,239,229.7,240.6,229.8,243.2z" style="fill:#02b9ef"></path>
                  <path d="M17.8 297.4c0 13.7 0 27.3 0 41-.1 17.8-9.4 27-27.2 27.1-7.8 0-15.7.1-23.5 0-15.8-.2-27.4-10.7-28.2-26.5-.6-11.3-.7-22.7-.1-34 .8-16.2 13.2-27.6 29.6-27.8 4.3-.1 8.7 0 13 0 4.2-.1 5.8-2.5 5.7-6.5 0-4-1.8-5.8-5.8-5.6-4.5.1-9 .1-13.5 0-11-.2-17.1-6.2-17-17 0-4.4-2-10.3.9-12.9 2.5-2.2 8.2-.8 12.5-.8 11.2-.1 22.3 0 33.5 0 11.9 0 20 8.1 20.1 20.1C17.9 268.7 17.8 283.1 17.8 297.4zM-12.8 320.1c0-1.7 0-3.3 0-5 0-10.2 0-10.2-10.2-9.8-5.1.2-7.9 2.8-8 8.1-.1 4.2-.1 8.3 0 12.5.1 7.2 3.3 9.1 13.7 9.4 7.7.2 3.8-5.2 4.5-8.2C-12.4 324.9-12.9 322.4-12.8 320.1zM106.8 286.5c0 15.3.2 30.7-.1 46-.2 11.8-3 22.5-14.4 28.8-4.6 2.5-9.6 3.9-14.8 4-11.5.2-23 0-34.5.2-2.8 0-3.4-1-3.3-3.5.2-4.2-.1-8.3.1-12.5.2-8 6.3-14.1 14.3-14.4 5.2-.2 10.3-.1 15.5 0 4.2 0 6.5-1.7 6.5-6.2 0-4.6-2.2-6.2-6.4-6.3-7-.2-14 .8-20.9-1.2-11.9-3.5-20.6-13.4-20.9-25.7-.6-19.5-.2-39-.3-58.5 0-2.2.7-2.9 2.9-2.8 8.2.1 16.3.2 24.5 0 3.6-.1 3.1 1.9 3.1 4.1 0 14.7 0 29.3 0 44 0 6.4 3 9.8 8.6 10 6.6.2 9.5-2.5 9.5-9.2 0-14.8.1-29.7-.1-44.5 0-3.5.9-4.5 4.4-4.4 7.3.3 14.7.4 22 0 4-.2 4.6 1.3 4.5 4.8C106.7 254.9 106.8 270.7 106.8 286.5zM-148 309.2c0-16.3 0-32.7 0-49 0-16 9.8-26 25.9-25.8 10.5.1 21-1.2 31.4.8 13.3 2.6 21.7 12.9 21.8 26.6.1 14.5 0 29 0 43.5 0 18.2-10.7 29.3-28.9 29.8-5.5.2-11 .1-16.5 0-2.5-.1-3.6.7-3.5 3.4.2 4 .1 8 0 12-.2 8.6-6.3 14.8-14.8 14.9-5 .1-11.3 2.1-14.5-.8-3-2.7-.8-9.1-.9-13.9C-148.1 336.9-148 323-148 309.2zM-117.8 284.7c0 3.2 0 6.3 0 9.5 0 11.3 0 11.3 11.3 10.3 4.9-.4 7.2-2.8 7.3-7.7.1-5.6-.2-11.3.1-16.9.6-16.2-2.4-14.6-15.6-14.7-2.4 0-3.2.7-3.2 3.1C-117.7 273.7-117.8 279.2-117.8 284.7z" style="fill:#06306f"></path>
                  <path d="M135.1,309.4c0-13.3-0.1-26.7,0.1-40c0-3.1-0.7-4.4-4.1-4.3c-4.5,0.2-10.5,1.5-13-0.7   c-3.1-2.9-0.7-9.1-1.1-13.9c0-0.3,0-0.7,0-1c0-4.7-1.5-10.2,0.5-13.7s8.1-1.3,12.4-2.4c8.5-2.2,14.9-7.1,20.1-13.9   c3.6-4.6,8.1-7.9,13.9-9c3.1-0.6,5-0.2,4.8,3.8c-0.3,5.6,0,11.3-0.1,17c-0.1,2.4,0.8,3.2,3.2,3.1c4-0.1,8,0.1,12-0.1   c2.4-0.1,3.2,0.8,3.1,3.2c-0.1,8.2-0.1,16.3,0,24.5c0,2.3-0.6,3.5-3.1,3.2c-0.5-0.1-1,0-1.5,0c-4.4,0.4-10.5-2-12.8,1   c-2.2,2.8-0.8,8.6-0.8,13.1c0,27.2-0.1,54.3,0.1,81.5c0,3.8-1,5-4.8,4.7c-3.6-0.3-7.3,0-11-0.1c-10.8-0.4-17.9-7.7-17.9-18.5   C135.1,334.4,135.1,321.9,135.1,309.4z" style="fill:#02b9ef"></path>
                </g>
              </svg>
          </div>
          <div class="t3-app-icon" style="font-size:8px;font-weight:800;color:#6739b7;">BHIM</div>
          <div class="t3-app-icon" style="font-size:8px;font-weight:700;color:var(--zap-c1);">&amp; More</div>
        </div>
        <div class="t3-qr-wrap">
          <div class="t3-qr-box">
            <span class="t3-qr-tr"></span>
            <span class="t3-qr-bl"></span>
            <div id="zap-qrCode"></div>
          </div>
          <!-- <div class="t3-qr-expiry">
            <i class="fa-solid fa-clock" style="font-size:9px;color:var(--zap-c3)"></i>
            QR valid for <strong style="color:var(--zap-c1);margin-left:3px;" id="zap-qrTimer2">08:00</strong>
          </div> -->
          <button id="zap-qrDownloadBtn">
            <i class="fa-solid fa-download"></i> Download QR
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- SECURITY -->
  <div class="t3-security">
    <div class="t3-badge"><i class="fa-solid fa-shield-halved"></i> SSL Secured</div>
    <div class="t3-badge"><i class="fa-solid fa-lock"></i> 256-bit Encrypted</div>
    <!-- <div class="t3-badge"><i class="fa-solid fa-circle-check"></i> PCI DSS</div> -->
    <div class="t3-badge"><i class="fa-solid fa-mobile-screen"></i> UPI Verified</div>
  </div>

  <!-- WATERMARK -->
  <div id="zap-watermark">
    <i class="fa-solid fa-shield-halved"></i> Secured Payment
  </div>

</div>

<script>
(function() {

    /* ──  CONTRAST ──  */
    function hexBrightness(hex) {
        hex = (hex || '').trim().replace('#', '');
        if (hex.length === 3) hex = hex.split('').map(function(h){ return h+h; }).join('');
        if (hex.length !== 6) return 128;
        return (parseInt(hex.substring(0,2),16)*299 + parseInt(hex.substring(2,4),16)*587 + parseInt(hex.substring(4,6),16)*114) / 1000;
    }
    function onColor(hex) { return hexBrightness(hex) > 160 ? '#333333' : '#ffffff'; }

    function applyContrast() {
        var s = getComputedStyle(document.documentElement);
        var r = document.documentElement;
        var c1 = s.getPropertyValue('--zap-c1').trim();
        var c4 = s.getPropertyValue('--zap-c4').trim();
        var c5 = s.getPropertyValue('--zap-c5').trim();
        var c7 = s.getPropertyValue('--zap-c7').trim();
        r.style.setProperty('--t3-on-c5', onColor(c5));
        r.style.setProperty('--t3-on-c7', onColor(c7));
        r.style.setProperty('--t3-on-c1', onColor(c1));
        var c7b = hexBrightness(c7) > 160;
        r.style.setProperty('--t3-inner-bg',    c7b ? 'rgba(0,0,0,0.03)'   : 'rgba(255,255,255,0.15)');
        r.style.setProperty('--t3-inner-border', c7b ? 'rgba(0,0,0,0.08)'   : 'rgba(255,255,255,0.25)');
        r.style.setProperty('--t3-hint-color',  c7b ? 'rgba(51,51,51,0.5)' : 'rgba(255,255,255,0.6)');
        r.style.setProperty('--wm-color', hexBrightness(c4) > 128 ? 'rgba(51,51,51,0.5)' : 'rgba(255,255,255,0.6)');
    }

    /* ──  LOGO ──  */
    var logo = document.getElementById('zap-companyLogo');
    var ico  = document.getElementById('t3LogoIco');
    if (logo && ico) {
        logo.onload  = function() { logo.style.display='block'; ico.style.display='none'; };
        logo.onerror = function() { logo.style.display='none';  ico.style.display='block'; };
    }

    /* ──  NAME SYNC ──  */
    var n1 = document.getElementById('zap-companyName');
    var n2 = document.getElementById('zap-companyName2');
    if (n1 && n2) {
        new MutationObserver(function() { n2.textContent = n1.textContent; })
            .observe(n1, { childList: true, characterData: true, subtree: true });
    }

    /* ──  TIMER SYNC ──  */
    // var t1 = document.getElementById('zap-qrTimer');
    // var t2 = document.getElementById('zap-qrTimer2');
    // if (t1 && t2) {
    //     new MutationObserver(function() { t2.textContent = t1.textContent; })
    //         .observe(t1, { childList: true, characterData: true, subtree: true });
    // }

    /* ──  DUAL QR RENDER ──  */
    /* index.php ka QR render intercep karo — dono targets pe render karo */
    window.zapRenderQR = function(qrText) {
        var pcDiv = document.getElementById('zap-qrCode');
        var moDiv = document.getElementById('t3-qrCode-mobile');

        function makeQR(target) {
            if (!target) return;
            target.innerHTML = '';
            new QRCode(target, {
                text: qrText,
                width: 200, height: 200,
                colorDark: '#000000', colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        makeQR(pcDiv);
        makeQR(moDiv);
    };

    /* Mobile download — PC canvas se */
    var mobileDl = document.getElementById('t3-dl-mobile');
    if (mobileDl) {
        mobileDl.onclick = function() {
            /* Mobile QR canvas pehle try karo, phir PC */
            var canvas = document.querySelector('#t3-qrCode-mobile canvas')
                      || document.querySelector('#zap-qrCode canvas');
            if (!canvas) return;
            var pad = 20, nc = document.createElement('canvas');
            nc.width = canvas.width + pad*2; nc.height = canvas.height + pad*2;
            var ctx = nc.getContext('2d');
            ctx.fillStyle = '#ffffff'; ctx.fillRect(0,0,nc.width,nc.height);
            ctx.drawImage(canvas, pad, pad);
            var a = document.createElement('a');
            a.download = 'QR.png'; a.href = nc.toDataURL('image/png'); a.click();
        };
    }

    /* ──  SENTINEL OBSERVER ──  */
    /* index.php _hide('zap-removeQrCode') ➡ sentinel hide ➡ dono cards hide */
    var sentinel  = document.getElementById('zap-removeQrCode');
    var pcCard    = document.getElementById('t3-pc-qr-card');
    var mobCard   = document.getElementById('t3-mobile-qr-wrap');
    var dlBtn     = document.getElementById('zap-qrDownloadBtn');

    function syncQrVisibility() {
        if (!sentinel) return;
        var hidden = sentinel.style.display === 'none';
        if (pcCard)   pcCard.style.display   = hidden ? 'none' : '';
        if (mobCard)  mobCard.style.display  = hidden ? 'none' : '';
        if (dlBtn)    dlBtn.style.display     = hidden ? 'none' : '';
        if (mobileDl) mobileDl.style.display  = hidden ? 'none' : '';
    }

    if (sentinel) {
        new MutationObserver(syncQrVisibility)
            .observe(sentinel, { attributes: true, attributeFilter: ['style'] });
    }
    syncQrVisibility();

    applyContrast();
    new MutationObserver(function(ms) {
        ms.forEach(function(m) { if (m.attributeName === 'style') applyContrast(); });
    }).observe(document.documentElement, { attributes: true });

})();
</script>    </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://panel.mgamer.online/assets/brite-dialog.js"></script>
<script>
<?php
$cxr_dark_c5 = cxr_darken_hex($checkoutPrimaryColor, 0.55);
$cxr_dark_c6 = cxr_darken_hex($checkoutSecondaryColor, 0.55);
$serverDataArr = [
    "status" => "success",
    "payment" => "pending",
    "data" => [
        "templateId" => "template-3",
        "companyName" => $checkoutDisplayName,
        "companyLogo" => $checkoutLogoUrl ?: '',
        "colors" => [
            "color1" => $checkoutPrimaryColor,
            "color2" => $checkoutPrimaryColorDark,
            "color3" => $checkoutSecondaryColor,
            "color4" => $checkoutBgColor,
            "color5" => $cxr_dark_c5,
            "color6" => $cxr_dark_c6,
            "color7" => "#FFFFFF",
            "color8" => $checkoutPrimaryColor,
        ],
        "amount" => number_format((float)$amount, 2, '.', ''),
        "pay_amount" => number_format((float)$amount, 2, '.', ''),
        "autoCode" => "tr",
        "upi_id" => $upi_id,
        "encodedTxnId" => $cxrkalwaremark,
        "txnId" => $cxrkalwaremark,
        "txnRef" => $cxrbytectxnref,
        "remainingSeconds" => $expirySeconds,
    ],
];
?>
const serverData = <?php echo json_encode($serverDataArr); ?>;
let countdownTimer, redirectStatus='success', redirectReason = '', redirectURL=<?php echo json_encode($redirect_url_failed); ?>, orderId=<?php echo json_encode($order_id); ?>;
const REAL_REDIRECT_SUCCESS = <?php echo json_encode($redirect_url_success); ?>;
const REAL_REDIRECT_FAILED  = <?php echo json_encode($redirect_url_failed); ?>;
const REAL_ORDER_ID = <?php echo json_encode($order_id); ?>;
const REAL_TXN_ID = <?php echo json_encode($cxrkalwaremark); ?>;
const REAL_AMOUNT_DISPLAY = <?php echo json_encode('₹' . number_format((float)$amount, 2)); ?>;
const REAL_IS_TEST_ORDER = <?php echo $isTestOrder ? 'true' : 'false'; ?>;
const CHECKOUT_SHOW_GPAY = <?php echo $checkoutShowGpay ? 'true' : 'false'; ?>;
const CHECKOUT_SHOW_OTHER_UPI = <?php echo $checkoutShowOtherUpi ? 'true' : 'false'; ?>;
const CHECKOUT_SHOW_QR = <?php echo $checkoutShowQr ? 'true' : 'false'; ?>;
const SERVER_NAME_JS = <?php echo json_encode($_SERVER['SERVER_NAME']); ?>;

if (REAL_IS_TEST_ORDER) {
    document.addEventListener('DOMContentLoaded', function() {
        var fab = document.getElementById('testModeFab');
        if (fab) fab.classList.add('show');
    });
    if (document.readyState !== 'loading') {
        var fabNow = document.getElementById('testModeFab');
        if (fabNow) fabNow.classList.add('show');
    }
}

/*
 * OVERLAY CLICK BEHAVIOUR — 3 states:
 *   'none'       ➡ overlay click kuch nahi karega
 *   'ver-only'   ➡ sirf verification sheet close hoga (VPA waiting state)
 *   'all'        ➡ dono sheets close honge
 *
 * Default: 'none'
 * VPA pending state mein 'ver-only' set hoga
 * Result sheet aane ke baad 'none' set hoga — outside click disabled
 */
let overlayClickMode = 'none';

function hexToRgb(hex) {
    hex = hex.replace('#', '');
    if (hex.length === 3) hex = hex.split('').map(function(h){ return h+h; }).join('');
    return {
        r: parseInt(hex.substring(0,2), 16),
        g: parseInt(hex.substring(2,4), 16),
        b: parseInt(hex.substring(4,6), 16)
    };
}

function darkenHex(hex, amount) {
    var rgb = hexToRgb(hex);
    var r = Math.max(0, Math.round(rgb.r * (1 - amount / 100)));
    var g = Math.max(0, Math.round(rgb.g * (1 - amount / 100)));
    var b = Math.max(0, Math.round(rgb.b * (1 - amount / 100)));
    return '#' + [r,g,b].map(function(v){ return v.toString(16).padStart(2,'0'); }).join('');
}

function applyThemeColors(colors) {
    var c = [];
    if (Array.isArray(colors)) {
        c = colors;
    } else if (colors && typeof colors === 'object') {
        c = [
            colors.color1||'', colors.color2||'', colors.color3||'', colors.color4||'',
            colors.color5||'', colors.color6||'', colors.color7||'', colors.color8||''
        ];
    }
    if (c.filter(Boolean).length < 8) return;

    var r = document.documentElement;
    r.style.setProperty('--zap-c1', c[0]);
    r.style.setProperty('--zap-c2', c[1]);
    r.style.setProperty('--zap-c3', c[2]);
    r.style.setProperty('--zap-c4', c[3]);
    r.style.setProperty('--zap-c5', c[4]);
    r.style.setProperty('--zap-c6', c[5]);
    r.style.setProperty('--zap-c7', c[6]);
    r.style.setProperty('--zap-c8', c[7]);
    r.style.setProperty('--primary', c[7]);
    r.style.setProperty('--primary-light', darkenHex(c[7], 20));
}

/* ──  HELPERS ──  */
function pageLoaderHide() {
    document.getElementById('pageLoader').classList.add('hidden');
}

function showTimeoutScreen(title, text, iconClass, btnShow, type) {
    iconClass = iconClass || 'fa-exclamation-circle';
    btnShow   = (btnShow !== false);
    type      = type || 'error';
    const sc  = document.getElementById('timeoutScreen');
    document.getElementById('timeoutTitle').textContent = title;
    document.getElementById('timeoutText').textContent  = text;
    sc.querySelector('.timeout-icon').className = 'fas timeout-icon ' + iconClass;
    sc.classList.remove('status-success','status-pending','status-failed','status-error');
    sc.classList.add('status-' + type);
    document.getElementById('refreshButton').style.display = btnShow ? 'flex' : 'none';
    sc.classList.add('active');
}

document.getElementById('refreshButton').addEventListener('click', function() {
    document.getElementById('timeoutScreen').classList.remove('active');
    location.reload();
});

/* ──  SHEETS & OVERLAY ──  */
const verSheet = document.getElementById('verificationBottomSheet');
const resSheet = document.getElementById('resultBottomSheet');
const overlay  = document.getElementById('sheetOverlay');
let stepInterval;

function showVerificationSheet(title, sub) {
    document.getElementById('verificationTitle').textContent    = title;
    document.getElementById('verificationSubtitle').textContent = sub;
    animateSteps();
    overlay.classList.add('active');
    overlay.style.pointerEvents = 'auto';
    verSheet.classList.add('active');
}

function hideVerificationSheet() {
    verSheet.classList.remove('active');
    stopSteps();
    /* overlay sirf tab hide karo jab result sheet bhi active nahi hai */
    if (!resSheet.classList.contains('active')) {
        overlay.classList.remove('active');
        overlay.style.pointerEvents = 'none';
    }
}

function animateSteps() {
    const steps = [
        document.getElementById('step1'),
        document.getElementById('step2'),
        document.getElementById('step3')
    ];
    let cur = 0;
    steps.forEach(function(s){ s.classList.remove('active'); s.style.opacity = '0.4'; });
    steps[0].classList.add('active');
    stepInterval = setInterval(function() {
        steps[cur].classList.remove('active');
        cur = (cur + 1) % 3;
        steps[cur].classList.add('active');
    }, 400);
}

function stopSteps() {
    clearInterval(stepInterval);
    [1,2,3].forEach(function(n) {
        var s = document.getElementById('step' + n);
        if (s) { s.classList.remove('active'); s.style.opacity = '0.4'; }
    });
}

/* Overlay click — mode ke hisab se behave karta hai */
overlay.addEventListener('click', function() {
    if (overlayClickMode === 'ver-only') {
        /* Sirf verification sheet close ho — VPA waiting state */
        verSheet.classList.remove('active');
        stopSteps();
        overlay.classList.remove('active');
        overlay.style.pointerEvents = 'none';
        overlayClickMode = 'none';
    } else if (overlayClickMode === 'all') {
        /* Dono sheets close */
        verSheet.classList.remove('active');
        resSheet.classList.remove('active');
        overlay.classList.remove('active');
        overlay.style.pointerEvents = 'none';
        stopSteps();
        clearInterval(countdownTimer);
        overlayClickMode = 'none';
    }
    /* 'none' mode mein kuch nahi hota */
});

function showResultSheet(status, txn, val, amount, paidAt) {
    var sh = document.getElementById('sheetHeader');
    var ri = document.getElementById('resultIcon');
    var rt = document.getElementById('resultTitle');
    sh.className = 'sheet-header';
    ri.className = 'fas result-icon';

    if (status === 'success') {
        sh.classList.add('result-success'); ri.classList.add('fa-check-circle');
        rt.textContent = 'Payment Successful';
        document.getElementById('utrLabel').textContent = 'UTR Number';
        document.getElementById('utrRow').style.display = 'flex';
        document.getElementById('dateLabel').textContent = 'Paid At';
        document.getElementById('dateTime').parentElement.style.display = 'flex';
        document.getElementById('utrNumber').textContent = val;
        document.getElementById('dateTime').textContent  = paidAt || '';
    } else if (status === 'failed') {
        sh.classList.add('result-failed'); ri.classList.add('fa-times-circle');
        rt.textContent = 'Payment Failed';
        document.getElementById('utrLabel').textContent = 'Reason';
        document.getElementById('utrRow').style.display = 'flex';
        document.getElementById('utrNumber').textContent = val;
        document.getElementById('dateTime').parentElement.style.display = 'none';
    } else {
        sh.classList.add('result-timeout'); ri.classList.add('fa-clock');
        rt.textContent = 'Payment Timeout';
        document.getElementById('utrLabel').textContent = 'Reason';
        document.getElementById('utrRow').style.display = 'flex';
        document.getElementById('utrNumber').textContent = val;
        document.getElementById('dateTime').parentElement.style.display = 'none';
    }

    document.getElementById('txnId').textContent       = txn;
    document.getElementById('amountValue').textContent  = amount;
    document.getElementById('countdownNumber').textContent = '5';

    /* Result sheet pe overlay active rakho lekin click disable */
    overlay.classList.add('active');
    overlay.style.pointerEvents = 'auto';
    overlayClickMode = 'none'; /* Result sheet ke baad outside click BILKUL nahi */

    resSheet.classList.add('active');
    startCountdown();
}

function startCountdown() {
    var s = 5;
    clearInterval(countdownTimer);
    countdownTimer = setInterval(function() {
        s--;
        document.getElementById('countdownNumber').textContent = s;
        if (s <= 0) { clearInterval(countdownTimer); doRedirect(); }
    }, 1000);
}

document.getElementById('okButton').addEventListener('click', doRedirect);

function doRedirect() {

    var isAndroid = (typeof AndroidBridge !== 'undefined');
    if (isAndroid) {
        AndroidBridge.onPaymentResult(redirectStatus, orderId);
        return;
    }
 
    var isIOS = window.webkit &&
                window.webkit.messageHandlers &&
                window.webkit.messageHandlers.paymentResult;
    if (isIOS) {
        window.webkit.messageHandlers.paymentResult
              .postMessage({ status: redirectStatus, order_id: orderId });
        return;
    }
 
    var inIframe = (window.parent && window.parent !== window);
 
    if (inIframe) {

        try {
            if (window.parent.NeoPay && typeof window.parent.NeoPay._trigger === 'function') {
                window.parent.NeoPay._trigger(redirectStatus, orderId, redirectReason);
                return;
            }
            if (window.parent.ZapUPI && typeof window.parent.ZapUPI._trigger === 'function') {
                window.parent.ZapUPI._trigger(redirectStatus, orderId, redirectReason);
                return; 
            }
        } catch (e) {
          
        }

        window.parent.postMessage(
            { _neopay: true, _zapupi: true, type: redirectStatus, reason: redirectReason, orderId: orderId },
            '*'
        );
        return;
    }
 
    if (redirectStatus === 'success' && redirectURL && orderId) {
        var url = redirectURL.includes('?')
            ? redirectURL + '&order_id=' + encodeURIComponent(orderId)
            : redirectURL + '?order_id='  + encodeURIComponent(orderId);
        window.location.replace(url);
        return;
    }
    // On failure/timeout, send the customer back too (using the merchant's
    // redirect_url with a failed status flag) rather than leaving them
    // stuck reloading the same payment page with no way forward.
    if (REAL_REDIRECT_FAILED && orderId) {
        var failUrl = REAL_REDIRECT_FAILED.includes('?')
            ? REAL_REDIRECT_FAILED + '&order_id=' + encodeURIComponent(orderId)
            : REAL_REDIRECT_FAILED + '?order_id='  + encodeURIComponent(orderId);
        window.location.replace(failUrl);
        return;
    }
    window.location.reload();
}

function setCurrentDateTime() {
    return new Date().toLocaleDateString('en-IN', {
        day:'numeric', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit'
    });
}

/* ──  TEST MODE ──  */
var testFab    = document.getElementById('testModeFab');
var testDialog = document.getElementById('testModeDialog');
var testOvl    = document.getElementById('testModeOverlay');

function openTest()  { testDialog.classList.add('active');    testOvl.classList.add('active'); }
function closeTest() { testDialog.classList.remove('active'); testOvl.classList.remove('active'); }

testFab.addEventListener('click', openTest);
testOvl.addEventListener('click', closeTest);

document.getElementById('testSuccess').addEventListener('click', function() {
    closeTest();
    stopAll();
    overlayClickMode = 'none';
    showVerificationSheet('Securing Payment', 'Processing test transaction');

    setTimeout(function() {
        var fd = new FormData();
        fd.append('order_id', REAL_ORDER_ID);
        fd.append('action', 'success');
        fetch('https://' + SERVER_NAME_JS + '/includes/test_action_submit.php', { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .finally(function() {
            hideVerificationSheet();
            redirectStatus = 'success';
            redirectReason = '';
            redirectURL    = REAL_REDIRECT_SUCCESS;
            showResultSheet('success', REAL_TXN_ID, 'TEST-MODE', REAL_AMOUNT_DISPLAY, setCurrentDateTime());
        });
    }, 1500);
});

document.getElementById('testFailed').addEventListener('click', function() {
    closeTest();
    stopAll();
    overlayClickMode = 'none';
    showVerificationSheet('Verifying Payment', 'Running failure test');

    setTimeout(function() {
        var fd = new FormData();
        fd.append('order_id', REAL_ORDER_ID);
        fd.append('action', 'failed');
        fetch('https://' + SERVER_NAME_JS + '/includes/test_action_submit.php', { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .finally(function() {
            hideVerificationSheet();
            redirectStatus = 'failed';
            redirectReason = '';
            redirectURL    = REAL_REDIRECT_FAILED;
            showResultSheet('failed', REAL_TXN_ID, 'Bank Declined (Test)', REAL_AMOUNT_DISPLAY);
        });
    }, 1500);
});

document.getElementById('testTimeout').addEventListener('click', function() {
    closeTest();
    stopAll();
    overlayClickMode = 'none';
    showVerificationSheet('Processing Payment', 'Testing timeout scenario');

    setTimeout(function() {
        var fd = new FormData();
        fd.append('order_id', REAL_ORDER_ID);
        fd.append('action', 'timeout');
        fetch('https://' + SERVER_NAME_JS + '/includes/test_action_submit.php', { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .finally(function() {
            hideVerificationSheet();
            redirectStatus = 'failed';
            redirectReason = 'timeout';
            redirectURL    = REAL_REDIRECT_FAILED;
            showResultSheet('timeout', REAL_TXN_ID, 'Payment Timeout (Test)', REAL_AMOUNT_DISPLAY);
        });
    }, 1500);
});

/* ──  MAIN INIT ──  */
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPage);
} else {
    initPage();
}

function initPage() {
    setTimeout(function() {
        pageLoaderHide();

        if (serverData.status === 'error') {
            showTimeoutScreen('Error', serverData.message || 'Something went wrong', 'fa-exclamation-circle', false, 'error');
            return;
        }

        var statusMap = {
            success: { title:'Payment Success',  icon:'fa-check-circle',   type:'success' },
            failed:  { title:'Payment Failed',   icon:'fa-times-circle',   type:'failed'  },
            expire:  { title:'Order Expired',    icon:'fa-hourglass-end',  type:'failed'  },
            unknown: { title:'Payment Unknown',  icon:'fa-question-circle',type:'pending' }
        };

        var pay = serverData.payment || 'unknown';
        if (pay !== 'pending') {
            var cfg = statusMap[pay] || statusMap.unknown;
            showTimeoutScreen(cfg.title, serverData.message || '', cfg.icon, false, cfg.type);
            return;
        }

        var inp = serverData.data;

        /* 1. Colors */
        if (inp.colors) applyThemeColors(inp.colors);

        /* 2. Company info */
        var nameEl = document.getElementById('zap-companyName');
        var logoEl = document.getElementById('zap-companyLogo');
        var txnEl  = document.getElementById('zap-txnId');
        var amtEl  = document.getElementById('zap-payAmount');
        if (nameEl) nameEl.textContent = inp.companyName || '--';
        if (txnEl)  txnEl.textContent  = inp.txnId || '--';
        if (amtEl)  amtEl.textContent  = parseFloat(inp.pay_amount || 0).toFixed(2);
        if (logoEl && inp.companyLogo) {
            logoEl.src = inp.companyLogo;
            logoEl.onerror = function() { logoEl.style.display = 'none'; };
        }

        /* 3. Show/Hide */
        var isMobile = /Android|iPhone|iPad|iPod|IEMobile/i.test(navigator.userAgent);
        function _hide(id) { var el = document.getElementById(id); if (el) el.style.display = 'none'; }
        function _show(id) { var el = document.getElementById(id); if (el) el.style.display = '';    }

        /* QR Card - controlled by the merchant's Customize Page toggle */
        if (CHECKOUT_SHOW_QR) {
            _show('t3-pc-qr-card');
            _show('zap-removeQrCode2');
        } else {
            _hide('t3-pc-qr-card');
            _hide('zap-removeQrCode2');
        }

        /* Pay via App buttons - each controlled independently */
        if (CHECKOUT_SHOW_GPAY || CHECKOUT_SHOW_OTHER_UPI) {
            _show('zap-payButtons');
            if (!CHECKOUT_SHOW_GPAY) _hide('zap-gpayBtn');
            if (!CHECKOUT_SHOW_OTHER_UPI) _hide('zap-paytmBtn');
        } else {
            _hide('zap-payButtons');
        }

        /* VPA collect-request and self-serve UTR verification aren't wired to a
           real bank/PSP API yet, so they stay hidden rather than pretending to work. */
        _hide('zap-vpaSection');
        _hide('zap-utrSection');

        /* 4. QR Code — sirf ek baar */
        var qrPayload =
            'upi://pay' +
            '?pa='   + encodeURIComponent(inp.upi_id) +
            '&pn='  + encodeURIComponent(inp.companyName) +
            '&cu=INR' +
            '&am='  + encodeURIComponent(parseFloat(inp.pay_amount).toFixed(2)) +
            '&tn='  + encodeURIComponent(inp.txnId) +
            '&'     + encodeURIComponent(inp.autoCode) + '=' + encodeURIComponent(inp.txnRef);

        function _renderQR(targetId, qrText) {
            var el = document.getElementById(targetId);
            if (!el || el.dataset.done) return;
            el.dataset.done = '1';
            el.innerHTML = '';
            new QRCode(el, {
                text: qrText, width: 200, height: 200,
                colorDark: '#000000', colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        /* PC QR — har template ka primary target */
        _renderQR('zap-qrCode', qrPayload);

        /* Mobile QR — template-3 specific (dono mein fresh render) */
        _renderQR('t3-qrCode-mobile', qrPayload);

        /* 5. QR Download */
        var dlBtn = document.getElementById('zap-qrDownloadBtn');
        if (dlBtn) {
            dlBtn.onclick = function() {
                var canvas = document.querySelector('#zap-qrCode canvas');
                if (!canvas) return;
                var pad = 20;
                var nc  = document.createElement('canvas');
                nc.width  = canvas.width  + pad * 2;
                nc.height = canvas.height + pad * 2;
                var ctx = nc.getContext('2d');
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, nc.width, nc.height);
                ctx.drawImage(canvas, pad, pad);
                var a = document.createElement('a');
                a.download = 'QR_' + inp.txnId + '.png';
                a.href = nc.toDataURL('image/png');
                a.click();
            };
        }

        /* 6. Timer */
        var remaining = parseInt(inp.remainingSeconds) || 0;
        if (remaining <= 5) {
            showTimeoutScreen('Timeout', 'This order has been timed out. Please create a new order.', 'fa-clock', false, 'failed');
        } else {
            startTimer(remaining);
        }

        /* 7. VPA Submit */
        var vpaBtn = document.getElementById('zap-vpaSubmitBtn');
        if (vpaBtn) {
            vpaBtn.onclick = function() {
                var vpaInp = document.getElementById('zap-vpaInput');
                var val    = vpaInp ? vpaInp.value.trim() : '';
                if (!val) {
                    BriteDialog.show({type:'error', title:'VPA Required', message:'Please enter your UPI VPA address.', confirmText:'OK'});
                    return;
                }
                if (!/^[a-zA-Z0-9.\-_]{2,}@[a-zA-Z]{2,}$/.test(val)) {
                    BriteDialog.show({type:'error', title:'Invalid VPA', message:'Please enter a valid UPI ID (example@bank).', confirmText:'Retry'});
                    return;
                }
                var ld = BriteDialogLoading.show({title:'Validating VPA', message:'Checking payment availability...', allowOutsideClick:false});

                fetch('https://pay.mgamer.online/pay/vpa-check-WkFQVVBSRjc5NTUwNjc3ODJBNzZDMg-' + encodeURIComponent(val), {method:'GET', cache:'no-store'})
                .then(function(r) { return r.json(); })
                .then(function(d) {
                    ld.close();
                    if (d.status === 'error') {
                        BriteDialog.show({type:'error', title:'Verification Failed', message:d.message||'Unable to verify VPA.', confirmText:'Retry'});
                        return;
                    }
                    if (d.status === 'success') {
                        /* VPA accept hua — verification sheet dikhao, OVERLAY CLICK ALLOWED (ver-only) */
                        overlayClickMode = 'ver-only';
                        showVerificationSheet('Securing Payment', 'Waiting for customer authorization');
                        return;
                    }
                    BriteDialog.show({type:'warning', title:'Pending Verification', message:'Payment verification pending. Please try again.', confirmText:'Retry'});
                })
                .catch(function() {
                    ld.close();
                    BriteDialog.show({type:'error', title:'Network Error', message:'Unable to connect. Please try again.', confirmText:'Retry'});
                });
            };
        }

        /* 8. UTR Submit */
        var utrBtn = document.getElementById('zap-utrSubmitBtn');
        if (utrBtn) {
            utrBtn.onclick = function() {
                var utrInp = document.getElementById('zap-utrInput');
                var val    = utrInp ? utrInp.value.trim() : '';
                if (!val) {
                    BriteDialog.show({type:'error', title:'UTR Required', message:'Please enter your UTR number.', confirmText:'OK'});
                    return;
                }
                if (!/^[0-9A-Za-z]{10,30}$/.test(val)) {
                    BriteDialog.show({type:'error', title:'Invalid UTR', message:'Please enter a valid UTR number.', confirmText:'Retry'});
                    return;
                }
                var ld = BriteDialogLoading.show({title:'Verifying Payment', message:'Checking transaction status...', allowOutsideClick:false});

                fetch('https://pay.mgamer.online/pay/utr-check-WkFQVVBSRjc5NTUwNjc3ODJBNzZDMg-' + encodeURIComponent(val), {method:'GET', cache:'no-store'})
                .then(function(r) { return r.json(); })
                .then(function(d) {
                    ld.close();
                    if (d.status === 'SUCCESS') {
                        stopAll();
                        overlayClickMode = 'none';
                        showVerificationSheet('Securing Payment', 'Fast-tracking bank verification');
                        setTimeout(function() {
                            hideVerificationSheet();
                            redirectStatus = 'success';
                            redirectReason = '';
                            redirectURL    = 'https://vipbothosting.online/plan_success.php?oid=ORD_1783937841_THJ5TDNF';
                            showResultSheet('success', 'ZAPUPIF7955067382A76C2', d.utr||'N/A', '₹49', d.paid_at||'N/A');
                        }, 2000);
                    } else if (d.status === 'FAILED') {
                        stopAll();
                        overlayClickMode = 'none';
                        showVerificationSheet('Securing Payment', 'Fast-tracking bank verification');
                        setTimeout(function() {
                            hideVerificationSheet();
                            redirectStatus = 'failed';
                            redirectReason = '';
                            redirectURL    = 'https://vipbothosting.online/plan_failed.php';
                            showResultSheet('failed', 'ZAPUPIF7955067382A76C2', d.reason||'N/A', '₹49');
                        }, 2000);
                    } else if (d.status === 'disable') {
                        BriteDialog.show({type:'info', title:'UTR Disabled', message:'UTR payments are not supported.', confirmText:'OK'});
                    } else {
                        BriteDialog.show({type:'warning', title:'Verification Pending', message:'Invalid UTR or payment still pending. Please try again.', confirmText:'Retry', showCancel:true, cancelText:'Cancel', allowOutsideClick:false});
                    }
                })
                .catch(function() {
                    ld.close();
                    BriteDialog.show({type:'error', title:'Network Error', message:'Unable to connect. Please try again.', confirmText:'Retry'});
                });
            };
        }

        /* 9. Intent buttons */
        var gb = document.getElementById('zap-gpayBtn');
        var pb = document.getElementById('zap-paytmBtn');
        var ub = document.getElementById('zap-upiBtn');
        
        if (gb) gb.onclick = function() {

            function shareQR(canvas) {
                canvas.toBlob(function(blob) {
                    var file = new File([blob], 'payment-qr.png', { type: 'image/png' });
                    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
                        navigator.share({
                            title: 'Scan to Pay',
                            files: [file]
                        }).catch(function() {
                            /* Share cancel ya fail — fallback */
                            window.location.href = qrPayload;
                        });
                    } else {
                        /* Share API support nahi — fallback */
                        window.location.href = qrPayload;
                    }
                }, 'image/png');
            }

            /* Pehle existing canvas try karo */
            var canvas = document.querySelector('#zap-qrCode canvas');
            if (canvas) {
                shareQR(canvas);
                return;
            }

            /* Canvas nahi mila — background mein generate karo */
            var tempDiv = document.createElement('div');
            tempDiv.style.cssText = 'position:absolute;left:-9999px;top:-9999px;';
            document.body.appendChild(tempDiv);

            new QRCode(tempDiv, {
                text: qrPayload,
                width: 200, height: 200,
                colorDark: '#000000', colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            });

            setTimeout(function() {
                var tempCanvas = tempDiv.querySelector('canvas');
                if (tempCanvas) {
                    shareQR(tempCanvas);
                } else {
                    window.location.href = qrPayload;
                }
                document.body.removeChild(tempDiv);
            }, 150);
        };

        if (pb) pb.onclick = function() {
            var paytmUrl = qrPayload
                .replace('upi://pay?pa=', 'paytmmp://cash_wallet?featuretype=money_transfer&pa=');
            window.location.href = paytmUrl;
        };

        if (ub) ub.onclick = function() { window.location.href = qrPayload; };

    }, 1500);

    /* SANDBOX */
    
    /* PREVIEW */
    
    if ('dark' === 'dark') document.body.classList.add('dark-mode');
}

/* ──  TIMER + POLLING ──  */
var timerInterval = null, paymentInterval = null, isReqInProgress = false, isCancelling = false;

function startTimer(seconds) {
    var t  = seconds;
    clearInterval(timerInterval); clearInterval(paymentInterval);

    timerInterval = setInterval(function() {
        /* Dono timers update karo — PC + Mobile */
        document.querySelectorAll('#zap-qrTimer').forEach(function(el) {
            el.textContent = String(Math.floor(t / 60)).padStart(2,'0') + ':' + String(t % 60).padStart(2,'0');
            el.classList.toggle('urgent', t <= 60);
        });

        if (t <= 0) {
            clearInterval(timerInterval); clearInterval(paymentInterval);
            overlayClickMode = 'none';
            showVerificationSheet('Processing Payment', 'Accelerated gateway connection');
            triggerRealTimeout();
        }
        t--;
    }, 1000);

    if ('On' === 'On' && !isCancelling) {
        paymentInterval = setInterval(checkPayment, 2000);
    }
}

function checkPayment() {
    if (isReqInProgress || isCancelling) return;
    isReqInProgress = true;
    fetch('https://' + SERVER_NAME_JS + '/order3/payment-status', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'byte_order_status=' + encodeURIComponent(REAL_TXN_ID),
        cache: 'no-store'
    })
    .then(function(r) { return r.text(); })
    .then(function(txt) {
        txt = (txt || '').trim();
        if (txt === 'success') {
            stopAll(); overlayClickMode = 'none';
            showVerificationSheet('Verifying Payment', 'Fast-tracking bank verification');
            setTimeout(function() {
                hideVerificationSheet();
                redirectStatus = 'success'; redirectReason = ''; redirectURL = REAL_REDIRECT_SUCCESS;
                showResultSheet('success', REAL_TXN_ID, 'N/A', REAL_AMOUNT_DISPLAY, setCurrentDateTime());
            }, 2000);
        } else if (txt === 'FAILURE') {
            stopAll(); overlayClickMode = 'none';
            showVerificationSheet('Verifying Payment', 'Fast-tracking bank verification');
            setTimeout(function() {
                hideVerificationSheet();
                redirectStatus = 'failed'; redirectReason = ''; redirectURL = REAL_REDIRECT_FAILED;
                showResultSheet('failed', REAL_TXN_ID, 'Payment not received', REAL_AMOUNT_DISPLAY);
            }, 2000);
        }
    })
    .catch(function(e) { console.error('API:', e); })
    .finally(function() { isReqInProgress = false; });
}

function triggerRealTimeout() {
    var fd = new FormData();
    fd.append('order_id', REAL_ORDER_ID);
    fd.append('action', 'timeout');
    fetch('https://' + SERVER_NAME_JS + (REAL_IS_TEST_ORDER ? '/includes/test_action_submit.php' : '/payment3/mark_failed.php'), {
        method: 'POST',
        body: REAL_IS_TEST_ORDER ? fd : ('byte_order_status=' + encodeURIComponent(REAL_TXN_ID)),
        headers: REAL_IS_TEST_ORDER ? undefined : { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).catch(function(){}).finally(function() {
        hideVerificationSheet();
        redirectStatus = 'failed';
        redirectReason = 'timeout';
        redirectURL    = REAL_REDIRECT_FAILED;
        showResultSheet('timeout', REAL_TXN_ID, 'Payment Timeout', REAL_AMOUNT_DISPLAY);
    });
}

function stopAll() {
    clearInterval(timerInterval);
    clearInterval(paymentInterval);
}

/* ================================================================
   CANCEL PAYMENT BUTTON
   ================================================================ */
(function () {

    var cancelBtn = document.getElementById('cancelPaymentBtn');
    if (!cancelBtn) return;

    cancelBtn.addEventListener('click', function (e) {
        document.getElementById('cancelConfirmOverlay').classList.add('active');
        document.getElementById('cancelConfirmDialog').classList.add('active');
    });

    document.getElementById('cancelConfirmNo').addEventListener('click', function() {
        document.getElementById('cancelConfirmOverlay').classList.remove('active');
        document.getElementById('cancelConfirmDialog').classList.remove('active');
    });
    document.getElementById('cancelConfirmOverlay').addEventListener('click', function() {
        document.getElementById('cancelConfirmOverlay').classList.remove('active');
        document.getElementById('cancelConfirmDialog').classList.remove('active');
    });
    document.getElementById('cancelConfirmYes').addEventListener('click', function() {
        document.getElementById('cancelConfirmOverlay').classList.remove('active');
        document.getElementById('cancelConfirmDialog').classList.remove('active');
        doCancelPayment();
    });

    function resumeAutoCheck() {
        isCancelling = false;
        if ('On' === 'On') {
            clearInterval(paymentInterval);
            paymentInterval = setInterval(checkPayment, 2000);
        }
    }

    function doCancelPayment() {
        isCancelling = true;        
        clearInterval(paymentInterval);
        overlayClickMode = 'none';
        showVerificationSheet('Cancelling Payment', 'Please wait...');

        var ld = { close: function(){} }; // no-op - the verification sheet already shown covers this UI

        fetch('https://' + SERVER_NAME_JS + '/payment3/mark_failed.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'byte_order_status=' + encodeURIComponent(REAL_TXN_ID),
            cache: 'no-store'
        })
        .then(function (r) { return r.json(); })
        .then(function (d) {
            ld.close();
            if (d.status === 'SUCCESS') {
                stopAll();
                overlayClickMode = 'none';
                showVerificationSheet('Verifying Payment', 'Processing transaction status');
                setTimeout(function () {
                    hideVerificationSheet();
                    redirectStatus = 'success';
                    redirectReason = '';
                    redirectURL    = REAL_REDIRECT_SUCCESS;
                    showResultSheet('success', REAL_TXN_ID, d.utr || 'N/A', REAL_AMOUNT_DISPLAY, setCurrentDateTime());
                }, 1500);
            } else {
                stopAll();
                overlayClickMode = 'none';
                showVerificationSheet('Cancelling Payment', 'Processing your cancellation request');
                setTimeout(function () {
                    hideVerificationSheet();
                    redirectStatus = 'failed';
                    redirectReason = 'cancelled';
                    redirectURL    = REAL_REDIRECT_FAILED;
                    showResultSheet('failed', REAL_TXN_ID, 'Cancelled by user', REAL_AMOUNT_DISPLAY);
                }, 1500);
            }
        })
        .catch(function () {
            ld.close();
            resumeAutoCheck();
            if (window.confirm('Network Error\n\nUnable to connect. Try again?')) {
                doCancelPayment();
            }
        });
    }
})();


/* ================================================================
   MOBILE MINIMIZE FIX
   ================================================================ */
(function () {
    var _timerStartedAt   = 0;
    var _timerInitSeconds = 0;
    var _orig = startTimer;

    startTimer = function (seconds) {
        if (_timerStartedAt <= 0) {
            _timerStartedAt   = Date.now();
            _timerInitSeconds = seconds;
        }
        _orig(seconds);
    };

    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'hidden') {
            clearInterval(timerInterval);
            clearInterval(paymentInterval);
        } else if (document.visibilityState === 'visible') {
            if (_timerStartedAt <= 0) return;
            if (isCancelling) return;

            var elapsed      = Math.floor((Date.now() - _timerStartedAt) / 1000);
            var newRemaining = Math.max(0, _timerInitSeconds - elapsed);
            if (newRemaining <= 0) {
                stopAll();
                overlayClickMode = 'none';
                showVerificationSheet('Payment Timeout', 'Transaction time limit exceeded');
                triggerRealTimeout();
            } else {
                startTimer(newRemaining);
            }
        }
    });
})();
</script>
</body>
</html>

<script>
    document.addEventListener("contextmenu", e => e.preventDefault());
    document.onkeydown = function(e){
        if(e.keyCode===123) return false;
        if(e.ctrlKey && e.shiftKey && e.keyCode==73) return false;
        if(e.ctrlKey && e.keyCode==85) return false;
    };
    </script>