/* Container to center login card */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* So the flash overlay is positioned relative to this container */
}
/* Login card styling */
.login-card {
  width: 100%;
  max-width: 425px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  background-color: #fff;
}
/* Flash overlay styling */
.flash-overlay {
  position: absolute;
  top: 0; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  max-width: 500px;
}
/* Footer styling remains unchanged */
.footer {
  text-align: center;
  padding: 1rem 0;
  background-color: #f8f9fa;
  color: #777;
  position: fixed;
  bottom: 0;
  width: 100%;
}

::placeholder {
 color: #aaa;
 opacity: 1;
}
	   
/* Keep inputs/buttons ≥16px to prevent iOS zoom */
@media (max-width: 575.98px) {
  .form-control { font-size: 16px; }
  .btn { font-size: 16px; }
}

/* Don’t fix the footer on small screens so it won’t overlap content */
@media (max-width: 767.98px) {
  .footer { position: static !important; }
}

/* If you want it fixed on larger screens, reserve space so it doesn't hide content */
@media (min-width: 768px) {
  .footer { position: fixed; left: 0; bottom: 0; width: 100%; }
  body { padding-bottom: 64px; } /* adjust to your footer height */
}