<div class="auth-card p-4 p-sm-4 my-2">
  <!-- 1. Logo (Fixed Compact Container) -->
  <div class="logo-container">
    <a href="<?= url('/') ?>" class="d-block" title="CARGOO Online Shopping">
      <img src="<?= asset('/assets/images/brand/logo1-blue.png') ?>" alt="CARGOO Online Shopping">
    </a>
  </div>

  <!-- 2. Title -->
  <div class="text-center mb-1">
    <h1 class="auth-title mb-0"><?= __('forgot_password_title') ?></h1>
  </div>

  <!-- 3. Description -->
  <div class="text-center mb-3">
    <p class="auth-subtitle mb-0"><?= __('forgot_password_subtitle') ?></p>
  </div>

  <!-- 4. Form -->
  <form action="<?= url('/forgot-password') ?>" method="POST" autocomplete="on">
    <?= Security::csrfField() ?>

    <div class="mb-3">
      <label for="identifier" class="form-label small fw-semibold mb-1"><?= __('username_or_email') ?></label>
      <div class="input-group">
        <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-envelope"></i></span>
        <input type="text" class="form-control border-start-0 ps-1" id="identifier" name="identifier" required autofocus placeholder="username หรือ email@domain.com">
      </div>
    </div>

    <!-- 5. Primary Button -->
    <button type="submit" class="btn btn-cargoo-primary w-100 py-2 fs-6 shadow-sm mb-0">
      <i class="bi bi-send me-1"></i> <?= __('send_reset_link') ?>
    </button>
  </form>

  <!-- 6. Secondary Link -->
  <div class="text-center mt-3 pt-3 border-top">
    <a href="<?= url('/login') ?>" class="text-primary text-decoration-none small fw-semibold">
      <i class="bi bi-arrow-left me-1"></i> <?= __('back_to_login') ?>
    </a>
  </div>
</div>


