<?php include "config.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $website_settings['title'] ?> - Forgot Password</title>

    <!-- Favicons -->
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="icon">
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        :root {
            --blue: #1971ff;
            --maroon: #8b1538;
            --ink: #0a0c14;
        }
        * { box-sizing: border-box; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--ink);
            color: #e7e9ee;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0;
        }
        a { text-decoration: none !important; }

        .back-home { display: inline-flex; align-items: center; gap: 8px; color: #cfd4de; font-size: 14px; font-weight: 500; margin-bottom: 26px; }
        .back-home:hover { color: #fff; }

        .auth-wrap { flex: 1; display: flex; align-items: center; padding: 48px 0; position: relative; overflow: hidden; }

        .mockup-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
        .mockup-glow-a { width: 320px; height: 320px; background: #1971ff40; top: -40px; left: 8%; }
        .mockup-glow-b { width: 260px; height: 260px; background: #8b153840; bottom: -40px; right: 10%; }
        .mockup-dots {
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
            background-size: 22px 22px;
            -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 70%);
            mask-image: radial-gradient(circle at center, #000 35%, transparent 70%);
            z-index: 0; pointer-events: none;
        }

        .auth-container { max-width: 460px; width: 100%; margin: 0 auto; position: relative; z-index: 1; }

        .auth-card {
            background: #fff;
            border-radius: 22px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
            padding: 40px 36px;
            text-align: center;
            color: #1c2230;
        }

        .auth-icon-badge {
            width: 60px; height: 60px;
            margin: 0 auto 20px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--blue), #2c3eef);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 15px 35px rgba(25, 113, 255, 0.35);
        }
        .auth-icon-badge i { font-size: 26px; color: #fff; }

        .auth-card h3 { font-weight: 800; font-size: 21px; color: #14161c; margin-bottom: 14px; }
        .auth-card p { color: #6b7280; font-size: 14.5px; line-height: 1.7; }
        .auth-card strong { color: #3d4453; }

        .btn-primary {
            background-color: var(--blue);
            border-color: var(--blue);
            padding: 12px 26px;
            font-weight: 700;
            border-radius: 12px;
            letter-spacing: 0.3px;
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--maroon);
            border-color: var(--maroon);
        }

        .site-footer { padding: 22px 0; text-align: center; position: relative; z-index: 1; }
        .site-footer p { margin: 0; color: #7a8194; font-size: 12.5px; }
    </style>
</head>
<body>
    <div class="container auth-wrap">
        <div class="mockup-glow mockup-glow-a"></div>
        <div class="mockup-glow mockup-glow-b"></div>
        <div class="mockup-dots"></div>

        <div class="auth-container">
            <a class="back-home" href="index"><i class="fas fa-arrow-left"></i>Back to Login</a>

            <div class="auth-card">
                <div class="auth-icon-badge"><i class="fab fa-google"></i></div>
                <h3>Forgot Your Password?</h3>
                <p>
                    Password recovery works through Google sign-in now: log in with the Google account
                    linked to your mobile number, then open <strong>Account Settings &rsaquo; Change Password</strong>
                    to set a new password &mdash; no old password needed.
                </p>
                <a href="index" class="btn btn-primary mt-2"><i class="fab fa-google me-2"></i>Log In With Google</a>
            </div>
        </div>
    </div>

    <footer class="site-footer">
        <p>© <?= date('Y') ?> <?= $website_settings['title'] ?>. All rights reserved.</p>
    </footer>
</body>
</html>
