<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Forgot Password – Collnetwork Technology</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --purple-deep: #3b1f6e;
      --purple-mid:  #6b3fa0;
      --green-vivid: #22c55e;
      --green-mid:   #16a34a;
      --green-glow:  #4ade80;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family: 'Nunito', sans-serif;
      min-height: 100vh;
      background: var(--purple-deep);
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    /* animated background */
    body::before {
      content:'';
      position:fixed; inset:0; z-index:0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 15%, rgba(107,63,160,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 70% at 85% 85%, rgba(34,197,94,0.13) 0%, transparent 55%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #2a1250 0%, #0d0620 100%);
    }

    .orb { position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
    .orb-1 { width:350px; height:350px; background:rgba(107,63,160,0.35); top:-80px; right:-80px;
              animation: fl1 11s ease-in-out infinite; }
    .orb-2 { width:250px; height:250px; background:rgba(34,197,94,0.15); bottom:-60px; left:-60px;
              animation: fl2 9s ease-in-out infinite; }
    @keyframes fl1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-35px,25px)} }
    @keyframes fl2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-30px)} }

    /* header */
    header {
      position:relative; z-index:10;
      display:flex; align-items:center; gap:14px;
      padding:16px 32px;
      background:rgba(59,31,110,0.7);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(155,109,206,0.25);
    }
    .logo-badge {
      width:46px; height:46px;
      background:linear-gradient(135deg, var(--green-vivid), var(--purple-mid));
      border-radius:11px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
    }
    .logo-badge img { width:100%; height:100%; object-fit:contain; padding:5px; }
    .logo-text { font-size:18px; font-weight:800; color:white; }
    .logo-text span { color:var(--green-vivid); }

    /* page wrap */
    .page-wrap {
      flex:1; position:relative; z-index:5;
      display:flex; align-items:center; justify-content:center;
      padding:32px 16px;
    }

    .card-container {
      width:100%; max-width:460px;
      animation: slideUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes slideUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .card {
      background:white;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,109,206,0.2);
    }

    .card-header {
      background:linear-gradient(135deg, var(--purple-deep), var(--purple-mid));
      padding:30px 32px 26px;
      text-align:center;
      position:relative; overflow:hidden;
    }
    .card-header::before {
      content:'';
      position:absolute; inset:0;
      background:radial-gradient(ellipse 80% 80% at 50% 120%, rgba(34,197,94,0.2) 0%, transparent 70%);
    }
    .key-icon {
      width:64px; height:64px;
      background:rgba(255,255,255,0.15);
      border:2px solid rgba(255,255,255,0.25);
      border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      font-size:30px;
      margin:0 auto 14px;
      position:relative; z-index:1;
      animation: wobble 4s ease-in-out infinite;
    }
    @keyframes wobble {
      0%,100%{ transform:rotate(-4deg); }
      50%    { transform:rotate(4deg);  }
    }
    .card-header h1 { color:white; font-size:22px; font-weight:800; margin-bottom:4px; position:relative; z-index:1; }
    .card-header p  { color:rgba(255,255,255,0.72); font-size:13px; position:relative; z-index:1; }

    .card-body { padding:28px 32px 32px; }

    /* flash messages */
    .flash-msg { padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13px; font-weight:700; }
    .flash-msg.error   { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
    .flash-msg.success { background:#f0fdf4; border:1px solid #bbf7d0; color:var(--green-mid); }

    /* instruction box */
    .instruction {
      background:#f9f5ff;
      border:1px solid #e4d9f5;
      border-radius:12px;
      padding:14px 16px;
      font-size:13px;
      color:#6b4fa0;
      line-height:1.6;
      margin-bottom:22px;
    }
    .instruction strong { color:var(--purple-deep); }

    .form-group { margin-bottom:20px; }
    .form-group label {
      display:block; font-size:12px; font-weight:700;
      color:#7c6fa0; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:7px;
    }
    .input-wrap { position:relative; }
    .input-wrap .icon {
      position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:17px; pointer-events:none;
    }
    .input-wrap input {
      width:100%; padding:13px 16px 13px 44px;
      border:2px solid #e4d9f5; border-radius:12px;
      font-family:'Nunito',sans-serif; font-size:14px; font-weight:600;
      color:#1a0a3c; background:#faf7ff; outline:none;
      transition:border-color 0.25s, box-shadow 0.25s, background 0.25s;
    }
    .input-wrap input:focus {
      border-color:var(--purple-mid); background:white;
      box-shadow:0 0 0 4px rgba(107,63,160,0.12);
    }
    .input-wrap input::placeholder { color:#b8a9d4; font-weight:400; }

    .submit-btn {
      width:100%; padding:14px;
      background:linear-gradient(135deg, var(--purple-mid), var(--purple-deep));
      color:white; border:none; border-radius:13px;
      font-family:'Nunito',sans-serif; font-size:15px; font-weight:800;
      cursor:pointer;
      box-shadow:0 6px 20px rgba(107,63,160,0.4);
      transition:transform 0.2s, box-shadow 0.2s;
    }
    .submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(107,63,160,0.5); }
    .submit-btn:active { transform:translateY(0); }
    .submit-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none; }

    .links-row { text-align:center; margin-top:20px; font-size:13px; color:#7c6fa0; }
    .links-row a { color:var(--purple-mid); font-weight:700; text-decoration:none; transition:color 0.2s; }
    .links-row a:hover { color:var(--green-mid); }
    .links-row .sep { margin:0 10px; color:#d4c5e8; }

    footer {
      position:relative; z-index:10;
      background:rgba(59,31,110,0.7); backdrop-filter:blur(12px);
      border-top:1px solid rgba(155,109,206,0.25);
      padding:12px 32px;
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
    }
    footer .ft { color:rgba(255,255,255,0.5); font-size:12px; }
    footer a.support {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,0.1); padding:7px 16px; border-radius:20px;
      color:white; text-decoration:none; font-size:12px; font-weight:700;
    }
    footer a.support:hover { background:rgba(255,255,255,0.18); }
  </style>
</head>
<body>

  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>

  <header>
    <div class="logo-badge">
      <img src="/static/img/collnetwork_logo.png" alt="Logo"
           onerror="this.style.display='none'">
    </div>
    <div class="logo-text">Collnetwork <span>Technology</span> LTD</div>
  </header>

  <div class="page-wrap">
    <div class="card-container">
      <div class="card">

        <div class="card-header">
          <div class="key-icon">🔑</div>
          <h1>Forgot Your Password?</h1>
          <p>No worries — we'll email you a reset link</p>
        </div>

        <div class="card-body">

          {% with messages = get_flashed_messages(with_categories=true) %}
            {% for cat, msg in messages %}
              <div class="flash-msg {{ cat }}">
                {% if cat == 'success' %}✅{% else %}⚠️{% endif %} {{ msg }}
              </div>
            {% endfor %}
          {% endwith %}

          <div class="instruction">
            Enter your <strong>registered email address</strong> and we'll send you a secure
            link to reset your password. The link expires in <strong>60 minutes</strong>.
          </div>

          <form method="POST" action="/forgot-password" id="forgotForm">
            <div class="form-group">
              <label>Email Address</label>
              <div class="input-wrap">
                <span class="icon">📧</span>
                <input type="email" name="email" placeholder="your@email.com"
                       required autocomplete="email"/>
              </div>
            </div>

            <button type="submit" class="submit-btn" id="submitBtn">
              📨 &nbsp;Send Reset Link
            </button>
          </form>

          <div class="links-row">
            <a href="/login">Back to Login</a>
            <span class="sep">|</span>
            <a href="/register">Create New Account</a>
          </div>

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

  <footer>
    <div class="ft">© 2025 Collnetwork Technology LTD</div>
    <a class="support" href="https://customersupport.collnetwork.net" target="_blank">💬 Support</a>
  </footer>

  <script>
    document.getElementById('forgotForm').addEventListener('submit', function() {
      const btn = document.getElementById('submitBtn');
      btn.disabled = true;
      btn.textContent = '⏳  Sending…';
    });
  </script>
</body>
</html>
