<div class="card border-0 shadow-lg p-4 glass-card">
    <div class="card-body">
        <h4 class="fw-bold font-outfit text-dark text-center mb-2">Create New Password</h4>
        <p class="text-muted text-xs text-center mb-4">Set a strong, unique password of at least 8 characters for your account.</p>

        <form action="<?= APP_URL ?>/reset-password/<?= htmlspecialchars($token) ?>" method="POST">
            <?= csrf_field() ?>

            <div class="mb-3">
                <label for="password" class="form-label text-sm fw-medium">New Password</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-lock text-muted"></i></span>
                    <input type="password" class="form-control bg-light border-start-0 ps-0" id="password" name="password" placeholder="Min. 8 characters" required autofocus>
                </div>
            </div>

            <div class="mb-3">
                <label for="password_confirm" class="form-label text-sm fw-medium">Confirm Password</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-check-double text-muted"></i></span>
                    <input type="password" class="form-control bg-light border-start-0 ps-0" id="password_confirm" name="password_confirm" required>
                </div>
            </div>

            <div class="mt-4 mb-3">
                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 font-outfit fw-bold shadow-sm">Reset Password</button>
            </div>
        </form>
    </div>
</div>
