*{box-sizing:border-box;margin:0;padding:0;font-family:"Poppins",sans-serif;}
body{font-family:"Poppins",sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background-image:url('/static/2.jpg');background-size:auto 100vh;background-repeat:no-repeat;background-position:center;font-size:16px;margin:0;position:relative;}
body::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);z-index:0;}

.login-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999;flex-direction:column;padding:1rem;}

.card{
  background:rgba(255,255,255,0.05);
  border:none;
  border-radius:10px;
  padding:40px 16px !important;
  width:100%;
  max-width:420px;
  position:relative;
  z-index:1;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
}

h1{margin:0 0 30px;font-weight:700;font-size:36px;text-align:center;color:#000000;}

.input-box{position:relative;width:100%;height:50px;margin:30px 0;}
.input-box input{width:100%;height:100%;background:transparent;border:2px solid #6B9B94;outline:none;border-radius:40px;font-size:16px;color:#222222;padding:20px 45px 20px 20px;}
.input-box input::placeholder{color:#222222;opacity:0.7;}
.input-box i{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;color:#222222;}
input:focus{outline:none;border-color:#6B9B94;box-shadow:0 0 0 3px rgba(126,161,155,0.1);}

/* Override browser autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: #222222 !important;
  transition: background-color 5000s ease-in-out 0s;
}

.btn-primary{width:100%;height:56px;background:#6B9B94;border:none;outline:none;border-radius:40px;box-shadow:0 4px 12px rgba(126,161,155,0.3);cursor:pointer;font-size:16px;color:#ffffff;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin-top:0;transition:background 0.2s,box-shadow 0.2s;}
.btn-primary:hover{background:#6d8f8a;box-shadow:0 6px 16px rgba(126,161,155,0.4);}
.btn-primary:active{transform:scale(0.98);}

.forgot-password-link{text-align:center;margin-top:15px;}
.forgot-password-link a{color:#6B9B94;text-decoration:none;font-size:14px;font-weight:500;}
.forgot-password-link a:hover{text-decoration:underline;}

.register-link{font-size:14.5px;text-align:center;margin:20px 0 15px;}
.register-link p{margin:0;color:#6B9B94;}
.register-link p a{color:#6B9B94;text-decoration:none;font-weight:600;}
.register-link p a:hover{text-decoration:underline;}

.flash-box{margin-top:1rem;}
.flash{padding:0.75rem;border-radius:6px;font-size:0.9rem;margin:0.5rem 0;}
.flash-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;}
.flash-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}

/* 2FA Overlay */
#twoFAOverlay {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:99999;
  flex-direction:column;
  padding:1rem;
}
.two-fa-card {
  background:rgba(255,255,255,0.05);
  padding:1.8rem 2rem;
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  width:100%;
  max-width:360px;
}
.two-fa-header {
  background:#6B9B94;
  color:#fff;
  padding:0.75rem;
  border-radius:6px;
  margin-bottom:1rem;
  font-weight:600;
  text-align:center;
}
.two-fa-card label {
  display:block;
  margin-bottom:0.5rem;
  color:#222222;
  font-size:0.9rem;
}
.two-fa-card input {
  width:100%;
  padding:0.55rem 0.65rem;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:1rem;
  margin-top:0.5rem;
  background:transparent;
  color:#222222;
}
.two-fa-card small {
  display:block;
  color:#666;
  margin-top:0.3rem;
  font-size:0.85rem;
}
.two-fa-card .btn-primary {
  margin-top:1rem;
  background:#6B9B94;
  color:#fff;
}
.two-fa-card .btn-primary:hover {
  background:#6d8f8a;
}
.error-text {
  color:#dc3545;
  font-size:0.9rem;
  margin-top:0.75rem;
  padding:0.75rem;
  background:#f8d7da;
  border-radius:6px;
  border:1px solid #f5c6cb;
  display:none;
}

.language-select {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.language-select select {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: transparent;
  color: #222222;
}


.input-box select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid #6B9B94;
  border-radius: 40px;
  font-size: 16px;
  color: #222222;
  padding: 16px 45px 16px 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.input-box select::placeholder {
  color: #222222;
  opacity: 0.7;
}

.input-box input,
.input-box select {
  height: 56px;
  line-height: 1.2;
  padding: 16px 45px 16px 20px;
}

@media (max-width: 768px) {
  .card, .two-fa-card {
    max-width:calc(100% - 2rem);
    padding:1.75rem 1.5rem 1.5rem;
  }
  h1 {
    font-size:1.35rem;
  }
}

@media (max-width: 480px) {
  .login-container, #twoFAOverlay {
    padding:0.75rem;
  }
  .card, .two-fa-card {
    max-width:100%;
    /* padding:1.5rem 1.25rem; */
    border-radius:8px;
  }
  h1 {
    font-size:1.25rem;
    margin-bottom:1.2rem;
  }
}