/* OnlyFanOuts — Auth Pages (login, register, forgot-password, reset-password) */

/* Narrow centered container for auth forms */
.auth-container {
  max-width: 360px;
  margin: 40px auto;
}
.auth-container.wide { max-width: 400px; margin: 60px auto; }

/* Auth card (used on forgot-password, reset-password) */
.auth-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-md);
}

/* Typography */
.auth-container h1,
.auth-card h1 { font-size: 20px; margin: 0 0 8px 0; }
.auth-card h1 { font-size: 24px; color: var(--gray-900); }

.auth-subtitle { color: var(--gray-500); font-size: 14px; margin-bottom: 20px; }
.auth-card .auth-subtitle { margin-bottom: 24px; line-height: 1.5; }

/* Error & success messages */
.auth-error {
  color: #dc2626;
  font-size: 14px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: var(--radius-md);
}
.auth-message { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px; }
.auth-message.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.auth-message.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Form layout */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-card .auth-form { gap: 16px; }

/* Submit button */
.auth-form button {
  padding: 10px 16px;
  background: var(--blue-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}
.auth-form button:hover { background: var(--blue-600); }
.auth-card .auth-form button {
  padding: 12px 16px;
  background: var(--blue-500);
  font-weight: 600;
}
.auth-card .auth-form button:hover { background: var(--blue-600); }

/* Error card (used on reset-password invalid token) */
.auth-error-card {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 20px;
  border-radius: var(--radius-lg);
  text-align: center;
}
.auth-error-card a { color: var(--blue-500); }

/* Success message (used in auth middleware) */
.auth-success {
  color: #065f46;
  font-size: 14px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
}

/* Help text under inputs */
.auth-help-text { font-size: 12px; color: var(--gray-500); margin-top: -8px; }

/* Labels inside auth card */
.auth-card label { font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: -8px; }

/* Secondary button (legacy password form) */
.auth-form .btn-secondary { background: #6c757d; }
.auth-form .btn-secondary:hover { background: #545b62; }

/* Legacy password section */
.auth-legacy { margin-top: 16px; }
.auth-legacy summary { color: var(--gray-500); font-size: 13px; cursor: pointer; }
.auth-legacy-form { display: flex; gap: 8px; margin-top: 8px; }
.auth-legacy-form input { flex: 1; }

/* Footer link */
.auth-footer { margin-top: 20px; font-size: 13px; color: var(--gray-400); }
.auth-footer a { color: var(--blue-700); }
.auth-card .auth-footer { text-align: center; }
.auth-card .auth-footer a { color: var(--blue-500); text-decoration: none; }
.auth-card .auth-footer a:hover { text-decoration: underline; }

/* Verify email page */
.auth-checkmark { font-size: 64px; margin-bottom: 16px; }