.auth-container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; animation: slideUp 0.6s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .auth-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px 30px; text-align: center; } .auth-logo { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; } .auth-logo i { font-size: 2rem; } .auth-header h1 { margin: 0 0 10px 0; font-size: 2rem; font-weight: 300; } .auth-header p { margin: 0; opacity: 0.9; font-size: 1.1rem; } .auth-form { padding: 40px 30px; } .alert { padding: 15px; border-radius: 10px; margin-bottom: 25px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .alert-error { background: #fff5f5; border: 1px solid #fed7d7; color: #c53030; } .alert-error::before { content: "⚠️"; font-size: 1.2rem; } .form { margin: 0; } .form-group { margin-bottom: 25px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: 0.95rem; } .form-group input[type="email"], .form-group input[type="password"] { width: 100%; padding: 15px 20px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background: #f7fafc; box-sizing: border-box; } .form-group input:focus { outline: none; border-color: #667eea; background: white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15); } .checkbox-label { display: flex !important; align-items: center; gap: 12px; cursor: pointer; font-weight: 400 !important; color: #555; } .checkbox-label input[type="checkbox"] { width: auto !important; margin: 0 !important; padding: 0 !important; transform: scale(1.2); accent-color: #667eea; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 25px; border: none; border-radius: 10px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } .btn-large { padding: 18px 30px; font-size: 1.1rem; } .btn-full { width: 100%; } .auth-links { text-align: center; margin-top: 25px; padding-top: 25px; border-top: 1px solid #e2e8f0; } .auth-links p { margin: 8px 0; color: #666; } .auth-links a { color: #667eea; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .auth-links a:hover { color: #5a67d8; text-decoration: underline; } .auth-footer { background: #f7fafc; padding: 20px 30px; text-align: center; border-top: 1px solid #e2e8f0; } .auth-footer p { margin: 0; color: #666; font-size: 0.9rem; } .auth-footer a { color: #667eea; text-decoration: none; font-weight: 600; } .auth-footer a:hover { text-decoration: underline; } /* Loading state */ .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Mobile responsiveness */ @media (max-width: 480px) { .main { padding: 20px 15px; min-height: calc(100vh - 120px); } .auth-header, .auth-form, .auth-footer { padding: 25px 20px; } .auth-header h1 { font-size: 1.75rem; } .auth-logo { font-size: 1.3rem; } .auth-logo i { font-size: 1.5rem; } } /* Smooth animations */ * { transition: color 0.3s ease, background-color 0.3s ease; } /* Focus visible for accessibility */ .btn:focus-visible, input:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }

Found A Pet

Welcome Back

Don't have an account? Create one now

Forgot your password?