<?php
// ============================================================
//  403.php — Access Denied
//  Place in: /admin/403.php
//  Shown automatically by require_super_admin() in auth_check
// ============================================================
$page_title = '403 — Access Denied';
// Don't include header.php — standalone page so it works
// even if the session/db isn't fully loaded
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>403 — Access Denied</title>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    body{
      font-family:'DM Sans',sans-serif;
      background:#05071a;
      color:#eeeeff;
      min-height:100vh;
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
    .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.2;}
    .orb-1{width:500px;height:500px;background:radial-gradient(#f87171,#7c3aed);top:-180px;left:-150px;animation:drift 14s ease-in-out infinite alternate;}
    .orb-2{width:400px;height:400px;background:radial-gradient(#6c63ff,#312e81);bottom:-140px;right:-120px;animation:drift 11s ease-in-out infinite alternate;animation-delay:-5s;}
    @keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(40px,30px)}}
    .bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(108,99,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(108,99,255,.03) 1px,transparent 1px);background-size:50px 50px;}
    .card{
      position:relative;z-index:1;
      text-align:center;
      padding:52px 48px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      border-radius:28px;
      backdrop-filter:blur(28px);
      -webkit-backdrop-filter:blur(28px);
      max-width:480px;
      width:100%;
      margin:20px;
      box-shadow:0 32px 80px rgba(0,0,0,.5);
      animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    .err-code{
      font-family:'Syne',sans-serif;
      font-size:90px;
      font-weight:800;
      line-height:1;
      background:linear-gradient(135deg,#f87171,#f472b6,#a78bfa);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      letter-spacing:-4px;
      margin-bottom:8px;
    }
    .lock-icon{
      width:72px;height:72px;
      background:rgba(248,113,113,.12);
      border:1px solid rgba(248,113,113,.25);
      border-radius:50%;
      display:inline-grid;
      place-items:center;
      font-size:28px;
      color:#f87171;
      margin-bottom:20px;
      animation:pulse 2.5s ease-in-out infinite;
    }
    @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.25)}50%{box-shadow:0 0 0 10px rgba(248,113,113,0)}}
    h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:#eeeeff;margin-bottom:10px;}
    p{font-size:14px;color:#8a8aab;line-height:1.7;max-width:320px;margin:0 auto 28px;}
    .btn-group{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:11px 20px;border-radius:11px;
      font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;
      cursor:pointer;transition:all .2s;text-decoration:none;
      border:1px solid transparent;
    }
    .btn-primary{background:linear-gradient(135deg,#6c63ff,#a78bfa);color:#fff;box-shadow:0 4px 20px rgba(108,99,255,.35);}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(108,99,255,.5);}
    .btn-glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#8a8aab;}
    .btn-glass:hover{background:rgba(255,255,255,.1);color:#eeeeff;}
  </style>
</head>
<body>
<div class="bg">
  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
</div>
<div class="bg-grid"></div>

<div class="card">
  <div class="lock-icon"><i class="fas fa-lock"></i></div>
  <div class="err-code">403</div>
  <h1>Access Denied</h1>
  <p>
    You don't have permission to view this page.
    This area requires <strong style="color:#a78bfa;">Super Admin</strong> privileges.
  </p>
  <div class="btn-group">
    <a href="dashboard.php" class="btn btn-primary">
      <i class="fas fa-gauge-high"></i> Go to Dashboard
    </a>
    <a href="javascript:history.back()" class="btn btn-glass">
      <i class="fas fa-arrow-left"></i> Go Back
    </a>
  </div>
</div>
</body>
</html>
