/* Auth page styles - Login and Signup pages */

/* Clean login page layout */
html {
  margin: 0;
  padding: 0;
}

body.homepage-body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.homepage-body .main-content {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Align from top to prevent clipping */
  min-height: 0 !important;
  overflow-y: auto !important; /* Allow internal scroll if needed */
}

.login-page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding-top: 2vh; /* Reduced top space */
  padding-bottom: 10px;
}

.login-logo-container {
  padding: 8px 0; /* Further reduced padding */
  margin-bottom: 5px; 
  text-align: center;
  width: 100%;
}

.login-logo-container .logo {
  width: 80px !important; 
  height: auto !important;
  display: inline-block !important;
  filter: none !important;
}

/* Login card - ultra compact but with breathing room */
.login-page-wrapper .ai-home-center.login-page-card {
  max-width: 480px !important;
  width: 95% !important;
  margin: 0 0 10px 0 !important; /* Reduced bottom margin */
  padding: 2.5rem 2.5rem !important; 
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  z-index: 1001 !important; /* Higher than footer */
  position: relative !important;
}

.login-page-title {
  font-size: 1.7rem !important;
  margin-bottom: 1.5rem !important; /* Reduced bottom margin */
}

/* Input group spacing */
.ai-home-input-group {
  margin-bottom: 15px !important; /* Slightly reduced */
}

/* Matching button sizes and spacing */
.ai-home-center .btn {
  height: 52px !important;
  display: flex; /* Remove !important so JS can toggle visibility */
  align-items: center;
  justify-content: center;
  width: 100% !important;
  font-size: 0.95rem !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0 !important;
}

.ai-home-center .d-grid {
  width: 100% !important;
  margin-bottom: 15px !important;
}

.ai-home-center .d-grid:last-child {
  margin-bottom: 0 !important;
}

/* Restore white Google button style */
#google-login {
  background-color: #ffffff !important;
  color: #3c4043 !important;
  border: 1px solid #dadce0 !important;
  margin-top: 10px !important;
  display: flex !important; /* Google button should always be visible */
}

#google-login:hover {
  background-color: #f8f9fa !important;
  box-shadow: 0 1px 3px rgba(60,64,67,0.3) !important;
}

.login-divider {
  margin: 1rem 0 !important; /* Reduced vertical margin */
  font-size: 0.9rem !important;
  color: #ffffff !important;
  opacity: 1 !important; /* Full opacity for better readability */
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-divider span {
  color: #ffffff !important;
  background: transparent;
  padding: 0 10px;
}

/* Links outside the card */
.login-external-links {
  text-align: center;
  width: 100%;
  margin-top: 5px;
}

.login-external-links p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #ffffff !important; /* Pure white for maximum readability */
  opacity: 0.9;
}

.login-external-links a {
  color: #14F2C8 !important;
  text-decoration: none;
  font-weight: 600;
}

.login-external-links a:hover {
  text-decoration: underline;
  color: #4FFFF0 !important;
}

/* Signup page specific styles - uses same .login-page-wrapper class but with different layout */
.auth-page .login-page-wrapper {
  justify-content: center;
  min-height: calc(100vh - 100px);
  padding: 2rem 1rem;
  max-width: 520px;
}

.auth-page .login-logo-container {
  margin-bottom: 1.5rem;
}

.auth-page .login-logo-container .logo {
  width: 100px;
  height: auto;
  filter: none !important;
  transition: transform 0.2s ease;
}

.auth-page .login-logo-container .logo:hover {
  transform: scale(1.05);
}

/* Signup card improvements */
.auth-page .login-page-wrapper .ai-home-center.login-page-card {
  max-width: 500px !important;
  width: 100% !important;
  padding: 3rem 2.5rem !important;
  margin: 0 auto !important;
}

.homepage-body .ai-home-center .btn-google#google-signup {
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 52px !important;
  margin-top: 0 !important;
}

.ai-home-center.login-page-card .d-grid {
  width: 100%;
}

/* Signup page title override */
.auth-page .login-page-title {
  font-size: 2rem !important;
  margin-bottom: 2rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Improved input spacing for signup */
.auth-page .ai-home-input-group {
  margin-bottom: 1.25rem !important;
}

.auth-page .ai-home-input {
  padding: 1rem 1.25rem !important;
  font-size: 1rem !important;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.auth-page .ai-home-input:focus {
  border-color: #14F2C8;
  box-shadow: 0 0 0 3px rgba(20, 242, 200, 0.1);
  outline: none;
}

/* Button improvements */
.auth-page .btn-primary.btn-lg, 
.auth-page .btn-google.btn-lg {
  padding: 0.875rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.auth-page .btn-primary.btn-lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 242, 200, 0.3);
}

.auth-page .btn-google.btn-lg:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Divider improvements */
.auth-page .login-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
}

.auth-page .login-divider::before,
.auth-page .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.auth-page .login-divider span {
  padding: 0 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Footer links improvements */
.auth-page .login-footer-links {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-page .login-footer-links p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.95rem;
}

.auth-page .login-footer-links a {
  color: #14F2C8 !important;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.25rem;
}

.auth-page .login-footer-links a:hover {
  color: #4FFFF0 !important;
  background-color: rgba(20, 242, 200, 0.1);
  text-decoration: none;
}

/* Hidden elements - replaces inline style="display: none;" */
.auth-page #login-error.hidden,
.auth-page #password-field.hidden,
.auth-page #login-btn.hidden,
.auth-page #reset-error.hidden,
.auth-page #reset-success.hidden,
.auth-page #signup-error.hidden,
.auth-page #signup-success.hidden,
.auth-page .hidden {
  display: none !important;
}

/* Modal content styling - replaces inline style */
.auth-page .modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

/* Progress alert styling - replaces inline style.cssText */
.auth-page .alert-progress {
  display: block !important;
  background: rgba(20, 242, 200, 0.15) !important;
  border: 1px solid rgba(20, 242, 200, 0.4) !important;
  color: #14F2C8 !important;
  font-weight: 500;
}