/* Login overlay and form styles */
#loginOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent; /* Changed from solid color to transparent */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px); /* Added blur effect */
}

/* Login page footer - completely transparent */
.footer {
  text-align: center;
  padding: 1rem;
  color: white; /* Changed to white for better visibility on background */
  font-size: 0.85rem;
  margin-top: 1.5rem;
  /* Completely transparent for login page */
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: transparent;
  padding: 0.8rem 1.5rem;
}

.cil-logo {
  height: 45px;
  width: auto;
  /* Add a subtle glow effect to make the logo more visible against the background */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* Media queries for login page footer */
@media (max-width: 600px) {
  /* Login box mobile styling */
  #loginBox {
    margin: 0 1rem !important; /* Add margin on sides */
    padding: 1.8rem 1.5rem !important; /* Adjust padding for mobile */
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Logo size on mobile */
  .apollo-logo {
    width: 220px !important; /* Make logo bigger on mobile */
    height: auto;
    margin-bottom: 1rem;
  }
  
  /* Footer styling on mobile */
  .footer {
    padding: 0.8rem;
  }
  
  .footer-content {
    padding: 0.6rem 0;
  }
  
  .cil-logo {
    height: 40px;
    /* Add a slight glow to make the logo more visible on transparent background */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
  }
}
#loginBox {
  background: var(--glass-background);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  border: var(--glass-border);
  backdrop-filter: blur(10px);
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  margin: 0 2rem; /* Add margin to sides */
  max-width: 450px; /* Control maximum width */
  width: 100%; /* Ensure it takes available width up to max-width */
  box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Logo styling */
.logo-container {
  margin-bottom: 1.5rem;
  text-align: center;
  width: 100%;
}

.apollo-logo {
  width: 150px; /* Default size */
  height: auto;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}
#loginBox h2 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.3em;
  color: #3f51b5;
}
#loginBox input[type="email"],
#loginBox input[type="text"],
#loginBox input[type="password"],
#loginBox input[type="tel"] {
  padding: 0.7em;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1em;
  width: 100%;
  margin-bottom: 1em;
  box-sizing: border-box;
}

#loginBox input[readonly] {
  background: #f4f6fb;
  color: #888;
  border: 1px solid #e0e0e0;
}

#loginBox label {
  align-self: flex-start;
  margin-bottom: 0.2em;
  font-size: 1em;
  color: #333;
  font-weight: 500;
}
#loginBox button {
  background: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.7em 2em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}
#loginBox button:hover {
  background: #283593;
}
#loginError {
  color: #c00;
  margin-bottom: 0.5em;
  font-size: 0.98em;
  display: none;
}