/* ===== Modal (flex centered) ===== */
.modal{
  display: none;           /* JS sets to flex */
  position: fixed;
  inset: 0;
  z-index: 999;

  background: rgba(0,0,0,0.4);

  justify-content: center;
  align-items: center;

  padding: 16px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.396)
  
}


.modal-content{
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow: visible;
}

/* ===== Zoom Animation (required) ===== */
.animate{
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom{
  from{ -webkit-transform: scale(0); }
  to{   -webkit-transform: scale(1); }
}

@keyframes animatezoom{
  from{ transform: scale(0); }
  to{   transform: scale(1); }
}

/* ===== Login box ===== */
.login-box{
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background: #0d5eaf;
  position: relative;
  
}

.login-box h1{
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  color: white;
  padding: 3%;
  cursor: default;
  text-shadow:
  1px 1px 2px navy,
  0 0 1em white,
  0 0 0.2em grey;
}

.login-box h1::after{
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #2F80ED;
  margin: 10px auto 0;
}

.avatar{
  display: block;
  margin: 0 auto;
  width: 50%;
  cursor:default;
}

/* Close button */
.close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: white;

  font-size: 16px;
  font-weight: 600;      /* 100 makes the glyph look “floaty” */
  line-height: 0;        /* IMPORTANT: stop font line-box shifting */
  padding-bottom: 2px;   /* tiny optical correction (tweak 1–3px) */

  cursor: pointer;
  user-select: none;
}
.close:hover{ background: #D4AF37; }

/* ===== Form layout ===== */
.login-form{
  display: flex;
  flex-direction: column;
  padding: 0 3%;
}

/* Inputs (email + password share exact same rules) */
.login-form input::placeholder{
  text-align: center;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: large;
}

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"]{
  width: 100%;
  display: block;
  margin-top: 2%;

  height: 44px;
  line-height: 44px;
  padding: 0 12px;

  box-sizing: border-box;
  background: #0d5eaf;
  border: 1.5px solid #D4AF37;

  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: larger;
  color: white;
  border-radius: 8px;
}

input:focus{
  outline: 2px solid white;
  box-shadow: none;
}

/* Password field + eye */
.password-field{
  position: relative;
  width: 100%;
}

.password-field input{
  padding-right: 45px; /* space for the eye */
}

.eye-icon{
  position: absolute;
  right: 12px;
  top: 60%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  cursor: pointer;
  user-select: none;
}

/* Buttons */
.loginbtn{
  margin-top: 6px; /* tighter than before */
  padding: 5%;
  background: white;
  border: 0;

  font-family: "Courier New", Courier, monospace;
  font-weight: bolder;
  font-size: large;

  cursor: pointer;
  color: #0d5eaf;
  border-radius: 8px;
}

.login-form button:hover{ background: #D4AF37; }

/* Remember me (closer to login button) */
.login-form .remember{
  margin-top: 6px;   /* tighten spacing */
  margin-bottom: 2px;

  font-family: "Courier New", Courier, monospace;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;

  color: white;
  user-select: none;
  cursor: pointer;
}

.remember input[type="checkbox"]{
  accent-color: #D4AF37;
  margin: 0;
  width: 16px;
  height: 16px;
  transform: translateY(-1px);
  cursor: pointer;
}

/* Message */
#msg{
  margin-top: 10px;
  min-height: 20px;
  color: white;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
}

/* Bottom row: divider on its OWN line + forgot on right */
.bottom-row{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end; /* keep right */
  align-items: center;
  flex-wrap: wrap;
}

.bottom-row::after{
  content: "";
  flex-basis: 100%; /* forces new line */
  height: 3px;
  background: #2F80ED;
  margin-top: 10px;
}

.psw{
  margin: 0;
  color: white;
  font-family: "Courier New", Courier, monospace;
  cursor: default;
}

.psw a{ color: #D4AF37; }
.psw a:hover{ text-decoration: underline; }

/* Signup link */
.signup-link{
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-family: "Courier New", Courier, monospace;
  color: white;
  margin-bottom: 12px;
}

.signup-link a{
  color: #D4AF37;
  text-decoration: none;
}

.signup-link a:hover{ text-decoration: underline; }

.login-form .remember{
  user-select: none;     /* prevent text highlight */
  cursor: pointer;       /* optional: remove pointer cursor */
}

.remember input{
  cursor: pointer;
}

.remember input[type="checkbox"]{
  accent-color: #D4AF37;
  outline: none;
  box-shadow: none;
  border: none;
}

.remember input[type="checkbox"]:focus{
  outline: none;
  box-shadow: none;
  border: none;
}
.login-box{
  background: rgba(13,94,175,0.55);
  backdrop-filter: blur(10px) saturate(150%);
  

  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.516);

  -webkit-box-shadow: 5px 4px 23px 5px rgba(0,0,0,0.49); 
  box-shadow: 5px 4px 23px 5px rgba(0,0,0,0.49);
}


.signup-link a {
  text-decoration: underline;
}

/************************************************/
.success-overlay{
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 16px;

  background-color: #0d5eaf; /* solid so nothing shows behind */
  z-index: 10;
  backdrop-filter: blur(20px);

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.25);

  box-shadow: 12px 12px 2px 1px rgba(255, 255, 255, 0.2);
}

.success-card{
  width: 100%;
  text-align: center;
}

.success-text{
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 14px 0;
}

.okbtn{
  width: 100%;
  border-radius: 90px;
}



/* Signup message */
#su_msg{
  margin-top: 10px;
  min-height: 20px;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  color: #fff;
  line-height: 1.3;
  word-break: break-word;
  padding: 6px 8px;
  border-radius: 10px;
}

/* optional “error vs success” looks */
#su_msg.error{
  background: rgba(255, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
#su_msg.success{
  background: rgba(0, 255, 150, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}