<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Failed - CodexVertex</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; background: #fdf2f2; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
        .card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; max-width: 400px; width: 90%; }
        .icon { width: 80px; height: 80px; background: #e74c3c; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 40px; margin: 0 auto 20px; }
        h1 { font-size: 1.5rem; margin-bottom: 10px; color: #1a1a1a; }
        p { color: #6b7280; margin-bottom: 30px; line-height: 1.5; }
        .btn { display: inline-block; background: #e74c3c; color: white; padding: 12px 30px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: background 0.2s; }
        .btn:hover { background: #c0392b; }
    </style>
</head>
<body>
    <div class="card">
        <div class="icon">✕</div>
        <h1>Payment Failed</h1>
        <p>Hume payment receive nahi hua ya transaction cancel ho gaya. Kripya phir se koshish karein.</p>
        <a href="/" class="btn">Try Again</a>
    </div>
</body>
</html>
