@extends("general_base")
@section("title", "Forgot Password")
@section("style")
<style>
.mn-login-content {
  max-width: 530px;
  margin: 40px auto;
  padding: 30px 15px;
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mn-login-box {
  width: 100%;
  padding: 0;
}
.mn-login-wrapper {
  width: 100%;
  margin: 0 auto;
}
.mn-login-form {
  width: 100%;
}
.mn-login-form h2 {
  font-weight: 700;
  font-size: 1.6rem;
  color: #313b50;
}
.mn-login-form p {
  color: #999;
  font-size: 0.95rem;
  font-weight: 400;
}
.mn-login-form label {
  margin-bottom: 10px;
  color: #313b50;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.mn-login-form input {
  height: 50px;
  margin-bottom: 24px;
  padding: 0 15px;
  background-color: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  font-size: 14px;
  outline: none;
}
.text-center {
  text-align: center;
}
.mn-btn-1.btn {
  padding: 8px 15px;
  border-radius: 8px;
  background: #ffe3a3;
  color: #313b50;
  border: none;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.mn-btn-1.btn:hover {
  background: #159abe;
  color: #fff;
}
.mn-btn-1.btn:hover span {
  color: #fff;
  background: transparent;
}
.back-to-login {
  margin-top: 15px;
  text-align: center;
}
.back-to-login a {
  color: #313b50;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s ease;
}
.back-to-login a:hover {
  transform: scale(1.05);
  text-decoration: none;
}
.back-to-login a i {
  font-size: 16px;
  line-height: 1;
}
@media only screen and (max-width: 575px) {
  .mn-login-content {
    padding: 15px 0;
  }
}
</style>
@endsection
@section("content")
<section class="mn-login p-b-15">
    <div class="mn-login-content">
        <div class="mn-login-box">
            <div class="mn-login-wrapper">
                <div class="mn-login-container">
                    <div class="mn-login-form">
    <h2 class="text-center mb-2" style="font-weight:700;font-size:1.6rem;color:#313b50;">Forgot Your Password?</h2>
    <p class="text-center mb-4" style="color:#999;font-size:0.95rem;font-weight:400;">Enter your email address below and we'll send you a link to reset your password if your account exists.</p>
                        <form action="{{ route('password.email') }}" method="POST">
                            @csrf
                            <span class="mn-login-wrap">
                            <label>Email Address</label>
                            <input type="email" name="email" placeholder="example@gmail.com" required>
                            </span>
                            <div class="mb-3">
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display() !!}
                            </div>
                            <div class="text-center">
                                <button type="submit" class="mn-btn-1 btn"><span>Submit</span></button>
                            </div>
                            <div class="back-to-login">
                                <a href="{{ route('login') }}"><i class="ri-arrow-left-line"></i> Back to Login</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection