/* Login Form Container */
.login-container {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position */
  max-width: 600px; /* Increased width */
  width: 70%; /* Responsive width */
  padding: 50px; /* Increased padding */
  background: #f3f1f3; /* Same light background color */
  box-shadow: 15px 15px 30px #d1cfcf, -15px -15px 30px #ffffff; /* Neumorphic shadow */
  border-radius: 20px;
  text-align: left;
  backdrop-filter: blur(20px);
}
  
  /* Title Styling */
  .form-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
  }
  
  /* Form Group */
  .login-form .form-group {
    margin-bottom: 15px;
  }
  
  /* Label Styling */
  .login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
  }
  
  /* Form Control */
  .form-control {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    background: #f3f1f3; /* Matches container */
    border: none;
    border-radius: 10px;
    box-shadow: inset 5px 5px 10px #d1cfcf, inset -5px -5px 10px #ffffff; /* Neumorphic inset */
    outline: none;
    transition: all 0.3s ease;
  }
  
  /* Form Control Focus */
  .form-control:focus {
    box-shadow: inset 3px 3px 6px #d1cfcf, inset -3px -3px 6px #ffffff;
  }
  
  /* Error Styling */
  .error {
    color: #e74c3c;
    font-size: 0.85em;
    margin-top: 5px;
  }
  
  /* CTA Button */
  .cta-button {
    display: inline-block;
    background: #f3f1f3;
    color: #333;
    border-radius: 10px;
    padding: 10px 20px; /* pad */
    font-size: 1em;
    text-align: center;
    cursor: pointer;
    box-shadow: 7px 7px 14px #d1cfcf, -7px -7px 14px #ffffff; /* Neumorphic button */
    transition: all 0.3s ease;
    border: none;
    margin-right: 10px;
    width: 100%; /* Full width */
    margin-bottom: 30px;
  }
  
  /* Button Hover and Active State */
  .cta-button:hover {
    box-shadow: 5px 5px 10px #d1cfcf, -5px -5px 10px #ffffff;
  }
  
  .cta-button:active {
    box-shadow: inset 5px 5px 10px #d1cfcf, inset -5px -5px 10px #ffffff;
    transform: translateY(2px);
  }
  
  /* Forgot Password Link */
  .forgot-password {
    color: #4b83f0;
    font-size: 0.9em;
    text-decoration: none;
  }
  
  .forgot-password:hover {
    text-decoration: underline;
  }
  
  /* Sign-Up Link */
  .signup-link {
    margin-top: 20px;
    text-align: center;
  }
  
  .signup-link p {
    color: #333;
  }
  
  .signup-link a {
    color: #4b83f0;
    font-weight: 600;
    text-decoration: none;
  }
  
  .signup-link a:hover {
    text-decoration: underline;
  }

  /* Toggle Group Styling */
.toggle-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin-right: 10px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4b83f0;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

  
/* Footer Styling */
footer {
  position: fixed; /* Ensures footer stays at the bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 1em;
  text-align: center;
  backdrop-filter: blur(10px);
  border-top: 1px solid #e6e6e6; /* Light top border for separation */
}
  
.flash-messages {
  margin-bottom: 20px;
}

.flash-message {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: bold;
}

.flash-message.success {
  color: #4CAF50; /* Green */
}

.flash-message.danger {
  color: #F44336; /* Red */
}

.flash-message.warning {
  color: #FF9800; /* Orange */
}

.flash-message.info {
  color: #2196F3; /* Blue */
}