/**
 * UZHAVA - Authentication Pages CSS
 */

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%); position: relative; overflow: hidden; }
.auth-container { position: relative; width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: center; }
.auth-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.auth-pattern { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: patternMove 60s linear infinite; }
@keyframes patternMove { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } }
.auth-content { position: relative; z-index: 1; }
.auth-card { background: rgba(255, 255, 255, 0.98); border-radius: var(--radius-xl); padding: var(--spacing-2xl); width: 100%; max-width: 420px; box-shadow: var(--shadow-xl); backdrop-filter: blur(10px); animation: cardFadeIn 0.5s ease; }
.auth-card-wide { max-width: 540px; }
@keyframes cardFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.auth-header { text-align: center; margin-bottom: var(--spacing-xl); }
.auth-logo { width: 80px; height: 80px; margin: 0 auto var(--spacing-md); background: var(--color-primary-gradient); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
.auth-logo .logo-icon { font-size: 40px; }
.auth-header h1 { font-size: var(--font-size-2xl); color: var(--color-gray-900); margin-bottom: var(--spacing-xs); }
.auth-header .tagline { color: var(--color-gray-600); font-size: var(--font-size-sm); }
.auth-form { margin-bottom: var(--spacing-lg); }
.auth-form .form-group { margin-bottom: var(--spacing-md); }
.auth-form input { padding: var(--spacing-md); border-radius: var(--radius-md); font-size: var(--font-size-base); }
.auth-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.1); }
.password-input { position: relative; }
.password-input input { padding-right: 48px; }
.password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.6; transition: opacity var(--transition-fast); }
.password-toggle:hover { opacity: 1; }
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); }
.forgot-link { color: var(--color-primary); }
.forgot-link:hover { text-decoration: underline; }
.auth-footer { text-align: center; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-gray-200); }
.auth-footer p { font-size: var(--font-size-sm); color: var(--color-gray-600); }
.auth-footer a { color: var(--color-primary); font-weight: 500; }
.auth-info { margin-top: var(--spacing-lg); padding: var(--spacing-md); background: var(--color-gray-50); border-radius: var(--radius-md); text-align: center; }
.demo-info { font-size: var(--font-size-sm); color: var(--color-gray-600); }
.demo-info strong { color: var(--color-gray-700); }
.membership-info { margin-top: var(--spacing-lg); padding: var(--spacing-md); background: linear-gradient(135deg, rgba(82, 183, 136, 0.1), rgba(45, 106, 79, 0.1)); border-radius: var(--radius-md); text-align: center; }
.membership-info h4 { font-size: var(--font-size-base); color: var(--color-primary); margin-bottom: var(--spacing-xs); }
.membership-info p { font-size: var(--font-size-sm); color: var(--color-gray-600); margin: 0; }
@media (max-width: 576px) { .auth-card { padding: var(--spacing-lg); } .auth-logo { width: 64px; height: 64px; } .auth-logo .logo-icon { font-size: 32px; } }