/* ===== Authentication Pages Styles ===== */

/* ===== Auth Section ===== */
.auth-section {
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.auth-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(107, 142, 35, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(199, 121, 102, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}

/* ===== Auth Card ===== */
.auth-card {
  background-color: var(--neutral-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

/* ===== Auth Header ===== */
.auth-header {
  text-align: center;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--gradient-warm);
}

.auth-logo {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-sage);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.auth-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* ===== Auth Form ===== */
.auth-form {
  padding: var(--space-6);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-label.required::after {
  content: ' *';
  color: var(--error-red);
}

.form-control {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  color: var(--text-primary);
  background-color: var(--neutral-white);
  border: 2px solid var(--neutral-medium);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  outline: none;
}

.form-control:focus {
  border-color: var(--primary-sage);
  box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.1);
  background-color: var(--neutral-white);
}

.form-control:disabled {
  background-color: var(--neutral-light);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-control::placeholder {
  color: var(--text-lighter);
  font-style: italic;
}

.form-control.error {
  border-color: var(--error-red);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.form-control.success {
  border-color: var(--success-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

/* ===== Form Help Text ===== */
.form-help {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: var(--line-height-normal);
}

.form-error {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--error-red);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-error::before {
  content: '⚠';
  font-size: var(--font-size-base);
}

.form-success {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--success-green);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-success::before {
  content: '✓';
  font-size: var(--font-size-base);
}

/* ===== Form Row ===== */
.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Form Actions ===== */
.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--neutral-medium);
}

.form-actions .btn {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* ===== Auth Divider ===== */
.auth-divider {
  text-align: center;
  position: relative;
  margin: var(--space-6) 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--neutral-medium);
}

.auth-divider span {
  background-color: var(--neutral-white);
  padding: 0 var(--space-4);
  position: relative;
  color: var(--text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Google Sign-in Button ===== */
.btn-google {
  background-color: var(--neutral-white);
  color: var(--text-primary);
  border: 2px solid var(--neutral-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.btn-google:hover {
  border-color: var(--text-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-google:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.google-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== Auth Footer ===== */
.auth-footer {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--neutral-medium);
}

.auth-footer p {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

.auth-footer a {
  color: var(--primary-sage);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: var(--transition-all);
}

.auth-footer a:hover {
  color: var(--primary-sage-dark);
  text-decoration: underline;
}

/* ===== Password Requirements ===== */
.password-requirements {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background-color: var(--neutral-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-medium);
}

.password-requirements h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.password-requirements ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.password-requirements li:last-child {
  margin-bottom: 0;
}

.password-requirements li.valid {
  color: var(--success-green);
}

.password-requirements li.invalid {
  color: var(--error-red);
}

.password-requirements li::before {
  content: '○';
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.password-requirements li.valid::before {
  content: '✓';
  color: var(--success-green);
}

.password-requirements li.invalid::before {
  content: '✗';
  color: var(--error-red);
}

/* ===== Loading States ===== */
.form-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.form-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 2px solid var(--primary-sage);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  z-index: var(--z-modal);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Success Message ===== */
.auth-success {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.success-icon {
  font-size: 4rem;
  color: var(--success-green);
  margin-bottom: var(--space-4);
}

.auth-success h3 {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.auth-success p {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-6);
}

/* ===== Responsive Design ===== */
@media (min-width: 640px) {
  .auth-container {
    max-width: 32rem;
  }

  .form-actions {
    flex-direction: row;
  }

  .form-actions .btn {
    flex: 1;
  }
}

@media (min-width: 768px) {
  .auth-section {
    padding: var(--space-12) 0;
  }

  .auth-container {
    max-width: 36rem;
  }

  .auth-header {
    padding: var(--space-10) var(--space-8) var(--space-8);
  }

  .auth-form {
    padding: var(--space-8);
  }

  .auth-title {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 1024px) {
  .auth-container {
    max-width: 40rem;
  }
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-card {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== Form Validation Animations ===== */
.form-control.error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.form-control.success {
  animation: successPulse 0.5s ease-in-out;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}