.login-card { background: #FFFFFF; border-radius: 18px; box-shadow: 0 6px 24px rgba(161,188,152,.18); padding: 2rem 2.5rem; margin: 2rem auto; max-width: 420px; text-align: center; font-family: 'Sansation'; }
.login-card h2 { margin: 20px 0; padding: 0; color: #778873; font-size: 1.4rem; font-family: 'Sansation'; font-weight: 600; }

.message-center { max-width: 420px; margin: 0 auto 12px; text-align: center; color: #ff5050; font-family: 'Sansation'; font-weight: 600; }
.message-center p { margin: 0; }

.social-button { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px auto; padding: 16px 24px; font-size: 1rem; font-weight: 500; font-family: 'Sansation'; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border: none; transition: all .3s cubic-bezier(.4,0,.2,1); cursor: pointer; position: relative; text-decoration: none !important; overflow: hidden; }

#facebook-connect { background: #fff url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook.svg?sanitize=true') no-repeat 18px center / 32px 32px; color: #3b5998; border: 2px solid #3b5998; }
#facebook-connect:hover { background: #3b5998 url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook-white.svg?sanitize=true') no-repeat 18px center / 32px 32px; color: #fff; box-shadow: 0 4px 16px rgba(59,89,152,0.15); }
#facebook-connect span { margin-left: 1.5rem; font-size: 1.1rem; font-weight: 600; transition: color .2s; }
#facebook-connect:hover span { color: #fff; }

#google-connect { background: linear-gradient(135deg, #4285f4 0%, #ea4335 50%, #fbbc05 75%, #34a853 100%); color: #fff; border: none; position: relative; overflow: hidden; }
#google-connect::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #4285f4 0%, #ea4335 100%); opacity: 0; transition: opacity .3s ease; }
#google-connect:hover::before { opacity: 1; }
#google-connect:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 32px rgba(66,133,244,.3); }
#google-connect span { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
#google-connect span::before { content: "G"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #fff; color: #4285f4; border-radius: 50%; font-weight: 700; font-size: 14px; font-family: 'Sansation'; }

#twitter-connect { background: #fff url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/twitter.png') no-repeat 5px 1px / 45px 45px; border: 1px solid #55ACEF; }
#twitter-connect:hover { border-color: #55ACEF; background: #55ACEF url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/twitter-white.png') no-repeat 5px 1px / 45px 45px; transition: all .3s ease-out; }
#twitter-connect span { box-sizing: border-box; color: #55ACEF; cursor: pointer; text-align: center; text-transform: uppercase; border: 0; outline: none; transition: all .3s ease; }
#twitter-connect:hover span { color: #FFF; transition: all .3s ease; }

#linkedin-connect { background: #fff url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/linkedin.svg?sanitize=true') no-repeat 13px 0px / 28px 45px; border: 1px solid #0077B5; }
#linkedin-connect:hover { border-color: #0077B5; background: #0077B5 url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/linkedin-white.svg?sanitize=true') no-repeat 13px 0px / 28px 45px; transition: all .3s ease-out; }
#linkedin-connect span { box-sizing: border-box; color: #0077B5; cursor: pointer; text-align: center; text-transform: uppercase; border: 0; outline: none; transition: all .3s ease; }
#linkedin-connect:hover span { color: #FFF; transition: all .3s ease; }

@media (max-width: 700px) { .login-card { padding: 1rem .5rem; } .social-button { width: 100%; padding: .75rem 1rem .75rem 2.5rem; font-size: 1rem; } }