<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ошибка оплаты</title>
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f5f7">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
    <style>
        :root {
            --bg: #f5f5f7;
            --bg-glow: rgba(255, 59, 48, 0.08);
            --card: #ffffff;
            --text: #1d1d1f;
            --muted: #6e6e73;
            --error: #ff3b30;
            --error-bg: rgba(255, 59, 48, 0.12);
            --accent: #0071e3;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #000;
                --bg-glow: rgba(255, 69, 58, 0.08);
                --card: #1c1c1e;
                --text: #f5f5f7;
                --muted: #a1a1a6;
                --error: #ff453a;
                --error-bg: rgba(255, 69, 58, 0.15);
                --accent: #0a84ff;
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            color: var(--text);
            background: var(--bg);
        }

        .page {
            text-align: center;
            padding: 24px 20px;
            max-width: 420px;
        }

        .icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: var(--error-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon svg {
            width: 40px;
            height: 40px;
            stroke: var(--error);
        }

        h1 {
            font-size: 22px;
            font-weight: 700;
            margin: 0 0 8px;
        }

        .subtitle {
            font-size: 16px;
            line-height: 1.5;
            color: var(--muted);
            margin: 0 0 28px;
        }

        .retry-link {
            display: inline-block;
            padding: 12px 24px;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            background: var(--accent);
            border-radius: 10px;
            text-decoration: none;
            transition: opacity 0.2s;
        }

        .retry-link:hover {
            opacity: 0.9;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="icon">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <path d="M15 9l-6 6M9 9l6 6" />
            </svg>
        </div>
        <h1>Ошибка оплаты</h1>
        <p class="subtitle">
            {{ message|default('Не удалось завершить оплату. Проверьте данные карты и попробуйте снова.') }}
        </p>

    </div>
</body>

</html>