/* static/css/forgot-password.css
   Load AFTER style.css and login.css so these rules take priority. */

#forgot-form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      text-align: left;
}

/* Heading + green underline */
#forgot-form h2,label {
      margin: 0 0 32px;
      font-size: 2rem;
      color: #0f3d1e;
      text-align: left;
}

#forgot-form h2::after {
      content: "";
      display: block;
      width: 64px;
      height: 3px;
      margin: 12px auto 0;
      background: #4a9d4f;
      border-radius: 2px;
}

#forgot-form input[type="tel"]{
      text-align: left;
      padding-left: 14px;
}

/* Labels centered */
#forgot-form label {
      display: block;
      margin: 0 0 8px;
      font-weight: 700;
      font-size: 1rem;
      color: #1f1f1f;
      text-align: left;
}
/* Inputs full width of the form */
#forgot-form input {
      width: 100%;
      margin: 0 0 24px;
      padding: 12px 14px;
      font-size: 1rem;
      font-family: inherit;
      color: #1f1f1f;
      background: #fff;
      border: 1px solid #c9d3cb;
      border-radius: 10px;
      box-sizing: border-box;
      text-align: center;
      /* typed text and placeholder centered too; remove if you prefer left */
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#forgot-form input::placeholder {
      color: #8a948c;
}

#forgot-form input:focus {
      outline: none;
      border-color: #238b2b;
      box-shadow: 0 0 0 3px rgba(35, 139, 43, 0.2);
}

/* Browser autofill (the yellow background in your screenshot) */
#forgot-form input:-webkit-autofill,
#forgot-form input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #eef7ee inset;
      -webkit-text-fill-color: #1f1f1f;
}

/* Button */
#forgot-form button[type="submit"] {
      width: 100%;
      padding: 16px;
      margin-top: 8px;
      font-size: 1.1rem;
      font-weight: 700;
      font-family: inherit;
      color: #fff;
      background: #238b2b;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: background 0.15s ease;
}

#forgot-form button[type="submit"]:hover {
      background: #1c7523;
}

#forgot-form button[type="submit"]:focus-visible {
      outline: 3px solid rgba(35, 139, 43, 0.4);
      outline-offset: 2px;
}

/* Back to login link */
#forgot-form p:last-of-type {
      margin: 20px 0 0;
}

#forgot-form a {
      color: #238b2b;
      text-decoration: none;
}

#forgot-form a:hover {
      color: #0f3d1e;
}

/* Error / success messages (replaces the inline styles) */
#forgot-form .message {
      margin: 0 0 20px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.95rem;
}

#forgot-form .message.error {
      color: #9b1c1c;
      background: #fdecec;
}

#forgot-form .message.success {
      color: #14622a;
      background: #e8f6ec;
}

@media (max-width: 480px) {
      #forgot-form h2 {
            font-size: 1.6rem;
      }
}

/* ---------- Password fields (reuses the login page's .password-wrapper markup) ---------- */

#forgot-form .password-wrapper {
      position: relative;
      margin: 0 0 24px;
}

/* leave room for the lock icon (left) and eye icon (right) */
#forgot-form .password-wrapper input {
      margin: 0;
      padding-left: 52px;
      padding-right: 48px;
      text-align: left;
}

#forgot-form .password-wrapper .toggle-password {
      cursor: pointer; }