/* ==========================================================================
   Lupa kata laluan — 4 langkah (emel → OTP → kata laluan baharu → selesai)
   URS PFD-MBPG-PPM-PG-03
   ========================================================================== */

/* ------------------------------------------------ syarat kata laluan */
.syarat-sandi{
  list-style:none;margin:10px 0 18px;padding:0;
  display:grid;gap:6px;
}
.syarat-sandi li{
  display:flex;align-items:center;gap:8px;
  font-size:12px;line-height:1.5;color:var(--ink-3);
}
.syarat-sandi li svg{
  flex:0 0 auto;width:14px;height:14px;
  fill:none;stroke:#C3C9D6;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .15s ease;
}
.syarat-sandi li.penuhi{color:#1B7A4B}
.syarat-sandi li.penuhi svg{stroke:#1B7A4B}

/* --------------------------------------------------------- langkah */
.lupa-langkah[hidden]{display:none}
.lupa-langkah h1{font-size:22px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.lupa-langkah .masuk-tukar{margin-top:18px}

.lupa-langkah .butang-baris{
  display:flex;gap:10px;margin-top:20px;
  padding-top:20px;border-top:1px solid #EEF0F7;
}
.lupa-langkah .butang-baris > *{flex:1}

/* ---------------------------------------------------------- selesai */
.lupa-jaya{text-align:center}
.lupa-jaya h1{margin-top:14px}
.lupa-jaya > p{
  margin:0 0 24px;font-size:13px;line-height:1.7;color:var(--ink-3);
}
.lupa-jaya .lambang{
  width:64px;height:64px;margin:0 auto;
  border-radius:50%;background:#E7F6EE;
  display:flex;align-items:center;justify-content:center;
}
.lupa-jaya .lambang svg{
  width:30px;height:30px;fill:none;stroke:#1B7A4B;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ----------------------------------------------------------- gelap */
html[data-tema="gelap"] .syarat-sandi li{color:var(--ink-3)}
html[data-tema="gelap"] .syarat-sandi li svg{stroke:#4A5568}
html[data-tema="gelap"] .syarat-sandi li.penuhi{color:#6BDBA0}
html[data-tema="gelap"] .syarat-sandi li.penuhi svg{stroke:#6BDBA0}
html[data-tema="gelap"] .lupa-jaya .lambang{background:rgba(27,122,75,.22)}
html[data-tema="gelap"] .lupa-jaya .lambang svg{stroke:#6BDBA0}
html[data-tema="gelap"] .lupa-langkah .butang-baris{border-top-color:var(--line)}

@media (max-width:640px){
  .lupa-langkah h1{font-size:19px}
  .lupa-langkah .butang-baris{flex-direction:column-reverse}
  .syarat-sandi{margin-bottom:14px}
}