/**
 * MindSpark Social Authentication Styles
 */

#mindspark-social-login {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border: 1px solid #ddd !important;
}

.social-login-btn {
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.social-login-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.social-login-btn:active {
    transform: translateY(0) !important;
}

/* Facebook Button */
.facebook-btn {
    background: linear-gradient(135deg, #1877f2 0%, #0a66c2 100%) !important;
}

.facebook-btn:hover {
    background: linear-gradient(135deg, #0a66c2 0%, #054399 100%) !important;
}

/* Google Button */
.google-btn {
    background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%) !important;
}

.google-btn:hover {
    background: linear-gradient(135deg, #c5221f 0%, #a3201a 100%) !important;
}

/* Instagram Button */
.instagram-btn {
    background: linear-gradient(135deg, #E4405F 0%, #B81D13 100%) !important;
}

.instagram-btn:hover {
    background: linear-gradient(135deg, #B81D13 0%, #960c0c 100%) !important;
}

/* Apple Button */
.apple-btn {
    background: linear-gradient(135deg, #000000 0%, #333333 100%) !important;
}

.apple-btn:hover {
    background: linear-gradient(135deg, #333333 0%, #555555 100%) !important;
}

/* Loading state */
.social-login-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Notification styles */
#social-auth-notification {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .social-login-btn {
        font-size: 13px !important;
        padding: 10px !important;
    }

    #mindspark-social-login {
        padding: 15px !important;
    }
}