body {

            overflow-y: auto;         /* allow vertical scroll */

            height: auto;             /* let body expand with content */

            min-height: 100vh;        /* ensure full screen height if content is short */

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;   /* stack elements vertically */

            padding: 0;

            margin: 0;

        }

        .login-container {
            background: var(--glass-bg);
            border-radius: 18px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(229, 9, 20, 0.2);
            padding: 3rem;
            width: 100%;
            max-width: 480px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            animation: fadeIn 0.6s ease forwards;
            margin: 1.5rem;
        }

        .login-logo {
            font-size: 2.2rem;
            font-weight: 800;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 6s ease infinite;
            background-size: 300% 300%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            margin-bottom: 2rem;
            filter: drop-shadow(0 0 15px var(--accent-glow));
        }

        .login-logo .logo-icon {
            font-size: 2rem;
        }



        .login-form h2 {

            color: var(--text-color);

            text-align: center;

            margin-bottom: 0.5rem;

            font-weight: 600;

        }



        .login-subtitle {

            color: var(--text-secondary);

            text-align: center;

            margin-bottom: 2rem;

            font-size: 0.95rem;

        }



        .form-group {

            margin-bottom: 1.5rem;

        }



        .form-group label {

            display: block;

            color: var(--text-color);

            margin-bottom: 0.5rem;

            font-size: 0.95rem;

            font-weight: 500;

        }



        .input-group {

            position: relative;

            display: flex;

            align-items: center;

        }



        .input-group i:first-child {

            position: absolute;

            left: 1rem;

            color: var(--text-secondary);

            font-size: 1rem;

            z-index: 2;

        }



        .input-group input {

            width: 100%;

            padding: 0.9rem 2.5rem 0.9rem 2.5rem;

            border-radius: 8px;

            border: 1px solid rgba(255, 255, 255, 0.2);

            background-color: rgba(0, 0, 0, 0.3);

            color: var(--text-color);

            font-size: 0.95rem;

            transition: var(--transition);

        }



        .password-toggle {

            position: absolute;

            right: 1rem;

            cursor: pointer;

            color: var(--text-secondary);

            transition: var(--transition);

            z-index: 2;

            background: none;

            border: none;

            font-size: 1rem;

            padding: 0;

            margin: 0;

            outline: none;

        }



        .password-toggle:hover {

            color: var(--accent-color);

        }



        .login-btn {

            width: 100%;

            padding: 1rem;

            border: none;

            border-radius: 8px;

            background-color: var(--accent-color);

            color: white;

            font-weight: 600;

            font-size: 1rem;

            cursor: pointer;

            transition: var(--transition);

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            margin-top: 1rem;

        }



        .login-btn:hover {

            background-color: var(--accent-hover);

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(255, 77, 77, 0.4);

        }



        .google-login-btn {

            width: 100%;

            padding: 1rem;

            border: 2px solid rgba(255, 77, 77, 0.8); /* 80% opacity border */

            border-radius: 50px;

            background-color: transparent;

            color: rgba(255, 77, 77, 0.9); /* optional: semi-transparent text */

            font-weight: 600;

            font-size: 1rem;

            cursor: pointer;

            transition: var(--transition);

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            margin-top: 1rem;

            margin-bottom: 1rem;

        }







        .google-login-btn:hover {

            background-color: var(--accent-color);

            transform: translateY(-2px);

            color:white;

        }



        .login-footer {

            margin-top: 1.5rem;

            text-align: center;

            font-size: 0.9rem;

            color: var(--text-secondary);

        }



        .login-footer a {

            color: var(--accent-color);

            text-decoration: none;

            transition: var(--transition);

        }



        .login-footer a:hover {

            text-decoration: underline;

        }



        .forgot-password {

            display: block;

            margin-top: 0.5rem;

        }



        .divider {

            display: flex;

            align-items: center;

            margin: 1.5rem 0;

            color: var(--text-secondary);

            font-size: 0.9rem;

        }



        .divider::before, .divider::after {

            content: "";

            flex: 1;

            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        }



        .divider::before {

            margin-right: 1rem;

        }



        .divider::after {

            margin-left: 1rem;

        }



        /* Google registration form styles */

        .google-register-form {

            display: <?= isset($_SESSION['google_data']) ? 'block' : 'none' ?>;

        }



        .google-user-info {

            display: flex;

            align-items: center;

            gap: 1rem;

            margin-bottom: 1.5rem;

            background: rgba(255, 255, 255, 0.05);

            padding: 1rem;

            border-radius: 8px;

        }



        .google-user-avatar {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            object-fit: cover;

        }



        .google-user-details h4 {

            margin: 0;

            color: var(--text-color);

        }



        .google-user-details p {

            margin: 0.2rem 0 0;

            color: var(--text-secondary);

            font-size: 0.9rem;

        }



        /* Responsive Styles */

        @media (max-width: 480px) {

            .login-container {

                padding: 1.5rem;

            }

            

            .login-logo {

                font-size: 1.8rem;

            }

            

            .login-form h2 {

                font-size: 1.5rem;

            }

            

            .input-group input {

                padding: 0.8rem 1rem 0.8rem 2.3rem;

            }

        }