/* Page-specific styles extracted from templates/login.php */

/* Smooth page load animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .auth-card {
            animation: fadeInUp 0.4s ease-out;
        }
        
        .btn-google {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: var(--radius);
            background: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .btn-google:hover {
            background: hsl(var(--accent));
            border-color: hsl(var(--accent-foreground) / 0.2);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
        }
        
        .btn-google:active {
            transform: translateY(0);
        }
        
        .auth-divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: hsl(var(--muted-foreground));
            font-size: 0.875rem;
        }
        
        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: hsl(var(--border));
        }
        
        .auth-divider span {
            padding: 0 1rem;
        }
        
        .auth-form .input {
            transition: all 0.2s ease;
        }
        
        .auth-form .input:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px hsl(var(--ring) / 0.15);
        }
        
        .btn-primary {
            transition: all 0.2s ease;
        }
        
        .btn-primary:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
        }
        
        .btn-primary:active:not(:disabled) {
            transform: translateY(0);
        }
        
        .btn-loading {
            position: relative;
            pointer-events: none;
        }
        
        .btn-loading .btn-text {
            opacity: 0;
        }
        
        .btn-loading::after {
            content: '';
            position: absolute;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .alert {
            animation: fadeInUp 0.3s ease-out;
        }
        
        .alert-success {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.2);
        }
        
        .password-toggle {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: hsl(var(--muted-foreground));
            cursor: pointer;
            padding: 0.25rem;
        }
        
        .password-toggle:hover {
            color: hsl(var(--foreground));
        }
        
        .form-group-password {
            position: relative;
        }
        
        .form-group-password .input {
            padding-right: 2.5rem;
        }
        
        /* Turnstile loading placeholder */
        .turnstile-placeholder {
            height: 65px;
            background: hsl(var(--muted) / 0.5);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 1.5s ease-in-out infinite;
        }
        
        .turnstile-placeholder span {
            font-size: 0.75rem;
            color: hsl(var(--muted-foreground));
        }