/* === Login background (auth/*.php only) === */
.login-bg{
  position: fixed;
  top: calc(env(safe-area-inset-top) * -1);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -2;
}
.login-bg-img{
  position: absolute;
  inset: -10%;
  background-image: url('/assets/bg/_bg-infinite.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* start from far left */
  background-position: 0% 50%;
  filter: blur(6px);
  transform: translateZ(0);
  will-change: transform, background-position;
  animation: toxSlideLTR 38s ease-in-out infinite alternate;
}
/* Dark, soft overlay for contrast */
.login-bg-overlay{
  position: fixed;
  top: calc(env(safe-area-inset-top) * -1);
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(0,0,0,0.38), rgba(0,0,0,0.78)),
    rgba(0,0,0,0.68);
  z-index: -1;
}

/* Move LEFT -> RIGHT first, then alternate back */
@keyframes toxSlideLTR{
  0%   { transform: translateX(0%)   scale(1.06); background-position:   0% 50%; }
  50%  { transform: translateX(2.0%) scale(1.06); background-position:  50% 50%; }
  100% { transform: translateX(4.0%) scale(1.06); background-position: 100% 50%; }
}

/* Layout and safe area */
.centerwrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* FLOATING login card: no solid box, just content over background */
.login-card{
  max-width: 420px;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 16px 10px;
}
.login-brand{
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.login-brand img{
  height: 26px;
  display: block;
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.login-card h2{
  margin: 12px 0 24px;
  text-align: center;
  letter-spacing: 0.2px;
  color: #f5f7fa;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* Form layout */
.login-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-group{
  position: relative;
}
.login-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.9;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inputs: pill-style over the bg */
.login-input{
  width: 100%;
  padding: 14px 14px 14px 48px;
  border-radius: 14px;
  background: rgba(3,6,10,0.8);
  border: 1px solid rgba(255,255,255,0.06);
  color: #eaecee;
  outline: none;
  font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-input::placeholder{
  color: #98a2ad;
}
.login-input:focus{
  border-color: #3bb3ff;
  box-shadow: 0 0 0 3px rgba(59,179,255,0.12);
}

/* Actions */
.login-actions{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-primary{
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: #3bb3ff;
  color: #082338;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(59,179,255,0.26);
}

/* Error message styling (in case it's missing now) */
.error{
  background: #2a1111;
  border: 1px solid #5b1c1c;
  color: #ffb0b0;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 0 0 10px;
}

/* Prevent pointless scroll on login views */
body.login-noscroll{
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
}