/* ============================================================
   login.css — Login page styles
   ============================================================ */

body {
  background: linear-gradient(135deg, #012970 0%, #195E8C 60%, #1a7a5e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Brand overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(1, 41, 112, 0.62) 0%,
    rgba(25, 94, 140, 0.50) 100%
  );
  z-index: 0;
}

/* ── Floating medicine icons background ───────────────────── */
.login-bg-icons {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-bg-icons i {
  position: absolute;
  color: #fff;
  animation: floatIcon linear infinite;
}

/* Individual icon placements — top left → bottom right */
.login-bg-icons i:nth-child(1)  { font-size:2.2rem; opacity:.10; top:5%;   left:4%;   animation-duration:18s; animation-delay:0s;   }
.login-bg-icons i:nth-child(2)  { font-size:1.2rem; opacity:.13; top:10%;  left:18%;  animation-duration:14s; animation-delay:-3s;  }
.login-bg-icons i:nth-child(3)  { font-size:3.0rem; opacity:.07; top:2%;   left:38%;  animation-duration:22s; animation-delay:-8s;  }
.login-bg-icons i:nth-child(4)  { font-size:1.5rem; opacity:.12; top:8%;   left:58%;  animation-duration:16s; animation-delay:-5s;  }
.login-bg-icons i:nth-child(5)  { font-size:2.5rem; opacity:.08; top:3%;   left:78%;  animation-duration:20s; animation-delay:-2s;  }
.login-bg-icons i:nth-child(6)  { font-size:1.0rem; opacity:.15; top:3%;   left:90%;  animation-duration:12s; animation-delay:-7s;  }
.login-bg-icons i:nth-child(7)  { font-size:1.8rem; opacity:.09; top:22%;  left:2%;   animation-duration:19s; animation-delay:-4s;  }
.login-bg-icons i:nth-child(8)  { font-size:1.2rem; opacity:.13; top:28%;  left:14%;  animation-duration:15s; animation-delay:-9s;  }
.login-bg-icons i:nth-child(9)  { font-size:2.8rem; opacity:.07; top:18%;  left:88%;  animation-duration:23s; animation-delay:-1s;  }
.login-bg-icons i:nth-child(10) { font-size:1.4rem; opacity:.11; top:35%;  left:96%;  animation-duration:17s; animation-delay:-6s;  }
.login-bg-icons i:nth-child(11) { font-size:2.0rem; opacity:.09; top:45%;  left:6%;   animation-duration:21s; animation-delay:-11s; }
.login-bg-icons i:nth-child(12) { font-size:1.1rem; opacity:.14; top:50%;  left:90%;  animation-duration:13s; animation-delay:-3s;  }
.login-bg-icons i:nth-child(13) { font-size:2.6rem; opacity:.07; top:58%;  left:1%;   animation-duration:24s; animation-delay:-7s;  }
.login-bg-icons i:nth-child(14) { font-size:1.3rem; opacity:.12; top:62%;  left:16%;  animation-duration:16s; animation-delay:-2s;  }
.login-bg-icons i:nth-child(15) { font-size:1.9rem; opacity:.10; top:55%;  left:85%;  animation-duration:18s; animation-delay:-9s;  }
.login-bg-icons i:nth-child(16) { font-size:1.0rem; opacity:.15; top:70%;  left:94%;  animation-duration:11s; animation-delay:-4s;  }
.login-bg-icons i:nth-child(17) { font-size:2.3rem; opacity:.08; top:72%;  left:8%;   animation-duration:20s; animation-delay:-13s; }
.login-bg-icons i:nth-child(18) { font-size:1.5rem; opacity:.11; top:78%;  left:22%;  animation-duration:14s; animation-delay:-5s;  }
.login-bg-icons i:nth-child(19) { font-size:1.2rem; opacity:.13; top:80%;  left:78%;  animation-duration:15s; animation-delay:-8s;  }
.login-bg-icons i:nth-child(20) { font-size:2.0rem; opacity:.09; top:88%;  left:5%;   animation-duration:19s; animation-delay:-10s; }
.login-bg-icons i:nth-child(21) { font-size:1.4rem; opacity:.12; top:85%;  left:35%;  animation-duration:17s; animation-delay:-2s;  }
.login-bg-icons i:nth-child(22) { font-size:2.4rem; opacity:.07; top:82%;  left:60%;  animation-duration:22s; animation-delay:-6s;  }
.login-bg-icons i:nth-child(23) { font-size:1.0rem; opacity:.14; top:90%;  left:88%;  animation-duration:12s; animation-delay:-3s;  }
.login-bg-icons i:nth-child(24) { font-size:1.7rem; opacity:.10; top:95%;  left:48%;  animation-duration:16s; animation-delay:-14s; }

@keyframes floatIcon {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  25%  { transform: translateY(-14px) rotate(6deg);   }
  50%  { transform: translateY(-8px)  rotate(-4deg);  }
  75%  { transform: translateY(-18px) rotate(8deg);   }
  100% { transform: translateY(0px)   rotate(0deg);   }
}

/* ── Login card ───────────────────────────────────────────── */
.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.40);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo i { font-size: 3rem; color: #012970; }
.login-logo h1 {
  font-size: 1.5rem; font-weight: 700; color: #012970;
  margin-top: 8px; font-family: 'Nunito', sans-serif;
}
.login-logo p { color: #6c757d; font-size: .85rem; }

.form-control {
  border-radius: 10px;
  padding: 10px 14px;
  border: 1.5px solid #dee2e6;
  background: rgba(255,255,255,0.95);
}
.form-control:focus {
  border-color: #4154f1;
  box-shadow: 0 0 0 3px rgba(65,84,241,.1);
}

.btn-login {
  background: linear-gradient(90deg, #012970, #4154f1);
  color: #fff; border: none; border-radius: 10px;
  padding: 12px; width: 100%;
  font-weight: 600; font-size: 1rem;
  transition: opacity .2s, transform .1s;
}
.btn-login:hover {
  opacity: .92;
  color: #fff;
  transform: translateY(-1px);
}
.btn-login:active { transform: translateY(0); }