/* Login specific styles - extends main.css */

.login-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: var(--space-3xl);
  animation: fadeInScale var(--duration-slow) var(--ease-out);
}

.login-container header h1 {
  font-size: var(--font-4xl);
}

.login-container header p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Form Styling */
#login-form {
  margin-top: var(--space-2xl);
}

.signup-link {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.signup-link a {
  color: var(--cyan-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.signup-link a:hover {
  color: var(--primary-gold);
  text-decoration: underline;
}

/* Social Login Buttons */
.social-login {
  margin-top: var(--space-lg);
}

.social-login .btn {
  justify-content: center;
}

/* Checkbox Styling */
.checkbox-label {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .login-container {
    padding: var(--space-xl);
    max-width: 100%;
  }
  
  .login-container header h1 {
    font-size: var(--font-3xl);
  }
  
  .social-login {
    flex-direction: column;
  }
}