/*============================
   APLL Modern Glass Login UI
   ============================ */

/* Disable zoom on iPhone completely */
html, body {  
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  overscroll-behavior: contain;

  /* Disable pinch-zoom */
  /* touch-action: none; */
}

/* Prevent iPhone auto-zoom */
input,
button {
  font-size: 16px !important;
  touch-action: manipulation;
}

/* ------------- SAFE BACKGROUND WRAPPER (NEW) ------------- */
.bg-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("/elements/logo/apll-bg.jpeg") center center/cover no-repeat fixed;
  animation: bgBreath 14s ease-in-out infinite;
  z-index: -1;
}

@keyframes bgBreath {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* ---------------------------------------------------------- */


/* Background */
body {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden; /* ⛔ No scroll */

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 🌟 FULLSCREEN FORM CONTAINER */
.login-container {
  width: 100%;
  height: 100%;

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

  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  border-radius: 0; /* fullscreen */
  overflow: hidden;
  animation: fadeUp 0.5s ease-out;
}

/* Animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top section */
.top-section {
  text-align: center;
  margin-bottom: 26px;
}

/* ⭐ Bigger Logo */
.login-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-bottom: 10px;
}

.login-title {
  margin: 0;
  font-size: 28px;
  color: #fff;
  font-weight: 600;
}

/* 🟦 Input box container — 80% width */
.input-group {
  width: 80%;
  margin-bottom: 16px;
  max-width: 360px;
  
}

/* Inputs */
.input-group input {
  width: 100%;
  box-sizing: border-box; /* ← IMPORTANT FIX */
  padding: 14px 16px;

  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 14px;
  outline: none;
  font-size: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.input-group input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Error/info boxes */
.error-box,
.infoBox {
  width: 80%;
  text-align: center;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  max-width: 360px;
}

.error-box {
  background: rgba(255, 65, 65, 0.28);
}

.infoBox {
  background: rgba(0, 0, 0, 0.28);
}

/* Login button */
.login-btn {
  width: 80%;
  padding: 16px 18px;
  margin-top: 10px;

  border: none;
  border-radius: 16px;

  background: linear-gradient(135deg, #007bff, #00c2ff);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  max-width: 360px;
  

  cursor: pointer;
  transition: 0.2s;
}

.login-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* FIX: Make inputs perfectly aligned (no overflow) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

#error-box,
.error-box {
  display: none;
}