{% extends 'base.html' %}
{% block title %}Forgot Password – Chiez Stores{% endblock %}
{% block extra_css %}
<style>
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;background:#f9f7f4;padding:40px 20px;}
.auth-box{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.1);padding:40px 32px;}
.auth-input{width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-family:var(--sans);font-size:14px;outline:none;transition:all .2s;}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.1);}
.auth-btn{width:100%;padding:13px;background:var(--black);color:#fff;border:none;border-radius:8px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:12px;}
.auth-btn:hover{background:var(--gold);}
</style>
{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="auth-box">
    <div style="text-align:center;margin-bottom:24px;">
      <div style="width:56px;height:56px;background:#fff7ed;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;">🔑</div>
      <h1 style="font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:6px;">Reset Password</h1>
      <p style="font-size:13px;color:#64748b;">Enter your email and we'll send you reset instructions.</p>
    </div>
    <form method="POST">
      {% csrf_token %}
      <div style="margin-bottom:16px;">
        <label style="display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#374151;margin-bottom:6px;">Email Address</label>
        <input type="email" class="auth-input" name="email" required placeholder="your@email.com">
      </div>
      <button type="submit" class="auth-btn">Send Reset Link</button>
    </form>
    <div style="text-align:center;margin-top:20px;font-size:13px;color:#64748b;">
      Remember your password? <a href="{% url 'users:login' %}" style="color:var(--gold);font-weight:600;">Sign in</a>
    </div>
  </div>
</div>
{% endblock %}