/* =========================================================
   Kanz Forgot Password Theme V2
   Sky Blue Premium Identity
========================================================= */

:root{
  --forgot-primary:#2563eb;
  --forgot-indigo:#4f46e5;
  --forgot-cyan:#06b6d4;

  --forgot-text:#102a4c;
  --forgot-text-soft:#405d79;
  --forgot-muted:#6a8198;

  --forgot-border:rgba(37,99,235,.14);
  --forgot-shadow:0 26px 75px rgba(30,81,125,.15);

  --forgot-danger:#dc2626;
  --forgot-success:#059669;
}

html,
body,
button,
input{
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
}

html{
  background:#edf9ff;
}

body{
  color:var(--forgot-text);
  background:
    radial-gradient(circle at 8% 12%,rgba(56,189,248,.19),transparent 25%),
    radial-gradient(circle at 92% 16%,rgba(37,99,235,.14),transparent 24%),
    radial-gradient(circle at 14% 88%,rgba(6,182,212,.11),transparent 25%),
    radial-gradient(circle at 88% 84%,rgba(79,70,229,.09),transparent 24%),
    linear-gradient(135deg,#f9fdff 0%,#e8f7ff 50%,#f4faff 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(37,99,235,.10) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(6,182,212,.09) 0 1px,transparent 1.5px);
  background-size:58px 58px,86px 86px;
  opacity:.38;
}

.forgot-page{
  position:relative;
  z-index:1;
  padding:24px 16px;
}

.forgot-card{
  width:min(580px,100%);
  max-width:580px;
  padding:38px 32px;
  color:var(--forgot-text);
  border:1px solid var(--forgot-border);
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 12%,rgba(56,189,248,.13),transparent 27%),
    radial-gradient(circle at 92% 88%,rgba(37,99,235,.09),transparent 27%),
    rgba(255,255,255,.96);
  box-shadow:var(--forgot-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.forgot-card h1{
  margin:0 0 14px;
  color:#123a70;
  font-size:2.15rem;
  line-height:1.35;
  font-weight:900;
  text-align:center;
}

.desc{
  margin:0 0 28px;
  color:var(--forgot-text-soft);
  font-size:1rem;
  line-height:1.95;
  font-weight:600;
  text-align:center;
}

#forgotForm{
  gap:18px;
}

.form-group label{
  color:var(--forgot-text);
  font-weight:800;
}

.form-group input{
  height:56px;
  color:var(--forgot-text);
  border:1px solid rgba(37,99,235,.15);
  border-radius:14px;
  background:#f6fbff;
  box-shadow:inset 0 1px 2px rgba(31,78,121,.03);
}

.form-group input::placeholder{
  color:#8195a9;
}

.form-group input:focus{
  color:var(--forgot-text);
  border-color:rgba(37,99,235,.48);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.09);
}

.submit-btn{
  height:56px;
  color:#fff;
  border-radius:16px;
  background:
    linear-gradient(
      100deg,
      var(--forgot-primary),
      var(--forgot-indigo) 58%,
      var(--forgot-cyan)
    );
  box-shadow:0 14px 34px rgba(37,99,235,.23);
}

.submit-btn:hover{
  filter:none;
  transform:translateY(-2px);
  box-shadow:0 19px 42px rgba(37,99,235,.29);
}

#formStatus{
  color:var(--forgot-text-soft);
  font-weight:800;
}

#formStatus.error{
  color:var(--forgot-danger);
}

#formStatus.success{
  color:var(--forgot-success);
}

.back-login{
  margin-top:26px;
  padding-top:20px;
  color:var(--forgot-text-soft);
  border-top:1px solid var(--forgot-border);
  font-weight:600;
}

.back-login a{
  color:var(--forgot-primary);
  font-weight:900;
}

.back-login a:hover{
  text-decoration:underline;
}

@media(max-width:640px){

  .forgot-page{
    align-items:flex-start;
    padding:16px 10px 24px;
  }

  .forgot-card{
    padding:28px 20px;
    border-radius:22px;
  }

  .forgot-card h1{
    font-size:1.75rem;
  }

  .desc{
    font-size:.94rem;
  }

}