/* 1. Center and Elevate the Login Form */
.form-container {
  max-width: 450px !important;
  margin: 5vh auto !important;
  padding: 40px !important;
  background: #ffffff !important; 
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Make text inside the card visible against the white background */
.form-container label {
  color: #444444 !important;
  font-weight: 600 !important;
}
.form-container .hint {
  color: #777777 !important;
}

/* 2. Modernize the Input Fields (Username/Password) */
.form-container input[type="email"],
.form-container input[type="text"],
.form-container input[type="password"] {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 14px 15px !important;
  background: #f9f9f9 !important;
  color: #111111 !important;
  font-size: 16px !important;
  transition: all 0.2s ease-in-out;
}

/* Highlight the field when typing */
.form-container input:focus {
  border-color: #D32F2F !important; /* Your Brand Color */
  background: #ffffff !important;
  outline: none !important;
}

/* 3. The Submit/Login Button */
.form-container .btn.btn-primary {
  background-color: #D32F2F !important; /* Your Brand Color */
  color: #ffffff !important;
  border-radius: 30px !important; /* Modern Pill Shape */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px !important;
  border: none !important;
  margin-top: 20px;
  transition: background-color 0.2s;
}

/* Button hover effect */
.form-container .btn.btn-primary:hover {
  background-color: #B71C1C !important; /* Slightly darker shade */
}

/* 4. Hide Default Mastodon Clutter on the Auth Page */
.form-container .oauth-prompt, 
.form-container .form-footer {
  text-align: center;
}
.form-container .form-footer a {
  color: #D32F2F !important;
  font-weight: 600;
  text-decoration: none;
}
.form-container .form-footer a:hover {
  text-decoration: underline;
}