<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Failed</title>

    <!-- CSS -->
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/custom-order/OverlayScrollbars.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/jquery.dataTables.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/jquery-ui.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/font-awesome-4.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/mstepper.min.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/header.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/footer.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/style.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/minified.css">
    <link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/home-new-2021.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap" rel="stylesheet">

    <!-- jQuery MUST come before jquery-ui -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="<%= tconfig.tsite_url %>views/payment/js/jquery-ui.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Poppins, sans-serif;
            background: #fff;
        }

        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(255,255,255,0.8);
            z-index: 9999;
        }

        .overlay__inner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #ddd;
            border-top: 5px solid #6E2C91;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .page-contant {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .static-page-a {
            text-align: center;
            padding: 40px;
        }

        .static-page-a img {
            width: 120px;
            margin-bottom: 20px;
        }

        .payment-failed-title {
            font-size: 32px;
            font-weight: 600;
            color: #d32f2f;
            margin-bottom: 15px;
        }

        p {
            color: #555;
            font-size: 18px;
        }
    </style>
</head>

<body>

    <div class="overlay">
        <div class="overlay__inner">
            <span class="spinner"></span>
        </div>
    </div>

    <div id="main-uber-page">
        <div class="page-contant">
            <div class="static-page-a">

                <img src="<%= tconfig.tsite_url %>views/payment/images/sad.svg"
                     alt="Payment Failed"
                     onerror="this.style.display='none'">

                <div class="payment-failed-title">
                    Sorry, Payment Failed!
                </div>

                <p>
                    Your payment could not be processed. Please try again or use another payment method.
                </p>

            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {

            // Theme colors
            document.documentElement.style.setProperty('--mainColor', '#6E2C91');
            document.documentElement.style.setProperty('--mainColorSecond', '#6E2C91');
            document.documentElement.style.setProperty('--mainTextColor', '#FFFFFF');
            document.documentElement.style.setProperty('--mainColorHover', '#421b57');

            console.log("Page Loaded Successfully");
        });

        function showLoader() {
            $('.overlay').show();
        }

        function hideLoader() {
            $('.overlay').hide();
        }
    </script>

</body>
</html>