/**
 * Login Page Styles
 */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE5F1 0%, #FFB6D9 50%, #FF69B4 100%);
  padding: var(--space-6);
}

.login-container {
  width: 100%;
  max-width: 450px;
}

.login-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.login-header h1 {
  font-size: 2.5rem;
  color: var(--pink-primary);
  margin-bottom: var(--space-2);
}

.login-header p {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin-bottom: 0;
}

.login-form {
  margin-bottom: var(--space-6);
}

.login-form .form-group:last-of-type {
  margin-bottom: var(--space-6);
}

.login-form button[type="submit"] {
  margin-top: var(--space-4);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-8) 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid var(--gray-200);
}

.divider span {
  padding: 0 var(--space-4);
  color: var(--gray-500);
  font-size: 0.875rem;
  font-weight: 600;
}

.qr-section {
  margin-bottom: var(--space-6);
}

.qr-code-container {
  text-align: center;
  padding: var(--space-6) 0;
}

.qr-code-container p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
}

#qr-code {
  display: inline-block;
  padding: var(--space-4);
  background: white;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

#qr-code img {
  display: block;
  width: 200px;
  height: 200px;
}

.qr-status {
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.login-footer {
  text-align: center;
  padding-top: var(--space-6);
  border-top: 2px solid var(--gray-200);
}

.login-footer a {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.login-footer a:hover {
  color: var(--pink-primary);
}

/* Alternative login section */
.alt-login-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.alt-login-section .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.alt-login-section .btn svg {
  flex-shrink: 0;
}

/* Magic Link container */
.magic-link-container {
  text-align: center;
}

.magic-link-container h3 {
  font-size: 1.25rem;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.magic-link-container > p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

.magic-link-container .form-group {
  text-align: left;
  margin-bottom: var(--space-4);
}

.magic-link-sent {
  padding: var(--space-6);
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.magic-link-sent .success-icon {
  width: 48px;
  height: 48px;
  background: #10B981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto var(--space-3);
}

.magic-link-sent p {
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.magic-link-sent p:first-of-type {
  font-size: 1.125rem;
  font-weight: 600;
  color: #065F46;
}

.magic-link-sent .small {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Google Sign-In button */
.btn-google {
  background: white;
  border: 2px solid var(--gray-300);
  color: var(--gray-700);
}

.btn-google:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-google svg {
  flex-shrink: 0;
}

/* QR Code / Mobile Sign-In button */
.btn-qr {
  flex-wrap: wrap;
  position: relative;
}

.qr-hint {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: var(--space-1);
}

/* OAuth error state */
.oauth-loading {
  text-align: center;
  padding: var(--space-8);
}

.oauth-loading .spinner {
  margin: var(--space-4) auto;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .login-page {
    padding: var(--space-4);
  }

  .login-card {
    padding: var(--space-6);
  }

  .login-header h1 {
    font-size: 2rem;
  }
}