<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>در حال انتقال به درگاه پرداخت…</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <style>
        @font-face {
            font-family:'Vazirmatn';
            src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight:400; font-display:swap;
        }
        @font-face {
            font-family:'Vazirmatn';
            src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
            font-weight:700; font-display:swap;
        }
        :root {
            --ink:#0f1b2e; --muted:#56657c; --line:#e4e9f1; --primary:#5457dd;
            --shadow-lg:0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
        }
        * { box-sizing:border-box; }
        body { margin:0; font-family:'Vazirmatn', ui-sans-serif, system-ui, sans-serif; color:var(--ink);
               background:radial-gradient(1200px 600px at 50% -10%, #e9eefb 0%, #eef2f8 45%, #e6ecf4 100%);
               min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
        .card { background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg);
                width:100%; max-width:400px; padding:40px 28px; text-align:center;
                animation:rise .45s cubic-bezier(.22,.61,.36,1) both; }
        @keyframes rise { from { opacity:0; transform:translateY(14px) scale(.98); } }
        .spinner { width:58px; height:58px; margin:0 auto 22px; border:5px solid #ecedfb;
                   border-top-color:var(--primary); border-radius:50%; animation:spin .9s linear infinite; }
        @keyframes spin { to { transform:rotate(360deg); } }
        h1 { font-size:19px; font-weight:700; margin:0 0 8px; }
        p { color:var(--muted); font-size:14px; margin:0; line-height:2; }
        .noscript-btn { display:inline-block; margin-top:18px; padding:12px 22px; border-radius:12px;
                        background:var(--primary); color:#fff; font-weight:700; border:none; cursor:pointer; font-size:15px; }
        .brand { margin-top:22px; font-size:11.5px; color:#aeb4c0; letter-spacing:.2px; }
    </style>
</head>
<body onload="document.forms[0] && document.forms[0].submit()">
    <div class="card">
        <div class="spinner"></div>
        <h1>در حال انتقال به درگاه پرداخت</h1>
        <p>لطفاً چند لحظه صبر کنید…<br>در صورت انتقال‌نشدن خودکار، روی دکمهٔ زیر بزنید.</p>
        <form method="POST" action="{{ action }}">
            {% for name, value in params %}
                <input type="hidden" name="{{ name }}" value="{{ value }}">
            {% endfor %}
            <noscript><button type="submit" class="noscript-btn">ادامه و پرداخت</button></noscript>
        </form>
        <div class="brand">پرداخت امن از طریق درگاه بانکی</div>
    </div>
</body>
</html>
