/* ============================================================================
   The forgot-password pages — /forgot-password (forgot-password.php, candidate) and
   /forgot-password-client (forgot-password-client.php, employer). 2026-10-20.

   Operator: the login pages' "Ke harruar fjalëkalimin?" must open a page of its own where the e-mail is
   typed (it used to post the address typed in the LOGIN field by AJAX). The design bundle has no forgot or
   reset screen, so each page is its login page's own design with the story column taken out: the same
   chrome, the same frame (/login's light section + glow, /client-login's navy section + glows) and the
   same card, field, button, alert and foot classes — login.css / login-employer.css load first and this
   sheet adds ONLY what a single centred card needs:
     wrap    the login grid's own box (max-width 1200, min-height max(640, 100vh - 168)), the card centred
     icon    the login's 30 px gradient tick, at 48 px, above the title
     h1      the employer card's title is the page's h1: the type of login-employer.css's card h2
     back    "Kthehu te kyçja": a 44 px target, centred under the button
     sent    the result card: the button as a link, the hint line, a long address that breaks in the box
     phones  <= 767 the card sits at the top of the frame
   Doc: docs/pages/forgot-password.md · test: tests/kj-forgot-2026.test.php (D1-D3 pin the numbers).
   ========================================================================== */

/* ---- the frame: one card, centred where /login has its two columns --------- */
.kj-forgot__wrap {
  position: relative;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(640px, calc(100vh - 168px));
}
.kj-forgot__card { position: relative; }

/* ---- the icon chip above the title ------------------------------------------ */
.kj-forgot__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: flex-start;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(254, 97, 108, .55);
}
.kj-forgot--emp .kj-forgot__icon { background: var(--kje-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%)); }
.kj-forgot__icon svg { display: block; }

/* ---- titles ------------------------------------------------------------------ */
/* the candidate card's h1 carries .kj-login__title (login.css); the employer card's h1 gets the h2's type */
.kj-forgot .kj-elogin__form h1 {
  margin: 0 0 4px;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kje-text-strong, #0B1B33);
}
.kj-forgot .kj-elogin__form h1 + p { margin: 0; font-size: 14px; color: var(--kje-text-muted, #5B6B84); }
.kj-forgot .kj-login__title { text-wrap: balance; }

/* ---- "Kthehu te kyçja" -------------------------------------------------------- */
.kj-forgot__back {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-b3-title, #041E42);
  text-decoration: none;
}
.kj-forgot__back:hover { color: var(--kj-coral-600, #FE616C); text-decoration: underline; }
.kj-forgot--emp .kj-forgot__back { color: var(--kje-text-strong, #0B1B33); }
.kj-forgot--emp .kj-forgot__back:hover { color: var(--kje-coral-600, #FE616C); }
.kj-forgot__back svg { flex: none; }

/* ---- the result card ------------------------------------------------------------ */
/* the button as a link (the login pages style a <button> / <input>) */
.kj-forgot a.signInBtn, .kj-forgot a.kj-elogin__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
}
/* a long address breaks inside the green box instead of widening the card */
.kj-forgot .kj-login__alert span, .kj-forgot .kj-elogin__alert span { min-width: 0; }
.kj-forgot .kj-login__alert b, .kj-forgot .kj-elogin__alert b { font-weight: 800; overflow-wrap: anywhere; }
.kj-forgot__hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-forgot__hint a { font-weight: 700; color: var(--kj-coral-600, #FE616C); text-decoration: none; }
.kj-forgot__hint a:hover { text-decoration: underline; }
.kj-forgot--emp .kj-forgot__hint { color: var(--kje-text-muted, #5B6B84); }
.kj-forgot--emp .kj-forgot__hint a { color: var(--kje-coral-600, #FE616C); }

/* ---- states ---------------------------------------------------------------------- */
.kj-forgot .signInBtn.is-busy { opacity: .7; cursor: progress; transform: none; pointer-events: none; }
.kj-forgot a:focus-visible,
.kj-forgot button:focus-visible {
  outline: 2px solid var(--kj-coral-500, #FE7680);
  outline-offset: 3px;
}

/* ---- phones: the card at the top of the frame ---------------------------------------- */
@media (max-width: 767px) {
  .kj-forgot__wrap { min-height: 0; align-items: flex-start; }
  .kj-forgot__icon { width: 44px; height: 44px; }
}